brainzlab 0.1.10 → 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
  }
@@ -335,13 +456,33 @@
335
456
  display: none;
336
457
  }
337
458
 
459
+ /* Minimized State - Panel completely hidden */
460
+ .brainz-debug-panel.minimized {
461
+ max-height: 0;
462
+ border-top-width: 0;
463
+ box-shadow: none;
464
+ overflow: hidden;
465
+ pointer-events: none;
466
+ }
467
+
468
+ .brainz-debug-panel.minimized .brainz-debug-toolbar,
469
+ .brainz-debug-panel.minimized .brainz-debug-tabs,
470
+ .brainz-debug-panel.minimized .brainz-debug-content {
471
+ display: none;
472
+ }
473
+
474
+ /* Restore button is visible when minimized */
475
+ .brainz-debug-panel.minimized .brainz-debug-restore {
476
+ pointer-events: auto;
477
+ }
478
+
338
479
  /* Toolbar */
339
480
  .brainz-debug-toolbar {
340
481
  display: flex;
341
482
  align-items: center;
342
483
  padding: 0.5rem 1rem;
343
- background: var(--brainz-cream-100);
344
- border-bottom: 1px solid var(--brainz-border);
484
+ background: var(--brainz-panel-surface);
485
+ border-bottom: 1px solid var(--brainz-panel-border);
345
486
  gap: 0.75rem;
346
487
  cursor: pointer;
347
488
  min-height: 44px;
@@ -349,7 +490,7 @@
349
490
  }
350
491
 
351
492
  .brainz-debug-toolbar:hover {
352
- background: var(--brainz-cream-200);
493
+ background: var(--brainz-panel-surface-alt);
353
494
  }
354
495
 
355
496
  .brainz-debug-logo {
@@ -362,16 +503,17 @@
362
503
  font-size: 0.75rem;
363
504
  padding: 0.25rem 0.5rem;
364
505
  border-radius: 4px;
365
- background: white;
366
- border: 1px solid var(--brainz-border);
506
+ background: var(--brainz-panel-bg);
507
+ border: 1px solid var(--brainz-panel-border);
367
508
  display: flex;
368
509
  align-items: center;
369
510
  gap: 0.25rem;
511
+ color: var(--brainz-panel-text-muted);
370
512
  }
371
513
 
372
514
  .brainz-debug-stat strong {
373
515
  font-weight: 600;
374
- color: var(--brainz-text);
516
+ color: var(--brainz-panel-text);
375
517
  }
376
518
 
377
519
  .brainz-debug-stat.error {
@@ -394,7 +536,7 @@
394
536
 
395
537
  .brainz-debug-expand {
396
538
  margin-left: auto;
397
- color: var(--brainz-text-muted);
539
+ color: var(--brainz-panel-text-muted);
398
540
  transition: transform 0.2s ease;
399
541
  }
400
542
 
@@ -402,6 +544,81 @@
402
544
  transform: rotate(180deg);
403
545
  }
404
546
 
