ltcai 2.2.2 → 2.2.7

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.
@@ -0,0 +1,1016 @@
1
+ /* Lattice AI — graph page (graph.html, body.lattice-ref-graph). Token-native. */
2
+ /* ============================================================
3
+ GRAPH PAGE (graph.html)
4
+ ============================================================ */
5
+ * { box-sizing: border-box; }
6
+ html, body.lattice-ref-graph { height: 100%; }
7
+ body.lattice-ref-graph {
8
+ margin: 0;
9
+ overflow: hidden;
10
+ color: var(--text);
11
+ background: var(--app-bg);
12
+ font-family: "SF Pro Display", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
13
+ }
14
+
15
+ body.lattice-ref-graph .app {
16
+ min-height: 0;
17
+ height: 100dvh;
18
+ overflow: hidden;
19
+ }
20
+
21
+ body.lattice-ref-graph .stage {
22
+ height: calc(100dvh - 138px);
23
+ max-height: calc(100dvh - 138px);
24
+ min-height: 0;
25
+ }
26
+
27
+ body.lattice-ref-graph .app > aside:not(.reference-rail) {
28
+ height: calc(100dvh - 138px);
29
+ max-height: calc(100dvh - 138px);
30
+ min-height: 0;
31
+ overflow-y: auto;
32
+ overscroll-behavior: contain;
33
+ padding-bottom: max(28px, env(safe-area-inset-bottom));
34
+ scrollbar-gutter: stable;
35
+ }
36
+
37
+ .app {
38
+ display: grid;
39
+ grid-template-columns: minmax(0, 1fr) 360px;
40
+ height: 100vh;
41
+ }
42
+
43
+ .stage {
44
+ position: relative;
45
+ min-width: 0;
46
+ border-right: 1px solid var(--line);
47
+ background:
48
+ radial-gradient(circle, rgba(111,66,232,0.18) 1px, transparent 1.9px),
49
+ linear-gradient(116deg, transparent 0 43%, rgba(111,66,232,0.05) 43.1%, transparent 43.28% 100%),
50
+ linear-gradient(28deg, transparent 0 61%, rgba(180,160,255,0.07) 61.1%, transparent 61.28% 100%);
51
+ background-size: 32px 32px, 100% 100%, 100% 100%;
52
+ background-position: 10px 10px, 0 0, 0 0;
53
+ }
54
+
55
+ body.lattice-ref-graph .stage {
56
+ background:
57
+ radial-gradient(circle, var(--graph-grid) 1px, transparent 1.9px),
58
+ linear-gradient(116deg, transparent 0 43%, rgba(111,66,232,0.05) 43.1%, transparent 43.28% 100%),
59
+ linear-gradient(180deg, var(--graph-bg) 0%, var(--surface) 100%);
60
+ background-size: 32px 32px, 100% 100%, 100% 100%;
61
+ background-position: 10px 10px, 0 0, 0 0;
62
+ }
63
+
64
+ :root[data-lt-theme="dark"] body.lattice-ref-graph {
65
+ background: var(--bg);
66
+ }
67
+
68
+ :root[data-lt-theme="dark"] body.lattice-ref-graph .app,
69
+ :root[data-lt-theme="dark"] body.lattice-ref-graph .app > aside:not(.reference-rail) {
70
+ background: var(--bg);
71
+ }
72
+
73
+ :root[data-lt-theme="dark"] body.lattice-ref-graph .stage {
74
+ background:
75
+ radial-gradient(circle, rgba(160, 170, 230, 0.11) 1px, transparent 1.9px),
76
+ linear-gradient(116deg, transparent 0 43%, rgba(167,139,250,0.08) 43.1%, transparent 43.28% 100%),
77
+ radial-gradient(circle at 72% 18%, rgba(34, 211, 238, 0.08), transparent 28%),
78
+ linear-gradient(180deg, #0b0b1e 0%, #10122c 100%);
79
+ border-color: rgba(160, 170, 230, 0.20);
80
+ box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.05), 0 18px 52px rgba(0, 0, 0, 0.40);
81
+ }
82
+
83
+ :root[data-lt-theme="dark"] body.lattice-ref-graph .stage::before {
84
+ color: var(--text);
85
+ }
86
+
87
+ :root[data-lt-theme="dark"] body.lattice-ref-graph .search-shell,
88
+ :root[data-lt-theme="dark"] body.lattice-ref-graph .toolbar,
89
+ :root[data-lt-theme="dark"] body.lattice-ref-graph .graph-minimap,
90
+ :root[data-lt-theme="dark"] body.lattice-ref-graph .detail-wrap {
91
+ background: rgba(22, 22, 58, 0.96);
92
+ border-color: rgba(160, 170, 230, 0.22);
93
+ box-shadow: 0 18px 46px rgba(0, 0, 0, 0.46);
94
+ }
95
+
96
+ :root[data-lt-theme="dark"] body.lattice-ref-graph .search-input,
97
+ :root[data-lt-theme="dark"] body.lattice-ref-graph .local-source-input input {
98
+ background: rgba(255, 255, 255, 0.06);
99
+ border-color: rgba(160, 170, 230, 0.22);
100
+ color: var(--text);
101
+ }
102
+
103
+ :root[data-lt-theme="dark"] body.lattice-ref-graph .search-input::placeholder,
104
+ :root[data-lt-theme="dark"] body.lattice-ref-graph .local-source-input input::placeholder {
105
+ color: rgba(226, 232, 255, 0.48);
106
+ }
107
+
108
+ canvas {
109
+ display: block;
110
+ width: 100%;
111
+ height: 100%;
112
+ cursor: grab;
113
+ }
114
+
115
+ canvas.panning { cursor: grabbing; }
116
+
117
+ .search-shell,
118
+ .toolbar {
119
+ position: absolute;
120
+ z-index: 20;
121
+ border: 1px solid var(--line);
122
+ background: var(--panel);
123
+ backdrop-filter: blur(18px);
124
+ box-shadow: var(--shadow);
125
+ }
126
+
127
+ .search-shell {
128
+ top: 16px;
129
+ left: 16px;
130
+ width: min(360px, calc(100% - 32px));
131
+ border-radius: 10px;
132
+ overflow: hidden;
133
+ }
134
+
135
+ .search-head {
136
+ display: flex;
137
+ align-items: center;
138
+ justify-content: space-between;
139
+ gap: 12px;
140
+ padding: 14px 16px 10px;
141
+ border-bottom: 1px solid rgba(111,66,232,0.10);
142
+ }
143
+
144
+ .search-title {
145
+ display: flex;
146
+ flex-direction: column;
147
+ gap: 3px;
148
+ }
149
+
150
+ .search-title strong {
151
+ font-size: 14px;
152
+ font-weight: 700;
153
+ letter-spacing: 0.01em;
154
+ }
155
+
156
+ .search-title span {
157
+ font-size: 12px;
158
+ color: var(--muted);
159
+ }
160
+
161
+ .search-count {
162
+ flex-shrink: 0;
163
+ font-size: 11px;
164
+ color: #fff;
165
+ background: linear-gradient(135deg, var(--accent), #9a78f0);
166
+ border-radius: 999px;
167
+ padding: 5px 10px;
168
+ font-weight: 700;
169
+ }
170
+
171
+ .search-input-wrap {
172
+ padding: 12px 16px 10px;
173
+ }
174
+
175
+ .search-input-row {
176
+ display: flex;
177
+ gap: 8px;
178
+ align-items: center;
179
+ }
180
+
181
+ .search-input {
182
+ flex: 1;
183
+ height: 42px;
184
+ border-radius: 12px;
185
+ border: 1px solid var(--line-strong);
186
+ background: var(--input);
187
+ color: var(--text);
188
+ padding: 0 14px;
189
+ font-size: 14px;
190
+ outline: none;
191
+ }
192
+
193
+ .search-input:focus {
194
+ border-color: rgba(111,66,232,0.55);
195
+ box-shadow: 0 0 0 4px rgba(111,66,232,0.09);
196
+ }
197
+
198
+ .icon-btn,
199
+ .tb-btn {
200
+ height: 42px;
201
+ border-radius: 8px;
202
+ border: 1px solid var(--line-strong);
203
+ background: var(--surface-2);
204
+ color: var(--text);
205
+ cursor: pointer;
206
+ font-size: 13px;
207
+ transition: 140ms ease;
208
+ }
209
+
210
+ .icon-btn {
211
+ width: 42px;
212
+ flex-shrink: 0;
213
+ font-size: 16px;
214
+ }
215
+
216
+ .icon-btn:hover,
217
+ .tb-btn:hover {
218
+ transform: translateY(-1px);
219
+ border-color: rgba(111,66,232,0.45);
220
+ color: var(--accent);
221
+ background: rgba(111,66,232,0.07);
222
+ }
223
+
224
+ .search-results {
225
+ max-height: min(420px, calc(100vh - 180px));
226
+ overflow-y: auto;
227
+ padding: 0 8px 10px;
228
+ }
229
+
230
+ .search-empty,
231
+ .search-loading {
232
+ margin: 0;
233
+ padding: 14px 12px 16px;
234
+ color: var(--muted);
235
+ font-size: 13px;
236
+ line-height: 1.65;
237
+ }
238
+
239
+ .search-list {
240
+ display: flex;
241
+ flex-direction: column;
242
+ gap: 8px;
243
+ padding: 0 8px 8px;
244
+ }
245
+
246
+ .search-item {
247
+ width: 100%;
248
+ text-align: left;
249
+ border: 1px solid rgba(111,66,232,0.10);
250
+ border-radius: 8px;
251
+ background: var(--surface-2);
252
+ color: var(--text);
253
+ padding: 12px 12px 13px;
254
+ cursor: pointer;
255
+ transition: 140ms ease;
256
+ }
257
+
258
+ .search-item:hover,
259
+ .search-item.active {
260
+ border-color: rgba(111,66,232,0.34);
261
+ background: rgba(111,66,232,0.07);
262
+ transform: translateY(-1px);
263
+ }
264
+
265
+ .search-item-top {
266
+ display: flex;
267
+ align-items: center;
268
+ gap: 8px;
269
+ margin-bottom: 6px;
270
+ }
271
+
272
+ .search-type {
273
+ display: inline-flex;
274
+ align-items: center;
275
+ border-radius: 999px;
276
+ padding: 4px 10px;
277
+ font-size: 11px;
278
+ font-weight: 700;
279
+ color: var(--text);
280
+ }
281
+
282
+ .search-item-title {
283
+ font-size: 13px;
284
+ font-weight: 700;
285
+ letter-spacing: 0.01em;
286
+ color: var(--text);
287
+ }
288
+
289
+ .search-item-summary {
290
+ font-size: 12px;
291
+ color: var(--muted);
292
+ line-height: 1.55;
293
+ margin: 0 0 8px;
294
+ word-break: break-word;
295
+ display: -webkit-box;
296
+ -webkit-line-clamp: 3;
297
+ line-clamp: 3;
298
+ -webkit-box-orient: vertical;
299
+ overflow: hidden;
300
+ }
301
+
302
+ .search-item-meta {
303
+ font-size: 11px;
304
+ color: var(--faint);
305
+ display: flex;
306
+ gap: 10px;
307
+ flex-wrap: wrap;
308
+ }
309
+
310
+ .toolbar {
311
+ top: 16px;
312
+ right: 16px;
313
+ display: flex;
314
+ flex-wrap: wrap;
315
+ gap: 8px;
316
+ padding: 8px;
317
+ border-radius: 10px;
318
+ max-width: min(760px, calc(100% - 32px));
319
+ }
320
+
321
+ .tb-btn {
322
+ padding: 0 14px;
323
+ min-width: 72px;
324
+ white-space: nowrap;
325
+ }
326
+
327
+ #tooltip {
328
+ position: fixed;
329
+ z-index: 50;
330
+ max-width: 300px;
331
+ padding: 8px 11px;
332
+ border-radius: 10px;
333
+ border: 1px solid rgba(111,66,232,0.18);
334
+ background: var(--surface-elevated);
335
+ color: var(--text);
336
+ box-shadow: var(--shadow);
337
+ font-size: 12px;
338
+ line-height: 1.45;
339
+ pointer-events: none;
340
+ display: none;
341
+ word-break: break-word;
342
+ }
343
+
344
+ aside {
345
+ display: flex;
346
+ flex-direction: column;
347
+ background: var(--surface);
348
+ border-left: 1px solid var(--accent-soft);
349
+ overflow: hidden;
350
+ }
351
+
352
+ .sidebar-head {
353
+ padding: 18px 18px 12px;
354
+ border-bottom: 1px solid rgba(111,66,232,0.10);
355
+ }
356
+
357
+ .eyebrow {
358
+ color: var(--accent);
359
+ font-size: 11px;
360
+ font-weight: 700;
361
+ letter-spacing: 0.12em;
362
+ text-transform: uppercase;
363
+ margin-bottom: 8px;
364
+ }
365
+
366
+ h1 {
367
+ margin: 0;
368
+ font-size: 22px;
369
+ line-height: 1.1;
370
+ letter-spacing: -0.02em;
371
+ }
372
+
373
+ .sidebar-sub {
374
+ margin: 10px 0 0;
375
+ color: var(--muted);
376
+ font-size: 13px;
377
+ line-height: 1.65;
378
+ }
379
+
380
+ .stats-row {
381
+ display: grid;
382
+ grid-template-columns: 1fr 1fr;
383
+ gap: 10px;
384
+ margin-top: 14px;
385
+ }
386
+
387
+ .stat {
388
+ border: 1px solid rgba(111,66,232,0.16);
389
+ border-radius: 8px;
390
+ background: var(--surface-2);
391
+ padding: 12px 13px;
392
+ color: var(--text);
393
+ }
394
+
395
+ .stat strong {
396
+ display: block;
397
+ font-size: 24px;
398
+ line-height: 1;
399
+ margin-bottom: 5px;
400
+ }
401
+
402
+ .stat span {
403
+ display: block;
404
+ font-size: 11px;
405
+ color: var(--muted);
406
+ text-transform: uppercase;
407
+ letter-spacing: 0.08em;
408
+ }
409
+
410
+ .section {
411
+ padding: 16px 18px 14px;
412
+ flex-shrink: 0;
413
+ }
414
+
415
+ .section-label {
416
+ color: var(--accent);
417
+ font-size: 11px;
418
+ text-transform: uppercase;
419
+ letter-spacing: 0.08em;
420
+ font-weight: 700;
421
+ margin-bottom: 10px;
422
+ }
423
+
424
+ .legend-grid,
425
+ .filter-grid {
426
+ display: flex;
427
+ flex-direction: column;
428
+ gap: 7px;
429
+ }
430
+
431
+ .local-source-panel {
432
+ display: flex;
433
+ flex-direction: column;
434
+ gap: 10px;
435
+ }
436
+
437
+ .local-source-notice {
438
+ border: 1px solid rgba(13,148,136,0.20);
439
+ border-radius: 8px;
440
+ background: rgba(13,148,136,0.07);
441
+ color: var(--success);
442
+ padding: 9px 10px;
443
+ font-size: 12px;
444
+ line-height: 1.5;
445
+ }
446
+
447
+ .local-source-input {
448
+ display: flex;
449
+ gap: 8px;
450
+ align-items: center;
451
+ }
452
+
453
+ .local-source-input input {
454
+ min-width: 0;
455
+ flex: 1;
456
+ height: 38px;
457
+ border-radius: 8px;
458
+ border: 1px solid rgba(111,66,232,0.16);
459
+ background: var(--input);
460
+ color: var(--text);
461
+ padding: 0 10px;
462
+ font-size: 12px;
463
+ outline: none;
464
+ }
465
+
466
+ .local-source-input input:focus {
467
+ border-color: rgba(111,66,232,0.42);
468
+ box-shadow: 0 0 0 3px rgba(111,66,232,0.08);
469
+ }
470
+
471
+ .local-root-list,
472
+ .local-tree-list,
473
+ .local-source-list {
474
+ display: flex;
475
+ flex-direction: column;
476
+ gap: 6px;
477
+ max-height: min(150px, 22dvh);
478
+ overflow-y: auto;
479
+ padding-right: 2px;
480
+ }
481
+
482
+ .local-root-btn,
483
+ .local-tree-row,
484
+ .local-source-row {
485
+ width: 100%;
486
+ border: 1px solid rgba(111,66,232,0.13);
487
+ border-radius: 8px;
488
+ background: var(--surface-2);
489
+ color: var(--text);
490
+ padding: 8px 9px;
491
+ display: grid;
492
+ grid-template-columns: 18px minmax(0, 1fr) auto;
493
+ gap: 8px;
494
+ align-items: center;
495
+ text-align: left;
496
+ font-size: 12px;
497
+ }
498
+
499
+ .local-root-btn {
500
+ cursor: pointer;
501
+ }
502
+
503
+ .local-root-btn:hover,
504
+ .local-root-btn.active {
505
+ border-color: rgba(111,66,232,0.34);
506
+ background: rgba(111,66,232,0.07);
507
+ }
508
+
509
+ .local-source-main,
510
+ .local-tree-main {
511
+ min-width: 0;
512
+ }
513
+
514
+ .local-source-main strong,
515
+ .local-tree-main strong {
516
+ display: block;
517
+ font-size: 12px;
518
+ line-height: 1.25;
519
+ overflow: hidden;
520
+ text-overflow: ellipsis;
521
+ white-space: nowrap;
522
+ }
523
+
524
+ .local-source-main span,
525
+ .local-tree-main span {
526
+ display: block;
527
+ color: var(--faint);
528
+ font-size: 11px;
529
+ line-height: 1.35;
530
+ overflow: hidden;
531
+ text-overflow: ellipsis;
532
+ white-space: nowrap;
533
+ }
534
+
535
+ .local-source-actions {
536
+ display: grid;
537
+ grid-template-columns: repeat(2, minmax(0, 1fr));
538
+ gap: 7px;
539
+ }
540
+
541
+ .local-source-btn {
542
+ min-width: 0;
543
+ height: 36px;
544
+ border: 1px solid rgba(111,66,232,0.18);
545
+ border-radius: 8px;
546
+ background: var(--surface-2);
547
+ color: var(--text);
548
+ cursor: pointer;
549
+ display: inline-flex;
550
+ align-items: center;
551
+ justify-content: center;
552
+ gap: 6px;
553
+ font-size: 12px;
554
+ font-weight: 650;
555
+ }
556
+
557
+ .local-source-btn:hover {
558
+ border-color: rgba(111,66,232,0.42);
559
+ color: var(--accent);
560
+ background: rgba(111,66,232,0.07);
561
+ }
562
+
563
+ .local-source-btn.primary {
564
+ grid-column: 1 / -1;
565
+ background: linear-gradient(135deg, var(--accent), #7b61ff);
566
+ color: #fff;
567
+ border-color: rgba(111,66,232,0.3);
568
+ }
569
+
570
+ .local-source-btn.primary:hover {
571
+ color: #fff;
572
+ background: linear-gradient(135deg, #5f35d8, #6b51ef);
573
+ box-shadow: 0 8px 20px rgba(111,66,232,0.22);
574
+ }
575
+
576
+ .local-source-btn:disabled {
577
+ cursor: not-allowed;
578
+ opacity: 0.55;
579
+ transform: none;
580
+ }
581
+
582
+ .local-option-row {
583
+ display: grid;
584
+ grid-template-columns: repeat(2, minmax(0, 1fr));
585
+ gap: 7px;
586
+ }
587
+
588
+ .local-option-btn {
589
+ min-width: 0;
590
+ height: 36px;
591
+ border: 1px solid rgba(111,66,232,0.18);
592
+ border-radius: 8px;
593
+ background: var(--surface-2);
594
+ color: var(--muted);
595
+ cursor: pointer;
596
+ display: inline-flex;
597
+ align-items: center;
598
+ justify-content: center;
599
+ gap: 6px;
600
+ padding: 0 9px;
601
+ font-size: 12px;
602
+ font-weight: 650;
603
+ line-height: 1;
604
+ text-align: center;
605
+ white-space: nowrap;
606
+ }
607
+
608
+ .local-option-btn span {
609
+ min-width: 0;
610
+ overflow: hidden;
611
+ text-overflow: ellipsis;
612
+ white-space: nowrap;
613
+ }
614
+
615
+ .local-option-btn:hover {
616
+ border-color: rgba(111,66,232,0.42);
617
+ color: var(--accent);
618
+ background: rgba(111,66,232,0.07);
619
+ }
620
+
621
+ .local-option-btn.active {
622
+ border-color: rgba(111,66,232,0.48);
623
+ background: rgba(111,66,232,0.11);
624
+ color: var(--accent);
625
+ box-shadow: inset 0 0 0 1px var(--accent-soft);
626
+ }
627
+
628
+ .local-audit-grid {
629
+ display: grid;
630
+ grid-template-columns: repeat(3, minmax(0, 1fr));
631
+ gap: 6px;
632
+ }
633
+
634
+ .local-audit-stat {
635
+ border: 1px solid rgba(111,66,232,0.13);
636
+ border-radius: 8px;
637
+ background: var(--surface-2);
638
+ padding: 8px 7px;
639
+ min-width: 0;
640
+ }
641
+
642
+ .local-audit-stat strong {
643
+ display: block;
644
+ font-size: 15px;
645
+ line-height: 1.05;
646
+ }
647
+
648
+ .local-audit-stat span {
649
+ display: block;
650
+ margin-top: 4px;
651
+ color: var(--faint);
652
+ font-size: 10px;
653
+ line-height: 1.2;
654
+ }
655
+
656
+ .local-status-line {
657
+ color: var(--muted);
658
+ font-size: 12px;
659
+ line-height: 1.45;
660
+ word-break: break-word;
661
+ }
662
+
663
+ .local-status-line.error {
664
+ color: #a53131;
665
+ }
666
+
667
+ .local-permission {
668
+ border: 1px solid rgba(245,158,11,0.28);
669
+ background: rgba(245,158,11,0.09);
670
+ border-radius: 8px;
671
+ padding: 9px;
672
+ display: flex;
673
+ flex-direction: column;
674
+ gap: 8px;
675
+ }
676
+
677
+ .legend-item,
678
+ .filter-item {
679
+ display: flex;
680
+ align-items: center;
681
+ gap: 9px;
682
+ min-height: 26px;
683
+ font-size: 12px;
684
+ min-width: 0;
685
+ }
686
+
687
+ .filter-item {
688
+ cursor: pointer;
689
+ user-select: none;
690
+ }
691
+
692
+ .filter-item input[type="checkbox"] {
693
+ width: 14px;
694
+ height: 14px;
695
+ margin: 0;
696
+ accent-color: var(--accent);
697
+ cursor: pointer;
698
+ }
699
+
700
+ .dot {
701
+ width: 10px;
702
+ height: 10px;
703
+ border-radius: 50%;
704
+ flex-shrink: 0;
705
+ box-shadow: 0 0 0 3px rgba(111,66,232,0.08);
706
+ }
707
+
708
+ .legend-line {
709
+ width: 18px;
710
+ height: 0;
711
+ border-top: 2px solid currentColor;
712
+ opacity: 0.8;
713
+ flex-shrink: 0;
714
+ }
715
+
716
+ .filter-name,
717
+ .legend-name {
718
+ flex: 1;
719
+ min-width: 0;
720
+ color: var(--text);
721
+ font-size: 13px;
722
+ font-weight: 500;
723
+ overflow-wrap: anywhere;
724
+ }
725
+
726
+ .filter-count,
727
+ .legend-meta {
728
+ color: var(--muted);
729
+ font-size: 12px;
730
+ font-weight: 600;
731
+ text-align: right;
732
+ white-space: nowrap;
733
+ }
734
+
735
+ .detail-wrap {
736
+ flex: 0 0 auto;
737
+ min-height: auto;
738
+ overflow: visible;
739
+ padding: 18px 18px max(24px, env(safe-area-inset-bottom));
740
+ }
741
+
742
+ .type-badge {
743
+ display: inline-flex;
744
+ align-items: center;
745
+ border-radius: 999px;
746
+ padding: 5px 11px;
747
+ font-size: 11px;
748
+ font-weight: 700;
749
+ color: var(--text);
750
+ margin-bottom: 10px;
751
+ }
752
+
753
+ .detail-title {
754
+ font-size: 19px;
755
+ line-height: 1.28;
756
+ font-weight: 750;
757
+ margin-bottom: 8px;
758
+ letter-spacing: -0.01em;
759
+ overflow-wrap: anywhere;
760
+ }
761
+
762
+ .detail-summary {
763
+ color: var(--muted);
764
+ font-size: 13px;
765
+ line-height: 1.7;
766
+ white-space: pre-wrap;
767
+ word-break: break-word;
768
+ margin-bottom: 14px;
769
+ }
770
+
771
+ .metric-grid {
772
+ display: grid;
773
+ grid-template-columns: repeat(2, minmax(0, 1fr));
774
+ gap: 10px;
775
+ margin-bottom: 14px;
776
+ }
777
+
778
+ .metric-card {
779
+ border: 1px solid var(--border);
780
+ border-radius: 8px;
781
+ padding: 11px 12px;
782
+ background: var(--card);
783
+ color: var(--text);
784
+ }
785
+
786
+ .metric-card strong {
787
+ display: block;
788
+ font-size: 18px;
789
+ line-height: 1;
790
+ margin-bottom: 5px;
791
+ }
792
+
793
+ .metric-card span {
794
+ display: block;
795
+ font-size: 11px;
796
+ color: var(--muted);
797
+ text-transform: uppercase;
798
+ letter-spacing: 0.08em;
799
+ }
800
+
801
+ .meta-block {
802
+ border: 1px solid var(--accent-soft);
803
+ border-radius: 8px;
804
+ background: var(--surface-2);
805
+ padding: 12px;
806
+ color: var(--muted);
807
+ font-size: 12px;
808
+ line-height: 1.65;
809
+ white-space: pre-wrap;
810
+ word-break: break-word;
811
+ overflow-wrap: anywhere;
812
+ max-height: min(42dvh, 460px);
813
+ overflow: auto;
814
+ }
815
+
816
+ .jump-btn {
817
+ display: inline-flex;
818
+ align-items: center;
819
+ gap: 6px;
820
+ margin: 0 0 14px;
821
+ padding: 8px 14px;
822
+ border-radius: 999px;
823
+ text-decoration: none;
824
+ font-size: 12px;
825
+ font-weight: 700;
826
+ color: #fff;
827
+ background: linear-gradient(135deg, var(--accent), var(--accent-2));
828
+ box-shadow: 0 8px 22px rgba(111,66,232,0.22);
829
+ }
830
+
831
+ .jump-btn:hover { filter: brightness(1.04); }
832
+
833
+ .jump-btn.secondary {
834
+ border: 1px solid rgba(111,66,232,0.20);
835
+ color: var(--text);
836
+ background: var(--surface-2);
837
+ box-shadow: none;
838
+ cursor: pointer;
839
+ font: inherit;
840
+ font-size: 12px;
841
+ font-weight: 700;
842
+ }
843
+
844
+ .detail-actions {
845
+ display: flex;
846
+ flex-wrap: wrap;
847
+ gap: 8px;
848
+ margin-bottom: 14px;
849
+ }
850
+
851
+ .related-node-list {
852
+ display: grid;
853
+ gap: 7px;
854
+ margin-bottom: 14px;
855
+ }
856
+
857
+ .related-node-btn {
858
+ width: 100%;
859
+ min-width: 0;
860
+ display: grid;
861
+ grid-template-columns: 18px minmax(0, 1fr) auto;
862
+ align-items: center;
863
+ gap: 8px;
864
+ border: 1px solid rgba(111,66,232,0.13);
865
+ border-radius: 8px;
866
+ background: var(--surface-2);
867
+ color: var(--text);
868
+ padding: 8px 10px;
869
+ text-align: left;
870
+ cursor: pointer;
871
+ }
872
+
873
+ .related-node-btn:hover {
874
+ border-color: rgba(111,66,232,0.34);
875
+ background: rgba(111,66,232,0.07);
876
+ }
877
+
878
+ .related-node-btn strong {
879
+ min-width: 0;
880
+ overflow: hidden;
881
+ text-overflow: ellipsis;
882
+ white-space: nowrap;
883
+ font-size: 12px;
884
+ }
885
+
886
+ .related-node-btn em {
887
+ color: var(--faint);
888
+ font-size: 11px;
889
+ font-style: normal;
890
+ white-space: nowrap;
891
+ }
892
+
893
+ .focus-chip {
894
+ position: absolute;
895
+ z-index: 21;
896
+ left: 16px;
897
+ bottom: 16px;
898
+ max-width: min(560px, calc(100% - 32px));
899
+ display: flex;
900
+ flex-wrap: wrap;
901
+ gap: 8px;
902
+ padding: 8px;
903
+ border: 1px solid var(--line);
904
+ border-radius: 10px;
905
+ background: var(--surface-2);
906
+ box-shadow: var(--shadow);
907
+ backdrop-filter: blur(18px);
908
+ }
909
+
910
+ .focus-chip span {
911
+ display: inline-flex;
912
+ align-items: center;
913
+ gap: 6px;
914
+ border-radius: 999px;
915
+ background: rgba(111,66,232,0.08);
916
+ color: var(--text);
917
+ padding: 5px 10px;
918
+ font-size: 11px;
919
+ font-weight: 800;
920
+ max-width: 260px;
921
+ overflow: hidden;
922
+ text-overflow: ellipsis;
923
+ white-space: nowrap;
924
+ }
925
+
926
+ .search-shell.search-open .search-results {
927
+ display: block;
928
+ }
929
+
930
+ .empty-hint {
931
+ margin: 0;
932
+ color: var(--muted);
933
+ font-size: 13px;
934
+ line-height: 1.8;
935
+ }
936
+
937
+ @media (max-width: 900px) {
938
+ body.lattice-ref-graph {
939
+ overflow-y: auto;
940
+ }
941
+
942
+ body.lattice-ref-graph .reference-rail {
943
+ display: none;
944
+ }
945
+
946
+ body.lattice-ref-graph {
947
+ grid-template-columns: 1fr;
948
+ }
949
+
950
+ body.lattice-ref-graph .app {
951
+ height: auto;
952
+ min-height: 100dvh;
953
+ overflow: visible;
954
+ grid-template-columns: 1fr;
955
+ grid-template-rows: minmax(420px, 58dvh) auto;
956
+ }
957
+
958
+ body.lattice-ref-graph .stage {
959
+ height: auto;
960
+ max-height: none;
961
+ min-height: 420px;
962
+ margin: 84px 12px 12px;
963
+ }
964
+
965
+ body.lattice-ref-graph .stage::before {
966
+ top: 26px;
967
+ left: 58px;
968
+ font-size: 24px;
969
+ }
970
+
971
+ body.lattice-ref-graph .stage::after {
972
+ top: 22px;
973
+ left: 14px;
974
+ }
975
+
976
+ body.lattice-ref-graph .search-shell {
977
+ top: -60px;
978
+ left: 60px;
979
+ right: 12px;
980
+ width: auto;
981
+ }
982
+
983
+ body.lattice-ref-graph .app > aside:not(.reference-rail) {
984
+ height: auto;
985
+ max-height: none;
986
+ min-height: 0;
987
+ margin: 0 12px 24px;
988
+ overflow: visible;
989
+ padding-bottom: max(18px, env(safe-area-inset-bottom));
990
+ }
991
+
992
+ body.lattice-ref-graph .detail-wrap {
993
+ flex: none;
994
+ overflow: visible;
995
+ }
996
+
997
+ .app {
998
+ grid-template-columns: 1fr;
999
+ grid-template-rows: 1fr 360px;
1000
+ }
1001
+
1002
+ .stage {
1003
+ border-right: 0;
1004
+ border-bottom: 1px solid var(--line);
1005
+ }
1006
+
1007
+ .search-shell {
1008
+ width: calc(100% - 32px);
1009
+ }
1010
+
1011
+ .toolbar {
1012
+ top: auto;
1013
+ bottom: 16px;
1014
+ right: 16px;
1015
+ }
1016
+ }