brainzlab 0.1.11 → 0.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -27,6 +27,117 @@
27
27
  --brainz-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Code", "Droid Sans Mono", monospace;
28
28
  --brainz-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
29
29
  --brainz-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
30
+
31
+ /* Panel-specific variables (light mode) */
32
+ --brainz-panel-bg: white;
33
+ --brainz-panel-surface: #FAFAFA;
34
+ --brainz-panel-surface-alt: #F5F5F5;
35
+ --brainz-panel-surface-hover: #EEEEEE;
36
+ --brainz-panel-text: #1A1A1A;
37
+ --brainz-panel-text-secondary: #374151;
38
+ --brainz-panel-text-muted: #6B7280;
39
+ --brainz-panel-text-placeholder: #9CA3AF;
40
+ --brainz-panel-border: #E5E5E5;
41
+ --brainz-panel-border-light: #F3F4F6;
42
+
43
+ /* Issue colors (light mode) */
44
+ --brainz-issue-error-bg: #FEF2F2;
45
+ --brainz-issue-error-text: #B91C1C;
46
+ --brainz-issue-warning-bg: #FFFBEB;
47
+ --brainz-issue-warning-text: #B45309;
48
+ --brainz-issue-metric-critical-bg: #FEE2E2;
49
+ --brainz-issue-metric-critical-text: #B91C1C;
50
+ --brainz-issue-metric-slow-bg: #FEF3C7;
51
+ --brainz-issue-metric-slow-text: #B45309;
52
+
53
+ /* Timeline colors (light mode) */
54
+ --brainz-timeline-db: #3B82F6;
55
+ --brainz-timeline-db-bg: #EFF6FF;
56
+ --brainz-timeline-views: #10B981;
57
+ --brainz-timeline-views-bg: #ECFDF5;
58
+ --brainz-timeline-other: #6B7280;
59
+ --brainz-timeline-other-bg: #F3F4F6;
60
+ --brainz-timeline-bar-bg: #F3F4F6;
61
+
62
+ /* Score colors (light mode) */
63
+ --brainz-score-bg: #E5E5E5;
64
+ --brainz-score-excellent: #22C55E;
65
+ --brainz-score-excellent-text: #16A34A;
66
+ --brainz-score-good: #3B82F6;
67
+ --brainz-score-good-text: #2563EB;
68
+ --brainz-score-warning: #F59E0B;
69
+ --brainz-score-warning-text: #D97706;
70
+ --brainz-score-poor: #EF4444;
71
+ --brainz-score-poor-text: #DC2626;
72
+ }
73
+
74
+ /* ============================================
75
+ DARK MODE SUPPORT - Terminal Inspired
76
+ ============================================ */
77
+ html.dark {
78
+ --brainz-cream-50: #111111;
79
+ --brainz-cream-100: #161616;
80
+ --brainz-cream-200: #1c1c1c;
81
+ --brainz-cream-300: #262626;
82
+ --brainz-text: #e4e4e4;
83
+ --brainz-text-muted: #a3a3a3;
84
+ --brainz-text-light: #737373;
85
+ --brainz-border: #262626;
86
+ --brainz-border-dark: #333333;
87
+ --brainz-error: #f87171;
88
+ --brainz-error-light: rgba(248, 113, 113, 0.15);
89
+ --brainz-success: #4ade80;
90
+ --brainz-success-light: rgba(74, 222, 128, 0.15);
91
+ --brainz-warning: #fbbf24;
92
+ --brainz-warning-light: rgba(251, 191, 36, 0.15);
93
+ --brainz-info: #60a5fa;
94
+ --brainz-info-light: rgba(96, 165, 250, 0.15);
95
+ --brainz-code-bg: #000000;
96
+ --brainz-code-text: #e4e4e4;
97
+ --brainz-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
98
+ --brainz-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
99
+
100
+ /* Panel-specific variables (dark mode - terminal inspired) */
101
+ --brainz-panel-bg: #0a0a0a;
102
+ --brainz-panel-surface: #111111;
103
+ --brainz-panel-surface-alt: #161616;
104
+ --brainz-panel-surface-hover: #1c1c1c;
105
+ --brainz-panel-text: #e4e4e4;
106
+ --brainz-panel-text-secondary: #a3a3a3;
107
+ --brainz-panel-text-muted: #737373;
108
+ --brainz-panel-text-placeholder: #525252;
109
+ --brainz-panel-border: #262626;
110
+ --brainz-panel-border-light: #1f1f1f;
111
+
112
+ /* Issue colors (dark mode) */
113
+ --brainz-issue-error-bg: rgba(248, 113, 113, 0.1);
114
+ --brainz-issue-error-text: #f87171;
115
+ --brainz-issue-warning-bg: rgba(251, 191, 36, 0.1);
116
+ --brainz-issue-warning-text: #fbbf24;
117
+ --brainz-issue-metric-critical-bg: rgba(248, 113, 113, 0.15);
118
+ --brainz-issue-metric-critical-text: #f87171;
119
+ --brainz-issue-metric-slow-bg: rgba(251, 191, 36, 0.15);
120
+ --brainz-issue-metric-slow-text: #fbbf24;
121
+
122
+ /* Timeline colors (dark mode) */
123
+ --brainz-timeline-db: #60a5fa;
124
+ --brainz-timeline-db-bg: rgba(96, 165, 250, 0.15);
125
+ --brainz-timeline-views: #4ade80;
126
+ --brainz-timeline-views-bg: rgba(74, 222, 128, 0.15);
127
+ --brainz-timeline-other: #737373;
128
+ --brainz-timeline-other-bg: rgba(115, 115, 115, 0.15);
129
+ --brainz-timeline-bar-bg: #1c1c1c;
130
+
131
+ /* Score colors (dark mode) */
132
+ --brainz-score-bg: #262626;
133
+ --brainz-score-excellent: #4ade80;
134
+ --brainz-score-excellent-text: #4ade80;
135
+ --brainz-score-good: #60a5fa;
136
+ --brainz-score-good-text: #60a5fa;
137
+ --brainz-score-warning: #fbbf24;
138
+ --brainz-score-warning-text: #fbbf24;
139
+ --brainz-score-poor: #f87171;
140
+ --brainz-score-poor-text: #f87171;
30
141
  }
