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,610 @@
1
+ /* Lattice AI — admin page (admin.html, body.lattice-ref-admin). Token-native. */
2
+ /* ============================================================
3
+ ADMIN PAGE (admin.html)
4
+ ============================================================ */
5
+
6
+ body.lattice-ref-admin {
7
+ --radius: 8px;
8
+ --radius-sm: 8px;
9
+ }
10
+
11
+ * { box-sizing: border-box; }
12
+ html, body.lattice-ref-admin { height: 100%; }
13
+ body.lattice-ref-admin {
14
+ margin: 0;
15
+ font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
16
+ color: var(--text);
17
+ background: var(--app-bg);
18
+ }
19
+
20
+ body::before {
21
+ content: "";
22
+ position: fixed;
23
+ inset: 0;
24
+ pointer-events: none;
25
+ background:
26
+ radial-gradient(circle, rgba(111,66,232,0.18) 1px, transparent 1.9px);
27
+ background-size: 32px 32px;
28
+ background-position: 10px 10px;
29
+ mask-image: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.06));
30
+ }
31
+
32
+ .page {
33
+ position: relative;
34
+ z-index: 1;
35
+ min-height: 100%;
36
+ display: flex;
37
+ flex-direction: column;
38
+ }
39
+
40
+ .topbar {
41
+ display: flex;
42
+ align-items: center;
43
+ justify-content: space-between;
44
+ gap: 16px;
45
+ padding: 22px 28px;
46
+ border-bottom: 1px solid rgba(111,66,232,0.10);
47
+ background: var(--sidebar);
48
+ backdrop-filter: blur(20px);
49
+ position: sticky;
50
+ top: 0;
51
+ z-index: 2;
52
+ }
53
+
54
+ .brand {
55
+ display: flex;
56
+ align-items: center;
57
+ gap: 12px;
58
+ min-width: 0;
59
+ }
60
+
61
+ .brand-mark {
62
+ width: 42px;
63
+ height: 42px;
64
+ border-radius: 12px;
65
+ background: radial-gradient(circle at 35% 30%, #ffffff 0 16%, #a77cff 17% 62%, #5b6cff 100%);
66
+ color: #171926;
67
+ display: grid;
68
+ place-items: center;
69
+ font-size: 20px;
70
+ font-weight: 800;
71
+ box-shadow: 0 12px 30px rgba(0,0,0,0.25);
72
+ flex: 0 0 auto;
73
+ }
74
+
75
+ .brand h1 {
76
+ margin: 0;
77
+ font-size: 18px;
78
+ line-height: 1.15;
79
+ letter-spacing: 0;
80
+ }
81
+
82
+ .brand p {
83
+ margin: 4px 0 0;
84
+ color: var(--muted);
85
+ font-size: 12px;
86
+ }
87
+
88
+ .top-actions {
89
+ display: flex;
90
+ gap: 8px;
91
+ flex-wrap: wrap;
92
+ justify-content: flex-end;
93
+ }
94
+
95
+ .btn {
96
+ border: 1px solid var(--border);
97
+ background: var(--surface-2);
98
+ color: var(--text);
99
+ border-radius: 8px;
100
+ padding: 10px 14px;
101
+ font: inherit;
102
+ font-size: 13px;
103
+ font-weight: 700;
104
+ cursor: pointer;
105
+ display: inline-flex;
106
+ align-items: center;
107
+ gap: 8px;
108
+ transition: all .15s ease;
109
+ text-decoration: none;
110
+ }
111
+
112
+ .btn:hover {
113
+ border-color: rgba(111,66,232,0.32);
114
+ background: rgba(111,66,232,0.10);
115
+ color: var(--accent);
116
+ }
117
+
118
+ .btn.primary {
119
+ background: var(--accent-soft);
120
+ border-color: rgba(111,66,232,0.28);
121
+ }
122
+
123
+ .btn.danger:hover {
124
+ background: rgba(229,57,53,0.08);
125
+ border-color: rgba(229,57,53,0.22);
126
+ color: var(--danger);
127
+ }
128
+
129
+ .content {
130
+ width: min(1440px, calc(100vw - 32px));
131
+ margin: 0 auto;
132
+ padding: 22px 0 28px;
133
+ display: flex;
134
+ flex-direction: column;
135
+ gap: 18px;
136
+ }
137
+
138
+ .hero {
139
+ border: 1px solid var(--border);
140
+ border-radius: calc(var(--radius) + 2px);
141
+ background:
142
+ linear-gradient(135deg, rgba(111,66,232,0.10), rgba(248,243,255,0.92));
143
+ box-shadow: var(--shadow);
144
+ padding: 20px 22px;
145
+ display: flex;
146
+ align-items: center;
147
+ justify-content: space-between;
148
+ gap: 14px;
149
+ flex-wrap: wrap;
150
+ }
151
+
152
+ .hero h2 {
153
+ margin: 0 0 6px;
154
+ font-size: 26px;
155
+ line-height: 1.15;
156
+ }
157
+
158
+ .hero p {
159
+ margin: 0;
160
+ color: var(--muted);
161
+ font-size: 13px;
162
+ line-height: 1.5;
163
+ max-width: 760px;
164
+ }
165
+
166
+ .session-card {
167
+ border: 1px solid rgba(111,66,232,0.18);
168
+ background: rgba(111,66,232,0.08);
169
+ color: var(--text);
170
+ border-radius: 12px;
171
+ padding: 12px 14px;
172
+ min-width: 280px;
173
+ }
174
+
175
+ .session-card .label {
176
+ font-size: 11px;
177
+ text-transform: uppercase;
178
+ letter-spacing: 0.08em;
179
+ color: var(--faint);
180
+ margin-bottom: 6px;
181
+ }
182
+
183
+ .session-card .value {
184
+ font-size: 13px;
185
+ font-weight: 700;
186
+ word-break: break-all;
187
+ }
188
+
189
+ .notice {
190
+ border: 1px solid rgba(111,66,232,0.18);
191
+ background: rgba(111,66,232,0.07);
192
+ color: var(--muted);
193
+ border-radius: 12px;
194
+ padding: 12px 14px;
195
+ font-size: 13px;
196
+ line-height: 1.5;
197
+ }
198
+
199
+ .summary-grid {
200
+ display: grid;
201
+ grid-template-columns: repeat(4, minmax(0, 1fr));
202
+ gap: 12px;
203
+ }
204
+
205
+ .summary-card {
206
+ border: 1px solid var(--border);
207
+ border-radius: var(--radius);
208
+ background: var(--card);
209
+ box-shadow: 0 8px 28px rgba(88,72,150,0.10);
210
+ padding: 16px 16px 15px;
211
+ min-width: 0;
212
+ }
213
+
214
+ .summary-card .label {
215
+ color: var(--faint);
216
+ font-size: 11px;
217
+ font-weight: 700;
218
+ letter-spacing: 0.08em;
219
+ text-transform: uppercase;
220
+ margin-bottom: 8px;
221
+ }
222
+
223
+ .summary-card .value {
224
+ font-size: 28px;
225
+ font-weight: 800;
226
+ line-height: 1;
227
+ }
228
+
229
+ .summary-card .meta {
230
+ margin-top: 8px;
231
+ color: var(--muted);
232
+ font-size: 12px;
233
+ line-height: 1.45;
234
+ min-height: 2.7em;
235
+ }
236
+
237
+ .panel-grid {
238
+ display: grid;
239
+ grid-template-columns: 1.1fr 0.9fr;
240
+ gap: 18px;
241
+ }
242
+
243
+ .panel {
244
+ border: 1px solid var(--border);
245
+ border-radius: var(--radius);
246
+ background: var(--card);
247
+ box-shadow: 0 8px 28px rgba(88,72,150,0.10);
248
+ overflow: hidden;
249
+ min-width: 0;
250
+ }
251
+
252
+ .panel-header {
253
+ padding: 16px 18px;
254
+ border-bottom: 1px solid var(--border);
255
+ display: flex;
256
+ align-items: center;
257
+ justify-content: space-between;
258
+ gap: 12px;
259
+ }
260
+
261
+ .panel-header h3 {
262
+ margin: 0;
263
+ font-size: 15px;
264
+ }
265
+
266
+ .panel-header p {
267
+ margin: 4px 0 0;
268
+ color: var(--muted);
269
+ font-size: 12px;
270
+ line-height: 1.45;
271
+ }
272
+
273
+ .lattice-ref-admin .panel-body {
274
+ padding: 16px 18px 18px;
275
+ }
276
+
277
+ .lattice-ref-admin .chart-body {
278
+ padding: 16px 20px;
279
+ }
280
+
281
+ .form-grid {
282
+ display: grid;
283
+ grid-template-columns: repeat(2, minmax(0, 1fr));
284
+ gap: 10px;
285
+ }
286
+
287
+ .field {
288
+ display: flex;
289
+ flex-direction: column;
290
+ gap: 6px;
291
+ }
292
+
293
+ .field.full { grid-column: 1 / -1; }
294
+
295
+ label {
296
+ color: var(--muted);
297
+ font-size: 12px;
298
+ font-weight: 700;
299
+ }
300
+
301
+ input, textarea {
302
+ width: 100%;
303
+ border: 1px solid var(--border);
304
+ background: var(--input);
305
+ color: var(--text);
306
+ border-radius: 8px;
307
+ padding: 10px 12px;
308
+ font: inherit;
309
+ font-size: 13px;
310
+ outline: none;
311
+ }
312
+
313
+ textarea {
314
+ min-height: 80px;
315
+ resize: vertical;
316
+ }
317
+
318
+ input:focus, textarea:focus {
319
+ border-color: rgba(111,66,232,0.44);
320
+ box-shadow: 0 0 0 3px rgba(111,66,232,0.08);
321
+ }
322
+
323
+ .toolbar {
324
+ display: flex;
325
+ align-items: center;
326
+ justify-content: space-between;
327
+ gap: 12px;
328
+ margin-top: 12px;
329
+ flex-wrap: wrap;
330
+ }
331
+
332
+ .status-copy {
333
+ color: var(--muted);
334
+ font-size: 12px;
335
+ }
336
+
337
+ .tag-row {
338
+ display: flex;
339
+ flex-wrap: wrap;
340
+ gap: 8px;
341
+ }
342
+
343
+ .panel-tools {
344
+ display: flex;
345
+ align-items: flex-end;
346
+ justify-content: flex-end;
347
+ gap: 10px;
348
+ flex-wrap: wrap;
349
+ min-width: 260px;
350
+ }
351
+
352
+ .export-control {
353
+ display: flex;
354
+ align-items: center;
355
+ justify-content: flex-end;
356
+ gap: 8px;
357
+ flex-wrap: wrap;
358
+ }
359
+
360
+ .export-options {
361
+ display: none;
362
+ align-items: center;
363
+ gap: 6px;
364
+ flex-wrap: wrap;
365
+ }
366
+
367
+ .export-options.open {
368
+ display: flex;
369
+ }
370
+
371
+ .export-options .table-btn {
372
+ background: var(--surface-2);
373
+ white-space: nowrap;
374
+ }
375
+
376
+ .tag {
377
+ display: inline-flex;
378
+ align-items: center;
379
+ gap: 6px;
380
+ padding: 5px 9px;
381
+ border-radius: 999px;
382
+ border: 1px solid var(--border);
383
+ background: var(--surface-2);
384
+ color: var(--muted);
385
+ font-size: 12px;
386
+ font-weight: 600;
387
+ }
388
+
389
+ .tag.high { border-color: rgba(229,57,53,0.32); color: var(--danger); background: rgba(229,57,53,0.07); }
390
+ .tag.medium { border-color: rgba(216,165,74,0.34); color: #b07a00; background: rgba(216,165,74,0.08); }
391
+ .tag.low { border-color: rgba(34,196,160,0.34); color: #0d8f72; background: rgba(34,196,160,0.08); }
392
+
393
+ .two-col {
394
+ display: grid;
395
+ grid-template-columns: repeat(2, minmax(0, 1fr));
396
+ gap: 12px;
397
+ }
398
+
399
+ .audit-grid {
400
+ display: grid;
401
+ grid-template-columns: repeat(5, minmax(0, 1fr));
402
+ gap: 10px;
403
+ margin-bottom: 14px;
404
+ }
405
+
406
+ .audit-metric {
407
+ border: 1px solid var(--border);
408
+ border-radius: 12px;
409
+ background: var(--surface);
410
+ padding: 12px;
411
+ min-width: 0;
412
+ }
413
+
414
+ .audit-metric .label {
415
+ color: var(--faint);
416
+ font-size: 11px;
417
+ font-weight: 800;
418
+ letter-spacing: 0.06em;
419
+ text-transform: uppercase;
420
+ margin-bottom: 8px;
421
+ }
422
+
423
+ .audit-metric .value {
424
+ font-size: 24px;
425
+ font-weight: 800;
426
+ line-height: 1;
427
+ }
428
+
429
+ .audit-metric .meta {
430
+ color: var(--muted);
431
+ font-size: 12px;
432
+ margin-top: 7px;
433
+ line-height: 1.4;
434
+ }
435
+
436
+ .subpanel {
437
+ border: 1px solid var(--border);
438
+ border-radius: 12px;
439
+ background: var(--card);
440
+ padding: 14px;
441
+ min-width: 0;
442
+ }
443
+
444
+ .subpanel h4 {
445
+ margin: 0 0 10px;
446
+ font-size: 13px;
447
+ display: flex;
448
+ align-items: center;
449
+ gap: 7px;
450
+ }
451
+
452
+ .list {
453
+ display: flex;
454
+ flex-direction: column;
455
+ gap: 8px;
456
+ max-height: 320px;
457
+ overflow: auto;
458
+ }
459
+
460
+ .item {
461
+ border: 1px solid var(--border);
462
+ border-radius: 10px;
463
+ background: var(--surface-2);
464
+ padding: 10px 11px;
465
+ }
466
+
467
+ .item-meta {
468
+ display: flex;
469
+ flex-wrap: wrap;
470
+ gap: 6px;
471
+ margin-bottom: 6px;
472
+ }
473
+
474
+ .preview {
475
+ color: var(--muted);
476
+ font-size: 12px;
477
+ line-height: 1.5;
478
+ word-break: break-word;
479
+ }
480
+
481
+ .table-wrap {
482
+ overflow: auto;
483
+ border: 1px solid var(--border);
484
+ border-radius: 12px;
485
+ }
486
+
487
+ table {
488
+ width: 100%;
489
+ border-collapse: collapse;
490
+ min-width: 820px;
491
+ background: transparent;
492
+ }
493
+
494
+ th, td {
495
+ padding: 11px 10px;
496
+ border-bottom: 1px solid var(--border);
497
+ text-align: left;
498
+ vertical-align: middle;
499
+ font-size: 13px;
500
+ color: var(--text);
501
+ }
502
+
503
+ th {
504
+ color: var(--muted);
505
+ background: rgba(111,66,232,0.05);
506
+ font-size: 12px;
507
+ letter-spacing: 0.02em;
508
+ }
509
+
510
+ td .actions {
511
+ display: flex;
512
+ gap: 6px;
513
+ flex-wrap: wrap;
514
+ }
515
+
516
+ .table-btn {
517
+ border: 1px solid rgba(111,66,232,0.15);
518
+ background: var(--surface-2);
519
+ color: var(--text);
520
+ border-radius: 8px;
521
+ padding: 7px 9px;
522
+ cursor: pointer;
523
+ font-size: 12px;
524
+ font-weight: 600;
525
+ }
526
+
527
+ .table-btn:hover {
528
+ border-color: rgba(111,66,232,0.32);
529
+ background: rgba(111,66,232,0.08);
530
+ color: var(--accent);
531
+ }
532
+
533
+ .table-btn.danger:hover {
534
+ border-color: rgba(229,57,53,0.24);
535
+ background: rgba(229,57,53,0.08);
536
+ color: var(--danger);
537
+ }
538
+
539
+ .role {
540
+ display: inline-flex;
541
+ align-items: center;
542
+ padding: 4px 8px;
543
+ border-radius: 999px;
544
+ border: 1px solid var(--border);
545
+ color: var(--muted);
546
+ font-size: 12px;
547
+ font-weight: 700;
548
+ }
549
+
550
+ .footer-space { height: 8px; }
551
+
552
+ .muted {
553
+ color: var(--muted);
554
+ }
555
+
556
+ .error {
557
+ color: var(--danger);
558
+ }
559
+
560
+ @media (max-width: 1100px) {
561
+ .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
562
+ .audit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
563
+ .panel-grid { grid-template-columns: 1fr; }
564
+ }
565
+
566
+ @media (max-width: 760px) {
567
+ .topbar, .content { width: auto; }
568
+ .topbar {
569
+ padding: 16px;
570
+ align-items: flex-start;
571
+ flex-direction: column;
572
+ }
573
+ .content { padding: 16px; gap: 14px; }
574
+ .hero h2 { font-size: 22px; }
575
+ .summary-grid { grid-template-columns: 1fr; }
576
+ .audit-grid { grid-template-columns: 1fr; }
577
+ .two-col, .form-grid { grid-template-columns: 1fr; }
578
+ .field.full { grid-column: auto; }
579
+ .panel-header { align-items: stretch; flex-direction: column; }
580
+ .panel-tools,
581
+ .export-control { align-items: stretch; justify-content: flex-start; min-width: 0; }
582
+ .lattice-ref-admin .inline-control,
583
+ .lattice-ref-admin .button-row { align-items: stretch; flex-direction: column; }
584
+ }
585
+
586
+ .lang-picker { position: relative; }
587
+ .lang-picker-menu {
588
+ display: none;
589
+ position: absolute;
590
+ top: calc(100% + 6px);
591
+ right: 0;
592
+ background: var(--surface-elevated);
593
+ border: 1px solid var(--border);
594
+ border-radius: 8px;
595
+ padding: 4px;
596
+ min-width: 130px;
597
+ z-index: 100;
598
+ box-shadow: 0 8px 24px rgba(88,72,150,0.16);
599
+ }
600
+ .lang-picker-menu.open { display: block; }
601
+ .lang-option {
602
+ padding: 7px 10px;
603
+ border-radius: 7px;
604
+ cursor: pointer;
605
+ font-size: 13px;
606
+ color: var(--text);
607
+ }
608
+ .lang-option:hover { background: rgba(111,66,232,0.07); color: var(--text); }
609
+ .lang-option.active { color: var(--accent); font-weight: 600; }
610
+