memorix 1.0.3 → 1.0.4

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.
Files changed (11) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/README.md +119 -237
  3. package/README.zh-CN.md +119 -239
  4. package/dist/cli/index.js +12546 -8801
  5. package/dist/cli/index.js.map +1 -1
  6. package/dist/dashboard/static/app.js +554 -43
  7. package/dist/dashboard/static/index.html +39 -8
  8. package/dist/dashboard/static/style.css +2403 -2064
  9. package/dist/index.js +3697 -2172
  10. package/dist/index.js.map +1 -1
  11. package/package.json +3 -1
package/dist/dashboard/static/style.css CHANGED
@@ -1,2064 +1,2403 @@
1
- /* ============================================================
2
- * Memorix Dashboard — Material Design 3 Theme
3
- * Tonal surfaces, cosmic graph, refined elevation
4
- * ============================================================ */
5
-
6
- :root {
7
- /* MD3 Tonal Surfaces */
8
- --bg-base: #0B0B14;
9
- --bg-surface: #12121E;
10
- --bg-card: #1B1B2E;
11
- --bg-card-hover: #242440;
12
- --bg-sidebar: #0E0E1A;
13
-
14
- --border-subtle: rgba(255, 255, 255, 0.04);
15
- --border-medium: rgba(255, 255, 255, 0.08);
16
-
17
- --text-primary: #E6E1E5;
18
- --text-secondary: #CAC4D0;
19
- --text-muted: #79747E;
20
-
21
- --accent-cyan: #80D8FF;
22
- --accent-purple: #D0BCFF;
23
- --accent-pink: #FFB8D1;
24
- --accent-amber: #FFD54F;
25
- --accent-green: #69F0AE;
26
- --accent-red: #FF8A80;
27
- --accent-blue: #82B1FF;
28
-
29
- /* Observation type colors */
30
- --type-session-request: #82B1FF;
31
- --type-gotcha: #FF8A80;
32
- --type-problem-solution: #FFD54F;
33
- --type-how-it-works: #82B1FF;
34
- --type-what-changed: #69F0AE;
35
- --type-discovery: #D0BCFF;
36
- --type-why-it-exists: #FFAB40;
37
- --type-decision: #B388FF;
38
- --type-trade-off: #90A4AE;
39
-
40
- /* Layout */
41
- --sidebar-width: 240px;
42
- --radius-sm: 8px;
43
- --radius-md: 12px;
44
- --radius-lg: 16px;
45
- --radius-xl: 24px;
46
- --radius-pill: 100px;
47
-
48
- /* Typography */
49
- --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
50
- --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
51
-
52
- /* MD3 Elevation */
53
- --elevation-1: 0 1px 3px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.48);
54
- --elevation-2: 0 3px 6px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.32);
55
- --elevation-3: 0 8px 24px rgba(0,0,0,0.32), 0 4px 8px rgba(0,0,0,0.24);
56
-
57
- /* Effects */
58
- --glow-cyan: 0 0 24px rgba(128, 216, 255, 0.12);
59
- --glow-purple: 0 0 24px rgba(208, 188, 255, 0.12);
60
-
61
- /* Transitions - MD3 standard easing */
62
- --transition-fast: 150ms cubic-bezier(0.2, 0, 0, 1);
63
- --transition-normal: 300ms cubic-bezier(0.2, 0, 0, 1);
64
- --transition-emphasized: 500ms cubic-bezier(0.2, 0, 0, 1);
65
- }
66
-
67
- /* Light Theme - MD3 */
68
- [data-theme="light"] {
69
- --bg-base: #FFFBFE;
70
- --bg-surface: #F7F2FA;
71
- --bg-card: #FFFFFF;
72
- --bg-card-hover: #F3EDF7;
73
- --bg-sidebar: #FFFBFE;
74
-
75
- --border-subtle: rgba(0, 0, 0, 0.05);
76
- --border-medium: rgba(0, 0, 0, 0.1);
77
-
78
- --text-primary: #1C1B1F;
79
- --text-secondary: #49454F;
80
- --text-muted: #79747E;
81
-
82
- --accent-cyan: #006A6A;
83
- --accent-purple: #6750A4;
84
- --accent-pink: #B3261E;
85
- --accent-amber: #7D5700;
86
- --accent-green: #006D40;
87
- --accent-red: #B3261E;
88
- --accent-blue: #0061A4;
89
-
90
- --type-session-request: #0061A4;
91
- --type-gotcha: #B3261E;
92
- --type-problem-solution: #7D5700;
93
- --type-how-it-works: #0061A4;
94
- --type-what-changed: #006D40;
95
- --type-discovery: #6750A4;
96
- --type-why-it-exists: #A24E00;
97
- --type-decision: #5B35A0;
98
- --type-trade-off: #605D62;
99
-
100
- --elevation-1: 0 1px 2px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.12);
101
- --elevation-2: 0 2px 4px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.12);
102
- --elevation-3: 0 4px 8px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.12);
103
-
104
- --glow-cyan: 0 0 20px rgba(0, 106, 106, 0.08);
105
- --glow-purple: 0 0 20px rgba(103, 80, 164, 0.08);
106
- }
107
-
108
- [data-theme="light"] .brand-logo {
109
- filter: drop-shadow(0 0 6px rgba(103, 80, 164, 0.2));
110
- }
111
-
112
- [data-theme="light"] .brand-logo:hover {
113
- filter: drop-shadow(0 0 10px rgba(103, 80, 164, 0.35));
114
- }
115
-
116
- [data-theme="light"] ::-webkit-scrollbar-thumb {
117
- background: rgba(0, 0, 0, 0.15);
118
- }
119
-
120
- [data-theme="light"] ::-webkit-scrollbar-thumb:hover {
121
- background: rgba(0, 0, 0, 0.25);
122
- }
123
-
124
- [data-theme="light"] .stat-value {
125
- background: linear-gradient(135deg, #1C1B1F, #49454F);
126
- -webkit-background-clip: text;
127
- -webkit-text-fill-color: transparent;
128
- background-clip: text;
129
- }
130
-
131
- [data-theme="light"] .retention-table tr:hover td {
132
- background: rgba(0, 0, 0, 0.02);
133
- }
134
-
135
- [data-theme="light"] .score-bar {
136
- background: rgba(0, 0, 0, 0.06);
137
- }
138
-
139
- [data-theme="light"] .fact-tag {
140
- background: rgba(0, 106, 106, 0.08);
141
- border-color: rgba(0, 106, 106, 0.18);
142
- }
143
-
144
- [data-theme="light"] .nav-btn.active {
145
- background: rgba(103, 80, 164, 0.1);
146
- color: var(--accent-purple);
147
- }
148
-
149
- [data-theme="light"] .filter-btn.active {
150
- background: rgba(103, 80, 164, 0.1);
151
- }
152
-
153
- /* Reset */
154
- *,
155
- *::before,
156
- *::after {
157
- box-sizing: border-box;
158
- margin: 0;
159
- padding: 0;
160
- }
161
-
162
- html,
163
- body {
164
- height: 100%;
165
- font-family: var(--font-sans);
166
- background: var(--bg-base);
167
- color: var(--text-primary);
168
- overflow: hidden;
169
- -webkit-font-smoothing: antialiased;
170
- }
171
-
172
- body {
173
- display: flex;
174
- }
175
-
176
- /* Scrollbar */
177
- ::-webkit-scrollbar {
178
- width: 6px;
179
- }
180
-
181
- ::-webkit-scrollbar-track {
182
- background: transparent;
183
- }
184
-
185
- ::-webkit-scrollbar-thumb {
186
- background: var(--border-medium);
187
- border-radius: 3px;
188
- }
189
-
190
- ::-webkit-scrollbar-thumb:hover {
191
- background: var(--text-muted);
192
- }
193
-
194
- /* ============================================================
195
- * Sidebar - MD3 NavigationRail
196
- * ============================================================ */
197
-
198
- #sidebar {
199
- width: var(--sidebar-width);
200
- height: 100vh;
201
- background: var(--bg-sidebar);
202
- border-right: 1px solid var(--border-subtle);
203
- display: flex;
204
- flex-direction: column;
205
- padding: 20px 0;
206
- flex-shrink: 0;
207
- z-index: 10;
208
- overflow: hidden;
209
- }
210
-
211
- .sidebar-brand {
212
- display: flex;
213
- align-items: center;
214
- gap: 12px;
215
- padding: 0 20px;
216
- margin-bottom: 24px;
217
- }
218
-
219
- .brand-logo {
220
- width: 32px;
221
- height: 32px;
222
- border-radius: var(--radius-md);
223
- object-fit: cover;
224
- display: block;
225
- filter: drop-shadow(0 0 8px rgba(208, 188, 255, 0.3));
226
- transition: filter var(--transition-normal);
227
- flex-shrink: 0;
228
- }
229
-
230
- .brand-logo:hover {
231
- filter: drop-shadow(0 0 14px rgba(208, 188, 255, 0.5));
232
- }
233
-
234
- .brand-text {
235
- font-size: 16px;
236
- font-weight: 700;
237
- color: var(--text-primary);
238
- letter-spacing: -0.3px;
239
- }
240
-
241
- .sidebar-nav {
242
- display: flex;
243
- flex-direction: column;
244
- gap: 4px;
245
- padding: 0 12px;
246
- }
247
-
248
- .nav-btn {
249
- width: 100%;
250
- height: 44px;
251
- border: none;
252
- background: transparent;
253
- color: var(--text-muted);
254
- cursor: pointer;
255
- border-radius: var(--radius-pill);
256
- display: flex;
257
- align-items: center;
258
- gap: 14px;
259
- padding: 0 16px;
260
- transition: all var(--transition-normal);
261
- position: relative;
262
- font-family: var(--font-sans);
263
- }
264
-
265
- .nav-btn:hover {
266
- color: var(--text-secondary);
267
- background: rgba(208, 188, 255, 0.06);
268
- }
269
-
270
- .nav-btn.active {
271
- color: var(--accent-purple);
272
- background: rgba(208, 188, 255, 0.12);
273
- }
274
-
275
- .nav-btn.active::before {
276
- display: none;
277
- }
278
-
279
- .nav-label {
280
- font-size: 14px;
281
- font-weight: 500;
282
- white-space: nowrap;
283
- }
284
-
285
- .sidebar-spacer {
286
- flex: 1;
287
- }
288
-
289
- .sidebar-footer {
290
- display: flex;
291
- flex-direction: column;
292
- gap: 2px;
293
- padding: 8px 12px;
294
- }
295
-
296
- .sidebar-action-btn {
297
- width: 100%;
298
- height: 36px;
299
- border: none;
300
- background: transparent;
301
- color: var(--text-muted);
302
- cursor: pointer;
303
- border-radius: var(--radius-pill);
304
- font-size: 12px;
305
- font-weight: 500;
306
- font-family: var(--font-sans);
307
- transition: all var(--transition-fast);
308
- display: flex;
309
- align-items: center;
310
- gap: 10px;
311
- padding: 0 14px;
312
- }
313
-
314
- .sidebar-action-btn:hover {
315
- color: var(--text-secondary);
316
- background: rgba(208, 188, 255, 0.06);
317
- }
318
-
319
- .action-label {
320
- font-size: 12px;
321
- font-weight: 500;
322
- }
323
-
324
- [data-theme="light"] .sidebar-action-btn:hover {
325
- background: rgba(103, 80, 164, 0.06);
326
- }
327
-
328
- /* ============================================================
329
- * Main Content
330
- * ============================================================ */
331
-
332
- #app {
333
- flex: 1;
334
- height: 100vh;
335
- overflow-y: auto;
336
- overflow-x: hidden;
337
- background: var(--bg-base);
338
- }
339
-
340
- .page {
341
- display: none;
342
- padding: 32px;
343
- min-height: 100vh;
344
- animation: fadeIn 0.4s cubic-bezier(0.2, 0, 0, 1);
345
- }
346
-
347
- .page.active {
348
- display: block;
349
- }
350
-
351
- @keyframes fadeIn {
352
- from {
353
- opacity: 0;
354
- transform: translateY(12px);
355
- }
356
-
357
- to {
358
- opacity: 1;
359
- transform: translateY(0);
360
- }
361
- }
362
-
363
- /* ============================================================
364
- * Page Header
365
- * ============================================================ */
366
-
367
- .page-header {
368
- margin-bottom: 32px;
369
- }
370
-
371
- .page-title {
372
- font-size: 28px;
373
- font-weight: 600;
374
- color: var(--text-primary);
375
- margin-bottom: 6px;
376
- letter-spacing: -0.5px;
377
- }
378
-
379
- .page-subtitle {
380
- font-size: 14px;
381
- color: var(--text-secondary);
382
- }
383
-
384
- /* ============================================================
385
- * Stat Cards - MD3 Tonal Elevation
386
- * ============================================================ */
387
-
388
- .stats-grid {
389
- display: grid;
390
- grid-template-columns: repeat(4, 1fr);
391
- gap: 16px;
392
- margin-bottom: 32px;
393
- }
394
-
395
- .stat-card {
396
- background: var(--bg-card);
397
- border: 1px solid var(--border-subtle);
398
- border-radius: var(--radius-lg);
399
- padding: 24px;
400
- transition: all var(--transition-normal);
401
- position: relative;
402
- overflow: hidden;
403
- box-shadow: var(--elevation-1);
404
- }
405
-
406
- .stat-card::before {
407
- content: '';
408
- position: absolute;
409
- top: 0;
410
- left: 0;
411
- right: 0;
412
- height: 3px;
413
- border-radius: var(--radius-lg) var(--radius-lg) 0 0;
414
- }
415
-
416
- .stat-card:hover {
417
- background: var(--bg-card-hover);
418
- border-color: var(--border-medium);
419
- transform: translateY(-3px);
420
- box-shadow: var(--elevation-3);
421
- }
422
-
423
- .stat-card[data-accent="cyan"]::before {
424
- background: var(--accent-cyan);
425
- }
426
-
427
- .stat-card[data-accent="purple"]::before {
428
- background: var(--accent-purple);
429
- }
430
-
431
- .stat-card[data-accent="amber"]::before {
432
- background: var(--accent-amber);
433
- }
434
-
435
- .stat-card[data-accent="green"]::before {
436
- background: var(--accent-green);
437
- }
438
-
439
- .stat-card[data-accent="blue"]::before {
440
- background: var(--accent-blue);
441
- }
442
-
443
- .stat-label {
444
- font-size: 11px;
445
- font-weight: 600;
446
- color: var(--text-secondary);
447
- text-transform: uppercase;
448
- letter-spacing: 0.8px;
449
- margin-bottom: 10px;
450
- }
451
-
452
- .stat-value {
453
- font-size: 32px;
454
- font-weight: 700;
455
- font-family: var(--font-mono);
456
- background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
457
- -webkit-background-clip: text;
458
- -webkit-text-fill-color: transparent;
459
- background-clip: text;
460
- }
461
-
462
- /* ============================================================
463
- * Cards & Panels - MD3 Surface Tint
464
- * ============================================================ */
465
-
466
- .panel {
467
- background: var(--bg-card);
468
- border: 1px solid var(--border-subtle);
469
- border-radius: var(--radius-lg);
470
- overflow: hidden;
471
- box-shadow: var(--elevation-1);
472
- }
473
-
474
- .panel-header {
475
- padding: 18px 24px;
476
- border-bottom: 1px solid var(--border-subtle);
477
- display: flex;
478
- align-items: center;
479
- justify-content: space-between;
480
- }
481
-
482
- .panel-title {
483
- font-size: 14px;
484
- font-weight: 600;
485
- color: var(--text-primary);
486
- }
487
-
488
- .panel-body {
489
- padding: 18px 24px;
490
- }
491
-
492
- /* ============================================================
493
- * Observation Type Badges - MD3 Tonal Chips
494
- * ============================================================ */
495
-
496
- .type-badge {
497
- display: inline-flex;
498
- align-items: center;
499
- gap: 4px;
500
- padding: 3px 10px;
501
- border-radius: var(--radius-sm);
502
- font-size: 11px;
503
- font-weight: 500;
504
- white-space: nowrap;
505
- }
506
-
507
- .type-badge[data-type="session-request"] {
508
- background: rgba(130, 177, 255, 0.12);
509
- color: var(--type-session-request);
510
- }
511
-
512
- .type-badge[data-type="gotcha"] {
513
- background: rgba(255, 138, 128, 0.12);
514
- color: var(--type-gotcha);
515
- }
516
-
517
- .type-badge[data-type="problem-solution"] {
518
- background: rgba(255, 213, 79, 0.12);
519
- color: var(--type-problem-solution);
520
- }
521
-
522
- .type-badge[data-type="how-it-works"] {
523
- background: rgba(130, 177, 255, 0.12);
524
- color: var(--type-how-it-works);
525
- }
526
-
527
- .type-badge[data-type="what-changed"] {
528
- background: rgba(105, 240, 174, 0.12);
529
- color: var(--type-what-changed);
530
- }
531
-
532
- .type-badge[data-type="discovery"] {
533
- background: rgba(208, 188, 255, 0.12);
534
- color: var(--type-discovery);
535
- }
536
-
537
- .type-badge[data-type="why-it-exists"] {
538
- background: rgba(255, 171, 64, 0.12);
539
- color: var(--type-why-it-exists);
540
- }
541
-
542
- .type-badge[data-type="decision"] {
543
- background: rgba(179, 136, 255, 0.12);
544
- color: var(--type-decision);
545
- }
546
-
547
- .type-badge[data-type="trade-off"] {
548
- background: rgba(144, 164, 174, 0.12);
549
- color: var(--type-trade-off);
550
- }
551
-
552
- /* Type icons */
553
- .type-icon::before {
554
- font-size: 10px;
555
- }
556
-
557
- .type-icon[data-type="session-request"]::before { content: '\1F3AF'; }
558
- .type-icon[data-type="gotcha"]::before { content: '\1F534'; }
559
- .type-icon[data-type="problem-solution"]::before { content: '\1F7E1'; }
560
- .type-icon[data-type="how-it-works"]::before { content: '\1F535'; }
561
- .type-icon[data-type="what-changed"]::before { content: '\1F7E2'; }
562
- .type-icon[data-type="discovery"]::before { content: '\1F7E3'; }
563
- .type-icon[data-type="why-it-exists"]::before { content: '\1F7E0'; }
564
- .type-icon[data-type="decision"]::before { content: '\1F7E4'; }
565
- .type-icon[data-type="trade-off"]::before { content: '\2696\FE0F'; }
566
-
567
- /* ============================================================
568
- * Recent Activity List
569
- * ============================================================ */
570
-
571
- .activity-list {
572
- list-style: none;
573
- }
574
-
575
- .activity-item {
576
- display: flex;
577
- align-items: center;
578
- gap: 12px;
579
- padding: 14px 0;
580
- border-bottom: 1px solid var(--border-subtle);
581
- transition: background var(--transition-fast);
582
- }
583
-
584
- .activity-item:last-child {
585
- border-bottom: none;
586
- }
587
-
588
- .activity-id {
589
- font-family: var(--font-mono);
590
- font-size: 12px;
591
- color: var(--text-muted);
592
- min-width: 32px;
593
- }
594
-
595
- .activity-title {
596
- flex: 1;
597
- font-size: 13px;
598
- color: var(--text-primary);
599
- white-space: nowrap;
600
- overflow: hidden;
601
- text-overflow: ellipsis;
602
- }
603
-
604
- .activity-entity {
605
- font-size: 11px;
606
- color: var(--text-muted);
607
- font-family: var(--font-mono);
608
- }
609
-
610
- /* ============================================================
611
- * Knowledge Graph - Cosmic Theme (zditor-inspired)
612
- * ============================================================ */
613
-
614
- .graph-layout {
615
- display: flex;
616
- gap: 0;
617
- height: calc(100vh - 140px);
618
- }
619
-
620
- #graph-container {
621
- flex: 1;
622
- min-width: 0;
623
- background: radial-gradient(ellipse at 50% 120%, #1a1040 0%, #0B0B14 60%, #06060C 100%);
624
- border: 1px solid var(--border-subtle);
625
- border-radius: var(--radius-lg);
626
- overflow: hidden;
627
- position: relative;
628
- }
629
-
630
- #graph-canvas {
631
- width: 100%;
632
- height: 100%;
633
- }
634
-
635
- /* Floating graph control panel (zditor-style) */
636
- .graph-panel {
637
- position: absolute;
638
- top: 16px;
639
- right: 16px;
640
- width: 260px;
641
- background: rgba(14, 14, 26, 0.85);
642
- backdrop-filter: blur(20px);
643
- -webkit-backdrop-filter: blur(20px);
644
- border: 1px solid rgba(255, 255, 255, 0.08);
645
- border-radius: var(--radius-lg);
646
- z-index: 20;
647
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
648
- overflow: hidden;
649
- transition: opacity var(--transition-normal);
650
- }
651
-
652
- .graph-panel-tabs {
653
- display: flex;
654
- border-bottom: 1px solid rgba(255, 255, 255, 0.06);
655
- }
656
-
657
- .gp-tab {
658
- flex: 1;
659
- padding: 10px 0;
660
- border: none;
661
- background: transparent;
662
- color: var(--text-muted);
663
- font-family: var(--font-sans);
664
- font-size: 10px;
665
- font-weight: 600;
666
- letter-spacing: 0.8px;
667
- text-transform: uppercase;
668
- cursor: pointer;
669
- transition: all var(--transition-fast);
670
- position: relative;
671
- }
672
-
673
- .gp-tab:hover {
674
- color: var(--text-secondary);
675
- }
676
-
677
- .gp-tab.active {
678
- color: var(--accent-purple);
679
- }
680
-
681
- .gp-tab.active::after {
682
- content: '';
683
- position: absolute;
684
- bottom: 0;
685
- left: 20%;
686
- right: 20%;
687
- height: 2px;
688
- background: var(--accent-purple);
689
- border-radius: 2px 2px 0 0;
690
- }
691
-
692
- .gp-content {
693
- padding: 14px;
694
- max-height: 400px;
695
- overflow-y: auto;
696
- }
697
-
698
- .gp-content::-webkit-scrollbar {
699
- width: 4px;
700
- }
701
-
702
- .gp-content::-webkit-scrollbar-thumb {
703
- background: rgba(255,255,255,0.1);
704
- border-radius: 2px;
705
- }
706
-
707
- /* Graph panel search */
708
- .gp-search {
709
- width: 100%;
710
- padding: 8px 12px;
711
- background: rgba(255, 255, 255, 0.04);
712
- border: 1px solid rgba(255, 255, 255, 0.06);
713
- border-radius: var(--radius-sm);
714
- color: var(--text-primary);
715
- font-family: var(--font-sans);
716
- font-size: 12px;
717
- outline: none;
718
- transition: border-color var(--transition-fast);
719
- }
720
-
721
- .gp-search:focus {
722
- border-color: var(--accent-purple);
723
- }
724
-
725
- .gp-search::placeholder {
726
- color: var(--text-muted);
727
- }
728
-
729
- /* Graph panel stats */
730
- .gp-stat-row {
731
- display: flex;
732
- justify-content: space-between;
733
- align-items: center;
734
- padding: 6px 0;
735
- }
736
-
737
- .gp-stat-label {
738
- font-size: 12px;
739
- color: var(--text-secondary);
740
- }
741
-
742
- .gp-stat-value {
743
- font-size: 13px;
744
- font-weight: 600;
745
- font-family: var(--font-mono);
746
- color: var(--text-primary);
747
- }
748
-
749
- /* Graph panel legend items */
750
- .gp-legend-item {
751
- display: flex;
752
- align-items: center;
753
- gap: 10px;
754
- padding: 6px 8px;
755
- border-radius: var(--radius-sm);
756
- cursor: pointer;
757
- transition: background var(--transition-fast);
758
- }
759
-
760
- .gp-legend-item:hover {
761
- background: rgba(255, 255, 255, 0.04);
762
- }
763
-
764
- .gp-legend-dot {
765
- width: 10px;
766
- height: 10px;
767
- border-radius: 50%;
768
- flex-shrink: 0;
769
- }
770
-
771
- .gp-legend-name {
772
- flex: 1;
773
- font-size: 12px;
774
- color: var(--text-secondary);
775
- white-space: nowrap;
776
- overflow: hidden;
777
- text-overflow: ellipsis;
778
- }
779
-
780
- .gp-legend-count {
781
- font-size: 10px;
782
- font-family: var(--font-mono);
783
- color: var(--text-muted);
784
- }
785
-
786
- /* Graph panel zoom controls */
787
- .gp-zoom-controls {
788
- display: flex;
789
- gap: 4px;
790
- margin-top: 10px;
791
- padding-top: 10px;
792
- border-top: 1px solid rgba(255, 255, 255, 0.04);
793
- }
794
-
795
- .gp-zoom-btn {
796
- flex: 1;
797
- padding: 6px;
798
- border: 1px solid rgba(255, 255, 255, 0.06);
799
- background: rgba(255, 255, 255, 0.03);
800
- color: var(--text-secondary);
801
- border-radius: var(--radius-sm);
802
- cursor: pointer;
803
- font-size: 14px;
804
- font-weight: 600;
805
- transition: all var(--transition-fast);
806
- }
807
-
808
- .gp-zoom-btn:hover {
809
- background: rgba(208, 188, 255, 0.1);
810
- border-color: rgba(208, 188, 255, 0.2);
811
- color: var(--accent-purple);
812
- }
813
-
814
- /* Node detail drawer (bottom overlay) */
815
- .graph-detail-drawer {
816
- position: absolute;
817
- bottom: 0;
818
- left: 0;
819
- right: 0;
820
- max-height: 45%;
821
- background: rgba(14, 14, 26, 0.9);
822
- backdrop-filter: blur(20px);
823
- -webkit-backdrop-filter: blur(20px);
824
- border-top: 1px solid rgba(255, 255, 255, 0.08);
825
- border-radius: var(--radius-lg) var(--radius-lg) 0 0;
826
- padding: 0;
827
- overflow-y: auto;
828
- z-index: 15;
829
- transform: translateY(100%);
830
- transition: transform var(--transition-emphasized);
831
- }
832
-
833
- .graph-detail-drawer.open {
834
- transform: translateY(0);
835
- }
836
-
837
- .graph-detail-drawer .graph-detail-header {
838
- position: sticky;
839
- top: 0;
840
- background: rgba(14, 14, 26, 0.95);
841
- z-index: 1;
842
- }
843
-
844
- .graph-detail {
845
- width: 0;
846
- display: none;
847
- }
848
-
849
- .graph-detail-header {
850
- display: flex;
851
- align-items: center;
852
- gap: 14px;
853
- padding: 20px 24px;
854
- border-bottom: 1px solid rgba(255, 255, 255, 0.06);
855
- }
856
-
857
- .graph-detail-dot {
858
- width: 16px;
859
- height: 16px;
860
- border-radius: 50%;
861
- flex-shrink: 0;
862
- }
863
-
864
- .graph-detail-name {
865
- font-size: 16px;
866
- font-weight: 600;
867
- color: #FFFFFF;
868
- }
869
-
870
- .graph-detail-type {
871
- font-size: 12px;
872
- color: #CAC4D0;
873
- font-family: var(--font-mono);
874
- }
875
-
876
- .graph-detail-section {
877
- padding: 16px 24px;
878
- border-bottom: 1px solid rgba(255, 255, 255, 0.04);
879
- }
880
-
881
- .graph-detail-section:last-child {
882
- border-bottom: none;
883
- }
884
-
885
- .graph-detail-section h3 {
886
- font-size: 11px;
887
- font-weight: 600;
888
- color: #CAC4D0;
889
- text-transform: uppercase;
890
- letter-spacing: 0.8px;
891
- margin-bottom: 10px;
892
- display: flex;
893
- align-items: center;
894
- gap: 6px;
895
- }
896
-
897
- .graph-detail-count {
898
- font-size: 10px;
899
- font-weight: 500;
900
- padding: 2px 8px;
901
- border-radius: var(--radius-sm);
902
- background: rgba(208, 188, 255, 0.1);
903
- color: var(--accent-purple);
904
- }
905
-
906
- .graph-obs-item {
907
- font-size: 12px;
908
- color: #E6E1E5;
909
- line-height: 1.6;
910
- padding: 8px 12px;
911
- margin-bottom: 6px;
912
- border-radius: var(--radius-sm);
913
- background: rgba(255, 255, 255, 0.06);
914
- border-left: 2px solid var(--accent-purple);
915
- }
916
-
917
- .graph-rel-item {
918
- font-size: 12px;
919
- color: #E6E1E5;
920
- padding: 6px 0;
921
- display: flex;
922
- align-items: center;
923
- gap: 8px;
924
- }
925
-
926
- .graph-rel-arrow {
927
- color: var(--accent-purple);
928
- font-weight: 600;
929
- }
930
-
931
- .graph-rel-type {
932
- font-family: var(--font-mono);
933
- font-size: 11px;
934
- color: #D0BCFF;
935
- padding: 2px 8px;
936
- background: rgba(255, 255, 255, 0.04);
937
- border-radius: var(--radius-sm);
938
- }
939
-
940
- .graph-detail-muted {
941
- font-size: 12px;
942
- color: var(--text-muted);
943
- font-style: italic;
944
- }
945
-
946
- .graph-tooltip {
947
- position: absolute;
948
- background: rgba(14, 14, 26, 0.92);
949
- backdrop-filter: blur(12px);
950
- border: 1px solid rgba(208, 188, 255, 0.15);
951
- border-radius: var(--radius-md);
952
- padding: 12px 16px;
953
- font-size: 13px;
954
- pointer-events: none;
955
- opacity: 0;
956
- transition: opacity var(--transition-fast);
957
- z-index: 100;
958
- max-width: 300px;
959
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
960
- }
961
-
962
- .graph-tooltip.visible {
963
- opacity: 1;
964
- }
965
-
966
- .graph-tooltip-name {
967
- font-weight: 600;
968
- color: var(--accent-purple);
969
- margin-bottom: 4px;
970
- }
971
-
972
- .graph-tooltip-type {
973
- font-size: 11px;
974
- color: var(--text-muted);
975
- }
976
-
977
- /* Hide text for graph-detail-empty since we use drawer now */
978
- .graph-detail-empty {
979
- display: none;
980
- }
981
-
982
- /* ============================================================
983
- * Observations Page
984
- * ============================================================ */
985
-
986
- .search-bar {
987
- display: flex;
988
- gap: 12px;
989
- margin-bottom: 24px;
990
- }
991
-
992
- .search-input {
993
- flex: 1;
994
- background: var(--bg-card);
995
- border: 1px solid var(--border-subtle);
996
- border-radius: var(--radius-md);
997
- padding: 12px 18px;
998
- color: var(--text-primary);
999
- font-family: var(--font-sans);
1000
- font-size: 14px;
1001
- outline: none;
1002
- transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
1003
- }
1004
-
1005
- .search-input:focus {
1006
- border-color: var(--accent-purple);
1007
- box-shadow: var(--glow-purple);
1008
- }
1009
-
1010
- .search-input::placeholder {
1011
- color: var(--text-muted);
1012
- }
1013
-
1014
- .filter-btn {
1015
- background: var(--bg-card);
1016
- border: 1px solid var(--border-subtle);
1017
- border-radius: var(--radius-pill);
1018
- padding: 10px 18px;
1019
- color: var(--text-secondary);
1020
- cursor: pointer;
1021
- font-size: 13px;
1022
- transition: all var(--transition-fast);
1023
- white-space: nowrap;
1024
- }
1025
-
1026
- .filter-btn:hover {
1027
- background: var(--bg-card-hover);
1028
- border-color: var(--border-medium);
1029
- }
1030
-
1031
- .filter-btn.active {
1032
- background: rgba(208, 188, 255, 0.1);
1033
- border-color: var(--accent-purple);
1034
- color: var(--accent-purple);
1035
- }
1036
-
1037
- .obs-grid {
1038
- display: grid;
1039
- gap: 12px;
1040
- }
1041
-
1042
- .obs-card {
1043
- background: var(--bg-card);
1044
- border: 1px solid var(--border-subtle);
1045
- border-left: 3px solid transparent;
1046
- border-radius: var(--radius-md);
1047
- padding: 16px 20px;
1048
- cursor: pointer;
1049
- transition: all var(--transition-normal);
1050
- box-shadow: var(--elevation-1);
1051
- }
1052
-
1053
- .obs-card:hover {
1054
- background: var(--bg-card-hover);
1055
- border-color: var(--border-medium);
1056
- border-left-color: var(--accent-purple);
1057
- box-shadow: var(--elevation-2);
1058
- }
1059
-
1060
- .obs-card.expanded {
1061
- border-left-color: var(--accent-purple);
1062
- box-shadow: var(--elevation-2);
1063
- }
1064
-
1065
- .obs-card-header {
1066
- display: flex;
1067
- align-items: center;
1068
- gap: 8px;
1069
- margin-bottom: 8px;
1070
- }
1071
-
1072
- .obs-card-id {
1073
- font-family: var(--font-mono);
1074
- font-size: 12px;
1075
- color: var(--text-muted);
1076
- }
1077
-
1078
- .obs-card-title {
1079
- font-size: 14px;
1080
- font-weight: 500;
1081
- color: var(--text-primary);
1082
- flex: 1;
1083
- }
1084
-
1085
- .obs-card-meta {
1086
- display: flex;
1087
- gap: 12px;
1088
- font-size: 12px;
1089
- color: var(--text-muted);
1090
- }
1091
-
1092
- .obs-card-narrative {
1093
- font-size: 13px;
1094
- color: var(--text-secondary);
1095
- line-height: 1.6;
1096
- margin-top: 8px;
1097
- white-space: pre-wrap;
1098
- word-break: break-word;
1099
- }
1100
-
1101
- .obs-card-facts {
1102
- display: flex;
1103
- flex-wrap: wrap;
1104
- gap: 6px;
1105
- margin-top: 8px;
1106
- }
1107
-
1108
- .fact-tag {
1109
- background: rgba(208, 188, 255, 0.06);
1110
- border: 1px solid rgba(208, 188, 255, 0.12);
1111
- border-radius: var(--radius-sm);
1112
- padding: 3px 10px;
1113
- font-size: 11px;
1114
- font-family: var(--font-mono);
1115
- color: var(--accent-purple);
1116
- }
1117
-
1118
- /* ============================================================
1119
- * Retention Page
1120
- * ============================================================ */
1121
-
1122
- .retention-summary {
1123
- display: grid;
1124
- grid-template-columns: repeat(4, 1fr);
1125
- gap: 16px;
1126
- margin-bottom: 32px;
1127
- }
1128
-
1129
- .retention-table {
1130
- width: 100%;
1131
- border-collapse: collapse;
1132
- }
1133
-
1134
- .retention-table th {
1135
- text-align: left;
1136
- font-size: 11px;
1137
- font-weight: 600;
1138
- color: var(--text-muted);
1139
- text-transform: uppercase;
1140
- letter-spacing: 0.5px;
1141
- padding: 14px 18px;
1142
- border-bottom: 1px solid var(--border-subtle);
1143
- }
1144
-
1145
- .retention-table td {
1146
- padding: 14px 18px;
1147
- font-size: 13px;
1148
- border-bottom: 1px solid var(--border-subtle);
1149
- }
1150
-
1151
- .retention-table tr:hover td {
1152
- background: rgba(208, 188, 255, 0.02);
1153
- }
1154
-
1155
- .score-bar {
1156
- width: 80px;
1157
- height: 6px;
1158
- background: rgba(255, 255, 255, 0.04);
1159
- border-radius: 3px;
1160
- overflow: hidden;
1161
- display: inline-block;
1162
- vertical-align: middle;
1163
- margin-right: 8px;
1164
- }
1165
-
1166
- .score-bar-fill {
1167
- height: 100%;
1168
- border-radius: 3px;
1169
- transition: width var(--transition-normal);
1170
- }
1171
-
1172
- .immune-badge {
1173
- display: inline-flex;
1174
- align-items: center;
1175
- gap: 4px;
1176
- padding: 3px 8px;
1177
- border-radius: var(--radius-sm);
1178
- font-size: 10px;
1179
- font-weight: 600;
1180
- background: rgba(105, 240, 174, 0.1);
1181
- color: var(--accent-green);
1182
- }
1183
-
1184
- /* ============================================================
1185
- * Empty State
1186
- * ============================================================ */
1187
-
1188
- .empty-state {
1189
- display: flex;
1190
- flex-direction: column;
1191
- align-items: center;
1192
- justify-content: center;
1193
- padding: 80px 20px;
1194
- text-align: center;
1195
- }
1196
-
1197
- .empty-state-icon {
1198
- font-size: 48px;
1199
- margin-bottom: 16px;
1200
- opacity: 0.4;
1201
- }
1202
-
1203
- .empty-state-title {
1204
- font-size: 18px;
1205
- font-weight: 600;
1206
- color: var(--text-secondary);
1207
- margin-bottom: 8px;
1208
- }
1209
-
1210
- .empty-state-desc {
1211
- font-size: 14px;
1212
- color: var(--text-muted);
1213
- max-width: 400px;
1214
- }
1215
-
1216
- /* ============================================================
1217
- * Loading
1218
- * ============================================================ */
1219
-
1220
- .loading {
1221
- display: flex;
1222
- align-items: center;
1223
- justify-content: center;
1224
- padding: 60px;
1225
- }
1226
-
1227
- .spinner {
1228
- width: 28px;
1229
- height: 28px;
1230
- border: 2px solid var(--border-subtle);
1231
- border-top-color: var(--accent-purple);
1232
- border-radius: 50%;
1233
- animation: spin 0.8s linear infinite;
1234
- }
1235
-
1236
- @keyframes spin {
1237
- to {
1238
- transform: rotate(360deg);
1239
- }
1240
- }
1241
-
1242
- /* ============================================================
1243
- * Responsive
1244
- * ============================================================ */
1245
-
1246
- @media (max-width: 900px) {
1247
- .stats-grid,
1248
- .retention-summary {
1249
- grid-template-columns: repeat(2, 1fr);
1250
- }
1251
- }
1252
-
1253
- @media (max-width: 600px) {
1254
- .stats-grid,
1255
- .retention-summary {
1256
- grid-template-columns: 1fr;
1257
- }
1258
-
1259
- .page {
1260
- padding: 16px;
1261
- }
1262
- }
1263
-
1264
- /* ============================================================
1265
- * Project Switcher - MD3 Dropdown
1266
- * ============================================================ */
1267
-
1268
- .project-switcher {
1269
- padding: 0 12px 20px;
1270
- position: relative;
1271
- }
1272
-
1273
- .project-trigger {
1274
- width: 100%;
1275
- display: flex;
1276
- align-items: center;
1277
- gap: 10px;
1278
- padding: 10px 14px;
1279
- background: var(--bg-card);
1280
- border: 1px solid var(--border-subtle);
1281
- border-radius: var(--radius-md);
1282
- cursor: pointer;
1283
- transition: all var(--transition-fast);
1284
- font-family: var(--font-sans);
1285
- color: var(--text-primary);
1286
- }
1287
-
1288
- .project-trigger:hover {
1289
- background: var(--bg-card-hover);
1290
- border-color: var(--border-medium);
1291
- }
1292
-
1293
- .project-trigger:focus {
1294
- outline: none;
1295
- border-color: var(--accent-purple);
1296
- box-shadow: var(--glow-purple);
1297
- }
1298
-
1299
- .project-dot {
1300
- width: 8px;
1301
- height: 8px;
1302
- border-radius: 50%;
1303
- background: var(--accent-green);
1304
- flex-shrink: 0;
1305
- box-shadow: 0 0 8px rgba(105, 240, 174, 0.4);
1306
- }
1307
-
1308
- .project-name {
1309
- flex: 1;
1310
- font-size: 13px;
1311
- font-weight: 500;
1312
- white-space: nowrap;
1313
- overflow: hidden;
1314
- text-overflow: ellipsis;
1315
- text-align: left;
1316
- }
1317
-
1318
- .project-count {
1319
- font-size: 11px;
1320
- font-family: var(--font-mono);
1321
- color: var(--text-muted);
1322
- background: var(--bg-surface);
1323
- padding: 2px 8px;
1324
- border-radius: var(--radius-sm);
1325
- flex-shrink: 0;
1326
- }
1327
-
1328
- .project-chevron {
1329
- flex-shrink: 0;
1330
- color: var(--text-muted);
1331
- transition: transform var(--transition-fast);
1332
- }
1333
-
1334
- .project-switcher.open .project-chevron {
1335
- transform: rotate(180deg);
1336
- }
1337
-
1338
- /* Dropdown popover */
1339
- .project-dropdown {
1340
- display: none;
1341
- position: absolute;
1342
- top: calc(100% - 12px);
1343
- left: 12px;
1344
- right: 12px;
1345
- background: var(--bg-card);
1346
- border: 1px solid var(--border-medium);
1347
- border-radius: var(--radius-md);
1348
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
1349
- z-index: 100;
1350
- overflow: hidden;
1351
- animation: dropdownIn 0.2s cubic-bezier(0.2, 0, 0, 1);
1352
- }
1353
-
1354
- .project-switcher.open .project-dropdown {
1355
- display: block;
1356
- }
1357
-
1358
- @keyframes dropdownIn {
1359
- from { opacity: 0; transform: translateY(-6px) scale(0.97); }
1360
- to { opacity: 1; transform: translateY(0) scale(1); }
1361
- }
1362
-
1363
- .project-dropdown-header {
1364
- padding: 10px;
1365
- border-bottom: 1px solid var(--border-subtle);
1366
- }
1367
-
1368
- .project-search {
1369
- width: 100%;
1370
- padding: 8px 12px;
1371
- background: var(--bg-surface);
1372
- border: 1px solid var(--border-subtle);
1373
- border-radius: var(--radius-sm);
1374
- color: var(--text-primary);
1375
- font-family: var(--font-sans);
1376
- font-size: 12px;
1377
- outline: none;
1378
- transition: border-color var(--transition-fast);
1379
- }
1380
-
1381
- .project-search:focus {
1382
- border-color: var(--accent-purple);
1383
- }
1384
-
1385
- .project-search::placeholder {
1386
- color: var(--text-muted);
1387
- }
1388
-
1389
- .project-dropdown-list {
1390
- max-height: 240px;
1391
- overflow-y: auto;
1392
- padding: 4px;
1393
- }
1394
-
1395
- .project-item {
1396
- display: flex;
1397
- align-items: center;
1398
- gap: 10px;
1399
- padding: 10px 12px;
1400
- border-radius: var(--radius-sm);
1401
- cursor: pointer;
1402
- transition: all var(--transition-fast);
1403
- border: none;
1404
- background: none;
1405
- width: 100%;
1406
- font-family: var(--font-sans);
1407
- color: var(--text-primary);
1408
- }
1409
-
1410
- .project-item:hover {
1411
- background: rgba(208, 188, 255, 0.06);
1412
- }
1413
-
1414
- .project-item.active {
1415
- background: rgba(208, 188, 255, 0.1);
1416
- }
1417
-
1418
- .project-item-dot {
1419
- width: 6px;
1420
- height: 6px;
1421
- border-radius: 50%;
1422
- background: var(--text-muted);
1423
- flex-shrink: 0;
1424
- }
1425
-
1426
- .project-item.active .project-item-dot {
1427
- background: var(--accent-green);
1428
- box-shadow: 0 0 6px rgba(105, 240, 174, 0.4);
1429
- }
1430
-
1431
- .project-item-name {
1432
- flex: 1;
1433
- font-size: 12px;
1434
- font-weight: 500;
1435
- text-align: left;
1436
- white-space: nowrap;
1437
- overflow: hidden;
1438
- text-overflow: ellipsis;
1439
- }
1440
-
1441
- .project-item-id {
1442
- font-size: 10px;
1443
- color: var(--text-muted);
1444
- font-family: var(--font-mono);
1445
- white-space: nowrap;
1446
- overflow: hidden;
1447
- text-overflow: ellipsis;
1448
- max-width: 100px;
1449
- }
1450
-
1451
- .project-item-count {
1452
- font-size: 10px;
1453
- font-family: var(--font-mono);
1454
- color: var(--text-muted);
1455
- background: var(--bg-surface);
1456
- padding: 2px 6px;
1457
- border-radius: 4px;
1458
- flex-shrink: 0;
1459
- }
1460
-
1461
- [data-theme="light"] .project-dropdown {
1462
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
1463
- }
1464
-
1465
- [data-theme="light"] .project-item:hover {
1466
- background: rgba(103, 80, 164, 0.06);
1467
- }
1468
-
1469
- [data-theme="light"] .project-item.active {
1470
- background: rgba(103, 80, 164, 0.08);
1471
- }
1472
-
1473
- /* ============================================================
1474
- * Export Button
1475
- * ============================================================ */
1476
-
1477
- .export-btn {
1478
- display: flex;
1479
- align-items: center;
1480
- gap: 6px;
1481
- padding: 10px 18px;
1482
- background: var(--bg-card);
1483
- border: 1px solid var(--border-subtle);
1484
- border-radius: var(--radius-pill);
1485
- color: var(--text-secondary);
1486
- font-size: 13px;
1487
- font-family: var(--font-sans);
1488
- cursor: pointer;
1489
- transition: all var(--transition-normal);
1490
- }
1491
-
1492
- .export-btn:hover {
1493
- background: rgba(208, 188, 255, 0.08);
1494
- border-color: var(--accent-purple);
1495
- color: var(--accent-purple);
1496
- box-shadow: var(--glow-purple);
1497
- }
1498
-
1499
- /* ============================================================
1500
- * Observation Card Enhancements
1501
- * ============================================================ */
1502
-
1503
- .obs-expand-icon {
1504
- margin-left: auto;
1505
- font-size: 10px;
1506
- color: var(--text-muted);
1507
- transition: transform var(--transition-normal);
1508
- flex-shrink: 0;
1509
- }
1510
-
1511
- .obs-card:hover .obs-expand-icon {
1512
- color: var(--text-secondary);
1513
- }
1514
-
1515
- .obs-detail {
1516
- overflow: hidden;
1517
- transition: max-height 0.3s cubic-bezier(0.2, 0, 0, 1), opacity 0.3s cubic-bezier(0.2, 0, 0, 1);
1518
- }
1519
-
1520
- .obs-detail-inner {
1521
- margin-top: 12px;
1522
- padding-top: 12px;
1523
- border-top: 1px solid var(--border-subtle);
1524
- }
1525
-
1526
- /* Batch action toolbar */
1527
- .batch-toolbar {
1528
- display: flex;
1529
- align-items: center;
1530
- gap: 10px;
1531
- padding: 12px 18px;
1532
- background: var(--bg-card);
1533
- border: 1px solid var(--border-subtle);
1534
- border-radius: var(--radius-md);
1535
- margin-bottom: 12px;
1536
- animation: fadeIn 0.2s cubic-bezier(0.2, 0, 0, 1);
1537
- }
1538
-
1539
- .batch-toolbar .batch-count {
1540
- font-size: 12px;
1541
- color: var(--text-secondary);
1542
- flex: 1;
1543
- }
1544
-
1545
- .batch-toolbar button {
1546
- padding: 8px 16px;
1547
- border-radius: var(--radius-sm);
1548
- font-size: 12px;
1549
- font-family: var(--font-sans);
1550
- cursor: pointer;
1551
- transition: all var(--transition-fast);
1552
- border: 1px solid;
1553
- }
1554
-
1555
- .batch-toolbar .batch-delete-btn {
1556
- background: rgba(255, 138, 128, 0.1);
1557
- border-color: rgba(255, 138, 128, 0.3);
1558
- color: var(--accent-red);
1559
- }
1560
-
1561
- .batch-toolbar .batch-delete-btn:hover {
1562
- background: rgba(255, 138, 128, 0.2);
1563
- border-color: var(--accent-red);
1564
- }
1565
-
1566
- .batch-toolbar .batch-cancel-btn {
1567
- background: transparent;
1568
- border-color: var(--border-medium);
1569
- color: var(--text-secondary);
1570
- }
1571
-
1572
- .batch-toolbar .batch-cancel-btn:hover {
1573
- border-color: var(--text-secondary);
1574
- color: var(--text-primary);
1575
- }
1576
-
1577
- /* Low quality indicator */
1578
- .obs-card.low-quality {
1579
- border-left: 3px solid var(--accent-amber);
1580
- opacity: 0.7;
1581
- }
1582
-
1583
- .obs-card.low-quality:hover {
1584
- opacity: 1;
1585
- }
1586
-
1587
- .low-quality-badge {
1588
- font-size: 9px;
1589
- padding: 2px 8px;
1590
- border-radius: var(--radius-sm);
1591
- background: rgba(255, 213, 79, 0.12);
1592
- color: var(--accent-amber);
1593
- font-weight: 600;
1594
- text-transform: uppercase;
1595
- letter-spacing: 0.5px;
1596
- }
1597
-
1598
- /* Batch select checkbox */
1599
- .obs-checkbox {
1600
- appearance: none;
1601
- position: relative;
1602
- width: 18px;
1603
- height: 18px;
1604
- border: 2px solid var(--border-medium);
1605
- border-radius: var(--radius-sm);
1606
- background: transparent;
1607
- cursor: pointer;
1608
- transition: all var(--transition-fast);
1609
- flex-shrink: 0;
1610
- }
1611
-
1612
- .obs-checkbox:checked {
1613
- background: var(--accent-purple);
1614
- border-color: var(--accent-purple);
1615
- }
1616
-
1617
- .obs-checkbox:checked::after {
1618
- content: '\2713';
1619
- position: absolute;
1620
- top: 50%;
1621
- left: 50%;
1622
- transform: translate(-50%, -50%);
1623
- font-size: 11px;
1624
- color: #0B0B14;
1625
- font-weight: bold;
1626
- line-height: 1;
1627
- }
1628
-
1629
- .obs-detail-section {
1630
- margin-bottom: 12px;
1631
- }
1632
-
1633
- .obs-detail-section label {
1634
- display: block;
1635
- font-size: 11px;
1636
- font-weight: 600;
1637
- color: var(--text-muted);
1638
- text-transform: uppercase;
1639
- letter-spacing: 0.5px;
1640
- margin-bottom: 6px;
1641
- }
1642
-
1643
- .obs-detail-section .obs-card-narrative {
1644
- -webkit-line-clamp: unset;
1645
- line-clamp: unset;
1646
- white-space: pre-wrap;
1647
- max-height: none;
1648
- }
1649
-
1650
- /* Tag variants */
1651
- .concept-tag {
1652
- background: rgba(208, 188, 255, 0.08) !important;
1653
- border-color: rgba(208, 188, 255, 0.15) !important;
1654
- color: var(--accent-purple) !important;
1655
- }
1656
-
1657
- .file-tag {
1658
- background: rgba(130, 177, 255, 0.08) !important;
1659
- border-color: rgba(130, 177, 255, 0.15) !important;
1660
- color: var(--accent-blue) !important;
1661
- font-family: var(--font-mono);
1662
- font-size: 11px !important;
1663
- }
1664
-
1665
- /* Delete Button */
1666
- .obs-detail-actions {
1667
- display: flex;
1668
- justify-content: flex-end;
1669
- margin-top: 12px;
1670
- padding-top: 8px;
1671
- border-top: 1px solid var(--border-subtle);
1672
- }
1673
-
1674
- .delete-btn {
1675
- display: flex;
1676
- align-items: center;
1677
- gap: 5px;
1678
- padding: 8px 14px;
1679
- background: transparent;
1680
- border: 1px solid rgba(255, 138, 128, 0.2);
1681
- border-radius: var(--radius-sm);
1682
- color: var(--accent-red);
1683
- font-size: 12px;
1684
- font-family: var(--font-sans);
1685
- cursor: pointer;
1686
- transition: all var(--transition-fast);
1687
- opacity: 0.7;
1688
- }
1689
-
1690
- .delete-btn:hover {
1691
- background: rgba(255, 138, 128, 0.1);
1692
- border-color: var(--accent-red);
1693
- opacity: 1;
1694
- }
1695
-
1696
- /* Search highlight */
1697
- mark {
1698
- background: rgba(255, 213, 79, 0.2);
1699
- color: inherit;
1700
- padding: 1px 3px;
1701
- border-radius: 3px;
1702
- font-weight: 600;
1703
- }
1704
-
1705
- [data-theme="light"] mark {
1706
- background: rgba(255, 213, 79, 0.35);
1707
- }
1708
-
1709
- /* ============================================================
1710
- * Team Page
1711
- * ============================================================ */
1712
-
1713
- .team-header {
1714
- display: flex;
1715
- align-items: center;
1716
- justify-content: space-between;
1717
- margin-bottom: 32px;
1718
- }
1719
-
1720
- .team-header-left {
1721
- display: flex;
1722
- align-items: center;
1723
- gap: 14px;
1724
- }
1725
-
1726
- .team-header-icon {
1727
- width: 44px;
1728
- height: 44px;
1729
- border-radius: var(--radius-md);
1730
- background: rgba(128, 216, 255, 0.08);
1731
- display: flex;
1732
- align-items: center;
1733
- justify-content: center;
1734
- color: var(--accent-cyan);
1735
- font-size: 22px;
1736
- }
1737
-
1738
- .team-header-right {
1739
- display: flex;
1740
- align-items: center;
1741
- gap: 10px;
1742
- }
1743
-
1744
- .team-refresh-time {
1745
- font-size: 11px;
1746
- color: var(--text-muted);
1747
- font-family: var(--font-mono);
1748
- }
1749
-
1750
- .team-refresh-btn {
1751
- height: 34px;
1752
- padding: 0 14px;
1753
- border-radius: var(--radius-pill);
1754
- border: 1px solid var(--border-medium);
1755
- background: var(--bg-card);
1756
- color: var(--text-secondary);
1757
- cursor: pointer;
1758
- font-size: 12px;
1759
- font-weight: 500;
1760
- font-family: var(--font-sans);
1761
- display: flex;
1762
- align-items: center;
1763
- gap: 6px;
1764
- transition: all var(--transition-fast);
1765
- }
1766
-
1767
- .team-refresh-btn:hover {
1768
- background: var(--bg-card-hover);
1769
- border-color: var(--accent-cyan);
1770
- color: var(--text-primary);
1771
- }
1772
-
1773
- .team-stat-icon {
1774
- width: 36px;
1775
- height: 36px;
1776
- border-radius: var(--radius-sm);
1777
- display: flex;
1778
- align-items: center;
1779
- justify-content: center;
1780
- font-size: 18px;
1781
- margin-bottom: 12px;
1782
- }
1783
-
1784
- .stat-card[data-accent="cyan"] .team-stat-icon {
1785
- background: rgba(128, 216, 255, 0.1);
1786
- color: var(--accent-cyan);
1787
- }
1788
-
1789
- .stat-card[data-accent="amber"] .team-stat-icon {
1790
- background: rgba(255, 213, 79, 0.1);
1791
- color: var(--accent-amber);
1792
- }
1793
-
1794
- .stat-card[data-accent="purple"] .team-stat-icon {
1795
- background: rgba(208, 188, 255, 0.1);
1796
- color: var(--accent-purple);
1797
- }
1798
-
1799
- .stat-card[data-accent="green"] .team-stat-icon {
1800
- background: rgba(105, 240, 174, 0.1);
1801
- color: var(--accent-green);
1802
- }
1803
-
1804
- .team-stat-sub {
1805
- font-size: 11px;
1806
- color: var(--text-muted);
1807
- margin-top: 4px;
1808
- font-weight: 400;
1809
- }
1810
-
1811
- .team-grid {
1812
- display: grid;
1813
- grid-template-columns: 1fr 1fr;
1814
- gap: 16px;
1815
- margin-bottom: 16px;
1816
- }
1817
-
1818
- .team-agent-row {
1819
- display: flex;
1820
- align-items: center;
1821
- gap: 12px;
1822
- padding: 12px 0;
1823
- border-bottom: 1px solid var(--border-subtle);
1824
- transition: opacity var(--transition-fast);
1825
- }
1826
-
1827
- .team-agent-row:last-child {
1828
- border-bottom: none;
1829
- }
1830
-
1831
- .team-agent-row.inactive {
1832
- opacity: 0.4;
1833
- }
1834
-
1835
- .team-agent-status {
1836
- width: 8px;
1837
- height: 8px;
1838
- border-radius: 50%;
1839
- flex-shrink: 0;
1840
- }
1841
-
1842
- .team-agent-status.active {
1843
- background: var(--accent-green);
1844
- box-shadow: 0 0 6px rgba(105, 240, 174, 0.4);
1845
- }
1846
-
1847
- .team-agent-status.offline {
1848
- background: var(--text-muted);
1849
- }
1850
-
1851
- .team-agent-info {
1852
- flex: 1;
1853
- min-width: 0;
1854
- }
1855
-
1856
- .team-agent-name {
1857
- font-size: 13px;
1858
- font-weight: 600;
1859
- color: var(--text-primary);
1860
- margin-bottom: 2px;
1861
- }
1862
-
1863
- .team-agent-meta {
1864
- font-size: 11px;
1865
- color: var(--text-muted);
1866
- display: flex;
1867
- align-items: center;
1868
- gap: 6px;
1869
- flex-wrap: wrap;
1870
- }
1871
-
1872
- .team-agent-time {
1873
- font-size: 10px;
1874
- color: var(--text-muted);
1875
- margin-top: 3px;
1876
- }
1877
-
1878
- .team-cap-tag {
1879
- font-size: 10px;
1880
- padding: 1px 6px;
1881
- background: rgba(208, 188, 255, 0.08);
1882
- border: 1px solid rgba(208, 188, 255, 0.12);
1883
- border-radius: var(--radius-sm);
1884
- color: var(--accent-purple);
1885
- font-family: var(--font-mono);
1886
- }
1887
-
1888
- .team-unread-badge {
1889
- font-size: 10px;
1890
- font-weight: 700;
1891
- padding: 2px 8px;
1892
- border-radius: var(--radius-pill);
1893
- background: var(--accent-cyan);
1894
- color: #000;
1895
- flex-shrink: 0;
1896
- }
1897
-
1898
- .team-agent-id {
1899
- font-size: 10px;
1900
- color: var(--text-muted);
1901
- font-family: var(--font-mono);
1902
- flex-shrink: 0;
1903
- }
1904
-
1905
- .team-lock-row {
1906
- display: flex;
1907
- align-items: flex-start;
1908
- gap: 10px;
1909
- padding: 10px 0;
1910
- border-bottom: 1px solid var(--border-subtle);
1911
- }
1912
-
1913
- .team-lock-row:last-child {
1914
- border-bottom: none;
1915
- }
1916
-
1917
- .team-lock-icon {
1918
- width: 28px;
1919
- height: 28px;
1920
- border-radius: var(--radius-sm);
1921
- background: rgba(255, 213, 79, 0.08);
1922
- display: flex;
1923
- align-items: center;
1924
- justify-content: center;
1925
- color: var(--accent-amber);
1926
- font-size: 14px;
1927
- flex-shrink: 0;
1928
- margin-top: 1px;
1929
- }
1930
-
1931
- .team-lock-info {
1932
- flex: 1;
1933
- min-width: 0;
1934
- }
1935
-
1936
- .team-lock-file {
1937
- font-size: 12px;
1938
- font-family: var(--font-mono);
1939
- color: var(--text-primary);
1940
- word-break: break-all;
1941
- }
1942
-
1943
- .team-lock-meta {
1944
- font-size: 10px;
1945
- color: var(--text-muted);
1946
- margin-top: 3px;
1947
- display: flex;
1948
- align-items: center;
1949
- gap: 8px;
1950
- }
1951
-
1952
- .team-lock-ttl {
1953
- font-size: 10px;
1954
- padding: 1px 6px;
1955
- border-radius: var(--radius-sm);
1956
- background: rgba(255, 213, 79, 0.08);
1957
- color: var(--accent-amber);
1958
- font-family: var(--font-mono);
1959
- }
1960
-
1961
- .team-task-table {
1962
- width: 100%;
1963
- border-collapse: collapse;
1964
- }
1965
-
1966
- .team-task-table th {
1967
- text-align: left;
1968
- font-size: 10px;
1969
- font-weight: 600;
1970
- color: var(--text-muted);
1971
- text-transform: uppercase;
1972
- letter-spacing: 0.6px;
1973
- padding: 8px 12px;
1974
- border-bottom: 1px solid var(--border-medium);
1975
- }
1976
-
1977
- .team-task-table td {
1978
- padding: 10px 12px;
1979
- font-size: 13px;
1980
- color: var(--text-primary);
1981
- border-bottom: 1px solid var(--border-subtle);
1982
- vertical-align: top;
1983
- }
1984
-
1985
- .team-task-table tr:last-child td {
1986
- border-bottom: none;
1987
- }
1988
-
1989
- .team-task-table tr:hover td {
1990
- background: rgba(255, 255, 255, 0.02);
1991
- }
1992
-
1993
- .team-task-status {
1994
- display: inline-flex;
1995
- align-items: center;
1996
- gap: 5px;
1997
- font-size: 11px;
1998
- font-weight: 500;
1999
- padding: 3px 8px;
2000
- border-radius: var(--radius-sm);
2001
- }
2002
-
2003
- .team-task-status[data-status="pending"] {
2004
- background: rgba(144, 164, 174, 0.1);
2005
- color: var(--text-muted);
2006
- }
2007
-
2008
- .team-task-status[data-status="in_progress"] {
2009
- background: rgba(255, 213, 79, 0.1);
2010
- color: var(--accent-amber);
2011
- }
2012
-
2013
- .team-task-status[data-status="completed"] {
2014
- background: rgba(105, 240, 174, 0.1);
2015
- color: var(--accent-green);
2016
- }
2017
-
2018
- .team-task-status[data-status="failed"] {
2019
- background: rgba(255, 138, 128, 0.1);
2020
- color: var(--accent-red);
2021
- }
2022
-
2023
- .team-task-result {
2024
- font-size: 11px;
2025
- color: var(--text-muted);
2026
- margin-top: 4px;
2027
- }
2028
-
2029
- .team-task-id {
2030
- font-family: var(--font-mono);
2031
- font-size: 11px;
2032
- color: var(--text-muted);
2033
- }
2034
-
2035
- .team-empty {
2036
- display: flex;
2037
- flex-direction: column;
2038
- align-items: center;
2039
- justify-content: center;
2040
- padding: 32px 16px;
2041
- color: var(--text-muted);
2042
- gap: 8px;
2043
- }
2044
-
2045
- .team-empty-icon {
2046
- font-size: 28px;
2047
- opacity: 0.4;
2048
- }
2049
-
2050
- .team-empty-text {
2051
- font-size: 12px;
2052
- }
2053
-
2054
- .team-panel-count {
2055
- font-size: 11px;
2056
- color: var(--text-muted);
2057
- font-weight: 400;
2058
- margin-left: 8px;
2059
- }
2060
-
2061
- .team-scrollable {
2062
- max-height: 420px;
2063
- overflow-y: auto;
2064
- }
1
+ /* ============================================================
2
+ * Memorix Dashboard — Material Design 3 Theme
3
+ * Tonal surfaces, cosmic graph, refined elevation
4
+ * ============================================================ */
5
+
6
+ :root {
7
+ /* MD3 Tonal Surfaces */
8
+ --bg-base: #0B0B14;
9
+ --bg-surface: #12121E;
10
+ --bg-card: #1B1B2E;
11
+ --bg-card-hover: #242440;
12
+ --bg-sidebar: #0E0E1A;
13
+
14
+ --border-subtle: rgba(255, 255, 255, 0.04);
15
+ --border-medium: rgba(255, 255, 255, 0.08);
16
+
17
+ --text-primary: #E6E1E5;
18
+ --text-secondary: #CAC4D0;
19
+ --text-muted: #79747E;
20
+
21
+ --accent-cyan: #80D8FF;
22
+ --accent-purple: #D0BCFF;
23
+ --accent-pink: #FFB8D1;
24
+ --accent-amber: #FFD54F;
25
+ --accent-green: #69F0AE;
26
+ --accent-red: #FF8A80;
27
+ --accent-blue: #82B1FF;
28
+
29
+ /* Observation type colors */
30
+ --type-session-request: #82B1FF;
31
+ --type-gotcha: #FF8A80;
32
+ --type-problem-solution: #FFD54F;
33
+ --type-how-it-works: #82B1FF;
34
+ --type-what-changed: #69F0AE;
35
+ --type-discovery: #D0BCFF;
36
+ --type-why-it-exists: #FFAB40;
37
+ --type-decision: #B388FF;
38
+ --type-trade-off: #90A4AE;
39
+
40
+ /* Layout */
41
+ --sidebar-width: 240px;
42
+ --radius-sm: 8px;
43
+ --radius-md: 12px;
44
+ --radius-lg: 16px;
45
+ --radius-xl: 24px;
46
+ --radius-pill: 100px;
47
+
48
+ /* Typography */
49
+ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
50
+ --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
51
+
52
+ /* MD3 Elevation */
53
+ --elevation-1: 0 1px 3px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.48);
54
+ --elevation-2: 0 3px 6px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.32);
55
+ --elevation-3: 0 8px 24px rgba(0,0,0,0.32), 0 4px 8px rgba(0,0,0,0.24);
56
+
57
+ /* Effects */
58
+ --glow-cyan: 0 0 24px rgba(128, 216, 255, 0.12);
59
+ --glow-purple: 0 0 24px rgba(208, 188, 255, 0.12);
60
+
61
+ /* Transitions - MD3 standard easing */
62
+ --transition-fast: 150ms cubic-bezier(0.2, 0, 0, 1);
63
+ --transition-normal: 300ms cubic-bezier(0.2, 0, 0, 1);
64
+ --transition-emphasized: 500ms cubic-bezier(0.2, 0, 0, 1);
65
+ }
66
+
67
+ /* Light Theme - MD3 */
68
+ [data-theme="light"] {
69
+ --bg-base: #FFFBFE;
70
+ --bg-surface: #F7F2FA;
71
+ --bg-card: #FFFFFF;
72
+ --bg-card-hover: #F3EDF7;
73
+ --bg-sidebar: #FFFBFE;
74
+
75
+ --border-subtle: rgba(0, 0, 0, 0.05);
76
+ --border-medium: rgba(0, 0, 0, 0.1);
77
+
78
+ --text-primary: #1C1B1F;
79
+ --text-secondary: #49454F;
80
+ --text-muted: #79747E;
81
+
82
+ --accent-cyan: #006A6A;
83
+ --accent-purple: #6750A4;
84
+ --accent-pink: #B3261E;
85
+ --accent-amber: #7D5700;
86
+ --accent-green: #006D40;
87
+ --accent-red: #B3261E;
88
+ --accent-blue: #0061A4;
89
+
90
+ --type-session-request: #0061A4;
91
+ --type-gotcha: #B3261E;
92
+ --type-problem-solution: #7D5700;
93
+ --type-how-it-works: #0061A4;
94
+ --type-what-changed: #006D40;
95
+ --type-discovery: #6750A4;
96
+ --type-why-it-exists: #A24E00;
97
+ --type-decision: #5B35A0;
98
+ --type-trade-off: #605D62;
99
+
100
+ --elevation-1: 0 1px 2px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.12);
101
+ --elevation-2: 0 2px 4px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.12);
102
+ --elevation-3: 0 4px 8px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.12);
103
+
104
+ --glow-cyan: 0 0 20px rgba(0, 106, 106, 0.08);
105
+ --glow-purple: 0 0 20px rgba(103, 80, 164, 0.08);
106
+ }
107
+
108
+ [data-theme="light"] .brand-logo {
109
+ filter: drop-shadow(0 0 6px rgba(103, 80, 164, 0.2));
110
+ }
111
+
112
+ [data-theme="light"] .brand-logo:hover {
113
+ filter: drop-shadow(0 0 10px rgba(103, 80, 164, 0.35));
114
+ }
115
+
116
+ [data-theme="light"] ::-webkit-scrollbar-thumb {
117
+ background: rgba(0, 0, 0, 0.15);
118
+ }
119
+
120
+ [data-theme="light"] ::-webkit-scrollbar-thumb:hover {
121
+ background: rgba(0, 0, 0, 0.25);
122
+ }
123
+
124
+ [data-theme="light"] .stat-value {
125
+ background: linear-gradient(135deg, #1C1B1F, #49454F);
126
+ -webkit-background-clip: text;
127
+ -webkit-text-fill-color: transparent;
128
+ background-clip: text;
129
+ }
130
+
131
+ [data-theme="light"] .retention-table tr:hover td {
132
+ background: rgba(0, 0, 0, 0.02);
133
+ }
134
+
135
+ [data-theme="light"] .score-bar {
136
+ background: rgba(0, 0, 0, 0.06);
137
+ }
138
+
139
+ [data-theme="light"] .fact-tag {
140
+ background: rgba(0, 106, 106, 0.08);
141
+ border-color: rgba(0, 106, 106, 0.18);
142
+ }
143
+
144
+ [data-theme="light"] .nav-btn.active {
145
+ background: rgba(103, 80, 164, 0.1);
146
+ color: var(--accent-purple);
147
+ }
148
+
149
+ [data-theme="light"] .filter-btn.active {
150
+ background: rgba(103, 80, 164, 0.1);
151
+ }
152
+
153
+ /* Reset */
154
+ *,
155
+ *::before,
156
+ *::after {
157
+ box-sizing: border-box;
158
+ margin: 0;
159
+ padding: 0;
160
+ }
161
+
162
+ html,
163
+ body {
164
+ height: 100%;
165
+ font-family: var(--font-sans);
166
+ background: var(--bg-base);
167
+ color: var(--text-primary);
168
+ overflow: hidden;
169
+ -webkit-font-smoothing: antialiased;
170
+ }
171
+
172
+ body {
173
+ display: flex;
174
+ }
175
+
176
+ /* Scrollbar */
177
+ ::-webkit-scrollbar {
178
+ width: 6px;
179
+ }
180
+
181
+ ::-webkit-scrollbar-track {
182
+ background: transparent;
183
+ }
184
+
185
+ ::-webkit-scrollbar-thumb {
186
+ background: var(--border-medium);
187
+ border-radius: 3px;
188
+ }
189
+
190
+ ::-webkit-scrollbar-thumb:hover {
191
+ background: var(--text-muted);
192
+ }
193
+
194
+ /* ============================================================
195
+ * Sidebar - MD3 NavigationRail
196
+ * ============================================================ */
197
+
198
+ #sidebar {
199
+ width: var(--sidebar-width);
200
+ height: 100vh;
201
+ background: var(--bg-sidebar);
202
+ border-right: 1px solid var(--border-subtle);
203
+ display: flex;
204
+ flex-direction: column;
205
+ padding: 20px 0;
206
+ flex-shrink: 0;
207
+ z-index: 10;
208
+ overflow: hidden;
209
+ }
210
+
211
+ .sidebar-brand {
212
+ display: flex;
213
+ align-items: center;
214
+ gap: 12px;
215
+ padding: 0 20px;
216
+ margin-bottom: 24px;
217
+ }
218
+
219
+ .brand-logo {
220
+ width: 32px;
221
+ height: 32px;
222
+ border-radius: var(--radius-md);
223
+ object-fit: cover;
224
+ display: block;
225
+ filter: drop-shadow(0 0 8px rgba(208, 188, 255, 0.3));
226
+ transition: filter var(--transition-normal);
227
+ flex-shrink: 0;
228
+ }
229
+
230
+ .brand-logo:hover {
231
+ filter: drop-shadow(0 0 14px rgba(208, 188, 255, 0.5));
232
+ }
233
+
234
+ .brand-text {
235
+ font-size: 16px;
236
+ font-weight: 700;
237
+ color: var(--text-primary);
238
+ letter-spacing: -0.3px;
239
+ }
240
+
241
+ .sidebar-section-label {
242
+ font-size: 10px;
243
+ font-weight: 600;
244
+ color: var(--text-muted);
245
+ letter-spacing: 1.2px;
246
+ padding: 12px 20px 4px;
247
+ opacity: 0.6;
248
+ }
249
+
250
+ .sidebar-nav {
251
+ display: flex;
252
+ flex-direction: column;
253
+ gap: 4px;
254
+ padding: 0 12px;
255
+ }
256
+
257
+ .nav-btn {
258
+ width: 100%;
259
+ height: 44px;
260
+ border: none;
261
+ background: transparent;
262
+ color: var(--text-muted);
263
+ cursor: pointer;
264
+ border-radius: var(--radius-pill);
265
+ display: flex;
266
+ align-items: center;
267
+ gap: 14px;
268
+ padding: 0 16px;
269
+ transition: all var(--transition-normal);
270
+ position: relative;
271
+ font-family: var(--font-sans);
272
+ }
273
+
274
+ .nav-btn:hover {
275
+ color: var(--text-secondary);
276
+ background: rgba(208, 188, 255, 0.06);
277
+ }
278
+
279
+ .nav-btn.active {
280
+ color: var(--accent-purple);
281
+ background: rgba(208, 188, 255, 0.12);
282
+ }
283
+
284
+ .nav-btn.active::before {
285
+ display: none;
286
+ }
287
+
288
+ .nav-label {
289
+ font-size: 14px;
290
+ font-weight: 500;
291
+ white-space: nowrap;
292
+ }
293
+
294
+ .sidebar-spacer {
295
+ flex: 1;
296
+ }
297
+
298
+ .sidebar-footer {
299
+ display: flex;
300
+ flex-direction: column;
301
+ gap: 2px;
302
+ padding: 8px 12px;
303
+ }
304
+
305
+ .sidebar-action-btn {
306
+ width: 100%;
307
+ height: 36px;
308
+ border: none;
309
+ background: transparent;
310
+ color: var(--text-muted);
311
+ cursor: pointer;
312
+ border-radius: var(--radius-pill);
313
+ font-size: 12px;
314
+ font-weight: 500;
315
+ font-family: var(--font-sans);
316
+ transition: all var(--transition-fast);
317
+ display: flex;
318
+ align-items: center;
319
+ gap: 10px;
320
+ padding: 0 14px;
321
+ }
322
+
323
+ .sidebar-action-btn:hover {
324
+ color: var(--text-secondary);
325
+ background: rgba(208, 188, 255, 0.06);
326
+ }
327
+
328
+ .action-label {
329
+ font-size: 12px;
330
+ font-weight: 500;
331
+ }
332
+
333
+ [data-theme="light"] .sidebar-action-btn:hover {
334
+ background: rgba(103, 80, 164, 0.06);
335
+ }
336
+
337
+ /* ============================================================
338
+ * Main Content
339
+ * ============================================================ */
340
+
341
+ #app {
342
+ flex: 1;
343
+ height: 100vh;
344
+ overflow-y: auto;
345
+ overflow-x: hidden;
346
+ scrollbar-gutter: stable;
347
+ background: var(--bg-base);
348
+ }
349
+
350
+ .page {
351
+ display: none;
352
+ padding: 32px;
353
+ min-height: 100vh;
354
+ animation: fadeIn 0.4s cubic-bezier(0.2, 0, 0, 1);
355
+ }
356
+
357
+ .page.active {
358
+ display: block;
359
+ }
360
+
361
+ @keyframes fadeIn {
362
+ from {
363
+ opacity: 0;
364
+ transform: translateY(12px);
365
+ }
366
+
367
+ to {
368
+ opacity: 1;
369
+ transform: translateY(0);
370
+ }
371
+ }
372
+
373
+ /* ============================================================
374
+ * Page Header
375
+ * ============================================================ */
376
+
377
+ .page-header {
378
+ margin-bottom: 32px;
379
+ }
380
+
381
+ .page-title {
382
+ font-size: 28px;
383
+ font-weight: 600;
384
+ color: var(--text-primary);
385
+ margin-bottom: 6px;
386
+ letter-spacing: -0.5px;
387
+ }
388
+
389
+ .page-subtitle {
390
+ font-size: 14px;
391
+ color: var(--text-secondary);
392
+ }
393
+
394
+ /* ============================================================
395
+ * Stat Cards - MD3 Tonal Elevation
396
+ * ============================================================ */
397
+
398
+ .stats-grid {
399
+ display: grid;
400
+ grid-template-columns: repeat(4, 1fr);
401
+ gap: 16px;
402
+ margin-bottom: 32px;
403
+ }
404
+
405
+ .stat-card {
406
+ background: var(--bg-card);
407
+ border: 1px solid var(--border-subtle);
408
+ border-radius: var(--radius-lg);
409
+ padding: 24px;
410
+ transition: all var(--transition-normal);
411
+ position: relative;
412
+ overflow: hidden;
413
+ box-shadow: var(--elevation-1);
414
+ }
415
+
416
+ .stat-card::before {
417
+ content: '';
418
+ position: absolute;
419
+ top: 0;
420
+ left: 0;
421
+ right: 0;
422
+ height: 3px;
423
+ border-radius: var(--radius-lg) var(--radius-lg) 0 0;
424
+ }
425
+
426
+ .stat-card:hover {
427
+ background: var(--bg-card-hover);
428
+ border-color: var(--border-medium);
429
+ transform: translateY(-3px);
430
+ box-shadow: var(--elevation-3);
431
+ }
432
+
433
+ .stat-card[data-accent="cyan"]::before {
434
+ background: var(--accent-cyan);
435
+ }
436
+
437
+ .stat-card[data-accent="purple"]::before {
438
+ background: var(--accent-purple);
439
+ }
440
+
441
+ .stat-card[data-accent="amber"]::before {
442
+ background: var(--accent-amber);
443
+ }
444
+
445
+ .stat-card[data-accent="green"]::before {
446
+ background: var(--accent-green);
447
+ }
448
+
449
+ .stat-card[data-accent="blue"]::before {
450
+ background: var(--accent-blue);
451
+ }
452
+
453
+ .stat-label {
454
+ font-size: 11px;
455
+ font-weight: 600;
456
+ color: var(--text-secondary);
457
+ text-transform: uppercase;
458
+ letter-spacing: 0.8px;
459
+ margin-bottom: 10px;
460
+ }
461
+
462
+ .stat-value {
463
+ font-size: 32px;
464
+ font-weight: 700;
465
+ font-family: var(--font-mono);
466
+ background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
467
+ -webkit-background-clip: text;
468
+ -webkit-text-fill-color: transparent;
469
+ background-clip: text;
470
+ }
471
+
472
+ /* ============================================================
473
+ * Cards & Panels - MD3 Surface Tint
474
+ * ============================================================ */
475
+
476
+ .panel {
477
+ background: var(--bg-card);
478
+ border: 1px solid var(--border-subtle);
479
+ border-radius: var(--radius-lg);
480
+ overflow: hidden;
481
+ box-shadow: var(--elevation-1);
482
+ }
483
+
484
+ .panel-header {
485
+ padding: 18px 24px;
486
+ border-bottom: 1px solid var(--border-subtle);
487
+ display: flex;
488
+ align-items: center;
489
+ justify-content: space-between;
490
+ }
491
+
492
+ .panel-title {
493
+ font-size: 14px;
494
+ font-weight: 600;
495
+ color: var(--text-primary);
496
+ }
497
+
498
+ .panel-body {
499
+ padding: 18px 24px;
500
+ }
501
+
502
+ /* ============================================================
503
+ * Observation Type Badges - MD3 Tonal Chips
504
+ * ============================================================ */
505
+
506
+ .type-badge {
507
+ display: inline-flex;
508
+ align-items: center;
509
+ gap: 4px;
510
+ padding: 3px 10px;
511
+ border-radius: var(--radius-sm);
512
+ font-size: 11px;
513
+ font-weight: 500;
514
+ white-space: nowrap;
515
+ }
516
+
517
+ .type-badge[data-type="session-request"] {
518
+ background: rgba(130, 177, 255, 0.12);
519
+ color: var(--type-session-request);
520
+ }
521
+
522
+ .type-badge[data-type="gotcha"] {
523
+ background: rgba(255, 138, 128, 0.12);
524
+ color: var(--type-gotcha);
525
+ }
526
+
527
+ .type-badge[data-type="problem-solution"] {
528
+ background: rgba(255, 213, 79, 0.12);
529
+ color: var(--type-problem-solution);
530
+ }
531
+
532
+ .type-badge[data-type="how-it-works"] {
533
+ background: rgba(130, 177, 255, 0.12);
534
+ color: var(--type-how-it-works);
535
+ }
536
+
537
+ .type-badge[data-type="what-changed"] {
538
+ background: rgba(105, 240, 174, 0.12);
539
+ color: var(--type-what-changed);
540
+ }
541
+
542
+ .type-badge[data-type="discovery"] {
543
+ background: rgba(208, 188, 255, 0.12);
544
+ color: var(--type-discovery);
545
+ }
546
+
547
+ .type-badge[data-type="why-it-exists"] {
548
+ background: rgba(255, 171, 64, 0.12);
549
+ color: var(--type-why-it-exists);
550
+ }
551
+
552
+ .type-badge[data-type="decision"] {
553
+ background: rgba(179, 136, 255, 0.12);
554
+ color: var(--type-decision);
555
+ }
556
+
557
+ .type-badge[data-type="trade-off"] {
558
+ background: rgba(144, 164, 174, 0.12);
559
+ color: var(--type-trade-off);
560
+ }
561
+
562
+ /* Type icons */
563
+ .type-icon::before {
564
+ font-size: 10px;
565
+ }
566
+
567
+ .type-icon[data-type="session-request"]::before { content: '\1F3AF'; }
568
+ .type-icon[data-type="gotcha"]::before { content: '\1F534'; }
569
+ .type-icon[data-type="problem-solution"]::before { content: '\1F7E1'; }
570
+ .type-icon[data-type="how-it-works"]::before { content: '\1F535'; }
571
+ .type-icon[data-type="what-changed"]::before { content: '\1F7E2'; }
572
+ .type-icon[data-type="discovery"]::before { content: '\1F7E3'; }
573
+ .type-icon[data-type="why-it-exists"]::before { content: '\1F7E0'; }
574
+ .type-icon[data-type="decision"]::before { content: '\1F7E4'; }
575
+ .type-icon[data-type="trade-off"]::before { content: '\2696\FE0F'; }
576
+
577
+ /* ============================================================
578
+ * Recent Activity List
579
+ * ============================================================ */
580
+
581
+ .activity-list {
582
+ list-style: none;
583
+ }
584
+
585
+ .activity-item {
586
+ display: flex;
587
+ align-items: center;
588
+ gap: 12px;
589
+ padding: 14px 0;
590
+ border-bottom: 1px solid var(--border-subtle);
591
+ transition: background var(--transition-fast);
592
+ }
593
+
594
+ .activity-item:last-child {
595
+ border-bottom: none;
596
+ }
597
+
598
+ .activity-id {
599
+ font-family: var(--font-mono);
600
+ font-size: 12px;
601
+ color: var(--text-muted);
602
+ min-width: 32px;
603
+ }
604
+
605
+ .activity-title {
606
+ flex: 1;
607
+ font-size: 13px;
608
+ color: var(--text-primary);
609
+ white-space: nowrap;
610
+ overflow: hidden;
611
+ text-overflow: ellipsis;
612
+ }
613
+
614
+ .activity-entity {
615
+ font-size: 11px;
616
+ color: var(--text-muted);
617
+ font-family: var(--font-mono);
618
+ }
619
+
620
+ /* ============================================================
621
+ * Knowledge Graph - Cosmic Theme (zditor-inspired)
622
+ * ============================================================ */
623
+
624
+ .graph-layout {
625
+ display: flex;
626
+ gap: 0;
627
+ height: calc(100vh - 140px);
628
+ }
629
+
630
+ #graph-container {
631
+ flex: 1;
632
+ min-width: 0;
633
+ background: radial-gradient(ellipse at 50% 120%, #1a1040 0%, #0B0B14 60%, #06060C 100%);
634
+ border: 1px solid var(--border-subtle);
635
+ border-radius: var(--radius-lg);
636
+ overflow: hidden;
637
+ position: relative;
638
+ }
639
+
640
+ #graph-canvas {
641
+ width: 100%;
642
+ height: 100%;
643
+ }
644
+
645
+ /* Floating graph control panel (zditor-style) */
646
+ .graph-panel {
647
+ position: absolute;
648
+ top: 16px;
649
+ right: 16px;
650
+ width: 260px;
651
+ background: rgba(14, 14, 26, 0.85);
652
+ backdrop-filter: blur(20px);
653
+ -webkit-backdrop-filter: blur(20px);
654
+ border: 1px solid rgba(255, 255, 255, 0.08);
655
+ border-radius: var(--radius-lg);
656
+ z-index: 20;
657
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
658
+ overflow: hidden;
659
+ transition: opacity var(--transition-normal);
660
+ }
661
+
662
+ .graph-panel-tabs {
663
+ display: flex;
664
+ border-bottom: 1px solid rgba(255, 255, 255, 0.06);
665
+ }
666
+
667
+ .gp-tab {
668
+ flex: 1;
669
+ padding: 10px 0;
670
+ border: none;
671
+ background: transparent;
672
+ color: var(--text-muted);
673
+ font-family: var(--font-sans);
674
+ font-size: 10px;
675
+ font-weight: 600;
676
+ letter-spacing: 0.8px;
677
+ text-transform: uppercase;
678
+ cursor: pointer;
679
+ transition: all var(--transition-fast);
680
+ position: relative;
681
+ }
682
+
683
+ .gp-tab:hover {
684
+ color: var(--text-secondary);
685
+ }
686
+
687
+ .gp-tab.active {
688
+ color: var(--accent-purple);
689
+ }
690
+
691
+ .gp-tab.active::after {
692
+ content: '';
693
+ position: absolute;
694
+ bottom: 0;
695
+ left: 20%;
696
+ right: 20%;
697
+ height: 2px;
698
+ background: var(--accent-purple);
699
+ border-radius: 2px 2px 0 0;
700
+ }
701
+
702
+ .gp-content {
703
+ padding: 14px;
704
+ max-height: 400px;
705
+ overflow-y: auto;
706
+ }
707
+
708
+ .gp-content::-webkit-scrollbar {
709
+ width: 4px;
710
+ }
711
+
712
+ .gp-content::-webkit-scrollbar-thumb {
713
+ background: rgba(255,255,255,0.1);
714
+ border-radius: 2px;
715
+ }
716
+
717
+ /* Graph panel search */
718
+ .gp-search {
719
+ width: 100%;
720
+ padding: 8px 12px;
721
+ background: rgba(255, 255, 255, 0.04);
722
+ border: 1px solid rgba(255, 255, 255, 0.06);
723
+ border-radius: var(--radius-sm);
724
+ color: var(--text-primary);
725
+ font-family: var(--font-sans);
726
+ font-size: 12px;
727
+ outline: none;
728
+ transition: border-color var(--transition-fast);
729
+ }
730
+
731
+ .gp-search:focus {
732
+ border-color: var(--accent-purple);
733
+ }
734
+
735
+ .gp-search::placeholder {
736
+ color: var(--text-muted);
737
+ }
738
+
739
+ /* Graph panel stats */
740
+ .gp-stat-row {
741
+ display: flex;
742
+ justify-content: space-between;
743
+ align-items: center;
744
+ padding: 6px 0;
745
+ }
746
+
747
+ .gp-stat-label {
748
+ font-size: 12px;
749
+ color: var(--text-secondary);
750
+ }
751
+
752
+ .gp-stat-value {
753
+ font-size: 13px;
754
+ font-weight: 600;
755
+ font-family: var(--font-mono);
756
+ color: var(--text-primary);
757
+ }
758
+
759
+ /* Graph panel legend items */
760
+ .gp-legend-item {
761
+ display: flex;
762
+ align-items: center;
763
+ gap: 10px;
764
+ padding: 6px 8px;
765
+ border-radius: var(--radius-sm);
766
+ cursor: pointer;
767
+ transition: background var(--transition-fast);
768
+ }
769
+
770
+ .gp-legend-item:hover {
771
+ background: rgba(255, 255, 255, 0.04);
772
+ }
773
+
774
+ .gp-legend-dot {
775
+ width: 10px;
776
+ height: 10px;
777
+ border-radius: 50%;
778
+ flex-shrink: 0;
779
+ }
780
+
781
+ .gp-legend-name {
782
+ flex: 1;
783
+ font-size: 12px;
784
+ color: var(--text-secondary);
785
+ white-space: nowrap;
786
+ overflow: hidden;
787
+ text-overflow: ellipsis;
788
+ }
789
+
790
+ .gp-legend-count {
791
+ font-size: 10px;
792
+ font-family: var(--font-mono);
793
+ color: var(--text-muted);
794
+ }
795
+
796
+ /* Graph panel zoom controls */
797
+ .gp-zoom-controls {
798
+ display: flex;
799
+ gap: 4px;
800
+ margin-top: 10px;
801
+ padding-top: 10px;
802
+ border-top: 1px solid rgba(255, 255, 255, 0.04);
803
+ }
804
+
805
+ .gp-zoom-btn {
806
+ flex: 1;
807
+ padding: 6px;
808
+ border: 1px solid rgba(255, 255, 255, 0.06);
809
+ background: rgba(255, 255, 255, 0.03);
810
+ color: var(--text-secondary);
811
+ border-radius: var(--radius-sm);
812
+ cursor: pointer;
813
+ font-size: 14px;
814
+ font-weight: 600;
815
+ transition: all var(--transition-fast);
816
+ }
817
+
818
+ .gp-zoom-btn:hover {
819
+ background: rgba(208, 188, 255, 0.1);
820
+ border-color: rgba(208, 188, 255, 0.2);
821
+ color: var(--accent-purple);
822
+ }
823
+
824
+ /* Node detail drawer (bottom overlay) */
825
+ .graph-detail-drawer {
826
+ position: absolute;
827
+ bottom: 0;
828
+ left: 0;
829
+ right: 0;
830
+ max-height: 45%;
831
+ background: rgba(14, 14, 26, 0.9);
832
+ backdrop-filter: blur(20px);
833
+ -webkit-backdrop-filter: blur(20px);
834
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
835
+ border-radius: var(--radius-lg) var(--radius-lg) 0 0;
836
+ padding: 0;
837
+ overflow-y: auto;
838
+ z-index: 15;
839
+ transform: translateY(100%);
840
+ transition: transform var(--transition-emphasized);
841
+ }
842
+
843
+ .graph-detail-drawer.open {
844
+ transform: translateY(0);
845
+ }
846
+
847
+ .graph-detail-drawer .graph-detail-header {
848
+ position: sticky;
849
+ top: 0;
850
+ background: rgba(14, 14, 26, 0.95);
851
+ z-index: 1;
852
+ }
853
+
854
+ .graph-detail {
855
+ width: 0;
856
+ display: none;
857
+ }
858
+
859
+ .graph-detail-header {
860
+ display: flex;
861
+ align-items: center;
862
+ gap: 14px;
863
+ padding: 20px 24px;
864
+ border-bottom: 1px solid rgba(255, 255, 255, 0.06);
865
+ }
866
+
867
+ .graph-detail-dot {
868
+ width: 16px;
869
+ height: 16px;
870
+ border-radius: 50%;
871
+ flex-shrink: 0;
872
+ }
873
+
874
+ .graph-detail-name {
875
+ font-size: 16px;
876
+ font-weight: 600;
877
+ color: #FFFFFF;
878
+ }
879
+
880
+ .graph-detail-type {
881
+ font-size: 12px;
882
+ color: #CAC4D0;
883
+ font-family: var(--font-mono);
884
+ }
885
+
886
+ .graph-detail-section {
887
+ padding: 16px 24px;
888
+ border-bottom: 1px solid rgba(255, 255, 255, 0.04);
889
+ }
890
+
891
+ .graph-detail-section:last-child {
892
+ border-bottom: none;
893
+ }
894
+
895
+ .graph-detail-section h3 {
896
+ font-size: 11px;
897
+ font-weight: 600;
898
+ color: #CAC4D0;
899
+ text-transform: uppercase;
900
+ letter-spacing: 0.8px;
901
+ margin-bottom: 10px;
902
+ display: flex;
903
+ align-items: center;
904
+ gap: 6px;
905
+ }
906
+
907
+ .graph-detail-count {
908
+ font-size: 10px;
909
+ font-weight: 500;
910
+ padding: 2px 8px;
911
+ border-radius: var(--radius-sm);
912
+ background: rgba(208, 188, 255, 0.1);
913
+ color: var(--accent-purple);
914
+ }
915
+
916
+ .graph-obs-item {
917
+ font-size: 12px;
918
+ color: #E6E1E5;
919
+ line-height: 1.6;
920
+ padding: 8px 12px;
921
+ margin-bottom: 6px;
922
+ border-radius: var(--radius-sm);
923
+ background: rgba(255, 255, 255, 0.06);
924
+ border-left: 2px solid var(--accent-purple);
925
+ }
926
+
927
+ .graph-rel-item {
928
+ font-size: 12px;
929
+ color: #E6E1E5;
930
+ padding: 6px 0;
931
+ display: flex;
932
+ align-items: center;
933
+ gap: 8px;
934
+ }
935
+
936
+ .graph-rel-arrow {
937
+ color: var(--accent-purple);
938
+ font-weight: 600;
939
+ }
940
+
941
+ .graph-rel-type {
942
+ font-family: var(--font-mono);
943
+ font-size: 11px;
944
+ color: #D0BCFF;
945
+ padding: 2px 8px;
946
+ background: rgba(255, 255, 255, 0.04);
947
+ border-radius: var(--radius-sm);
948
+ }
949
+
950
+ .graph-detail-muted {
951
+ font-size: 12px;
952
+ color: var(--text-muted);
953
+ font-style: italic;
954
+ }
955
+
956
+ .graph-tooltip {
957
+ position: absolute;
958
+ background: rgba(14, 14, 26, 0.92);
959
+ backdrop-filter: blur(12px);
960
+ border: 1px solid rgba(208, 188, 255, 0.15);
961
+ border-radius: var(--radius-md);
962
+ padding: 12px 16px;
963
+ font-size: 13px;
964
+ pointer-events: none;
965
+ opacity: 0;
966
+ transition: opacity var(--transition-fast);
967
+ z-index: 100;
968
+ max-width: 300px;
969
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
970
+ }
971
+
972
+ .graph-tooltip.visible {
973
+ opacity: 1;
974
+ }
975
+
976
+ .graph-tooltip-name {
977
+ font-weight: 600;
978
+ color: var(--accent-purple);
979
+ margin-bottom: 4px;
980
+ }
981
+
982
+ .graph-tooltip-type {
983
+ font-size: 11px;
984
+ color: var(--text-muted);
985
+ }
986
+
987
+ /* Hide text for graph-detail-empty since we use drawer now */
988
+ .graph-detail-empty {
989
+ display: none;
990
+ }
991
+
992
+ /* ============================================================
993
+ * Observations Page
994
+ * ============================================================ */
995
+
996
+ .search-bar {
997
+ display: flex;
998
+ gap: 12px;
999
+ margin-bottom: 24px;
1000
+ }
1001
+
1002
+ .search-input {
1003
+ flex: 1;
1004
+ background: var(--bg-card);
1005
+ border: 1px solid var(--border-subtle);
1006
+ border-radius: var(--radius-md);
1007
+ padding: 12px 18px;
1008
+ color: var(--text-primary);
1009
+ font-family: var(--font-sans);
1010
+ font-size: 14px;
1011
+ outline: none;
1012
+ transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
1013
+ }
1014
+
1015
+ .search-input:focus {
1016
+ border-color: var(--accent-purple);
1017
+ box-shadow: var(--glow-purple);
1018
+ }
1019
+
1020
+ .search-input::placeholder {
1021
+ color: var(--text-muted);
1022
+ }
1023
+
1024
+ .filter-btn {
1025
+ background: var(--bg-card);
1026
+ border: 1px solid var(--border-subtle);
1027
+ border-radius: var(--radius-pill);
1028
+ padding: 10px 18px;
1029
+ color: var(--text-secondary);
1030
+ cursor: pointer;
1031
+ font-size: 13px;
1032
+ transition: all var(--transition-fast);
1033
+ white-space: nowrap;
1034
+ }
1035
+
1036
+ .filter-btn:hover {
1037
+ background: var(--bg-card-hover);
1038
+ border-color: var(--border-medium);
1039
+ }
1040
+
1041
+ .filter-btn.active {
1042
+ background: rgba(208, 188, 255, 0.1);
1043
+ border-color: var(--accent-purple);
1044
+ color: var(--accent-purple);
1045
+ }
1046
+
1047
+ .obs-grid {
1048
+ display: grid;
1049
+ gap: 12px;
1050
+ }
1051
+
1052
+ .obs-card {
1053
+ background: var(--bg-card);
1054
+ border: 1px solid var(--border-subtle);
1055
+ border-left: 3px solid transparent;
1056
+ border-radius: var(--radius-md);
1057
+ padding: 16px 20px;
1058
+ cursor: pointer;
1059
+ transition: all var(--transition-normal);
1060
+ box-shadow: var(--elevation-1);
1061
+ }
1062
+
1063
+ .obs-card:hover {
1064
+ background: var(--bg-card-hover);
1065
+ border-color: var(--border-medium);
1066
+ border-left-color: var(--accent-purple);
1067
+ box-shadow: var(--elevation-2);
1068
+ }
1069
+
1070
+ .obs-card.expanded {
1071
+ border-left-color: var(--accent-purple);
1072
+ box-shadow: var(--elevation-2);
1073
+ }
1074
+
1075
+ .obs-card-header {
1076
+ display: flex;
1077
+ align-items: center;
1078
+ gap: 8px;
1079
+ margin-bottom: 8px;
1080
+ }
1081
+
1082
+ .obs-card-id {
1083
+ font-family: var(--font-mono);
1084
+ font-size: 12px;
1085
+ color: var(--text-muted);
1086
+ }
1087
+
1088
+ .obs-card-title {
1089
+ font-size: 14px;
1090
+ font-weight: 500;
1091
+ color: var(--text-primary);
1092
+ flex: 1;
1093
+ }
1094
+
1095
+ .obs-card-meta {
1096
+ display: flex;
1097
+ gap: 12px;
1098
+ font-size: 12px;
1099
+ color: var(--text-muted);
1100
+ }
1101
+
1102
+ .obs-card-narrative {
1103
+ font-size: 13px;
1104
+ color: var(--text-secondary);
1105
+ line-height: 1.6;
1106
+ margin-top: 8px;
1107
+ white-space: pre-wrap;
1108
+ word-break: break-word;
1109
+ }
1110
+
1111
+ .obs-card-facts {
1112
+ display: flex;
1113
+ flex-wrap: wrap;
1114
+ gap: 6px;
1115
+ margin-top: 8px;
1116
+ }
1117
+
1118
+ .fact-tag {
1119
+ background: rgba(208, 188, 255, 0.06);
1120
+ border: 1px solid rgba(208, 188, 255, 0.12);
1121
+ border-radius: var(--radius-sm);
1122
+ padding: 3px 10px;
1123
+ font-size: 11px;
1124
+ font-family: var(--font-mono);
1125
+ color: var(--accent-purple);
1126
+ }
1127
+
1128
+ /* ============================================================
1129
+ * Retention Page
1130
+ * ============================================================ */
1131
+
1132
+ .retention-summary {
1133
+ display: grid;
1134
+ grid-template-columns: repeat(4, 1fr);
1135
+ gap: 16px;
1136
+ margin-bottom: 32px;
1137
+ }
1138
+
1139
+ .retention-table {
1140
+ width: 100%;
1141
+ border-collapse: collapse;
1142
+ }
1143
+
1144
+ .retention-table th {
1145
+ text-align: left;
1146
+ font-size: 11px;
1147
+ font-weight: 600;
1148
+ color: var(--text-muted);
1149
+ text-transform: uppercase;
1150
+ letter-spacing: 0.5px;
1151
+ padding: 14px 18px;
1152
+ border-bottom: 1px solid var(--border-subtle);
1153
+ }
1154
+
1155
+ .retention-table td {
1156
+ padding: 14px 18px;
1157
+ font-size: 13px;
1158
+ border-bottom: 1px solid var(--border-subtle);
1159
+ }
1160
+
1161
+ .retention-table tr:hover td {
1162
+ background: rgba(208, 188, 255, 0.02);
1163
+ }
1164
+
1165
+ .score-bar {
1166
+ width: 80px;
1167
+ height: 6px;
1168
+ background: rgba(255, 255, 255, 0.04);
1169
+ border-radius: 3px;
1170
+ overflow: hidden;
1171
+ display: inline-block;
1172
+ vertical-align: middle;
1173
+ margin-right: 8px;
1174
+ }
1175
+
1176
+ .score-bar-fill {
1177
+ height: 100%;
1178
+ border-radius: 3px;
1179
+ transition: width var(--transition-normal);
1180
+ }
1181
+
1182
+ .immune-badge {
1183
+ display: inline-flex;
1184
+ align-items: center;
1185
+ gap: 4px;
1186
+ padding: 3px 8px;
1187
+ border-radius: var(--radius-sm);
1188
+ font-size: 10px;
1189
+ font-weight: 600;
1190
+ background: rgba(105, 240, 174, 0.1);
1191
+ color: var(--accent-green);
1192
+ }
1193
+
1194
+ /* ============================================================
1195
+ * Empty State
1196
+ * ============================================================ */
1197
+
1198
+ .empty-state {
1199
+ display: flex;
1200
+ flex-direction: column;
1201
+ align-items: center;
1202
+ justify-content: center;
1203
+ padding: 80px 20px;
1204
+ text-align: center;
1205
+ }
1206
+
1207
+ .empty-state-icon {
1208
+ font-size: 48px;
1209
+ margin-bottom: 16px;
1210
+ opacity: 0.4;
1211
+ }
1212
+
1213
+ .empty-state-title {
1214
+ font-size: 18px;
1215
+ font-weight: 600;
1216
+ color: var(--text-secondary);
1217
+ margin-bottom: 8px;
1218
+ }
1219
+
1220
+ .empty-state-desc {
1221
+ font-size: 14px;
1222
+ color: var(--text-muted);
1223
+ max-width: 400px;
1224
+ }
1225
+
1226
+ /* ============================================================
1227
+ * Loading
1228
+ * ============================================================ */
1229
+
1230
+ .loading {
1231
+ display: flex;
1232
+ align-items: center;
1233
+ justify-content: center;
1234
+ padding: 60px;
1235
+ }
1236
+
1237
+ .spinner {
1238
+ width: 28px;
1239
+ height: 28px;
1240
+ border: 2px solid var(--border-subtle);
1241
+ border-top-color: var(--accent-purple);
1242
+ border-radius: 50%;
1243
+ animation: spin 0.8s linear infinite;
1244
+ }
1245
+
1246
+ @keyframes spin {
1247
+ to {
1248
+ transform: rotate(360deg);
1249
+ }
1250
+ }
1251
+
1252
+ /* ============================================================
1253
+ * Responsive
1254
+ * ============================================================ */
1255
+
1256
+ @media (max-width: 900px) {
1257
+ .stats-grid,
1258
+ .retention-summary {
1259
+ grid-template-columns: repeat(2, 1fr);
1260
+ }
1261
+ }
1262
+
1263
+ @media (max-width: 600px) {
1264
+ .stats-grid,
1265
+ .retention-summary {
1266
+ grid-template-columns: 1fr;
1267
+ }
1268
+
1269
+ .page {
1270
+ padding: 16px;
1271
+ }
1272
+ }
1273
+
1274
+ /* ============================================================
1275
+ * Project Switcher - MD3 Dropdown
1276
+ * ============================================================ */
1277
+
1278
+ .project-switcher {
1279
+ padding: 0 12px 20px;
1280
+ position: relative;
1281
+ }
1282
+
1283
+ .project-trigger {
1284
+ width: 100%;
1285
+ display: flex;
1286
+ align-items: center;
1287
+ gap: 10px;
1288
+ padding: 10px 14px;
1289
+ background: var(--bg-card);
1290
+ border: 1px solid var(--border-subtle);
1291
+ border-radius: var(--radius-md);
1292
+ cursor: pointer;
1293
+ transition: all var(--transition-fast);
1294
+ font-family: var(--font-sans);
1295
+ color: var(--text-primary);
1296
+ }
1297
+
1298
+ .project-trigger:hover {
1299
+ background: var(--bg-card-hover);
1300
+ border-color: var(--border-medium);
1301
+ }
1302
+
1303
+ .project-trigger:focus {
1304
+ outline: none;
1305
+ border-color: var(--accent-purple);
1306
+ box-shadow: var(--glow-purple);
1307
+ }
1308
+
1309
+ .project-dot {
1310
+ width: 8px;
1311
+ height: 8px;
1312
+ border-radius: 50%;
1313
+ background: var(--accent-green);
1314
+ flex-shrink: 0;
1315
+ box-shadow: 0 0 8px rgba(105, 240, 174, 0.4);
1316
+ }
1317
+
1318
+ .project-name {
1319
+ flex: 1;
1320
+ font-size: 13px;
1321
+ font-weight: 500;
1322
+ white-space: nowrap;
1323
+ overflow: hidden;
1324
+ text-overflow: ellipsis;
1325
+ text-align: left;
1326
+ }
1327
+
1328
+ .project-count {
1329
+ font-size: 11px;
1330
+ font-family: var(--font-mono);
1331
+ color: var(--text-muted);
1332
+ background: var(--bg-surface);
1333
+ padding: 2px 8px;
1334
+ border-radius: var(--radius-sm);
1335
+ flex-shrink: 0;
1336
+ }
1337
+
1338
+ .project-chevron {
1339
+ flex-shrink: 0;
1340
+ color: var(--text-muted);
1341
+ transition: transform var(--transition-fast);
1342
+ }
1343
+
1344
+ .project-switcher.open .project-chevron {
1345
+ transform: rotate(180deg);
1346
+ }
1347
+
1348
+ /* Dropdown popover */
1349
+ .project-dropdown {
1350
+ display: none;
1351
+ position: absolute;
1352
+ top: calc(100% - 12px);
1353
+ left: 12px;
1354
+ right: 12px;
1355
+ background: var(--bg-card);
1356
+ border: 1px solid var(--border-medium);
1357
+ border-radius: var(--radius-md);
1358
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
1359
+ z-index: 100;
1360
+ overflow: hidden;
1361
+ animation: dropdownIn 0.2s cubic-bezier(0.2, 0, 0, 1);
1362
+ }
1363
+
1364
+ .project-switcher.open .project-dropdown {
1365
+ display: block;
1366
+ }
1367
+
1368
+ @keyframes dropdownIn {
1369
+ from { opacity: 0; transform: translateY(-6px) scale(0.97); }
1370
+ to { opacity: 1; transform: translateY(0) scale(1); }
1371
+ }
1372
+
1373
+ .project-dropdown-header {
1374
+ padding: 10px;
1375
+ border-bottom: 1px solid var(--border-subtle);
1376
+ }
1377
+
1378
+ .project-search {
1379
+ width: 100%;
1380
+ padding: 8px 12px;
1381
+ background: var(--bg-surface);
1382
+ border: 1px solid var(--border-subtle);
1383
+ border-radius: var(--radius-sm);
1384
+ color: var(--text-primary);
1385
+ font-family: var(--font-sans);
1386
+ font-size: 12px;
1387
+ outline: none;
1388
+ transition: border-color var(--transition-fast);
1389
+ }
1390
+
1391
+ .project-search:focus {
1392
+ border-color: var(--accent-purple);
1393
+ }
1394
+
1395
+ .project-search::placeholder {
1396
+ color: var(--text-muted);
1397
+ }
1398
+
1399
+ .project-dropdown-list {
1400
+ max-height: 240px;
1401
+ overflow-y: auto;
1402
+ padding: 4px;
1403
+ }
1404
+
1405
+ .project-item {
1406
+ display: flex;
1407
+ align-items: center;
1408
+ gap: 10px;
1409
+ padding: 10px 12px;
1410
+ border-radius: var(--radius-sm);
1411
+ cursor: pointer;
1412
+ transition: all var(--transition-fast);
1413
+ border: none;
1414
+ background: none;
1415
+ width: 100%;
1416
+ font-family: var(--font-sans);
1417
+ color: var(--text-primary);
1418
+ }
1419
+
1420
+ .project-item:hover {
1421
+ background: rgba(208, 188, 255, 0.06);
1422
+ }
1423
+
1424
+ .project-item.active {
1425
+ background: rgba(208, 188, 255, 0.1);
1426
+ }
1427
+
1428
+ .project-item-dot {
1429
+ width: 6px;
1430
+ height: 6px;
1431
+ border-radius: 50%;
1432
+ background: var(--text-muted);
1433
+ flex-shrink: 0;
1434
+ }
1435
+
1436
+ .project-item.active .project-item-dot {
1437
+ background: var(--accent-green);
1438
+ box-shadow: 0 0 6px rgba(105, 240, 174, 0.4);
1439
+ }
1440
+
1441
+ .project-item-name {
1442
+ flex: 1;
1443
+ font-size: 12px;
1444
+ font-weight: 500;
1445
+ text-align: left;
1446
+ white-space: nowrap;
1447
+ overflow: hidden;
1448
+ text-overflow: ellipsis;
1449
+ }
1450
+
1451
+ .project-item-id {
1452
+ font-size: 10px;
1453
+ color: var(--text-muted);
1454
+ font-family: var(--font-mono);
1455
+ white-space: nowrap;
1456
+ overflow: hidden;
1457
+ text-overflow: ellipsis;
1458
+ max-width: 100px;
1459
+ }
1460
+
1461
+ .project-item-count {
1462
+ font-size: 10px;
1463
+ font-family: var(--font-mono);
1464
+ color: var(--text-muted);
1465
+ background: var(--bg-surface);
1466
+ padding: 2px 6px;
1467
+ border-radius: 4px;
1468
+ flex-shrink: 0;
1469
+ }
1470
+
1471
+ [data-theme="light"] .project-dropdown {
1472
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
1473
+ }
1474
+
1475
+ [data-theme="light"] .project-item:hover {
1476
+ background: rgba(103, 80, 164, 0.06);
1477
+ }
1478
+
1479
+ [data-theme="light"] .project-item.active {
1480
+ background: rgba(103, 80, 164, 0.08);
1481
+ }
1482
+
1483
+ /* ============================================================
1484
+ * Export Button
1485
+ * ============================================================ */
1486
+
1487
+ .export-btn {
1488
+ display: flex;
1489
+ align-items: center;
1490
+ gap: 6px;
1491
+ padding: 10px 18px;
1492
+ background: var(--bg-card);
1493
+ border: 1px solid var(--border-subtle);
1494
+ border-radius: var(--radius-pill);
1495
+ color: var(--text-secondary);
1496
+ font-size: 13px;
1497
+ font-family: var(--font-sans);
1498
+ cursor: pointer;
1499
+ transition: all var(--transition-normal);
1500
+ }
1501
+
1502
+ .export-btn:hover {
1503
+ background: rgba(208, 188, 255, 0.08);
1504
+ border-color: var(--accent-purple);
1505
+ color: var(--accent-purple);
1506
+ box-shadow: var(--glow-purple);
1507
+ }
1508
+
1509
+ /* ============================================================
1510
+ * Observation Card Enhancements
1511
+ * ============================================================ */
1512
+
1513
+ .obs-expand-icon {
1514
+ margin-left: auto;
1515
+ font-size: 10px;
1516
+ color: var(--text-muted);
1517
+ transition: transform var(--transition-normal);
1518
+ flex-shrink: 0;
1519
+ }
1520
+
1521
+ .obs-card:hover .obs-expand-icon {
1522
+ color: var(--text-secondary);
1523
+ }
1524
+
1525
+ .obs-detail {
1526
+ overflow: hidden;
1527
+ transition: max-height 0.3s cubic-bezier(0.2, 0, 0, 1), opacity 0.3s cubic-bezier(0.2, 0, 0, 1);
1528
+ }
1529
+
1530
+ .obs-detail-inner {
1531
+ margin-top: 12px;
1532
+ padding-top: 12px;
1533
+ border-top: 1px solid var(--border-subtle);
1534
+ }
1535
+
1536
+ /* Batch action toolbar */
1537
+ .batch-toolbar {
1538
+ display: flex;
1539
+ align-items: center;
1540
+ gap: 10px;
1541
+ padding: 12px 18px;
1542
+ background: var(--bg-card);
1543
+ border: 1px solid var(--border-subtle);
1544
+ border-radius: var(--radius-md);
1545
+ margin-bottom: 12px;
1546
+ animation: fadeIn 0.2s cubic-bezier(0.2, 0, 0, 1);
1547
+ }
1548
+
1549
+ .batch-toolbar .batch-count {
1550
+ font-size: 12px;
1551
+ color: var(--text-secondary);
1552
+ flex: 1;
1553
+ }
1554
+
1555
+ .batch-toolbar button {
1556
+ padding: 8px 16px;
1557
+ border-radius: var(--radius-sm);
1558
+ font-size: 12px;
1559
+ font-family: var(--font-sans);
1560
+ cursor: pointer;
1561
+ transition: all var(--transition-fast);
1562
+ border: 1px solid;
1563
+ }
1564
+
1565
+ .batch-toolbar .batch-delete-btn {
1566
+ background: rgba(255, 138, 128, 0.1);
1567
+ border-color: rgba(255, 138, 128, 0.3);
1568
+ color: var(--accent-red);
1569
+ }
1570
+
1571
+ .batch-toolbar .batch-delete-btn:hover {
1572
+ background: rgba(255, 138, 128, 0.2);
1573
+ border-color: var(--accent-red);
1574
+ }
1575
+
1576
+ .batch-toolbar .batch-cancel-btn {
1577
+ background: transparent;
1578
+ border-color: var(--border-medium);
1579
+ color: var(--text-secondary);
1580
+ }
1581
+
1582
+ .batch-toolbar .batch-cancel-btn:hover {
1583
+ border-color: var(--text-secondary);
1584
+ color: var(--text-primary);
1585
+ }
1586
+
1587
+ /* Low quality indicator */
1588
+ .obs-card.low-quality {
1589
+ border-left: 3px solid var(--accent-amber);
1590
+ opacity: 0.7;
1591
+ }
1592
+
1593
+ .obs-card.low-quality:hover {
1594
+ opacity: 1;
1595
+ }
1596
+
1597
+ .low-quality-badge {
1598
+ font-size: 9px;
1599
+ padding: 2px 8px;
1600
+ border-radius: var(--radius-sm);
1601
+ background: rgba(255, 213, 79, 0.12);
1602
+ color: var(--accent-amber);
1603
+ font-weight: 600;
1604
+ text-transform: uppercase;
1605
+ letter-spacing: 0.5px;
1606
+ }
1607
+
1608
+ /* Batch select checkbox */
1609
+ .obs-checkbox {
1610
+ appearance: none;
1611
+ position: relative;
1612
+ width: 18px;
1613
+ height: 18px;
1614
+ border: 2px solid var(--border-medium);
1615
+ border-radius: var(--radius-sm);
1616
+ background: transparent;
1617
+ cursor: pointer;
1618
+ transition: all var(--transition-fast);
1619
+ flex-shrink: 0;
1620
+ }
1621
+
1622
+ .obs-checkbox:checked {
1623
+ background: var(--accent-purple);
1624
+ border-color: var(--accent-purple);
1625
+ }
1626
+
1627
+ .obs-checkbox:checked::after {
1628
+ content: '\2713';
1629
+ position: absolute;
1630
+ top: 50%;
1631
+ left: 50%;
1632
+ transform: translate(-50%, -50%);
1633
+ font-size: 11px;
1634
+ color: #0B0B14;
1635
+ font-weight: bold;
1636
+ line-height: 1;
1637
+ }
1638
+
1639
+ .obs-detail-section {
1640
+ margin-bottom: 12px;
1641
+ }
1642
+
1643
+ .obs-detail-section label {
1644
+ display: block;
1645
+ font-size: 11px;
1646
+ font-weight: 600;
1647
+ color: var(--text-muted);
1648
+ text-transform: uppercase;
1649
+ letter-spacing: 0.5px;
1650
+ margin-bottom: 6px;
1651
+ }
1652
+
1653
+ .obs-detail-section .obs-card-narrative {
1654
+ -webkit-line-clamp: unset;
1655
+ line-clamp: unset;
1656
+ white-space: pre-wrap;
1657
+ max-height: none;
1658
+ }
1659
+
1660
+ /* Tag variants */
1661
+ .concept-tag {
1662
+ background: rgba(208, 188, 255, 0.08) !important;
1663
+ border-color: rgba(208, 188, 255, 0.15) !important;
1664
+ color: var(--accent-purple) !important;
1665
+ }
1666
+
1667
+ .file-tag {
1668
+ background: rgba(130, 177, 255, 0.08) !important;
1669
+ border-color: rgba(130, 177, 255, 0.15) !important;
1670
+ color: var(--accent-blue) !important;
1671
+ font-family: var(--font-mono);
1672
+ font-size: 11px !important;
1673
+ }
1674
+
1675
+ /* Delete Button */
1676
+ .obs-detail-actions {
1677
+ display: flex;
1678
+ justify-content: flex-end;
1679
+ margin-top: 12px;
1680
+ padding-top: 8px;
1681
+ border-top: 1px solid var(--border-subtle);
1682
+ }
1683
+
1684
+ .delete-btn {
1685
+ display: flex;
1686
+ align-items: center;
1687
+ gap: 5px;
1688
+ padding: 8px 14px;
1689
+ background: transparent;
1690
+ border: 1px solid rgba(255, 138, 128, 0.2);
1691
+ border-radius: var(--radius-sm);
1692
+ color: var(--accent-red);
1693
+ font-size: 12px;
1694
+ font-family: var(--font-sans);
1695
+ cursor: pointer;
1696
+ transition: all var(--transition-fast);
1697
+ opacity: 0.7;
1698
+ }
1699
+
1700
+ .delete-btn:hover {
1701
+ background: rgba(255, 138, 128, 0.1);
1702
+ border-color: var(--accent-red);
1703
+ opacity: 1;
1704
+ }
1705
+
1706
+ /* Search highlight */
1707
+ mark {
1708
+ background: rgba(255, 213, 79, 0.2);
1709
+ color: inherit;
1710
+ padding: 1px 3px;
1711
+ border-radius: 3px;
1712
+ font-weight: 600;
1713
+ }
1714
+
1715
+ [data-theme="light"] mark {
1716
+ background: rgba(255, 213, 79, 0.35);
1717
+ }
1718
+
1719
+ /* ============================================================
1720
+ * Team Page
1721
+ * ============================================================ */
1722
+
1723
+ .team-header {
1724
+ display: flex;
1725
+ align-items: center;
1726
+ justify-content: space-between;
1727
+ margin-bottom: 32px;
1728
+ }
1729
+
1730
+ .team-header-left {
1731
+ display: flex;
1732
+ align-items: center;
1733
+ gap: 14px;
1734
+ }
1735
+
1736
+ .team-header-icon {
1737
+ width: 44px;
1738
+ height: 44px;
1739
+ border-radius: var(--radius-md);
1740
+ background: rgba(128, 216, 255, 0.08);
1741
+ display: flex;
1742
+ align-items: center;
1743
+ justify-content: center;
1744
+ color: var(--accent-cyan);
1745
+ font-size: 22px;
1746
+ }
1747
+
1748
+ .team-header-right {
1749
+ display: flex;
1750
+ align-items: center;
1751
+ gap: 10px;
1752
+ }
1753
+
1754
+ .team-refresh-time {
1755
+ font-size: 11px;
1756
+ color: var(--text-muted);
1757
+ font-family: var(--font-mono);
1758
+ }
1759
+
1760
+ .team-refresh-btn {
1761
+ height: 34px;
1762
+ padding: 0 14px;
1763
+ border-radius: var(--radius-pill);
1764
+ border: 1px solid var(--border-medium);
1765
+ background: var(--bg-card);
1766
+ color: var(--text-secondary);
1767
+ cursor: pointer;
1768
+ font-size: 12px;
1769
+ font-weight: 500;
1770
+ font-family: var(--font-sans);
1771
+ display: flex;
1772
+ align-items: center;
1773
+ gap: 6px;
1774
+ transition: all var(--transition-fast);
1775
+ }
1776
+
1777
+ .team-refresh-btn:hover {
1778
+ background: var(--bg-card-hover);
1779
+ border-color: var(--accent-cyan);
1780
+ color: var(--text-primary);
1781
+ }
1782
+
1783
+ .team-stat-icon {
1784
+ width: 36px;
1785
+ height: 36px;
1786
+ border-radius: var(--radius-sm);
1787
+ display: flex;
1788
+ align-items: center;
1789
+ justify-content: center;
1790
+ font-size: 18px;
1791
+ margin-bottom: 12px;
1792
+ }
1793
+
1794
+ .stat-card[data-accent="cyan"] .team-stat-icon {
1795
+ background: rgba(128, 216, 255, 0.1);
1796
+ color: var(--accent-cyan);
1797
+ }
1798
+
1799
+ .stat-card[data-accent="amber"] .team-stat-icon {
1800
+ background: rgba(255, 213, 79, 0.1);
1801
+ color: var(--accent-amber);
1802
+ }
1803
+
1804
+ .stat-card[data-accent="purple"] .team-stat-icon {
1805
+ background: rgba(208, 188, 255, 0.1);
1806
+ color: var(--accent-purple);
1807
+ }
1808
+
1809
+ .stat-card[data-accent="green"] .team-stat-icon {
1810
+ background: rgba(105, 240, 174, 0.1);
1811
+ color: var(--accent-green);
1812
+ }
1813
+
1814
+ .team-stat-sub {
1815
+ font-size: 11px;
1816
+ color: var(--text-muted);
1817
+ margin-top: 4px;
1818
+ font-weight: 400;
1819
+ }
1820
+
1821
+ .team-grid {
1822
+ display: grid;
1823
+ grid-template-columns: 1fr 1fr;
1824
+ gap: 16px;
1825
+ margin-bottom: 16px;
1826
+ }
1827
+
1828
+ .team-agent-row {
1829
+ display: flex;
1830
+ align-items: center;
1831
+ gap: 12px;
1832
+ padding: 12px 0;
1833
+ border-bottom: 1px solid var(--border-subtle);
1834
+ transition: opacity var(--transition-fast);
1835
+ }
1836
+
1837
+ .team-agent-row:last-child {
1838
+ border-bottom: none;
1839
+ }
1840
+
1841
+ .team-agent-row.inactive {
1842
+ opacity: 0.4;
1843
+ }
1844
+
1845
+ .team-agent-status {
1846
+ width: 8px;
1847
+ height: 8px;
1848
+ border-radius: 50%;
1849
+ flex-shrink: 0;
1850
+ }
1851
+
1852
+ .team-agent-status.active {
1853
+ background: var(--accent-green);
1854
+ box-shadow: 0 0 6px rgba(105, 240, 174, 0.4);
1855
+ }
1856
+
1857
+ .team-agent-status.offline {
1858
+ background: var(--text-muted);
1859
+ }
1860
+
1861
+ .team-agent-info {
1862
+ flex: 1;
1863
+ min-width: 0;
1864
+ }
1865
+
1866
+ .team-agent-name {
1867
+ font-size: 13px;
1868
+ font-weight: 600;
1869
+ color: var(--text-primary);
1870
+ margin-bottom: 2px;
1871
+ }
1872
+
1873
+ .team-agent-meta {
1874
+ font-size: 11px;
1875
+ color: var(--text-muted);
1876
+ display: flex;
1877
+ align-items: center;
1878
+ gap: 6px;
1879
+ flex-wrap: wrap;
1880
+ }
1881
+
1882
+ .team-agent-time {
1883
+ font-size: 10px;
1884
+ color: var(--text-muted);
1885
+ margin-top: 3px;
1886
+ }
1887
+
1888
+ .team-cap-tag {
1889
+ font-size: 10px;
1890
+ padding: 1px 6px;
1891
+ background: rgba(208, 188, 255, 0.08);
1892
+ border: 1px solid rgba(208, 188, 255, 0.12);
1893
+ border-radius: var(--radius-sm);
1894
+ color: var(--accent-purple);
1895
+ font-family: var(--font-mono);
1896
+ }
1897
+
1898
+ .team-unread-badge {
1899
+ font-size: 10px;
1900
+ font-weight: 700;
1901
+ padding: 2px 8px;
1902
+ border-radius: var(--radius-pill);
1903
+ background: var(--accent-cyan);
1904
+ color: #000;
1905
+ flex-shrink: 0;
1906
+ }
1907
+
1908
+ .team-agent-id {
1909
+ font-size: 10px;
1910
+ color: var(--text-muted);
1911
+ font-family: var(--font-mono);
1912
+ flex-shrink: 0;
1913
+ }
1914
+
1915
+ .team-lock-row {
1916
+ display: flex;
1917
+ align-items: flex-start;
1918
+ gap: 10px;
1919
+ padding: 10px 0;
1920
+ border-bottom: 1px solid var(--border-subtle);
1921
+ }
1922
+
1923
+ .team-lock-row:last-child {
1924
+ border-bottom: none;
1925
+ }
1926
+
1927
+ .team-lock-icon {
1928
+ width: 28px;
1929
+ height: 28px;
1930
+ border-radius: var(--radius-sm);
1931
+ background: rgba(255, 213, 79, 0.08);
1932
+ display: flex;
1933
+ align-items: center;
1934
+ justify-content: center;
1935
+ color: var(--accent-amber);
1936
+ font-size: 14px;
1937
+ flex-shrink: 0;
1938
+ margin-top: 1px;
1939
+ }
1940
+
1941
+ .team-lock-info {
1942
+ flex: 1;
1943
+ min-width: 0;
1944
+ }
1945
+
1946
+ .team-lock-file {
1947
+ font-size: 12px;
1948
+ font-family: var(--font-mono);
1949
+ color: var(--text-primary);
1950
+ word-break: break-all;
1951
+ }
1952
+
1953
+ .team-lock-meta {
1954
+ font-size: 10px;
1955
+ color: var(--text-muted);
1956
+ margin-top: 3px;
1957
+ display: flex;
1958
+ align-items: center;
1959
+ gap: 8px;
1960
+ }
1961
+
1962
+ .team-lock-ttl {
1963
+ font-size: 10px;
1964
+ padding: 1px 6px;
1965
+ border-radius: var(--radius-sm);
1966
+ background: rgba(255, 213, 79, 0.08);
1967
+ color: var(--accent-amber);
1968
+ font-family: var(--font-mono);
1969
+ }
1970
+
1971
+ .team-task-table {
1972
+ width: 100%;
1973
+ border-collapse: collapse;
1974
+ }
1975
+
1976
+ .team-task-table th {
1977
+ text-align: left;
1978
+ font-size: 10px;
1979
+ font-weight: 600;
1980
+ color: var(--text-muted);
1981
+ text-transform: uppercase;
1982
+ letter-spacing: 0.6px;
1983
+ padding: 8px 12px;
1984
+ border-bottom: 1px solid var(--border-medium);
1985
+ }
1986
+
1987
+ .team-task-table td {
1988
+ padding: 10px 12px;
1989
+ font-size: 13px;
1990
+ color: var(--text-primary);
1991
+ border-bottom: 1px solid var(--border-subtle);
1992
+ vertical-align: top;
1993
+ }
1994
+
1995
+ .team-task-table tr:last-child td {
1996
+ border-bottom: none;
1997
+ }
1998
+
1999
+ .team-task-table tr:hover td {
2000
+ background: rgba(255, 255, 255, 0.02);
2001
+ }
2002
+
2003
+ .team-task-status {
2004
+ display: inline-flex;
2005
+ align-items: center;
2006
+ gap: 5px;
2007
+ font-size: 11px;
2008
+ font-weight: 500;
2009
+ padding: 3px 8px;
2010
+ border-radius: var(--radius-sm);
2011
+ }
2012
+
2013
+ .team-task-status[data-status="pending"] {
2014
+ background: rgba(144, 164, 174, 0.1);
2015
+ color: var(--text-muted);
2016
+ }
2017
+
2018
+ .team-task-status[data-status="in_progress"] {
2019
+ background: rgba(255, 213, 79, 0.1);
2020
+ color: var(--accent-amber);
2021
+ }
2022
+
2023
+ .team-task-status[data-status="completed"] {
2024
+ background: rgba(105, 240, 174, 0.1);
2025
+ color: var(--accent-green);
2026
+ }
2027
+
2028
+ .team-task-status[data-status="failed"] {
2029
+ background: rgba(255, 138, 128, 0.1);
2030
+ color: var(--accent-red);
2031
+ }
2032
+
2033
+ .team-task-result {
2034
+ font-size: 11px;
2035
+ color: var(--text-muted);
2036
+ margin-top: 4px;
2037
+ }
2038
+
2039
+ .team-task-id {
2040
+ font-family: var(--font-mono);
2041
+ font-size: 11px;
2042
+ color: var(--text-muted);
2043
+ }
2044
+
2045
+ .team-empty {
2046
+ display: flex;
2047
+ flex-direction: column;
2048
+ align-items: center;
2049
+ justify-content: center;
2050
+ padding: 32px 16px;
2051
+ color: var(--text-muted);
2052
+ gap: 8px;
2053
+ }
2054
+
2055
+ .team-empty-icon {
2056
+ font-size: 28px;
2057
+ opacity: 0.4;
2058
+ }
2059
+
2060
+ .team-empty-text {
2061
+ font-size: 12px;
2062
+ }
2063
+
2064
+ .team-panel-count {
2065
+ font-size: 11px;
2066
+ color: var(--text-muted);
2067
+ font-weight: 400;
2068
+ margin-left: 8px;
2069
+ }
2070
+
2071
+ .team-scrollable {
2072
+ max-height: 420px;
2073
+ overflow-y: auto;
2074
+ }
2075
+
2076
+ /* ============================================================
2077
+ * Overview Page — Memory Control Plane
2078
+ * ============================================================ */
2079
+
2080
+ .overview-project-badge {
2081
+ font-size: 14px;
2082
+ font-weight: 400;
2083
+ color: var(--text-muted);
2084
+ margin-left: 8px;
2085
+ padding: 2px 10px;
2086
+ background: var(--bg-card);
2087
+ border: 1px solid var(--border-subtle);
2088
+ border-radius: 6px;
2089
+ vertical-align: middle;
2090
+ }
2091
+
2092
+ .overview-row {
2093
+ display: flex;
2094
+ gap: 16px;
2095
+ margin-bottom: 16px;
2096
+ }
2097
+
2098
+ .stat-sub {
2099
+ font-size: 11px;
2100
+ color: var(--text-muted);
2101
+ margin-top: 4px;
2102
+ font-weight: 400;
2103
+ }
2104
+
2105
+ /* Source breakdown bar */
2106
+ .source-bar-container {
2107
+ display: flex;
2108
+ flex-direction: column;
2109
+ gap: 12px;
2110
+ }
2111
+
2112
+ .source-bar {
2113
+ display: flex;
2114
+ height: 10px;
2115
+ border-radius: 5px;
2116
+ overflow: hidden;
2117
+ background: rgba(128,128,128,0.08);
2118
+ }
2119
+
2120
+ .source-bar-seg {
2121
+ height: 100%;
2122
+ transition: width var(--transition-normal);
2123
+ }
2124
+
2125
+ .source-legend {
2126
+ display: flex;
2127
+ gap: 20px;
2128
+ flex-wrap: wrap;
2129
+ }
2130
+
2131
+ .source-legend-item {
2132
+ display: flex;
2133
+ align-items: center;
2134
+ gap: 6px;
2135
+ font-size: 12px;
2136
+ color: var(--text-secondary);
2137
+ }
2138
+
2139
+ .source-legend-item strong {
2140
+ font-family: var(--font-mono);
2141
+ font-weight: 600;
2142
+ }
2143
+
2144
+ .source-dot {
2145
+ width: 8px;
2146
+ height: 8px;
2147
+ border-radius: 50%;
2148
+ flex-shrink: 0;
2149
+ }
2150
+
2151
+ /* Retention mini grid */
2152
+ .retention-mini-grid {
2153
+ display: grid;
2154
+ grid-template-columns: repeat(4, 1fr);
2155
+ gap: 12px;
2156
+ text-align: center;
2157
+ }
2158
+
2159
+ .retention-mini-item {
2160
+ display: flex;
2161
+ flex-direction: column;
2162
+ gap: 4px;
2163
+ }
2164
+
2165
+ .retention-mini-value {
2166
+ font-size: 24px;
2167
+ font-weight: 700;
2168
+ font-family: var(--font-mono);
2169
+ }
2170
+
2171
+ .retention-mini-label {
2172
+ font-size: 11px;
2173
+ color: var(--text-muted);
2174
+ font-weight: 500;
2175
+ }
2176
+
2177
+ /* ============================================================
2178
+ * Git Memory Page
2179
+ * ============================================================ */
2180
+
2181
+ .git-hash {
2182
+ font-family: var(--font-mono);
2183
+ font-size: 11px;
2184
+ padding: 2px 8px;
2185
+ background: rgba(105, 240, 174, 0.08);
2186
+ border: 1px solid rgba(105, 240, 174, 0.15);
2187
+ border-radius: var(--radius-sm);
2188
+ color: var(--accent-green);
2189
+ }
2190
+
2191
+ /* ============================================================
2192
+ * Config Provenance Page
2193
+ * ============================================================ */
2194
+
2195
+ .config-matrix {
2196
+ display: flex;
2197
+ flex-direction: column;
2198
+ gap: 8px;
2199
+ margin-bottom: 16px;
2200
+ }
2201
+
2202
+ .config-file-row {
2203
+ display: flex;
2204
+ align-items: center;
2205
+ gap: 10px;
2206
+ padding: 8px 12px;
2207
+ background: var(--bg-surface);
2208
+ border-radius: var(--radius-sm);
2209
+ }
2210
+
2211
+ .config-file-status {
2212
+ width: 22px;
2213
+ height: 22px;
2214
+ border-radius: 50%;
2215
+ display: flex;
2216
+ align-items: center;
2217
+ justify-content: center;
2218
+ font-size: 12px;
2219
+ font-weight: 700;
2220
+ flex-shrink: 0;
2221
+ }
2222
+
2223
+ .config-file-status.exists {
2224
+ background: rgba(105, 240, 174, 0.12);
2225
+ color: var(--accent-green);
2226
+ }
2227
+
2228
+ .config-file-status.missing {
2229
+ background: rgba(144, 164, 174, 0.12);
2230
+ color: var(--text-muted);
2231
+ }
2232
+
2233
+ .config-file-name {
2234
+ font-size: 13px;
2235
+ font-weight: 500;
2236
+ color: var(--text-primary);
2237
+ min-width: 140px;
2238
+ }
2239
+
2240
+ .config-file-path {
2241
+ font-size: 11px;
2242
+ font-family: var(--font-mono);
2243
+ color: var(--text-muted);
2244
+ white-space: nowrap;
2245
+ overflow: hidden;
2246
+ text-overflow: ellipsis;
2247
+ }
2248
+
2249
+ .config-hint {
2250
+ font-size: 12px;
2251
+ color: var(--text-muted);
2252
+ padding: 10px 12px;
2253
+ background: var(--bg-surface);
2254
+ border-radius: var(--radius-sm);
2255
+ border-left: 3px solid var(--accent-cyan);
2256
+ }
2257
+
2258
+ .config-key {
2259
+ font-family: var(--font-mono);
2260
+ font-size: 12px;
2261
+ color: var(--accent-cyan);
2262
+ }
2263
+
2264
+ .config-masked {
2265
+ color: var(--text-muted);
2266
+ letter-spacing: 1px;
2267
+ }
2268
+
2269
+ .config-source-badge {
2270
+ font-size: 11px;
2271
+ padding: 2px 8px;
2272
+ border-radius: var(--radius-sm);
2273
+ background: rgba(128, 216, 255, 0.08);
2274
+ color: var(--accent-cyan);
2275
+ font-family: var(--font-mono);
2276
+ }
2277
+
2278
+ .config-source-badge.warn {
2279
+ background: rgba(255, 138, 128, 0.1);
2280
+ color: var(--accent-red);
2281
+ }
2282
+
2283
+ .config-warn-badge {
2284
+ font-size: 10px;
2285
+ padding: 2px 8px;
2286
+ border-radius: var(--radius-sm);
2287
+ background: rgba(255, 138, 128, 0.1);
2288
+ color: var(--accent-red);
2289
+ font-weight: 600;
2290
+ }
2291
+
2292
+ /* ============================================================
2293
+ * Identity Health Page
2294
+ * ============================================================ */
2295
+
2296
+ .identity-row {
2297
+ display: flex;
2298
+ align-items: center;
2299
+ gap: 12px;
2300
+ padding: 10px 0;
2301
+ border-bottom: 1px solid var(--border-subtle);
2302
+ }
2303
+
2304
+ .identity-row:last-child {
2305
+ border-bottom: none;
2306
+ }
2307
+
2308
+ .identity-label {
2309
+ font-size: 12px;
2310
+ color: var(--text-muted);
2311
+ min-width: 140px;
2312
+ font-weight: 500;
2313
+ }
2314
+
2315
+ .identity-value {
2316
+ font-family: var(--font-mono);
2317
+ font-size: 12px;
2318
+ color: var(--text-primary);
2319
+ word-break: break-all;
2320
+ }
2321
+
2322
+ .identity-alias {
2323
+ font-family: var(--font-mono);
2324
+ font-size: 11px;
2325
+ padding: 2px 8px;
2326
+ background: rgba(208, 188, 255, 0.08);
2327
+ border: 1px solid rgba(208, 188, 255, 0.12);
2328
+ border-radius: var(--radius-sm);
2329
+ color: var(--accent-purple);
2330
+ display: inline-block;
2331
+ margin: 2px;
2332
+ }
2333
+
2334
+ .identity-issue {
2335
+ display: flex;
2336
+ align-items: center;
2337
+ gap: 8px;
2338
+ padding: 8px 0;
2339
+ font-size: 13px;
2340
+ color: var(--text-secondary);
2341
+ border-bottom: 1px solid var(--border-subtle);
2342
+ }
2343
+
2344
+ .identity-issue:last-child {
2345
+ border-bottom: none;
2346
+ }
2347
+
2348
+ .identity-dirty {
2349
+ font-family: var(--font-mono);
2350
+ font-size: 11px;
2351
+ padding: 4px 10px;
2352
+ background: rgba(255, 138, 128, 0.08);
2353
+ border: 1px solid rgba(255, 138, 128, 0.15);
2354
+ border-radius: var(--radius-sm);
2355
+ color: var(--accent-red);
2356
+ }
2357
+
2358
+ .identity-id-row {
2359
+ display: flex;
2360
+ align-items: center;
2361
+ gap: 8px;
2362
+ padding: 6px 0;
2363
+ }
2364
+
2365
+ .identity-id {
2366
+ font-family: var(--font-mono);
2367
+ font-size: 12px;
2368
+ color: var(--text-primary);
2369
+ word-break: break-all;
2370
+ }
2371
+
2372
+ .identity-id.dirty {
2373
+ color: var(--accent-red);
2374
+ }
2375
+
2376
+ .identity-tag {
2377
+ font-size: 9px;
2378
+ padding: 2px 6px;
2379
+ border-radius: var(--radius-sm);
2380
+ font-weight: 600;
2381
+ text-transform: uppercase;
2382
+ letter-spacing: 0.5px;
2383
+ }
2384
+
2385
+ .identity-tag.current {
2386
+ background: rgba(128, 216, 255, 0.1);
2387
+ color: var(--accent-cyan);
2388
+ }
2389
+
2390
+ .identity-tag.canonical {
2391
+ background: rgba(105, 240, 174, 0.1);
2392
+ color: var(--accent-green);
2393
+ }
2394
+
2395
+ .identity-tag.dirty {
2396
+ background: rgba(255, 138, 128, 0.1);
2397
+ color: var(--accent-red);
2398
+ }
2399
+
2400
+ /* Red accent for stat cards */
2401
+ .stat-card[data-accent="red"]::before {
2402
+ background: var(--accent-red);
2403
+ }