547
+ /* Minimize Button (on toolbar) */
548
+ .brainz-debug-minimize {
549
+ display: flex;
550
+ align-items: center;
551
+ justify-content: center;
552
+ width: 24px;
553
+ height: 24px;
554
+ padding: 0;
555
+ margin-left: 0.5rem;
556
+ background: transparent;
557
+ border: 1px solid var(--brainz-panel-border);
558
+ border-radius: 4px;
559
+ color: var(--brainz-panel-text-muted);
560
+ cursor: pointer;
561
+ transition: all 0.15s ease;
562
+ flex-shrink: 0;
563
+ }
564
+
565
+ .brainz-debug-minimize:hover {
566
+ background: var(--brainz-panel-surface-alt);
567
+ border-color: var(--brainz-panel-border);
568
+ color: var(--brainz-panel-text);
569
+ }
570
+
571
+ .brainz-debug-minimize:active {
572
+ transform: scale(0.95);
573
+ }
574
+
575
+ /* Restore Button (floating, visible when minimized) */
576
+ .brainz-debug-restore {
577
+ position: fixed;
578
+ bottom: 16px;
579
+ left: 16px;
580
+ display: none;
581
+ align-items: center;
582
+ justify-content: center;
583
+ width: 40px;
584
+ height: 40px;
585
+ padding: 0;
586
+ background: var(--brainz-panel-bg);
587
+ border: 2px solid var(--brainz-orange);
588
+ border-radius: 50%;
589
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(255, 107, 53, 0.2);
590
+ cursor: pointer;
591
+ transition: all 0.2s ease;
592
+ z-index: 999999;
593
+ }
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
+
599
+ .brainz-debug-restore:hover {
600
+ transform: scale(1.1);
601
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(255, 107, 53, 0.3);
602
+ }
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
+
608
+ .brainz-debug-restore:active {
609
+ transform: scale(1.05);
610
+ }
611
+
612
+ .brainz-debug-restore img {
613
+ width: 20px;
614
+ height: 20px;
615
+ }
616
+
617
+ /* Show restore button when panel is minimized */
618
+ .brainz-debug-panel.minimized .brainz-debug-restore {
619
+ display: flex;
620
+ }
621
+
405
622
  /* Performance Score */
406
623
  .brainz-score {
407
624
  position: relative;
@@ -416,7 +633,7 @@
416
633
  }
417
634
 
418
635
  .brainz-score-bg {
419
- stroke: #E5E5E5;
636
+ stroke: var(--brainz-score-bg);
420
637
  }
421
638
 
422
639
  .brainz-score-progress {
@@ -432,27 +649,27 @@
432
649
  justify-content: center;
433
650
  font-size: 0.6875rem;
434
651
  font-weight: 600;
435
- color: #1A1A1A;
652
+ color: var(--brainz-panel-text);
436
653
  }
437
654
 
438
655
  /* Score grades */
439
- .brainz-score.excellent .brainz-score-progress { stroke: #22C55E; }
440
- .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); }
441
658
 
442
- .brainz-score.good .brainz-score-progress { stroke: #3B82F6; }
443
- .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); }
444
661
 
445
- .brainz-score.warning .brainz-score-progress { stroke: #F59E0B; }
446
- .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); }
447
664
 
448
- .brainz-score.poor .brainz-score-progress { stroke: #EF4444; }
449
- .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); }
450
667
 
451
668
  /* Tabs */
452
669
  .brainz-debug-tabs {
453
670
  display: flex;
454
- background: var(--brainz-cream-200);
455
- border-bottom: 1px solid var(--brainz-border);
671
+ background: var(--brainz-panel-surface-alt);
672
+ border-bottom: 1px solid var(--brainz-panel-border);
456
673
  flex-shrink: 0;
457
674
  overflow-x: auto;
458
675
  }
@@ -464,19 +681,19 @@
464
681
  border: none;
465
682
  background: none;
466
683
  cursor: pointer;
467
- color: var(--brainz-text-muted);
684
+ color: var(--brainz-panel-text-muted);
468
685
  white-space: nowrap;
469
686
  transition: all 0.15s ease;
470
687
  }
471
688
 
472
689
  .brainz-debug-tab:hover {
473
- color: var(--brainz-text);
474
- background: var(--brainz-cream-100);
690
+ color: var(--brainz-panel-text);
691
+ background: var(--brainz-panel-surface);
475
692
  }
476
693
 
477
694
  .brainz-debug-tab.active {
478
695
  color: var(--brainz-orange);
479
- background: white;
696
+ background: var(--brainz-panel-bg);
480
697
  box-shadow: inset 0 -2px 0 var(--brainz-orange);
481
698
  }
482
699
 
@@ -490,9 +707,9 @@
490
707
  margin-left: 0.375rem;