31
142
 
32
143
  /* ============================================
@@ -93,7 +204,7 @@
93
204
 
94
205
  /* Sections */
95
206
  .brainz-section {
96
- background: white;
207
+ background: var(--brainz-panel-bg);
97
208
  border-radius: 12px;
98
209
  padding: 1.5rem;
99
210
  margin-bottom: 1rem;
@@ -105,16 +216,16 @@
105
216
  font-weight: 600;
106
217
  text-transform: uppercase;
107
218
  letter-spacing: 0.05em;
108
- color: var(--brainz-text-muted);
219
+ color: var(--brainz-panel-text-muted);
109
220
  margin: 0 0 1rem 0;
110
221
  padding-bottom: 0.5rem;
111
- border-bottom: 1px solid var(--brainz-border);
222
+ border-bottom: 1px solid var(--brainz-panel-border);
112
223
  }
113
224
 
114
225
  .brainz-section h3 {
115
226
  font-size: 0.8125rem;
116
227
  font-weight: 600;
117
- color: var(--brainz-text);
228
+ color: var(--brainz-panel-text);
118
229
  margin: 1rem 0 0.5rem 0;
119
230
  }
120
231
 
@@ -227,25 +338,25 @@
227
338
  .brainz-info-table td {
228
339
  padding: 0.5rem 0.75rem;
229
340
  text-align: left;
230
- border-bottom: 1px solid var(--brainz-border);
341
+ border-bottom: 1px solid var(--brainz-panel-border);
231
342
  }
232
343
 
233
344
  .brainz-info-table th {
234
345
  width: 140px;
235
- color: var(--brainz-text-muted);
346
+ color: var(--brainz-panel-text-muted);
236
347
  font-weight: 500;
237
348
  }
238
349
 
239
350
  .brainz-info-table td {
240
351
  font-family: var(--brainz-mono);
241
352
  font-size: 0.8125rem;
242
- color: var(--brainz-text);
353
+ color: var(--brainz-panel-text);
243
354
  word-break: break-all;
244
355
  }
245
356
 
246
357
  /* Parameters */
247
358
  .brainz-params {
248
- background: var(--brainz-cream-200);
359
+ background: var(--brainz-panel-surface-alt);
249
360
  border-radius: 8px;
250
361
  padding: 1rem;
251
362
  font-family: var(--brainz-mono);
@@ -253,6 +364,7 @@
253
364
  overflow-x: auto;
254
365
  white-space: pre-wrap;
255
366
  margin: 0;
367
+ color: var(--brainz-panel-text);
256
368
  }
