1* {
  2  margin: 0;
  3  padding: 0;
  4  box-sizing: border-box;
  5}
  6
  7/* Light theme (default DevTools) */
  8:root {
  9  --bg: #fff;
 10  --bg-subtle: #f5f5f5;
 11  --bg-hover: #eee;
 12  --text: #1a1a1a;
 13  --text-dim: #666;
 14  --accent: oklch(48% 0.25 350);
 15  --accent-dim: oklch(40% 0.18 350);
 16  --border: #ddd;
 17  --radius: 6px;
 18}
 19
 20/* Dark theme (set via JS from chrome.devtools.panels.themeName) */
 21.theme-dark {
 22  --bg: #1a1a1a;
 23  --bg-subtle: #242424;
 24  --bg-hover: #2a2a2a;
 25  --text: #f5f3ef;
 26  --text-dim: #999;
 27  --accent: oklch(55% 0.25 350);
 28  --accent-dim: oklch(45% 0.18 350);
 29  --border: #333;
 30}
 31
 32body {
 33  background: var(--bg);
 34  color: var(--text);
 35  font-family: system-ui, -apple-system, sans-serif;
 36  font-size: 12px;
 37  line-height: 1.5;
 38  overflow-y: auto;
 39  height: 100vh;
 40}
 41
 42/* Toolbar */
 43.toolbar {
 44  display: flex;
 45  align-items: center;
 46  justify-content: space-between;
 47  padding: 8px 12px;
 48  border-bottom: 1px solid var(--border);
 49  background: var(--bg);
 50  position: sticky;
 51  top: 0;
 52  z-index: 10;
 53}
 54
 55.toolbar-left {
 56  display: flex;
 57  align-items: center;
 58  gap: 8px;
 59}
 60
 61.toolbar-right {
 62  display: flex;
 63  align-items: center;
 64  gap: 4px;
 65}
 66
 67.logo {
 68  font-size: 18px;
 69  font-weight: 500;
 70  color: var(--text);
 71  opacity: 0.7;
 72}
 73
 74h1 {
 75  font-size: 13px;
 76  font-weight: 600;
 77  letter-spacing: 0.01em;
 78}
 79
 80.badge {
 81  background: var(--accent);
 82  color: white;
 83  font-size: 11px;
 84  font-weight: 600;
 85  padding: 1px 6px;
 86  border-radius: 10px;
 87  min-width: 20px;
 88  text-align: center;
 89  display: none;
 90}
 91
 92.badge.visible {
 93  display: inline-block;
 94}
 95
 96/* Tool buttons */
 97.tool-btn {
 98  display: flex;
 99  align-items: center;
100  justify-content: center;
101  width: 28px;
102  height: 28px;
103  border: none;
104  border-radius: var(--radius);
105  background: transparent;
106  color: var(--text-dim);
107  cursor: pointer;
108  transition: background 0.15s, color 0.15s;
109}
110
111.tool-btn:hover {
112  background: var(--bg-hover);
113  color: var(--text);
114}
115
116.tool-btn.inactive {
117  opacity: 0.4;
118}
119
120/* Findings */
121#findings-container {
122  padding: 8px;
123}
124
125.finding-group {
126  margin-bottom: 2px;
127}
128
129.group-header {
130  display: flex;
131  align-items: center;
132  gap: 8px;
133  padding: 6px 8px;
134  border-radius: var(--radius);
135  cursor: pointer;
136  user-select: none;
137  transition: background 0.15s;
138}
139
140.group-header:hover {
141  background: var(--bg-hover);
142}
143
144.group-chevron {
145  font-size: 10px;
146  color: var(--text-dim);
147  transition: transform 0.15s;
148  width: 12px;
149  flex-shrink: 0;
150}
151
152.group-header.collapsed .group-chevron {
153  transform: rotate(-90deg);
154}
155
156.group-name {
157  font-weight: 600;
158  font-size: 12px;
159  flex: 1;
160  min-width: 0;
161}
162
163.group-count {
164  font-size: 11px;
165  color: var(--text-dim);
166  font-weight: 500;
167}
168
169.group-items {
170  overflow: hidden;
171}
172
173.group-header.collapsed + .group-items {
174  display: none;
175}
176
177.finding-item {
178  display: flex;
179  flex-direction: column;
180  gap: 2px;
181  padding: 5px 8px 5px 28px;
182  border-radius: var(--radius);
183  cursor: pointer;
184  transition: background 0.15s;
185}
186
187.finding-item:hover {
188  background: var(--bg-hover);
189}
190
191.finding-row {
192  display: flex;
193  align-items: center;
194  gap: 6px;
195  min-width: 0;
196}
197
198.finding-row .finding-selector {
199  flex: 1;
200  min-width: 0;
201}
202
203.finding-copy {
204  display: none;
205  align-items: center;
206  justify-content: center;
207  width: 18px;
208  height: 18px;
209  flex-shrink: 0;
210  border: none;
211  border-radius: 4px;
212  background: transparent;
213  color: var(--text-dim);
214  cursor: pointer;
215  transition: background 0.15s, color 0.15s;
216}
217
218.finding-item:hover .finding-copy {
219  display: flex;
220}
221
222.finding-copy:hover {
223  background: var(--bg);
224  color: var(--accent);
225}
226
227.finding-copy.copied {
228  color: var(--accent);
229}
230
231.tool-btn.copied {
232  color: var(--accent);
233}
234
235.finding-selector {
236  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
237  font-size: 11px;
238  color: var(--accent);
239  white-space: nowrap;
240  overflow: hidden;
241  text-overflow: ellipsis;
242}
243
244.finding-detail {
245  font-size: 11px;
246  color: var(--text-dim);
247  white-space: nowrap;
248  overflow: hidden;
249  text-overflow: ellipsis;
250}
251
252.finding-description {
253  font-size: 11px;
254  color: var(--text-dim);
255  opacity: 0.7;
256  line-height: 1.4;
257  padding: 2px 0 4px;
258  display: none;
259}
260
261.finding-item:hover .finding-description {
262  display: block;
263}
264
265/* Finding tags (page-level, hidden, etc.) */
266.finding-tag {
267  display: inline-block;
268  font-size: 9px;
269  font-weight: 600;
270  text-transform: uppercase;
271  letter-spacing: 0.05em;
272  padding: 1px 5px;
273  border-radius: 3px;
274  margin-bottom: 2px;
275}
276
277.tag-page {
278  color: var(--accent-dim);
279  background: transparent;
280}
281
282.tag-hidden {
283  color: var(--text-dim);
284  background: var(--bg-hover);
285}
286
287.finding-item.is-hidden {
288  opacity: 0.55;
289  cursor: default;
290}
291
292.finding-item.is-hidden:hover {
293  background: transparent;
294}
295
296/* Empty state */
297.empty-state {
298  display: flex;
299  flex-direction: column;
300  align-items: center;
301  justify-content: center;
302  padding: 48px 24px;
303  text-align: center;
304}
305
306.empty-icon {
307  font-size: 32px;
308  font-weight: 500;
309  opacity: 0.3;
310  margin-bottom: 12px;
311}
312
313.empty-title {
314  font-size: 13px;
315  font-weight: 500;
316  margin-bottom: 4px;
317}
318
319.empty-hint {
320  font-size: 12px;
321  color: var(--text-dim);
322}
323
324/* Category sections */
325.category-section {
326  margin-bottom: 4px;
327}
328
329.category-header {
330  display: flex;
331  align-items: center;
332  gap: 8px;
333  padding: 8px 8px 4px;
334}
335
336.category-dot {
337  width: 8px;
338  height: 8px;
339  border-radius: 50%;
340  flex-shrink: 0;
341}
342
343.category-dot-slop {
344  background: oklch(55% 0.25 350);
345}
346
347.category-dot-quality {
348  background: var(--text-dim);
349}
350
351.category-name {
352  font-size: 11px;
353  font-weight: 600;
354  text-transform: uppercase;
355  letter-spacing: 0.05em;
356  color: var(--text-dim);
357}
358
359.category-count {
360  font-size: 11px;
361  color: var(--text-dim);
362  font-weight: 500;
363}
364
365/* Settings */
366#settings-container {
367  border-bottom: 1px solid var(--border);
368  padding: 0 8px 8px;
369}
370
371.settings-header {
372  font-size: 11px;
373  font-weight: 600;
374  color: var(--text-dim);
375  text-transform: uppercase;
376  letter-spacing: 0.05em;
377  padding: 8px 8px 6px;
378}
379
380.settings-grid {
381  display: grid;
382  grid-template-columns: 1fr 1fr;
383  gap: 1px 12px;
384  padding-bottom: 8px;
385}
386
387#settings-list .settings-header {
388  padding: 8px 8px 4px;
389}
390
391.setting-row {
392  display: flex;
393  align-items: center;
394  justify-content: space-between;
395  padding: 4px 8px 8px;
396  gap: 12px;
397}
398
399.setting-label {
400  font-size: 11px;
401  color: var(--text);
402}
403
404.setting-segmented {
405  display: inline-flex;
406  border: 1px solid var(--border);
407  border-radius: var(--radius);
408  overflow: hidden;
409}
410
411.setting-segmented button {
412  background: transparent;
413  border: none;
414  color: var(--text-dim);
415  font-size: 11px;
416  padding: 3px 8px;
417  cursor: pointer;
418  font-family: inherit;
419  border-right: 1px solid var(--border);
420}
421
422.setting-segmented button:last-child {
423  border-right: none;
424}
425
426.setting-segmented button:hover {
427  color: var(--text);
428}
429
430.setting-segmented button.active {
431  background: var(--accent);
432  color: white;
433}
434
435.setting-switch {
436  position: relative;
437  display: inline-block;
438  width: 28px;
439  height: 16px;
440  cursor: pointer;
441  flex-shrink: 0;
442}
443
444.setting-switch input {
445  position: absolute;
446  opacity: 0;
447  width: 0;
448  height: 0;
449}
450
451.setting-switch-track {
452  position: absolute;
453  top: 0; left: 0; right: 0; bottom: 0;
454  background: var(--border);
455  border-radius: 8px;
456  transition: background 0.15s ease;
457}
458
459.setting-switch-track::before {
460  content: '';
461  position: absolute;
462  top: 2px;
463  left: 2px;
464  width: 12px;
465  height: 12px;
466  background: var(--bg);
467  border-radius: 50%;
468  transition: transform 0.15s ease;
469}
470
471.setting-switch input:checked + .setting-switch-track {
472  background: var(--accent);
473}
474
475.setting-switch input:checked + .setting-switch-track::before {
476  transform: translateX(12px);
477}
478
479.setting-rule {
480  display: flex;
481  align-items: center;
482  gap: 6px;
483  padding: 3px 8px;
484  border-radius: var(--radius);
485  font-size: 11px;
486  cursor: pointer;
487  transition: background 0.15s;
488}
489
490.setting-rule:hover {
491  background: var(--bg-hover);
492}
493
494.setting-rule input[type="checkbox"] {
495  margin: 0;
496  accent-color: var(--accent);
497}
498
499/* Scanning state */
500.scanning-indicator {
501  display: flex;
502  align-items: center;
503  gap: 8px;
504  padding: 12px;
505  color: var(--text-dim);
506  font-size: 12px;
507}
508
509.scanning-dot {
510  width: 6px;
511  height: 6px;
512  border-radius: 50%;
513  background: var(--accent);
514  animation: pulse 1s ease-in-out infinite;
515}
516
517@keyframes pulse {
518  0%, 100% { opacity: 0.3; }
519  50% { opacity: 1; }
520}