491
708
  font-size: 0.6875rem;
492
709
  font-weight: 600;
493
- background: var(--brainz-border);
710
+ background: var(--brainz-panel-border);
494
711
  border-radius: 9px;
495
- color: var(--brainz-text-muted);
712
+ color: var(--brainz-panel-text-muted);
496
713
  }
497
714
 
498
715
  .brainz-debug-tab.active .badge {
@@ -505,7 +722,7 @@
505
722
  flex: 1;
506
723
  overflow: auto;
507
724
  padding: 1rem;
508
- background: white;
725
+ background: var(--brainz-panel-bg);
509
726
  }
510
727
 
511
728
  /* Panes */
@@ -614,11 +831,11 @@
614
831
 
615
832
  /* Issues Tab styling */
616
833
  .brainz-debug-tab.has-issues {
617
- color: #C35A3C;
834
+ color: var(--brainz-error);
618
835
  }
619
836
 
620
837
  .brainz-debug-tab .badge.error {
621
- background: #C35A3C;
838
+ background: var(--brainz-error);
622
839
  color: white;
623
840
  }
624
841
 
@@ -636,19 +853,19 @@
636
853
  width: 48px;
637
854
  height: 48px;
638
855
  margin-bottom: 1rem;
639
- color: #16A34A;
856
+ color: var(--brainz-success);
640
857
  }
641
858
 
642
859
  .brainz-no-issues p {
643
860
  font-size: 0.9375rem;
644
861
  font-weight: 500;
645
- color: #1A1A1A;
862
+ color: var(--brainz-panel-text);
646
863
  margin: 0 0 0.25rem 0;
647
864
  }
648
865
 
649
866
  .brainz-no-issues span {
650
867
  font-size: 0.8125rem;
651
- color: #6B6B6B;
868
+ color: var(--brainz-panel-text-muted);
652
869
  }
653
870
 
654
871
  /* Issues Container */
@@ -660,7 +877,7 @@
660
877
 
661
878
  /* Issue Section */
662
879
  .brainz-issue-section {
663
- border: 1px solid #E5E5E5;
880
+ border: 1px solid var(--brainz-panel-border);
664
881
  border-radius: 8px;
665
882
  overflow: hidden;
666
883
  }
@@ -673,19 +890,19 @@
673
890
  padding: 0.625rem 0.875rem;
674
891
  font-size: 0.8125rem;
675
892
  font-weight: 500;
676
- color: #1A1A1A;
677
- background: #FAFAFA;
678
- 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);
679
896
  }
680
897
 
681
898
  .brainz-issue-header.error {
682
- background: #FEF2F2;
683
- color: #B91C1C;
899
+ background: var(--brainz-issue-error-bg);
900
+ color: var(--brainz-issue-error-text);
684
901
  }
685
902
 
686
903
  .brainz-issue-header.warning {
687
- background: #FFFBEB;
688
- color: #B45309;
904
+ background: var(--brainz-issue-warning-bg);
905
+ color: var(--brainz-issue-warning-text);
689
906
  }
690
907
 
691
908
  .brainz-issue-header svg {
@@ -709,8 +926,8 @@
709
926
  justify-content: space-between;
710
927
  gap: 1rem;
711
928
  padding: 0.75rem 0.875rem;
712
- background: white;
713
- border-bottom: 1px solid #F3F3F3;
929
+ background: var(--brainz-panel-bg);
930
+ border-bottom: 1px solid var(--brainz-panel-border-light);
714
931
  }
715
932
 
716
933
  .brainz-issue-item:last-child {
@@ -723,11 +940,11 @@
723
940
  min-width: 0;
724
941
  font-size: 0.8125rem;
725
942
  line-height: 1.5;
726
- color: #374151;
943
+ color: var(--brainz-panel-text-secondary);
727
944
  }
728
945
 