257
369
 
258
370
  /* Query Table */
@@ -266,19 +378,24 @@
266
378
  .brainz-query-table td {
267
379
  padding: 0.5rem;
268
380
  text-align: left;
269
- border-bottom: 1px solid var(--brainz-border);
381
+ border-bottom: 1px solid var(--brainz-panel-border);
270
382
  }
271
383
 
272
384
  .brainz-query-table th {
273
- color: var(--brainz-text-muted);
385
+ color: var(--brainz-panel-text-muted);
274
386
  font-weight: 500;
275
- background: var(--brainz-cream-100);
387
+ background: var(--brainz-panel-surface);
388
+ }
389
+
390
+ .brainz-query-table td {
391
+ color: var(--brainz-panel-text);
276
392
  }
277
393
 
278
394
  .brainz-query-duration {
279
395
  font-family: var(--brainz-mono);
280
396
  font-size: 0.75rem;
281
397
  white-space: nowrap;
398
+ color: var(--brainz-panel-text);
282
399
  }
283
400
 
284
401
  .brainz-query-duration.slow {
@@ -294,7 +411,7 @@
294
411
  .brainz-query-sql {
295
412
  font-family: var(--brainz-mono);
296
413
  font-size: 0.75rem;
297
- color: var(--brainz-text-muted);
414
+ color: var(--brainz-panel-text-muted);
298
415
  max-width: 500px;
299
416
  overflow: hidden;
300
417
  text-overflow: ellipsis;
@@ -311,7 +428,7 @@
311
428
  left: 0;
312
429
  right: 0;
313
430
  max-height: 50vh;
314
- background: white;
431
+ background: var(--brainz-panel-bg);
315
432
  border-top: 3px solid var(--brainz-orange);
316
433
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
317
434
  font-family: var(--brainz-font);
@@ -321,6 +438,10 @@
321
438
  transition: max-height 0.2s ease;
322
439
  }
323
440
 
441
+ html.dark .brainz-debug-panel {
442
+ box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
443
+ }
444
+
324
445
  .brainz-debug-panel * {
325
446
  box-sizing: border-box;
326
447
  }
@@ -360,8 +481,8 @@
360
481
  display: flex;
361
482
  align-items: center;
362
483
  padding: 0.5rem 1rem;
363
- background: var(--brainz-cream-100);
364
- border-bottom: 1px solid var(--brainz-border);
484
+ background: var(--brainz-panel-surface);
485
+ border-bottom: 1px solid var(--brainz-panel-border);
365
486
  gap: 0.75rem;
366
487
  cursor: pointer;
367
488
  min-height: 44px;
@@ -369,7 +490,7 @@
369
490
  }
370
491
 
371
492
  .brainz-debug-toolbar:hover {
372
- background: var(--brainz-cream-200);
493
+ background: var(--brainz-panel-surface-alt);
373
494
  }
374
495
 
375
496
  .brainz-debug-logo {
@@ -382,16 +503,17 @@
382
503
  font-size: 0.75rem;
383
504
  padding: 0.25rem 0.5rem;
384
505
  border-radius: 4px;
385
- background: white;
386
- border: 1px solid var(--brainz-border);
506
+ background: var(--brainz-panel-bg);
507
+ border: 1px solid var(--brainz-panel-border);
387
508
  display: flex;
388
509
  align-items: center;
389
510
  gap: 0.25rem;
511
+ color: var(--brainz-panel-text-muted);
390
512
  }
391
513
 
392
514
  .brainz-debug-stat strong {
393
515
  font-weight: 600;
394
- color: var(--brainz-text);
516
+ color: var(--brainz-panel-text);
395
517
  }
396
518
 
397
519
  .brainz-debug-stat.error {
@@ -414,7 +536,7 @@
414
536
 
415
537
  .brainz-debug-expand {
416
538
  margin-left: auto;
417
- color: var(--brainz-text-muted);
539
+ color: var(--brainz-panel-text-muted);
418
540
  transition: transform 0.2s ease;
419
541
  }
420
542
 
@@ -432,18 +554,18 @@
432
554
  padding: 0;
433
555
  margin-left: 0.5rem;
434
556
  background: transparent;
435
- border: 1px solid var(--brainz-border);
557
+ border: 1px solid var(--brainz-panel-border);
436
558
  border-radius: 4px;
437
- color: var(--brainz-text-muted);
559
+ color: var(--brainz-panel-text-muted);
438
560
  cursor: pointer;
439
561
  transition: all 0.15s ease;
440
562
  flex-shrink: 0;
441
563
  }
442
564
 
443
565
  .brainz-debug-minimize:hover {
444
- background: var(--brainz-cream-200);
445
- border-color: var(--brainz-border-dark);
446
- color: var(--brainz-text);
566
+ background: var(--brainz-panel-surface-alt);
567
+ border-color: var(--brainz-panel-border);
568
+ color: var(--brainz-panel-text);
447
569
  }
448
570
 
449
571
  .brainz-debug-minimize:active {
@@ -461,7 +583,7 @@
461
583
  width: 40px;
462
584
  height: 40px;
463
585
  padding: 0;
464
- background: white;
586
+ background: var(--brainz-panel-bg);
465
587
  border: 2px solid var(--brainz-orange);
466
588
  border-radius: 50%;
467
589
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(255, 107, 53, 0.2);
@@ -470,11 +592,19 @@
470
592
  z-index: 999999;
471
593
  }
472
594
 
595
+ html.dark .brainz-debug-restore {
596
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(255, 107, 53, 0.25);
597
+ }
598
+
473
599
  .brainz-debug-restore:hover {
474
600
  transform: scale(1.1);
475
601
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(255, 107, 53, 0.3);
476
602
  }
477
603
 
604
+ html.dark .brainz-debug-restore:hover {
605
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(255, 107, 53, 0.35);
606
+ }
607
+
478
608
  .brainz-debug-restore:active {
479
609
  transform: scale(1.05);
480
610
  }
@@ -503,7 +633,7 @@
503
633
  }
504
634
 
505
635
  .brainz-score-bg {
506
- stroke: #E5E5E5;
636
+ stroke: var(--brainz-score-bg);
507
637
  }
508
638
 
509
639
  .brainz-score-progress {
@@ -519,27 +649,27 @@
519
649
  justify-content: center;
520
650
  font-size: 0.6875rem;
521
651
  font-weight: 600;
522
- color: #1A1A1A;
652
+ color: var(--brainz-panel-text);
523
653
  }
524
654
 
525
655
  /* Score grades */