729
946
  .brainz-issue-content strong {
730
- color: #1A1A1A;
947
+ color: var(--brainz-panel-text);
731
948
  font-weight: 600;
732
949
  }
733
950
 
@@ -737,8 +954,8 @@
737
954
  padding: 0.5rem;
738
955
  font-family: var(--brainz-mono);
739
956
  font-size: 0.6875rem;
740
- color: #6B7280;
741
- background: #F9FAFB;
957
+ color: var(--brainz-panel-text-muted);
958
+ background: var(--brainz-panel-surface);
742
959
  border-radius: 4px;
743
960
  overflow: hidden;
744
961
  text-overflow: ellipsis;
@@ -747,7 +964,7 @@
747
964
 
748
965
  .brainz-issue-source {
749
966
  font-size: 0.6875rem;
750
- color: #9CA3AF;
967
+ color: var(--brainz-panel-text-placeholder);
751
968
  margin-left: 0.25rem;
752
969
  }
753
970
 
@@ -757,7 +974,7 @@
757
974
  }
758
975
 
759
976
  .brainz-issue-name {
760
- color: #6B7280;
977
+ color: var(--brainz-panel-text-muted);
761
978
  font-weight: 400;
762
979
  }
763
980
 
@@ -765,7 +982,7 @@
765
982
  display: block;
766
983
  margin-top: 0.375rem;
767
984
  font-size: 0.75rem;
768
- color: #9CA3AF;
985
+ color: var(--brainz-panel-text-placeholder);
769
986
  }
770
987
 
771
988
  /* Issue Metric Badge */
@@ -780,13 +997,13 @@
780
997
  }
781
998
 
782
999
  .brainz-issue-metric.critical {
783
- background: #FEE2E2;
784
- color: #B91C1C;
1000
+ background: var(--brainz-issue-metric-critical-bg);
1001
+ color: var(--brainz-issue-metric-critical-text);
785
1002
  }
786
1003
 
787
1004
  .brainz-issue-metric.slow {
788
- background: #FEF3C7;
789
- color: #B45309;
1005
+ background: var(--brainz-issue-metric-slow-bg);
1006
+ color: var(--brainz-issue-metric-slow-text);
790
1007
  }
791
1008
 
792
1009
  /* Copy to AI Button - Clean minimal style */
@@ -798,9 +1015,9 @@
798
1015
  font-size: 0.6875rem;
799
1016
  font-weight: 500;
800
1017
  font-family: var(--brainz-font);
801
- color: var(--brainz-text-muted);
802
- background: white;
803
- 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);
804
1021
  border-radius: 6px;
805
1022
  cursor: pointer;
806
1023
  transition: all 0.15s ease;
@@ -808,9 +1025,9 @@
808
1025
  }
809
1026
 
810
1027
  .brainz-copy-to-ai-btn:hover {
811
- color: var(--brainz-text);
812
- border-color: var(--brainz-text-muted);
813
- 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);
814
1031
  }
815
1032
 
816
1033
  .brainz-copy-to-ai-btn:active {
@@ -834,7 +1051,7 @@
834
1051
  right: 20px;
835
1052
  padding: 0.5rem 1rem;
836
1053
  background: var(--brainz-code-bg);
837
- color: white;
1054
+ color: var(--brainz-code-text);
838
1055
  border-radius: 6px;
839
1056
  font-size: 0.8125rem;
840
1057
  font-family: var(--brainz-font);
@@ -851,7 +1068,7 @@
851
1068
 
852
1069
  /* Slow indicators */
853
1070
  .brainz-query-row.slow {
854
- background: rgba(214, 158, 46, 0.08);
1071
+ background: var(--brainz-warning-light);
855
1072
  }
856
1073
 
857
1074
  .brainz-slow {
@@ -870,13 +1087,17 @@
870
1087
  .brainz-view-table td {
871
1088
  padding: 0.5rem;
872
1089
  text-align: left;
873
- border-bottom: 1px solid var(--brainz-border);
1090
+ border-bottom: 1px solid var(--brainz-panel-border);
874
1091
  }
875
1092
 
876
1093
  .brainz-view-table th {
877
- color: var(--brainz-text-muted);
1094
+ color: var(--brainz-panel-text-muted);
878
1095
  font-weight: 500;
879
- background: var(--brainz-cream-100);
1096
+ background: var(--brainz-panel-surface);
1097
+ }
1098
+
1099
+ .brainz-view-table td {
1100
+ color: var(--brainz-panel-text);
880
1101
  }
881
1102
 
882
1103
  /* Log Entry */
@@ -886,7 +1107,8 @@
886
1107
  gap: 0.75rem;
887
1108
  padding: 0.375rem 0;
888
1109
  font-size: 0.8125rem;
889
- border-bottom: 1px solid var(--brainz-border);
1110
+ border-bottom: 1px solid var(--brainz-panel-border);
1111
+ color: var(--brainz-panel-text);
890
1112
  }
891
1113
 
892
1114
  .brainz-log-entry:last-child {
@@ -920,14 +1142,14 @@
920
1142
  }
921
1143
 
922
1144
  .brainz-log-entry.debug .log-level {
923
- background: var(--brainz-cream-200);
924
- color: var(--brainz-text-muted);
1145
+ background: var(--brainz-panel-surface-alt);
1146
+ color: var(--brainz-panel-text-muted);
925
1147
  }
926
1148
 
927
1149
  .brainz-log-entry .log-time {
928
1150
  font-family: var(--brainz-mono);
929
1151
  font-size: 0.75rem;
930
- color: var(--brainz-text-light);
1152
+ color: var(--brainz-panel-text-muted);
931
1153
  flex-shrink: 0;
932
1154
  }
933
1155
 
@@ -938,7 +1160,7 @@
938
1160
 
939
1161
  /* Code Block */
940
1162
  .brainz-code-block {
941
- background: var(--brainz-cream-200);
1163
+ background: var(--brainz-panel-surface-alt);
942
1164
  border-radius: 8px;
943
1165
  padding: 0.75rem 1rem;
944
1166
  font-family: var(--brainz-mono);
@@ -947,6 +1169,7 @@
947
1169
  white-space: pre-wrap;
948
1170
  word-break: break-all;
949
1171
  margin: 0.5rem 0 0 0;
1172
+ color: var(--brainz-panel-text);
950
1173
  }
951
1174
 
952
1175
  /* Timeline */
@@ -965,20 +1188,20 @@
965
1188
  .timeline-total {
966
1189
  font-size: 1.75rem;
967
1190
  font-weight: 600;
968
- color: #1A1A1A;
1191
+ color: var(--brainz-panel-text);
969
1192
  letter-spacing: -0.02em;
970
1193
  }
971
1194
 
972
1195
  .timeline-label {
973
1196
  font-size: 0.8125rem;
974
- color: #9CA3AF;
1197
+ color: var(--brainz-panel-text-placeholder);
975
1198
  }
976
1199
 
977
1200
  /* Timeline Bar */
978
1201
  .timeline-bar {
979
1202
  display: flex;
980
1203
  height: 8px;
981
- background: #F3F4F6;
1204
+ background: var(--brainz-timeline-bar-bg);
982
1205
  border-radius: 4px;
983
1206
  overflow: hidden;
984
1207
  margin-bottom: 1.25rem;
@@ -1000,15 +1223,15 @@
1000
1223
  }
1001
1224
 
1002
1225
  .timeline-segment.db {
1003
- background: #3B82F6;
1226
+ background: var(--brainz-timeline-db);
1004
1227
  }
1005
1228
 
1006
1229
  .timeline-segment.views {
1007
- background: #10B981;
1230
+ background: var(--brainz-timeline-views);
1008
1231
  }
1009
1232
 
1010
1233
  .timeline-segment.other {
1011
- background: #9CA3AF;
1234
+ background: var(--brainz-timeline-other);
1012
1235
  }
1013
1236
 
1014
1237
  /* Stats Grid */
@@ -1023,13 +1246,13 @@
1023
1246
  align-items: center;
1024
1247
  gap: 0.75rem;
1025
1248
  padding: 0.625rem 0.75rem;
1026
- background: #FAFAFA;
1027
- border: 1px solid #F3F4F6;
1249
+ background: var(--brainz-panel-surface);
1250
+ border: 1px solid var(--brainz-panel-border-light);
1028
1251
  border-radius: 8px;
1029
1252
  }