526
- .brainz-score.excellent .brainz-score-progress { stroke: #22C55E; }
527
- .brainz-score.excellent .brainz-score-value { color: #16A34A; }
656
+ .brainz-score.excellent .brainz-score-progress { stroke: var(--brainz-score-excellent); }
657
+ .brainz-score.excellent .brainz-score-value { color: var(--brainz-score-excellent-text); }
528
658
 
529
- .brainz-score.good .brainz-score-progress { stroke: #3B82F6; }
530
- .brainz-score.good .brainz-score-value { color: #2563EB; }
659
+ .brainz-score.good .brainz-score-progress { stroke: var(--brainz-score-good); }
660
+ .brainz-score.good .brainz-score-value { color: var(--brainz-score-good-text); }
531
661
 
532
- .brainz-score.warning .brainz-score-progress { stroke: #F59E0B; }
533
- .brainz-score.warning .brainz-score-value { color: #D97706; }
662
+ .brainz-score.warning .brainz-score-progress { stroke: var(--brainz-score-warning); }
663
+ .brainz-score.warning .brainz-score-value { color: var(--brainz-score-warning-text); }
534
664
 
535
- .brainz-score.poor .brainz-score-progress { stroke: #EF4444; }
536
- .brainz-score.poor .brainz-score-value { color: #DC2626; }
665
+ .brainz-score.poor .brainz-score-progress { stroke: var(--brainz-score-poor); }
666
+ .brainz-score.poor .brainz-score-value { color: var(--brainz-score-poor-text); }
537
667
 
538
668
  /* Tabs */
539
669
  .brainz-debug-tabs {
540
670
  display: flex;
541
- background: var(--brainz-cream-200);
542
- border-bottom: 1px solid var(--brainz-border);
671
+ background: var(--brainz-panel-surface-alt);
672
+ border-bottom: 1px solid var(--brainz-panel-border);
543
673
  flex-shrink: 0;
544
674
  overflow-x: auto;
545
675
  }
@@ -551,19 +681,19 @@
551
681
  border: none;
552
682
  background: none;
553
683
  cursor: pointer;
554
- color: var(--brainz-text-muted);
684
+ color: var(--brainz-panel-text-muted);
555
685
  white-space: nowrap;
556
686
  transition: all 0.15s ease;
557
687
  }
558
688
 
559
689
  .brainz-debug-tab:hover {
560
- color: var(--brainz-text);
561
- background: var(--brainz-cream-100);
690
+ color: var(--brainz-panel-text);
691
+ background: var(--brainz-panel-surface);
562
692
  }
563
693
 
564
694
  .brainz-debug-tab.active {
565
695
  color: var(--brainz-orange);
566
- background: white;
696
+ background: var(--brainz-panel-bg);
567
697
  box-shadow: inset 0 -2px 0 var(--brainz-orange);
568
698
  }
569
699
 
@@ -577,9 +707,9 @@
577
707
  margin-left: 0.375rem;
578
708
  font-size: 0.6875rem;
579
709
  font-weight: 600;
580
- background: var(--brainz-border);
710
+ background: var(--brainz-panel-border);
581
711
  border-radius: 9px;
582
- color: var(--brainz-text-muted);
712
+ color: var(--brainz-panel-text-muted);
583
713
  }
584
714
 
585
715
  .brainz-debug-tab.active .badge {
@@ -592,7 +722,7 @@
592
722
  flex: 1;
593
723
  overflow: auto;
594
724
  padding: 1rem;
595
- background: white;
725
+ background: var(--brainz-panel-bg);
596
726
  }
597
727
 
598
728
  /* Panes */
@@ -701,11 +831,11 @@
701
831
 
702
832
  /* Issues Tab styling */
703
833
  .brainz-debug-tab.has-issues {
704
- color: #C35A3C;
834
+ color: var(--brainz-error);
705
835
  }
706
836
 
707
837
  .brainz-debug-tab .badge.error {
708
- background: #C35A3C;
838
+ background: var(--brainz-error);
709
839
  color: white;
710
840
  }
711
841
 
@@ -723,19 +853,19 @@
723
853
  width: 48px;
724
854
  height: 48px;
725
855
  margin-bottom: 1rem;
726
- color: #16A34A;
856
+ color: var(--brainz-success);
727
857
  }
728
858
 
729
859
  .brainz-no-issues p {
730
860
  font-size: 0.9375rem;
731
861
  font-weight: 500;
732
- color: #1A1A1A;
862
+ color: var(--brainz-panel-text);
733
863
  margin: 0 0 0.25rem 0;
734
864
  }
735
865
 
736
866
  .brainz-no-issues span {
737
867
  font-size: 0.8125rem;
738
- color: #6B6B6B;
868
+ color: var(--brainz-panel-text-muted);
739
869
  }
740
870
 
741
871
  /* Issues Container */
@@ -747,7 +877,7 @@
747
877
 
748
878
  /* Issue Section */
749
879
  .brainz-issue-section {
750
- border: 1px solid #E5E5E5;
880
+ border: 1px solid var(--brainz-panel-border);
751
881
  border-radius: 8px;
752
882
  overflow: hidden;
753
883
  }
@@ -760,19 +890,19 @@
760
890
  padding: 0.625rem 0.875rem;
761
891
  font-size: 0.8125rem;
762
892
  font-weight: 500;
763
- color: #1A1A1A;
764
- background: #FAFAFA;
765
- border-bottom: 1px solid #E5E5E5;
893
+ color: var(--brainz-panel-text);
894
+ background: var(--brainz-panel-surface);
895
+ border-bottom: 1px solid var(--brainz-panel-border);
766
896
  }
767
897
 
768
898
  .brainz-issue-header.error {
769
- background: #FEF2F2;
770
- color: #B91C1C;
899
+ background: var(--brainz-issue-error-bg);
900
+ color: var(--brainz-issue-error-text);
771
901
  }
772
902
 
773
903
  .brainz-issue-header.warning {
774
- background: #FFFBEB;
775
- color: #B45309;
904
+ background: var(--brainz-issue-warning-bg);
905
+ color: var(--brainz-issue-warning-text);
776
906
  }
777
907
 
778
908
  .brainz-issue-header svg {
@@ -796,8 +926,8 @@
796
926
  justify-content: space-between;
797
927
  gap: 1rem;
798
928
  padding: 0.75rem 0.875rem;
799
- background: white;
800
- border-bottom: 1px solid #F3F3F3;
929
+ background: var(--brainz-panel-bg);
930
+ border-bottom: 1px solid var(--brainz-panel-border-light);
801
931
  }
802
932
 
803
933
  .brainz-issue-item:last-child {
@@ -810,11 +940,11 @@
810
940
  min-width: 0;
811
941
  font-size: 0.8125rem;
812
942
  line-height: 1.5;
813
- color: #374151;
943
+ color: var(--brainz-panel-text-secondary);
814
944
  }
815
945
 
816
946
  .brainz-issue-content strong {
817
- color: #1A1A1A;
947
+ color: var(--brainz-panel-text);
818
948
  font-weight: 600;
819
949
  }
820
950
 
@@ -824,8 +954,8 @@
824
954
  padding: 0.5rem;
825
955
  font-family: var(--brainz-mono);
826
956
  font-size: 0.6875rem;
827
- color: #6B7280;
828
- background: #F9FAFB;
957
+ color: var(--brainz-panel-text-muted);
958
+ background: var(--brainz-panel-surface);
829
959
  border-radius: 4px;
830
960
  overflow: hidden;
831
961
  text-overflow: ellipsis;
@@ -834,7 +964,7 @@
834
964
 
835
965
  .brainz-issue-source {
836
966
  font-size: 0.6875rem;
837
- color: #9CA3AF;
967
+ color: var(--brainz-panel-text-placeholder);
838
968
  margin-left: 0.25rem;
839
969
  }
840
970
 
@@ -844,7 +974,7 @@
844
974
  }
845
975
 
846
976
  .brainz-issue-name {
847
- color: #6B7280;
977
+ color: var(--brainz-panel-text-muted);
848
978
  font-weight: 400;
849
979
  }
850
980
 
@@ -852,7 +982,7 @@
852
982
  display: block;
853
983
  margin-top: 0.375rem;
854
984
  font-size: 0.75rem;
855
- color: #9CA3AF;
985
+ color: var(--brainz-panel-text-placeholder);
856
986
  }
857
987
 
858
988
  /* Issue Metric Badge */
@@ -867,13 +997,13 @@
867
997
  }
868
998
 
869
999
  .brainz-issue-metric.critical {
870
- background: #FEE2E2;
871
- color: #B91C1C;
1000
+ background: var(--brainz-issue-metric-critical-bg);
1001
+ color: var(--brainz-issue-metric-critical-text);
872
1002
  }
873
1003
 
874
1004
  .brainz-issue-metric.slow {
875
- background: #FEF3C7;
876
- color: #B45309;
1005
+ background: var(--brainz-issue-metric-slow-bg);
1006
+ color: var(--brainz-issue-metric-slow-text);
877
1007
  }
878
1008
 
879
1009
  /* Copy to AI Button - Clean minimal style */
@@ -885,9 +1015,9 @@
885
1015
  font-size: 0.6875rem;
886
1016
  font-weight: 500;
887
1017
  font-family: var(--brainz-font);
888
- color: var(--brainz-text-muted);
889
- background: white;
890
- border: 1px solid var(--brainz-border);
1018
+ color: var(--brainz-panel-text-muted);
1019
+ background: var(--brainz-panel-bg);
1020
+ border: 1px solid var(--brainz-panel-border);
891
1021
  border-radius: 6px;
892
1022
  cursor: pointer;
893
1023
  transition: all 0.15s ease;
@@ -895,9 +1025,9 @@
895
1025
  }