1030
1253
 
1031
1254
  .timeline-stat:hover {
1032
- background: #F5F5F5;
1255
+ background: var(--brainz-panel-surface-alt);
1033
1256
  }
1034
1257
 
1035
1258
  .timeline-stat-icon {
@@ -1043,18 +1266,18 @@
1043
1266
  }
1044
1267
 
1045
1268
  .timeline-stat-icon.db {
1046
- background: #EFF6FF;
1047
- color: #3B82F6;
1269
+ background: var(--brainz-timeline-db-bg);
1270
+ color: var(--brainz-timeline-db);
1048
1271
  }
1049
1272
 
1050
1273
  .timeline-stat-icon.views {
1051
- background: #ECFDF5;
1052
- color: #10B981;
1274
+ background: var(--brainz-timeline-views-bg);
1275
+ color: var(--brainz-timeline-views);
1053
1276
  }
1054
1277
 
1055
1278
  .timeline-stat-icon.other {
1056
- background: #F3F4F6;
1057
- color: #6B7280;
1279
+ background: var(--brainz-timeline-other-bg);
1280
+ color: var(--brainz-timeline-other);
1058
1281
  }
1059
1282
 
1060
1283
  .timeline-stat-content {
@@ -1065,21 +1288,21 @@
1065
1288
  .timeline-stat-value {
1066
1289
  font-size: 0.9375rem;
1067
1290
  font-weight: 600;
1068
- color: #1A1A1A;
1291
+ color: var(--brainz-panel-text);
1069
1292
  }
1070
1293
 
1071
1294
  .timeline-stat-label {
1072
1295
  font-size: 0.75rem;
1073
- color: #6B7280;
1296
+ color: var(--brainz-panel-text-muted);
1074
1297
  margin-top: 0.125rem;
1075
1298
  }
1076
1299
 
1077
1300
  .timeline-stat-pct {
1078
1301
  font-size: 0.8125rem;
1079
1302
  font-weight: 500;
1080
- color: #9CA3AF;
1303
+ color: var(--brainz-panel-text-placeholder);
1081
1304
  padding: 0.25rem 0.5rem;
1082
- background: white;
1305
+ background: var(--brainz-panel-bg);
1083
1306
  border-radius: 4px;
1084
1307
  }
1085
1308
 
@@ -1091,16 +1314,16 @@
1091
1314
  .brainz-query-row.cached td:first-child::after {
1092
1315
  content: " (cached)";
1093
1316
  font-size: 0.6875rem;
1094
- color: var(--brainz-text-light);
1317
+ color: var(--brainz-panel-text-muted);
1095
1318
  }
1096
1319
 
1097
1320
  /* Keyboard Hint */
1098
1321
  .brainz-keyboard-hint {
1099
1322
  font-size: 0.6875rem;
1100
- color: var(--brainz-text-light);
1323
+ color: var(--brainz-panel-text-muted);
1101
1324
  margin-left: auto;
1102
1325
  padding: 0.125rem 0.375rem;
1103
- background: var(--brainz-cream-200);
1326
+ background: var(--brainz-panel-surface-alt);
1104
1327
  border-radius: 3px;
1105
1328
  font-family: var(--brainz-mono);
1106
1329
  }