896
1026
 
897
1027
  .brainz-copy-to-ai-btn:hover {
898
- color: var(--brainz-text);
899
- border-color: var(--brainz-text-muted);
900
- background: var(--brainz-cream-100);
1028
+ color: var(--brainz-panel-text);
1029
+ border-color: var(--brainz-panel-text-muted);
1030
+ background: var(--brainz-panel-surface);
901
1031
  }
902
1032
 
903
1033
  .brainz-copy-to-ai-btn:active {
@@ -921,7 +1051,7 @@
921
1051
  right: 20px;
922
1052
  padding: 0.5rem 1rem;
923
1053
  background: var(--brainz-code-bg);
924
- color: white;
1054
+ color: var(--brainz-code-text);
925
1055
  border-radius: 6px;
926
1056
  font-size: 0.8125rem;
927
1057
  font-family: var(--brainz-font);
@@ -938,7 +1068,7 @@
938
1068
 
939
1069
  /* Slow indicators */
940
1070
  .brainz-query-row.slow {
941
- background: rgba(214, 158, 46, 0.08);
1071
+ background: var(--brainz-warning-light);
942
1072
  }
943
1073
 
944
1074
  .brainz-slow {
@@ -957,13 +1087,17 @@
957
1087
  .brainz-view-table td {
958
1088
  padding: 0.5rem;
959
1089
  text-align: left;
960
- border-bottom: 1px solid var(--brainz-border);
1090
+ border-bottom: 1px solid var(--brainz-panel-border);
961
1091
  }
962
1092
 
963
1093
  .brainz-view-table th {
964
- color: var(--brainz-text-muted);
1094
+ color: var(--brainz-panel-text-muted);
965
1095
  font-weight: 500;
966
- background: var(--brainz-cream-100);
1096
+ background: var(--brainz-panel-surface);
1097
+ }
1098
+
1099
+ .brainz-view-table td {
1100
+ color: var(--brainz-panel-text);
967
1101
  }
968
1102
 
969
1103
  /* Log Entry */
@@ -973,7 +1107,8 @@
973
1107
  gap: 0.75rem;
974
1108
  padding: 0.375rem 0;
975
1109
  font-size: 0.8125rem;
976
- border-bottom: 1px solid var(--brainz-border);
1110
+ border-bottom: 1px solid var(--brainz-panel-border);
1111
+ color: var(--brainz-panel-text);
977
1112
  }
978
1113
 
979
1114
  .brainz-log-entry:last-child {
@@ -1007,14 +1142,14 @@
1007
1142
  }
1008
1143
 
1009
1144
  .brainz-log-entry.debug .log-level {
1010
- background: var(--brainz-cream-200);
1011
- color: var(--brainz-text-muted);
1145
+ background: var(--brainz-panel-surface-alt);
1146
+ color: var(--brainz-panel-text-muted);
1012
1147
  }
1013
1148
 
1014
1149
  .brainz-log-entry .log-time {
1015
1150
  font-family: var(--brainz-mono);
1016
1151
  font-size: 0.75rem;
1017
- color: var(--brainz-text-light);
1152
+ color: var(--brainz-panel-text-muted);
1018
1153
  flex-shrink: 0;
1019
1154
  }
1020
1155
 
@@ -1025,7 +1160,7 @@
1025
1160
 
1026
1161
  /* Code Block */
1027
1162
  .brainz-code-block {
1028
- background: var(--brainz-cream-200);
1163
+ background: var(--brainz-panel-surface-alt);
1029
1164
  border-radius: 8px;
1030
1165
  padding: 0.75rem 1rem;
1031
1166
  font-family: var(--brainz-mono);
@@ -1034,6 +1169,7 @@
1034
1169
  white-space: pre-wrap;
1035
1170
  word-break: break-all;
1036
1171
  margin: 0.5rem 0 0 0;
1172
+ color: var(--brainz-panel-text);
1037
1173
  }
1038
1174
 
1039
1175
  /* Timeline */
@@ -1052,20 +1188,20 @@
1052
1188
  .timeline-total {
1053
1189
  font-size: 1.75rem;
1054
1190
  font-weight: 600;
1055
- color: #1A1A1A;
1191
+ color: var(--brainz-panel-text);
1056
1192
  letter-spacing: -0.02em;
1057
1193
  }
1058
1194
 
1059
1195
  .timeline-label {
1060
1196
  font-size: 0.8125rem;
1061
- color: #9CA3AF;
1197
+ color: var(--brainz-panel-text-placeholder);
1062
1198
  }
1063
1199
 
1064
1200
  /* Timeline Bar */
1065
1201
  .timeline-bar {
1066
1202
  display: flex;
1067
1203
  height: 8px;
1068
- background: #F3F4F6;
1204
+ background: var(--brainz-timeline-bar-bg);
1069
1205
  border-radius: 4px;
1070
1206
  overflow: hidden;
1071
1207
  margin-bottom: 1.25rem;
@@ -1087,15 +1223,15 @@
1087
1223
  }
1088
1224
 
1089
1225
  .timeline-segment.db {
1090
- background: #3B82F6;
1226
+ background: var(--brainz-timeline-db);
1091
1227
  }
1092
1228
 
1093
1229
  .timeline-segment.views {
1094
- background: #10B981;
1230
+ background: var(--brainz-timeline-views);
1095
1231
  }
1096
1232
 
1097
1233
  .timeline-segment.other {
1098
- background: #9CA3AF;
1234
+ background: var(--brainz-timeline-other);
1099
1235
  }
1100
1236
 
1101
1237
  /* Stats Grid */
@@ -1110,13 +1246,13 @@
1110
1246
  align-items: center;
1111
1247
  gap: 0.75rem;
1112
1248
  padding: 0.625rem 0.75rem;
1113
- background: #FAFAFA;
1114
- border: 1px solid #F3F4F6;
1249
+ background: var(--brainz-panel-surface);
1250
+ border: 1px solid var(--brainz-panel-border-light);
1115
1251
  border-radius: 8px;
1116
1252
  }
1117
1253
 
1118
1254
  .timeline-stat:hover {
1119
- background: #F5F5F5;
1255
+ background: var(--brainz-panel-surface-alt);
1120
1256
  }
1121
1257
 
1122
1258
  .timeline-stat-icon {
@@ -1130,18 +1266,18 @@
1130
1266
  }
1131
1267
 
1132
1268
  .timeline-stat-icon.db {
1133
- background: #EFF6FF;
1134
- color: #3B82F6;
1269
+ background: var(--brainz-timeline-db-bg);
1270
+ color: var(--brainz-timeline-db);
1135
1271
  }
1136
1272
 
1137
1273
  .timeline-stat-icon.views {
1138
- background: #ECFDF5;
1139
- color: #10B981;
1274
+ background: var(--brainz-timeline-views-bg);
1275
+ color: var(--brainz-timeline-views);
1140
1276
  }
1141
1277
 
1142
1278
  .timeline-stat-icon.other {
1143
- background: #F3F4F6;
1144
- color: #6B7280;
1279
+ background: var(--brainz-timeline-other-bg);
1280
+ color: var(--brainz-timeline-other);
1145
1281
  }
1146
1282
 
1147
1283
  .timeline-stat-content {
@@ -1152,21 +1288,21 @@
1152
1288
  .timeline-stat-value {
1153
1289
  font-size: 0.9375rem;
1154
1290
  font-weight: 600;
1155
- color: #1A1A1A;
1291
+ color: var(--brainz-panel-text);
1156
1292
  }
1157
1293
 
1158
1294
  .timeline-stat-label {
1159
1295
  font-size: 0.75rem;
1160
- color: #6B7280;
1296
+ color: var(--brainz-panel-text-muted);
1161
1297
  margin-top: 0.125rem;
1162
1298
  }
1163
1299
 
1164
1300
  .timeline-stat-pct {
1165
1301
  font-size: 0.8125rem;
1166
1302
  font-weight: 500;
1167
- color: #9CA3AF;
1303
+ color: var(--brainz-panel-text-placeholder);
1168
1304
  padding: 0.25rem 0.5rem;
1169
- background: white;
1305
+ background: var(--brainz-panel-bg);
1170
1306
  border-radius: 4px;
1171
1307
  }
1172
1308
 
@@ -1178,16 +1314,16 @@
1178
1314
  .brainz-query-row.cached td:first-child::after {
1179
1315
  content: " (cached)";
1180
1316
  font-size: 0.6875rem;
1181
- color: var(--brainz-text-light);
1317
+ color: var(--brainz-panel-text-muted);
1182
1318
  }
1183
1319
 
1184
1320
  /* Keyboard Hint */
1185
1321
  .brainz-keyboard-hint {
1186
1322
  font-size: 0.6875rem;
1187
- color: var(--brainz-text-light);
1323
+ color: var(--brainz-panel-text-muted);
1188
1324
  margin-left: auto;
1189
1325
  padding: 0.125rem 0.375rem;
1190
- background: var(--brainz-cream-200);
1326
+ background: var(--brainz-panel-surface-alt);
1191
1327
  border-radius: 3px;
1192
1328
  font-family: var(--brainz-mono);
1193
1329
  }