DocsLog in

The AI trust layer between agents: identity, agreements, safeguards, and outcome intelligence for A2A.

Viewing files at commit 8941e5beacddCommit detailsView latest

apps/dashboard/src/styles.css 5269 lines · 88.4 KB · css
1
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter+Tight:wght@400;500;600;700&display=swap');
2
@import 'tailwindcss';
3
@import 'tw-animate-css';
4
@import './landing.css';
5
6
@custom-variant dark (&:is(.dark *));
7
8
@theme inline {
9
  --font-sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
10
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
11
  --color-background: var(--background);
12
  --color-foreground: var(--foreground);
13
  --color-card: var(--card);
14
  --color-card-foreground: var(--card-foreground);
15
  --color-popover: var(--popover);
16
  --color-popover-foreground: var(--popover-foreground);
17
  --color-primary: var(--primary);
18
  --color-primary-foreground: var(--primary-foreground);
19
  --color-secondary: var(--secondary);
20
  --color-secondary-foreground: var(--secondary-foreground);
21
  --color-muted: var(--muted);
22
  --color-muted-foreground: var(--muted-foreground);
23
  --color-accent: var(--ui-hover);
24
  --color-accent-foreground: var(--ui-hover-foreground);
25
  --color-destructive: var(--destructive);
26
  --color-border: var(--border);
27
  --color-input: var(--input);
28
  --color-ring: var(--ring);
29
  --color-sidebar: var(--sidebar);
30
  --color-sidebar-foreground: var(--sidebar-foreground);
31
  --color-sidebar-primary: var(--sidebar-primary);
32
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
33
  --color-sidebar-accent: var(--sidebar-accent);
34
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
35
  --color-sidebar-border: var(--sidebar-border);
36
  --color-sidebar-ring: var(--sidebar-ring);
37
  --radius-sm: calc(var(--radius) * 0.75);
38
  --radius-md: calc(var(--radius) * 0.875);
39
  --radius-lg: var(--radius);
40
  --radius-xl: calc(var(--radius) * 1.5);
41
}
42
43
:root {
44
  color-scheme: dark;
45
  --font: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
46
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
47
  --bg: #0c0a0a;
48
  --bg-sidebar: transparent;
49
  --bg-elevated: rgb(18 12 11 / 58%);
50
  --bg-card: transparent;
51
  --bg-hover: rgb(240 75 45 / 10%);
52
  --bg-input: rgb(12 10 10 / 78%);
53
  --bg-well: rgb(255 255 255 / 3.5%);
54
  --border: rgb(255 255 255 / 8%);
55
  --border-strong: rgb(255 255 255 / 14%);
56
  --text: #f6f1ee;
57
  --text-muted: #a39a94;
58
  --text-faint: #7a726c;
59
  --accent: #f04b2d;
60
  --accent-hover: #ff5d3d;
61
  --accent-ink: #ffffff;
62
  --accent-dim: rgb(240 75 45 / 16%);
63
  --accent-line: rgb(240 75 45 / 36%);
64
  --live: #2fbf71;
65
  --live-dim: rgb(47 191 113 / 14%);
66
  --warn: #e59a1a;
67
  --warn-dim: rgb(229 154 26 / 12%);
68
  --warn-line: rgb(229 154 26 / 32%);
69
  --danger: #c41f28;
70
  --danger-dim: rgb(196 31 40 / 12%);
71
  --danger-line: rgb(196 31 40 / 32%);
72
  --info: #e07a62;
73
  --shadow: none;
74
  --radius: 0px;
75
  --radius-sm: 0px;
76
  --glow-a: rgb(240 75 45 / 18%);
77
  --glow-b: rgb(240 75 45 / 8%);
78
  --dot: rgb(240 75 45 / 4%);
79
  --background: transparent;
80
  --foreground: var(--text);
81
  --card: transparent;
82
  --card-foreground: var(--text);
83
  --popover: #161211;
84
  --popover-foreground: var(--text);
85
  --primary: var(--accent);
86
  --primary-foreground: var(--accent-ink);
87
  --secondary: var(--bg-well);
88
  --secondary-foreground: var(--text);
89
  --muted: var(--bg-well);
90
  --muted-foreground: var(--text-muted);
91
  --ui-hover: var(--bg-hover);
92
  --ui-hover-foreground: var(--text);
93
  --destructive: var(--danger);
94
  --input: var(--border-strong);
95
  --ring: var(--accent);
96
  --sidebar: transparent;
97
  --sidebar-foreground: var(--text);
98
  --sidebar-primary: var(--accent);
99
  --sidebar-primary-foreground: var(--accent-ink);
100
  --sidebar-accent: var(--bg-hover);
101
  --sidebar-accent-foreground: var(--text);
102
  --sidebar-border: var(--border);
103
  --sidebar-ring: var(--accent);
104
  font-family: var(--font);
105
  color: var(--text);
106
  background: var(--bg);
107
  font-synthesis: none;
108
  line-height: 1.45;
109
}
110
111
:root[data-theme='light'] {
112
  color-scheme: light;
113
  --bg: #f7f4f2;
114
  --bg-sidebar: transparent;
115
  --bg-elevated: rgb(255 255 255 / 78%);
116
  --bg-card: transparent;
117
  --bg-hover: rgb(240 75 45 / 8%);
118
  --bg-input: #ffffff;
119
  --bg-well: rgb(22 14 12 / 3%);
120
  --border: rgb(22 14 12 / 8%);
121
  --border-strong: rgb(22 14 12 / 14%);
122
  --text: #16110f;
123
  --text-muted: #6b625d;
124
  --text-faint: #8a807a;
125
  --accent-dim: rgb(240 75 45 / 10%);
126
  --accent-line: rgb(240 75 45 / 28%);
127
  --live: #168a4d;
128
  --live-dim: rgb(22 138 77 / 10%);
129
  --warn-dim: rgb(229 154 26 / 12%);
130
  --warn-line: rgb(229 154 26 / 26%);
131
  --danger-dim: rgb(196 31 40 / 10%);
132
  --danger-line: rgb(196 31 40 / 22%);
133
  --glow-a: rgb(240 75 45 / 14%);
134
  --glow-b: rgb(240 75 45 / 6%);
135
  --dot: rgb(240 75 45 / 5%);
136
  --shadow: none;
137
  --popover: #ffffff;
138
}
139
140
* {
141
  box-sizing: border-box;
142
}
143
144
html,
145
body {
146
  min-height: 100%;
147
}
148
149
body {
150
  margin: 0;
151
  min-width: 320px;
152
  background: var(--bg);
153
}
154
155
::selection {
156
  color: var(--accent-ink);
157
  background: var(--accent);
158
}
159
160
button,
161
input,
162
select,
163
textarea {
164
  font: inherit;
165
}
166
167
button,
168
a,
169
input,
170
select,
171
textarea {
172
  outline: none;
173
}
174
175
:focus-visible {
176
  outline: 2px solid var(--accent);
177
  outline-offset: 2px;
178
}
179
180
[data-slot]:focus-visible {
181
  outline: none;
182
}
183
184
.skipLink {
185
  position: absolute;
186
  top: 8px;
187
  left: 8px;
188
  z-index: 20;
189
  padding: 8px 12px;
190
  border-radius: var(--radius-sm);
191
  color: var(--accent-ink);
192
  background: var(--accent);
193
  font-size: 13px;
194
  font-weight: 600;
195
  text-decoration: none;
196
  transform: translateY(-140%);
197
}
198
199
.skipLink:focus {
200
  transform: none;
201
}
202
203
.eyebrow {
204
  margin: 0;
205
  color: var(--text-faint);
206
  font: 500 11px/1.2 var(--mono);
207
  letter-spacing: 0.14em;
208
  text-transform: uppercase;
209
}
210
211
.eyebrow::before {
212
  color: var(--accent);
213
  content: '// ';
214
}
215
216
.mark {
217
  display: grid;
218
  width: 30px;
219
  height: 30px;
220
  place-items: center;
221
  border-radius: 8px;
222
  color: #fff;
223
  background: var(--accent);
224
  font: 600 10px/1 var(--mono);
225
}
226
227
.appInset {
228
  background: transparent;
229
}
230
231
.appTopbar {
232
  display: flex;
233
  align-items: center;
234
  gap: 8px;
235
  padding: 14px 24px 0;
236
}
237
238
.commandKbd {
239
  margin-left: auto;
240
  padding: 1px 5px;
241
  border: 1px solid var(--border);
242
  border-radius: 0;
243
  color: var(--text-faint);
244
  font: 500 10px/1.4 var(--mono);
245
}
246
247
@media (max-width: 640px) {
248
  .commandKbd {
249
    display: none;
250
  }
251
}
252
253
.brand {
254
  display: flex;
255
  align-items: center;
256
  gap: 10px;
257
}
258
259
.brand strong {
260
  font-size: 14px;
261
  font-weight: 600;
262
  letter-spacing: -0.03em;
263
}
264
265
.navRule {
266
  display: block;
267
  height: 1px;
268
  margin: 8px 10px;
269
  background: var(--border);
270
}
271
272
.ghostButton {
273
  display: flex;
274
  align-items: center;
275
  gap: 10px;
276
  width: 100%;
277
  margin-top: 16px;
278
  padding: 9px 2px;
279
  border: 0;
280
  border-radius: 0;
281
  color: var(--text-muted);
282
  background: transparent;
283
  font-size: 12px;
284
  cursor: pointer;
285
}
286
287
.ghostButton:hover,
288
.secondary:hover {
289
  background: var(--bg-hover);
290
}
291
292
.ghostButton svg {
293
  width: 16px;
294
  height: 16px;
295
  flex: none;
296
}
297
298
.sidebarFoot {
299
  display: grid;
300
  gap: 10px;
301
  margin-top: auto;
302
  padding-top: 12px;
303
}
304
305
.privacyStamp {
306
  display: flex;
307
  align-items: center;
308
  gap: 8px;
309
  padding: 0 4px;
310
  border: 0;
311
  background: transparent;
312
}
313
314
.privacyStamp small {
315
  color: var(--text-faint);
316
  font-size: 11px;
317
  line-height: 1.3;
318
}
319
320
.liveDot {
321
  width: 6px;
322
  height: 6px;
323
  flex: none;
324
  border-radius: 0;
325
  background: var(--live);
326
}
327
328
.sidebarTools {
329
  display: flex;
330
  align-items: center;
331
  gap: 6px;
332
}
333
334
.sidebarTools .iconButton {
335
  width: 32px;
336
  height: 32px;
337
  flex: none;
338
}
339
340
.account {
341
  display: flex;
342
  min-width: 0;
343
  flex: 1;
344
  align-items: center;
345
  gap: 8px;
346
  padding: 4px;
347
  border: 0;
348
  border-radius: 0;
349
  color: var(--text);
350
  background: transparent;
351
  text-align: left;
352
  cursor: pointer;
353
}
354
355
.account:hover {
356
  background: var(--bg-hover);
357
}
358
359
.account > span {
360
  display: grid;
361
  width: 28px;
362
  height: 28px;
363
  place-items: center;
364
  border: 0;
365
  border-radius: 50%;
366
  color: var(--accent-ink);
367
  background: var(--accent);
368
  font: 600 10px/1 var(--mono);
369
}
370
371
.account > div {
372
  display: flex;
373
  min-width: 0;
374
  flex: 1;
375
  flex-direction: column;
376
  gap: 2px;
377
}
378
379
.account strong,
380
.account small {
381
  overflow: hidden;
382
  text-overflow: ellipsis;
383
  white-space: nowrap;
384
}
385
386
.account strong {
387
  font-size: 12px;
388
}
389
390
.account small {
391
  color: var(--text-faint);
392
  font-size: 11px;
393
}
394
395
.account > b {
396
  color: var(--text-faint);
397
  font-size: 11px;
398
  font-weight: 500;
399
}
400
401
.mobileActions {
402
  display: flex;
403
  align-items: center;
404
  gap: 8px;
405
}
406
407
.iconButton {
408
  display: grid;
409
  width: 36px;
410
  height: 36px;
411
  place-items: center;
412
  border: 1px solid var(--border);
413
  border-radius: 0;
414
  color: var(--text);
415
  background: transparent;
416
  cursor: pointer;
417
}
418
419
.iconButton svg {
420
  width: 16px;
421
  height: 16px;
422
}
423
424
.appMain {
425
  width: 100%;
426
  max-width: 1040px;
427
  padding: 24px 40px 80px;
428
}
429
430
.appMain > * {
431
  animation: none;
432
}
433
434
.previewBanner {
435
  margin-bottom: 22px;
436
  padding: 0 0 14px;
437
  border: 0;
438
  border-bottom: 1px solid var(--accent-line);
439
  border-radius: 0;
440
  color: var(--accent-soft, var(--text));
441
  background: transparent;
442
  font: 500 12px/1.4 var(--mono);
443
}
444
445
.pageHead {
446
  display: flex;
447
  align-items: center;
448
  justify-content: space-between;
449
  gap: 16px;
450
  min-height: 42px;
451
  padding-bottom: 16px;
452
  border-bottom: 1px solid var(--border);
453
}
454
455
.pageHead h1 {
456
  margin: 0;
457
  font-size: 16px;
458
  font-weight: 500;
459
  letter-spacing: 0;
460
  line-height: 1.2;
461
}
462
463
.pageHead p.lede {
464
  max-width: 520px;
465
  margin: 6px 0 0;
466
  color: var(--text-muted);
467
  font-size: 13px;
468
  line-height: 1.45;
469
}
470
471
.primary,
472
.secondary {
473
  display: inline-flex;
474
  align-items: center;
475
  gap: 8px;
476
  padding: 10px 16px;
477
  border-radius: var(--radius-sm);
478
  cursor: pointer;
479
  font-size: 13px;
480
  font-weight: 600;
481
}
482
483
.primary {
484
  border: 0;
485
  color: #fff;
486
  background: var(--accent);
487
  box-shadow: none;
488
  transition:
489
    background 0.16s ease,
490
    transform 0.16s ease;
491
}
492
493
.primary:hover {
494
  background: var(--accent-hover);
495
}
496
497
.primary:disabled,
498
.secondary:disabled {
499
  opacity: 0.5;
500
  cursor: not-allowed;
501
}
502
503
.secondary {
504
  border: 1px solid var(--border-strong);
505
  color: var(--text);
506
  background: transparent;
507
}
508
509
.metrics {
510
  display: grid;
511
  grid-template-columns: repeat(4, minmax(0, 1fr));
512
  gap: 12px;
513
  margin: 14px 0 8px;
514
}
515
516
.readiness,
517
.attentionBanner {
518
  display: flex;
519
  align-items: center;
520
  justify-content: space-between;
521
  gap: 16px;
522
  margin: 22px 0 0;
523
  padding: 16px 4px 18px;
524
  border: 0;
525
  border-bottom: 1px solid var(--border);
526
  border-radius: 0;
527
  background: transparent;
528
}
529
530
.readiness.ready {
531
  border-color: var(--border);
532
  background: transparent;
533
}
534
535
.attentionBanner {
536
  width: 100%;
537
  color: inherit;
538
  text-align: left;
539
  cursor: pointer;
540
}
541
542
.readiness > div,
543
.attentionBanner > div {
544
  display: flex;
545
  align-items: center;
546
  gap: 12px;
547
}
548
549
.readiness > div > div,
550
.attentionBanner > div > div {
551
  display: flex;
552
  flex-direction: column;
553
  gap: 3px;
554
}
555
556
.readiness strong,
557
.attentionBanner strong {
558
  font-size: 14px;
559
}
560
561
.readiness small,
562
.attentionBanner small {
563
  color: var(--text-muted);
564
  font-size: 12px;
565
}
566
567
.statusIndex {
568
  flex: none;
569
  color: var(--accent);
570
  font: 500 11px/1 var(--mono);
571
  letter-spacing: 0.08em;
572
}
573
574
.readiness .statusIndex {
575
  color: var(--warn);
576
}
577
578
.metric {
579
  display: flex;
580
  min-height: 0;
581
  flex-direction: column;
582
  padding: 4px 8px 4px 0;
583
  border: 0;
584
  border-radius: 0;
585
  background: transparent;
586
}
587
588
.metric::before {
589
  width: 20px;
590
  height: 2px;
591
  margin-bottom: 10px;
592
  border-radius: 99px;
593
  background: var(--accent);
594
  content: '';
595
}
596
597
.metric.warn::before {
598
  background: var(--warn);
599
}
600
601
.metric > span {
602
  color: var(--text-faint);
603
  font: 11px/1.3 var(--mono);
604
  letter-spacing: 0.04em;
605
  text-transform: uppercase;
606
}
607
608
.metric > strong {
609
  margin: 0 0 5px;
610
  font: 500 28px/1 var(--mono);
611
  letter-spacing: -0.05em;
612
}
613
614
.metric > small {
615
  color: var(--text-muted);
616
  font-size: 12px;
617
}
618
619
.metric.warn > strong {
620
  color: var(--warn);
621
}
622
623
.contentGrid,
624
.connectLayout {
625
  display: grid;
626
  grid-template-columns: 1.25fr 1fr;
627
  gap: 36px;
628
}
629
630
.setupRequests {
631
  margin: 22px 0;
632
  padding: 8px 0 4px;
633
  border: 0;
634
  border-radius: 0;
635
  background: transparent;
636
}
637
638
.setupRequests > div:first-child h2 {
639
  margin: 8px 0 4px;
640
  font-size: 16px;
641
  font-weight: 500;
642
  letter-spacing: 0;
643
}
644
645
.setupRequests > div:first-child > p:last-child {
646
  margin: 0 0 16px;
647
  color: var(--text-muted);
648
  font-size: 13px;
649
}
650
651
.setupRequest {
652
  display: flex;
653
  align-items: center;
654
  justify-content: space-between;
655
  gap: 16px;
656
  padding: 16px 0;
657
  border: 0;
658
  border-bottom: 1px solid var(--border);
659
  border-radius: 0;
660
  background: transparent;
661
}
662
663
.setupRequest + .setupRequest {
664
  margin-top: 10px;
665
}
666
667
.setupRequest > div:first-child {
668
  display: flex;
669
  min-width: 0;
670
  flex-direction: column;
671
  gap: 4px;
672
}
673
674
.setupRequest strong {
675
  font-size: 14px;
676
}
677
678
.setupRequest small {
679
  color: var(--text-muted);
680
  font: 12px/1.4 var(--mono);
681
}
682
683
.decisionButtons {
684
  display: flex;
685
  flex: none;
686
  gap: 8px;
687
}
688
689
.setupRequests > .loginError {
690
  margin-top: 10px;
691
}
692
693
.panel {
694
  min-width: 0;
695
  padding: 6px 0 0;
696
  border: 0;
697
  border-radius: 0;
698
  background: transparent;
699
}
700
701
.panelHead {
702
  padding-bottom: 14px;
703
  border-bottom: 1px solid var(--border);
704
}
705
706
.panelHead h2 {
707
  margin: 0;
708
  font-size: 20px;
709
  font-weight: 600;
710
  letter-spacing: -0.03em;
711
}
712
713
.panelHead p {
714
  margin: 4px 0 0;
715
  color: var(--text-muted);
716
  font-size: 13px;
717
}
718
719
.toolbar {
720
  display: flex;
721
  flex-wrap: wrap;
722
  align-items: center;
723
  gap: 10px;
724
  margin: 16px 0 8px;
725
}
726
727
.searchField {
728
  min-width: 220px;
729
  flex: 1;
730
  padding: 10px 0;
731
  border: 0;
732
  border-bottom: 1px solid var(--border-strong);
733
  border-radius: 0;
734
  color: var(--text);
735
  background: transparent;
736
  font-size: 13px;
737
}
738
739
.filterRow {
740
  display: flex;
741
  flex-wrap: wrap;
742
  gap: 6px;
743
}
744
745
.filterChip {
746
  padding: 6px 0;
747
  border: 0;
748
  border-bottom: 1px solid transparent;
749
  border-radius: 0;
750
  color: var(--text-muted);
751
  background: transparent;
752
  font: 500 11px/1.3 var(--mono);
753
  letter-spacing: 0.06em;
754
  text-transform: lowercase;
755
  cursor: pointer;
756
}
757
758
.filterChip.active,
759
.filterChip:hover {
760
  color: var(--text);
761
  background: transparent;
762
}
763
764
.filterChip.active {
765
  border-color: var(--accent);
766
  color: var(--text);
767
  background: transparent;
768
}
769
770
.historyRow {
771
  display: flex;
772
  align-items: center;
773
  gap: 12px;
774
  padding: 13px 4px;
775
  border-bottom: 1px solid var(--border);
776
}
777
778
.historyRow:last-child {
779
  border-bottom: 0;
780
}
781
782
.historyRow:hover {
783
  background: transparent;
784
}
785
786
.historyRow > div {
787
  display: flex;
788
  min-width: 0;
789
  flex: 1;
790
  flex-direction: column;
791
  gap: 3px;
792
}
793
794
.historyRow strong {
795
  font-size: 13px;
796
  font-weight: 600;
797
  text-transform: capitalize;
798
}
799
800
.historyRow small {
801
  overflow: hidden;
802
  color: var(--text-muted);
803
  font: 12px/1.4 var(--mono);
804
  text-overflow: ellipsis;
805
  white-space: nowrap;
806
}
807
808
.historyRow > b {
809
  color: var(--text-faint);
810
  font: 11px/1.3 var(--mono);
811
  text-transform: uppercase;
812
}
813
814
.eventDot {
815
  width: 6px;
816
  height: 6px;
817
  flex: none;
818
  border-radius: 0;
819
  background: var(--live);
820
}
821
822
.eventDot.policy_warning,
823
.eventDot.objection {
824
  background: var(--warn);
825
}
826
827
.eventDot.policy_violation,
828
.eventDot.dispute {
829
  background: var(--danger);
830
}
831
832
.eventDot.receipt {
833
  background: var(--info);
834
}
835
836
.textButton {
837
  margin-top: 14px;
838
  padding: 0;
839
  border: 0;
840
  color: var(--accent);
841
  background: transparent;
842
  font-size: 13px;
843
  font-weight: 600;
844
  cursor: pointer;
845
}
846
847
.empty {
848
  display: grid;
849
  min-height: 180px;
850
  place-items: center;
851
  align-content: center;
852
  padding: 28px;
853
  text-align: center;
854
}
855
856
.empty > span,
857
.empty > svg {
858
  display: block;
859
  margin-bottom: 12px;
860
  color: var(--accent);
861
  font: 500 16px/1 var(--mono);
862
}
863
864
.empty strong {
865
  font-size: 15px;
866
  font-weight: 500;
867
}
868
869
.empty p {
870
  max-width: 420px;
871
  margin: 8px 0 16px;
872
  color: var(--text-muted);
873
  font-size: 13px;
874
  line-height: 1.55;
875
}
876
877
.profile {
878
  padding: 16px 0;
879
  border-bottom: 1px solid var(--border);
880
}
881
882
.profile:last-child {
883
  border-bottom: 0;
884
}
885
886
.profile > div:first-child {
887
  display: flex;
888
  justify-content: space-between;
889
  gap: 12px;
890
  margin-bottom: 12px;
891
}
892
893
.profile > div:first-child strong {
894
  font-size: 13px;
895
}
896
897
.profile > div:first-child small {
898
  color: var(--text-muted);
899
  font: 12px/1.3 var(--mono);
900
}
901
902
.meter {
903
  display: grid;
904
  grid-template-columns: 96px 1fr 40px;
905
  align-items: center;
906
  gap: 10px;
907
  margin: 8px 0;
908
  color: var(--text-muted);
909
  font: 11px/1.3 var(--mono);
910
}
911
912
.meter i {
913
  height: 1px;
914
  overflow: hidden;
915
  border-radius: 0;
916
  background: var(--border);
917
}
918
919
.meter i b {
920
  display: block;
921
  height: 100%;
922
  background: var(--accent);
923
}
924
925
.meter strong {
926
  text-align: right;
927
}
928
929
.agentGrid {
930
  display: grid;
931
  grid-template-columns: repeat(2, minmax(0, 1fr));
932
  gap: 16px;
933
  margin-top: 18px;
934
}
935
936
.agentGrid > .empty {
937
  grid-column: 1 / -1;
938
  border: 0;
939
  border-radius: 0;
940
  background: transparent;
941
}
942
943
.agentCard {
944
  display: flex;
945
  min-height: 230px;
946
  flex-direction: column;
947
  padding: 8px 4px 12px;
948
  border: 0;
949
  border-top: 1px solid var(--border);
950
  border-radius: 0;
951
  background: transparent;
952
}
953
954
.agentTop {
955
  display: flex;
956
  align-items: flex-start;
957
  justify-content: space-between;
958
  gap: 12px;
959
}
960
961
.agentGlyph {
962
  display: grid;
963
  width: 28px;
964
  height: 28px;
965
  place-items: center;
966
  border: 0;
967
  border-radius: 0;
968
  color: var(--accent);
969
  background: transparent;
970
}
971
972
.agentGlyph svg {
973
  width: 18px;
974
  height: 18px;
975
}
976
977
.agentBadges {
978
  display: flex;
979
  flex-wrap: wrap;
980
  justify-content: flex-end;
981
  gap: 6px;
982
}
983
984
.agentTop b {
985
  padding: 0;
986
  border: 0;
987
  border-radius: 0;
988
  color: var(--text-muted);
989
  background: transparent;
990
  font: 11px/1.3 var(--mono);
991
  letter-spacing: 0.04em;
992
  text-transform: lowercase;
993
}
994
995
.agentTop b.bad {
996
  color: var(--danger);
997
  background: transparent;
998
}
999
1000
.agentTop .readyBadge,
1001
.agentTop .onlineBadge {
1002
  color: var(--live);
1003
  background: transparent;
1004
}
1005
1006
:root[data-theme='dark'] .agentTop .readyBadge,
1007
:root[data-theme='dark'] .agentTop .onlineBadge {
1008
  color: var(--live);
1009
}
1010
1011
.agentTop .needsBadge {
1012
  color: var(--warn);
1013
  background: transparent;
1014
}
1015
1016
.agentTop .offlineBadge {
1017
  color: var(--text-faint);
1018
}
1019
1020
.agentCard h2 {
1021
  margin: 18px 0 4px;
1022
  font-size: 18px;
1023
  letter-spacing: -0.03em;
1024
}
1025
1026
.agentCard p,
1027
.agentCard > small {
1028
  color: var(--text-muted);
1029
  font-size: 13px;
1030
}
1031
1032
.agentCard > small {
1033
  display: block;
1034
  margin-top: 10px;
1035
}
1036
1037
.agentPublicLinks {
1038
  display: flex;
1039
  flex-wrap: wrap;
1040
  gap: 12px;
1041
  margin-top: 10px;
1042
}
1043
1044
.agentPublicLinks a {
1045
  color: var(--accent);
1046
  font-size: 13px;
1047
  font-weight: 600;
1048
  text-decoration: none;
1049
}
1050
1051
.agentPublicLinks a:hover {
1052
  text-decoration: underline;
1053
}
1054
1055
.agentCard > button,
1056
.agentCard > .agentActions {
1057
  width: 100%;
1058
  margin-top: 16px;
1059
}
1060
1061
.automationSummary {
1062
  display: flex;
1063
  flex-wrap: wrap;
1064
  gap: 6px;
1065
  margin-top: 14px;
1066
}
1067
1068
.automationSummary span,
1069
.automationPreview span {
1070
  padding: 5px 0;
1071
  border: 0;
1072
  border-radius: 0;
1073
  color: var(--text-muted);
1074
  background: transparent;
1075
  font: 11px/1.3 var(--mono);
1076
}
1077
1078
.automationForm {
1079
  display: grid;
1080
  gap: 12px;
1081
  margin-top: 16px;
1082
  padding-top: 16px;
1083
  border-top: 1px solid var(--border);
1084
}
1085
1086
.runtimeBox {
1087
  display: grid;
1088
  gap: 10px;
1089
  margin-top: 16px;
1090
  padding: 14px 0 0;
1091
  border: 0;
1092
  border-top: 1px solid var(--border);
1093
  border-radius: 0;
1094
  background: transparent;
1095
}
1096
1097
.runtimeBox > div:first-child {
1098
  display: flex;
1099
  align-items: center;
1100
  justify-content: space-between;
1101
  gap: 12px;
1102
}
1103
1104
.runtimeBox p,
1105
.runtimeBox small {
1106
  margin: 0;
1107
  color: var(--text-muted);
1108
  font-size: 12px;
1109
  line-height: 1.5;
1110
}
1111
1112
.runtimeBox input,
1113
.automationForm input,
1114
.automationForm select,
1115
.setting input,
1116
.setting select {
1117
  width: 100%;
1118
  padding: 10px 0;
1119
  border: 0;
1120
  border-bottom: 1px solid var(--border-strong);
1121
  border-radius: 0;
1122
  color: var(--text);
1123
  background: transparent;
1124
  font-size: 13px;
1125
}
1126
1127
.runtimeBox input:focus,
1128
.automationForm input:focus,
1129
.automationForm select:focus,
1130
.setting input:focus,
1131
.setting select:focus,
1132
.searchField:focus {
1133
  border-color: var(--accent);
1134
  box-shadow: 0 0 0 3px rgb(240 75 45 / 22%);
1135
}
1136
1137
.runtimeLive,
1138
.runtimeMissing {
1139
  font: 11px/1.3 var(--mono);
1140
}
1141
1142
.runtimeLive {
1143
  color: var(--live);
1144
}
1145
1146
.runtimeMissing {
1147
  color: var(--warn);
1148
}
1149
1150
.accessTokenBox {
1151
  display: grid;
1152
  gap: 12px;
1153
  margin-top: 12px;
1154
  padding: 14px 0 0;
1155
  border: 0;
1156
  border-top: 1px solid var(--border);
1157
  border-radius: 0;
1158
  background: transparent;
1159
}
1160
1161
.accessTokenHead > div {
1162
  display: flex;
1163
  align-items: center;
1164
  justify-content: space-between;
1165
  gap: 12px;
1166
}
1167
1168
.accessTokenHead span {
1169
  color: var(--accent);
1170
  font: 11px/1.3 var(--mono);
1171
}
1172
1173
.accessTokenHead p {
1174
  margin: 8px 0 0;
1175
  color: var(--text-muted);
1176
  font-size: 12px;
1177
  line-height: 1.5;
1178
}
1179
1180
.tokenList {
1181
  display: grid;
1182
  border-top: 1px solid var(--border);
1183
}
1184
1185
.tokenList > div {
1186
  display: flex;
1187
  align-items: center;
1188
  justify-content: space-between;
1189
  gap: 12px;
1190
  padding-top: 10px;
1191
}
1192
1193
.tokenList span {
1194
  display: grid;
1195
  min-width: 0;
1196
  gap: 3px;
1197
}
1198
1199
.tokenList small {
1200
  color: var(--text-muted);
1201
  font: 10px/1.4 var(--mono);
1202
}
1203
1204
.automationForm label {
1205
  display: grid;
1206
  gap: 6px;
1207
  color: var(--text-muted);
1208
  font-size: 12px;
1209
}
1210
1211
.automationForm .checkControl {
1212
  display: flex;
1213
  grid-template-columns: none;
1214
  align-items: center;
1215
  gap: 8px;
1216
}
1217
1218
.automationForm .checkControl input {
1219
  width: 15px;
1220
  height: 15px;
1221
  accent-color: var(--accent);
1222
}
1223
1224
.agentActions {
1225
  display: flex;
1226
  justify-content: flex-end;
1227
  gap: 8px;
1228
}
1229
1230
.agentManagementActions {
1231
  justify-content: space-between;
1232
}
1233
1234
.dangerButton {
1235
  border-color: var(--danger-line);
1236
  color: var(--danger);
1237
  background: var(--danger-dim);
1238
}
1239
1240
.dangerButton:hover:not(:disabled) {
1241
  border-color: var(--danger);
1242
}
1243
1244
.automationPreview {
1245
  display: flex;
1246
  flex-wrap: wrap;
1247
  gap: 6px;
1248
  margin-top: 8px;
1249
}
1250
1251
.autoAccepted {
1252
  color: var(--live) !important;
1253
}
1254
1255
.tags {
1256
  display: flex;
1257
  flex-wrap: wrap;
1258
  gap: 6px;
1259
  margin-top: 12px;
1260
}
1261
1262
.tags span {
1263
  padding: 4px 0;
1264
  border: 0;
1265
  border-radius: 0;
1266
  color: var(--text-muted);
1267
  font: 11px/1.3 var(--mono);
1268
}
1269
1270
.tags span + span::before,
1271
.automationSummary span + span::before,
1272
.automationPreview span + span::before {
1273
  margin-right: 8px;
1274
  color: var(--accent);
1275
  content: '/';
1276
}
1277
1278
.notice {
1279
  margin: 18px 0;
1280
  padding: 4px 0 16px;
1281
  border: 0;
1282
  border-bottom: 1px solid var(--border);
1283
  color: var(--text-muted);
1284
  background: transparent;
1285
  font-size: 13px;
1286
}
1287
1288
.notice strong {
1289
  margin-right: 6px;
1290
  color: var(--text);
1291
}
1292
1293
.connectionTypePicker {
1294
  display: grid;
1295
  grid-template-columns: repeat(2, minmax(0, 1fr));
1296
  gap: 10px;
1297
  margin-top: 18px;
1298
}
1299
1300
.connectionTypePicker button {
1301
  display: grid;
1302
  gap: 5px;
1303
  padding: 14px 4px 16px;
1304
  border: 0;
1305
  border-top: 2px solid var(--border);
1306
  border-radius: 0;
1307
  color: var(--text);
1308
  background: transparent;
1309
  font-size: 14px;
1310
  font-weight: 600;
1311
  text-align: left;
1312
  cursor: pointer;
1313
}
1314
1315
.connectionTypePicker button.active {
1316
  border-color: var(--accent);
1317
  background: transparent;
1318
}
1319
1320
.connectionTypePicker small {
1321
  color: var(--text-muted);
1322
  font-size: 12px;
1323
  font-weight: 400;
1324
}
1325
1326
.connectLayout {
1327
  margin-top: 18px;
1328
}
1329
1330
.mcpClientSection {
1331
  margin-top: 42px;
1332
  padding-top: 18px;
1333
  border-top: 1px solid var(--border);
1334
}
1335
1336
.mcpClientSection > summary {
1337
  display: flex;
1338
  align-items: baseline;
1339
  justify-content: space-between;
1340
  gap: 20px;
1341
  color: var(--text);
1342
  cursor: pointer;
1343
  list-style-position: inside;
1344
}
1345
1346
.mcpClientSection > summary span {
1347
  font-size: 14px;
1348
  font-weight: 600;
1349
}
1350
1351
.mcpClientSection > summary small {
1352
  max-width: 620px;
1353
  color: var(--text-muted);
1354
  font-size: 12px;
1355
  font-weight: 400;
1356
}
1357
1358
.mcpClientSection[open] > summary {
1359
  padding-bottom: 4px;
1360
}
1361
1362
.providerForm {
1363
  display: grid;
1364
  grid-template-columns: repeat(2, minmax(0, 1fr));
1365
  gap: 12px;
1366
  margin-top: 18px;
1367
}
1368
1369
.providerForm label,
1370
.providerResult label {
1371
  display: grid;
1372
  gap: 6px;
1373
  color: var(--text-muted);
1374
  font-size: 12px;
1375
}
1376
1377
.providerForm input,
1378
.providerForm select,
1379
.providerForm textarea {
1380
  width: 100%;
1381
  padding: 10px 0;
1382
  border: 0;
1383
  border-bottom: 1px solid var(--border-strong);
1384
  border-radius: 0;
1385
  color: var(--text);
1386
  background: transparent;
1387
  font: inherit;
1388
}
1389
1390
.providerForm textarea {
1391
  min-height: 82px;
1392
  resize: vertical;
1393
}
1394
1395
.providerForm .fullWidth {
1396
  grid-column: 1 / -1;
1397
}
1398
1399
.providerSubmit {
1400
  display: flex;
1401
  align-items: center;
1402
  justify-content: space-between;
1403
  gap: 12px;
1404
}
1405
1406
.providerSubmit p {
1407
  margin: 0;
1408
  color: var(--text-muted);
1409
  font-size: 12px;
1410
}
1411
1412
.providerResult {
1413
  display: grid;
1414
  gap: 14px;
1415
  margin-top: 18px;
1416
}
1417
1418
.providerResult code {
1419
  padding: 11px 0;
1420
  border: 0;
1421
  border-bottom: 1px solid var(--border);
1422
  border-radius: 0;
1423
  color: var(--accent);
1424
  background: transparent;
1425
  overflow-wrap: anywhere;
1426
  user-select: all;
1427
}
1428
1429
.successBanner {
1430
  display: grid;
1431
  gap: 3px;
1432
  padding: 12px 0;
1433
  border: 0;
1434
  border-radius: 0;
1435
  background: transparent;
1436
}
1437
1438
.successBanner span {
1439
  color: var(--text-muted);
1440
  font: 11px/1.4 var(--mono);
1441
  overflow-wrap: anywhere;
1442
}
1443
1444
.providerNotice {
1445
  margin-bottom: 0;
1446
}
1447
1448
.endpoint {
1449
  display: flex;
1450
  gap: 8px;
1451
  margin: 20px 0;
1452
}
1453
1454
.endpoint code {
1455
  overflow: auto;
1456
  flex: 1;
1457
  padding: 12px 0;
1458
  border: 0;
1459
  border-bottom: 1px solid var(--border);
1460
  border-radius: 0;
1461
  color: var(--accent);
1462
  background: transparent;
1463
  font: 13px/1.4 var(--mono);
1464
  white-space: nowrap;
1465
}
1466
1467
.endpoint button {
1468
  padding: 0 4px;
1469
  border: 0;
1470
  border-radius: 0;
1471
  color: var(--accent);
1472
  background: transparent;
1473
  font-weight: 600;
1474
  cursor: pointer;
1475
}
1476
1477
.connectLayout ol {
1478
  margin: 8px 0 0;
1479
  padding-left: 22px;
1480
  color: var(--text-muted);
1481
  font-size: 14px;
1482
  line-height: 1.7;
1483
}
1484
1485
.connectSteps {
1486
  display: grid;
1487
  gap: 12px;
1488
  margin-top: 18px;
1489
}
1490
1491
.connectStep {
1492
  display: grid;
1493
  grid-template-columns: 28px 1fr;
1494
  gap: 12px;
1495
  color: var(--text-muted);
1496
  font-size: 14px;
1497
}
1498
1499
.connectStep b {
1500
  display: grid;
1501
  width: 28px;
1502
  height: 28px;
1503
  place-items: center;
1504
  border-radius: 0;
1505
  color: var(--accent);
1506
  background: transparent;
1507
  font: 500 11px/1 var(--mono);
1508
}
1509
1510
.checkList {
1511
  margin: 16px 0 0;
1512
  padding: 0;
1513
  list-style: none;
1514
}
1515
1516
.checkList li {
1517
  padding: 11px 0;
1518
  border-bottom: 1px solid var(--border);
1519
  color: var(--text-muted);
1520
  font-size: 14px;
1521
}
1522
1523
.checkList li:last-child {
1524
  border-bottom: 0;
1525
}
1526
1527
.checkList li::before {
1528
  content: '✓';
1529
  margin-right: 10px;
1530
  color: var(--accent);
1531
}
1532
1533
.settingsCard {
1534
  margin-top: 10px;
1535
  border: 0;
1536
  border-radius: 0;
1537
  background: transparent;
1538
}
1539
1540
.setting {
1541
  display: grid;
1542
  grid-template-columns: 1fr minmax(230px, 0.55fr);
1543
  align-items: center;
1544
  gap: 24px;
1545
  padding: 22px 0;
1546
  border-bottom: 1px solid var(--border);
1547
}
1548
1549
.setting strong {
1550
  font-size: 14px;
1551
}
1552
1553
.setting p {
1554
  max-width: 580px;
1555
  margin: 5px 0 0;
1556
  color: var(--text-muted);
1557
  font-size: 13px;
1558
  line-height: 1.5;
1559
}
1560
1561
.locked {
1562
  float: right;
1563
  color: var(--text-faint);
1564
  font: 12px/1.3 var(--mono);
1565
}
1566
1567
.toggle {
1568
  position: relative;
1569
  display: block;
1570
  width: 42px;
1571
  height: 22px;
1572
  margin-left: auto;
1573
  padding: 0;
1574
  border: 1px solid var(--border-strong);
1575
  border-radius: 0;
1576
  background: var(--bg-well);
1577
  cursor: pointer;
1578
}
1579
1580
.toggle span {
1581
  position: absolute;
1582
  top: 4px;
1583
  left: 4px;
1584
  width: 12px;
1585
  height: 12px;
1586
  border-radius: 0;
1587
  background: var(--text-faint);
1588
  transition: transform 0.18s ease;
1589
}
1590
1591
.toggle.on {
1592
  border-color: var(--accent);
1593
  background: var(--accent);
1594
}
1595
1596
.toggle.on span {
1597
  left: 4px;
1598
  background: #fff;
1599
  transform: translateX(18px);
1600
}
1601
1602
.saveRow {
1603
  display: flex;
1604
  align-items: center;
1605
  gap: 12px;
1606
  padding: 22px 0;
1607
}
1608
1609
.saveRow span {
1610
  color: var(--accent);
1611
  font-size: 13px;
1612
}
1613
1614
.loginPage {
1615
  display: grid;
1616
  grid-template-columns: 1.05fr 0.95fr;
1617
  min-height: 100vh;
1618
}
1619
1620
.loginPitch {
1621
  display: flex;
1622
  flex-direction: column;
1623
  justify-content: space-between;
1624
  padding: 48px 7vw;
1625
  background: transparent;
1626
}
1627
1628
.loginPitch h1 {
1629
  max-width: 680px;
1630
  margin: 10px 0 14px;
1631
  font-size: clamp(40px, 5.4vw, 72px);
1632
  font-weight: 600;
1633
  letter-spacing: -0.06em;
1634
  line-height: 0.94;
1635
}
1636
1637
.loginPitch > div > p:last-child {
1638
  max-width: 540px;
1639
  color: var(--text-muted);
1640
  font-size: 16px;
1641
  line-height: 1.65;
1642
}
1643
1644
.launchBadge {
1645
  display: inline-flex;
1646
  width: fit-content;
1647
  margin: 0 0 18px;
1648
  padding: 5px 10px;
1649
  border: 1px solid var(--accent-line);
1650
  border-radius: 999px;
1651
  color: var(--accent);
1652
  background: var(--accent-dim);
1653
  font: 500 11px/1.3 var(--mono);
1654
}
1655
1656
.loginProof {
1657
  display: grid;
1658
  grid-template-columns: auto 1fr;
1659
  gap: 10px 12px;
1660
  color: var(--text-muted);
1661
  font: 12px/1.3 var(--mono);
1662
  text-transform: uppercase;
1663
}
1664
1665
.loginProof span {
1666
  color: var(--accent);
1667
}
1668
1669
.loginCard {
1670
  display: flex;
1671
  flex-direction: column;
1672
  justify-content: center;
1673
  padding: 8vw;
1674
  gap: 28px;
1675
  border-left: 1px solid var(--border);
1676
  background: transparent;
1677
}
1678
1679
.loginCard h2 {
1680
  margin: 6px 0;
1681
  font-size: 28px;
1682
  font-weight: 600;
1683
  letter-spacing: -0.04em;
1684
}
1685
1686
.socialButtons {
1687
  display: grid;
1688
  gap: 10px;
1689
}
1690
1691
.socialButtons button {
1692
  display: flex;
1693
  align-items: center;
1694
  justify-content: center;
1695
  gap: 10px;
1696
  width: 100%;
1697
  padding: 13px;
1698
  border: 1px solid var(--border-strong);
1699
  border-radius: var(--radius-sm);
1700
  color: var(--text);
1701
  background: transparent;
1702
  font-size: 14px;
1703
  font-weight: 600;
1704
  cursor: pointer;
1705
}
1706
1707
.socialButtons button:first-child {
1708
  border-color: transparent;
1709
  color: var(--accent-ink);
1710
  background: var(--accent);
1711
  box-shadow: none;
1712
}
1713
1714
.socialButtons button:hover {
1715
  border-color: var(--accent);
1716
  background: var(--accent-dim);
1717
}
1718
1719
.socialButtons button:first-child:hover {
1720
  color: var(--accent-ink);
1721
  background: var(--accent-hover);
1722
}
1723
1724
.socialButtons svg {
1725
  width: 18px;
1726
  height: 18px;
1727
}
1728
1729
.loginError,
1730
.errorBar {
1731
  padding: 11px 0;
1732
  border: 0;
1733
  border-radius: 0;
1734
  color: var(--danger);
1735
  background: transparent;
1736
  font-size: 13px;
1737
}
1738
1739
.loginCard > div > p:last-child,
1740
.loginCard > small {
1741
  color: var(--text-muted);
1742
  font-size: 13px;
1743
  line-height: 1.55;
1744
}
1745
1746
.loading {
1747
  display: grid;
1748
  min-height: 100vh;
1749
  place-items: center;
1750
  align-content: center;
1751
  gap: 14px;
1752
  color: var(--text-muted);
1753
  font: 12px/1.3 var(--mono);
1754
  text-transform: uppercase;
1755
}
1756
1757
.loading.compact {
1758
  min-height: 50vh;
1759
}
1760
1761
.spinner {
1762
  width: 22px;
1763
  height: 22px;
1764
  border: 2px solid var(--border);
1765
  border-top-color: var(--accent);
1766
  border-radius: 50%;
1767
  animation: spin 0.8s linear infinite;
1768
}
1769
1770
.errorBar {
1771
  margin-bottom: 14px;
1772
}
1773
1774
@keyframes spin {
1775
  to {
1776
    transform: rotate(360deg);
1777
  }
1778
}
1779
1780
@keyframes fadeUp {
1781
  from {
1782
    opacity: 0;
1783
    transform: translateY(8px);
1784
  }
1785
  to {
1786
    opacity: 1;
1787
    transform: none;
1788
  }
1789
}
1790
1791
@keyframes pulse {
1792
  0%,
1793
  100% {
1794
    opacity: 1;
1795
    box-shadow: 0 0 0 0 rgb(240 75 45 / 35%);
1796
  }
1797
  50% {
1798
    opacity: 0.55;
1799
    box-shadow: 0 0 0 6px transparent;
1800
  }
1801
}
1802
1803
.conversationLayout {
1804
  display: grid;
1805
  grid-template-columns: minmax(260px, 0.7fr) minmax(360px, 1.3fr);
1806
  gap: 16px;
1807
}
1808
1809
.threadList,
1810
.conversationDetail,
1811
.messageList {
1812
  display: grid;
1813
  gap: 10px;
1814
}
1815
1816
.threadList > button {
1817
  display: flex;
1818
  align-items: center;
1819
  justify-content: space-between;
1820
  width: 100%;
1821
  padding: 12px 2px;
1822
  border: 0;
1823
  border-bottom: 1px solid var(--border);
1824
  border-radius: 0;
1825
  color: var(--text);
1826
  background: transparent;
1827
  text-align: left;
1828
  cursor: pointer;
1829
}
1830
1831
.threadList > button.active,
1832
.threadList > button:hover {
1833
  border-color: var(--accent);
1834
  background: transparent;
1835
}
1836
1837
.threadList span,
1838
.threadList small {
1839
  display: block;
1840
}
1841
1842
.threadList small,
1843
.messageList span {
1844
  margin-top: 4px;
1845
  color: var(--text-muted);
1846
  font-size: 11px;
1847
}
1848
1849
.threadList b,
1850
.conversationInsights b {
1851
  color: var(--accent);
1852
  font: 10px/1.2 var(--mono);
1853
}
1854
1855
.conversationInsights {
1856
  padding: 4px 0 12px;
1857
  border: 0;
1858
  border-bottom: 1px solid var(--warn-line);
1859
  border-radius: 0;
1860
  background: transparent;
1861
}
1862
1863
.conversationInsights p {
1864
  margin: 0 0 6px;
1865
  font-size: 12px;
1866
  line-height: 1.5;
1867
}
1868
1869
.conversationInsights p:last-child {
1870
  margin-bottom: 0;
1871
}
1872
1873
.messageList article {
1874
  max-width: 82%;
1875
  padding: 4px 0 12px;
1876
  border: 0;
1877
  border-radius: 0;
1878
  background: transparent;
1879
}
1880
1881
.messageList article.sent {
1882
  justify-self: end;
1883
  border-color: transparent;
1884
  background: transparent;
1885
}
1886
1887
.messageList article p {
1888
  margin: 4px 0;
1889
  white-space: pre-wrap;
1890
}
1891
1892
.replyBox {
1893
  display: grid;
1894
  gap: 8px;
1895
}
1896
1897
.replyBox textarea {
1898
  min-height: 100px;
1899
  padding: 10px 0;
1900
  border: 0;
1901
  border-bottom: 1px solid var(--border-strong);
1902
  border-radius: 0;
1903
  color: var(--text);
1904
  background: transparent;
1905
  resize: vertical;
1906
}
1907
1908
.historyToolbar {
1909
  display: flex;
1910
  flex-wrap: wrap;
1911
  align-items: center;
1912
  gap: 10px;
1913
  margin-bottom: 16px;
1914
}
1915
1916
.journeyLayout {
1917
  display: grid;
1918
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
1919
  gap: 16px;
1920
  align-items: start;
1921
}
1922
1923
.journeyList {
1924
  display: grid;
1925
  gap: 8px;
1926
}
1927
1928
.journeyList > button {
1929
  display: flex;
1930
  width: 100%;
1931
  flex-direction: column;
1932
  gap: 7px;
1933
  padding: 15px 4px;
1934
  border: 0;
1935
  border-bottom: 1px solid var(--border);
1936
  border-radius: 0;
1937
  color: var(--text);
1938
  background: transparent;
1939
  text-align: left;
1940
  cursor: pointer;
1941
}
1942
1943
.journeyList > button:hover {
1944
  border-color: var(--border-strong);
1945
  background: transparent;
1946
}
1947
1948
.journeyList > button.active {
1949
  border-color: var(--accent);
1950
  box-shadow: none;
1951
}
1952
1953
.journeyListTop,
1954
.journeyListMeta {
1955
  display: flex;
1956
  align-items: center;
1957
  justify-content: space-between;
1958
  gap: 10px;
1959
}
1960
1961
.journeyListTop > b {
1962
  color: var(--text-faint);
1963
  font: 500 10px/1.2 var(--mono);
1964
  letter-spacing: 0.08em;
1965
  text-transform: uppercase;
1966
}
1967
1968
.journeyList > button > strong {
1969
  font-size: 13px;
1970
  line-height: 1.4;
1971
}
1972
1973
.journeyList > button > small {
1974
  overflow: hidden;
1975
  color: var(--text-muted);
1976
  font: 11px/1.4 var(--mono);
1977
  text-overflow: ellipsis;
1978
  white-space: nowrap;
1979
}
1980
1981
.journeyListMeta {
1982
  color: var(--text-faint);
1983
  font: 10px/1.3 var(--mono);
1984
}
1985
1986
.journeyListMeta i {
1987
  font-style: normal;
1988
}
1989
1990
.statusPill {
1991
  display: inline-grid;
1992
  grid-template-columns: 6px minmax(7.4em, max-content);
1993
  align-items: center;
1994
  gap: 7px;
1995
  flex: none;
1996
  min-width: 8.4em;
1997
  padding: 0;
1998
  border: 0;
1999
  border-radius: 0;
2000
  color: var(--text-muted);
2001
  background: transparent;
2002
  font: 500 10px/1 var(--mono);
2003
  letter-spacing: 0.06em;
2004
  text-transform: uppercase;
2005
  white-space: nowrap;
2006
}
2007
2008
.statusPill i {
2009
  width: 6px;
2010
  height: 6px;
2011
  border-radius: 1px;
2012
  background: currentColor;
2013
}
2014
2015
.statusPill.good {
2016
  color: var(--live);
2017
}
2018
2019
.statusPill.warn {
2020
  color: var(--warn);
2021
}
2022
2023
:root[data-theme='light'] .statusPill.warn {
2024
  color: #8a5a16;
2025
}
2026
2027
.statusPill.danger {
2028
  color: var(--danger);
2029
}
2030
2031
.journeyDetail {
2032
  min-width: 0;
2033
  overflow: hidden;
2034
  border: 0;
2035
  border-radius: 0;
2036
  background: transparent;
2037
}
2038
2039
.journeyHero {
2040
  display: flex;
2041
  align-items: flex-start;
2042
  justify-content: space-between;
2043
  gap: 20px;
2044
  padding: 8px 0 22px;
2045
  border-bottom: 1px solid var(--border);
2046
}
2047
2048
.journeyHero h2 {
2049
  max-width: 780px;
2050
  margin: 8px 0 5px;
2051
  font-size: clamp(18px, 2vw, 24px);
2052
  line-height: 1.25;
2053
  letter-spacing: -0.03em;
2054
}
2055
2056
.journeyHero p {
2057
  margin: 0;
2058
  color: var(--text-muted);
2059
  font: 11px/1.4 var(--mono);
2060
}
2061
2062
.journeySummaryGrid {
2063
  display: grid;
2064
  grid-template-columns: repeat(4, minmax(0, 1fr));
2065
  border-bottom: 1px solid var(--border);
2066
}
2067
2068
.journeySummaryGrid section {
2069
  display: flex;
2070
  min-width: 0;
2071
  flex-direction: column;
2072
  gap: 5px;
2073
  padding: 16px 20px 16px 0;
2074
  border-right: 1px solid var(--border);
2075
}
2076
2077
.journeySummaryGrid section:last-child {
2078
  border-right: 0;
2079
}
2080
2081
.journeySummaryGrid span,
2082
.outcomeCard > div > span,
2083
.profileDelta > span {
2084
  color: var(--text-faint);
2085
  font: 10px/1.3 var(--mono);
2086
  letter-spacing: 0.05em;
2087
  text-transform: uppercase;
2088
}
2089
2090
.journeySummaryGrid strong {
2091
  overflow: hidden;
2092
  font-size: 15px;
2093
  text-overflow: ellipsis;
2094
  white-space: nowrap;
2095
}
2096
2097
.journeySummaryGrid small {
2098
  overflow: hidden;
2099
  color: var(--text-muted);
2100
  font-size: 11px;
2101
  text-overflow: ellipsis;
2102
  white-space: nowrap;
2103
}
2104
2105
.outcomeCard {
2106
  margin: 18px 0;
2107
  padding: 18px 0;
2108
  border: 0;
2109
  border-top: 1px solid var(--border);
2110
  border-radius: 0;
2111
  background: transparent;
2112
}
2113
2114
.outcomeCard h3 {
2115
  max-width: 800px;
2116
  margin: 7px 0 14px;
2117
  font-size: 14px;
2118
  font-weight: 500;
2119
  line-height: 1.55;
2120
}
2121
2122
.outcomeCard ul {
2123
  display: grid;
2124
  gap: 7px;
2125
  margin: 0;
2126
  padding: 0;
2127
  list-style: none;
2128
}
2129
2130
.outcomeCard li {
2131
  display: flex;
2132
  align-items: center;
2133
  gap: 9px;
2134
  color: var(--text-muted);
2135
  font-size: 12px;
2136
}
2137
2138
.ratingGrid {
2139
  display: grid;
2140
  grid-template-columns: repeat(2, minmax(0, 1fr));
2141
  gap: 0 24px;
2142
  margin-top: 16px;
2143
  padding-top: 10px;
2144
  border-top: 1px solid var(--accent-line);
2145
}
2146
2147
.progressCard {
2148
  margin: 18px 0;
2149
  padding: 18px 0;
2150
  border: 0;
2151
  border-top: 1px solid var(--border);
2152
  border-radius: 0;
2153
  background: transparent;
2154
}
2155
2156
.progressCardTop {
2157
  display: flex;
2158
  align-items: flex-start;
2159
  justify-content: space-between;
2160
  gap: 16px;
2161
}
2162
2163
.progressCardTop h3 {
2164
  margin: 6px 0 0;
2165
  font-size: 15px;
2166
}
2167
2168
.progressCardTop > strong {
2169
  color: var(--accent);
2170
  font: 600 22px/1 var(--mono);
2171
}
2172
2173
.progressTrack {
2174
  height: 1px;
2175
  margin: 16px 0 13px;
2176
  overflow: hidden;
2177
  border-radius: 0;
2178
  background: var(--border);
2179
}
2180
2181
.progressTrack i {
2182
  display: block;
2183
  height: 100%;
2184
  border-radius: inherit;
2185
  background: var(--accent);
2186
  transition: width 180ms ease;
2187
}
2188
2189
.progressFacts {
2190
  display: flex;
2191
  flex-wrap: wrap;
2192
  gap: 7px;
2193
}
2194
2195
.progressFacts span {
2196
  padding: 5px 0;
2197
  border: 0;
2198
  border-radius: 0;
2199
  color: var(--text-muted);
2200
  background: transparent;
2201
  font-size: 10px;
2202
}
2203
2204
.progressWarning {
2205
  margin: 13px 0 0;
2206
  padding-top: 12px;
2207
  border-top: 1px solid var(--warn-line);
2208
  color: var(--warn);
2209
  font-size: 11px;
2210
}
2211
2212
.assuranceDecisionGrid {
2213
  display: grid;
2214
  margin-top: 16px;
2215
  padding-top: 16px;
2216
  grid-template-columns: repeat(2, minmax(0, 1fr));
2217
  gap: 24px;
2218
  border-top: 1px solid var(--border);
2219
}
2220
2221
.assuranceDecisionGrid > section,
2222
.assuranceRisk,
2223
.assuranceProbe,
2224
.assuranceSafeguards,
2225
.assuranceSafeguard > div:first-child {
2226
  display: grid;
2227
  gap: 6px;
2228
}
2229
2230
.assuranceRisk,
2231
.assuranceProbe {
2232
  padding: 10px 0;
2233
  border-bottom: 1px dashed var(--border);
2234
}
2235
2236
.assuranceRisk strong,
2237
.assuranceProbe strong,
2238
.assuranceSafeguard strong {
2239
  font-size: 12px;
2240
  font-weight: 500;
2241
}
2242
2243
.assuranceRisk small,
2244
.assuranceProbe small,
2245
.assuranceSafeguard small,
2246
.assuranceNotice,
2247
.assuranceCalibration {
2248
  color: var(--text-muted);
2249
  font-size: 10px;
2250
  line-height: 1.5;
2251
}
2252
2253
.assuranceSafeguards {
2254
  margin-top: 16px;
2255
  padding-top: 16px;
2256
  border-top: 1px solid var(--border);
2257
}
2258
2259
.assuranceSafeguard {
2260
  display: flex;
2261
  align-items: center;
2262
  justify-content: space-between;
2263
  gap: 20px;
2264
  padding: 10px 0;
2265
  border-bottom: 1px dashed var(--border);
2266
}
2267
2268
.assuranceDecisionActions {
2269
  display: flex;
2270
  flex: none;
2271
  gap: 6px;
2272
}
2273
2274
.assuranceDecisionActions button {
2275
  min-height: 30px;
2276
  padding: 0 10px;
2277
  border: 1px solid var(--border-strong);
2278
  color: var(--text-muted);
2279
  background: transparent;
2280
  font: 500 10px/1 var(--mono);
2281
  cursor: pointer;
2282
}
2283
2284
.assuranceDecisionActions button.approve {
2285
  border-color: var(--accent-line);
2286
  color: var(--accent);
2287
}
2288
2289
.assuranceDecisionActions button:disabled {
2290
  cursor: wait;
2291
  opacity: 0.45;
2292
}
2293
2294
.assuranceCalibration,
2295
.assuranceNotice {
2296
  margin: 13px 0 0;
2297
}
2298
2299
.assuranceCalibration {
2300
  color: var(--live);
2301
}
2302
2303
@media (max-width: 720px) {
2304
  .assuranceDecisionGrid {
2305
    grid-template-columns: 1fr;
2306
  }
2307
2308
  .assuranceSafeguard {
2309
    align-items: flex-start;
2310
    flex-direction: column;
2311
  }
2312
}
2313
2314
.journeyNotice {
2315
  margin: 18px 0;
2316
  padding: 13px 0;
2317
  border: 0;
2318
  border-top: 1px solid var(--warn-line);
2319
  border-radius: 0;
2320
  color: var(--text-muted);
2321
  background: transparent;
2322
  font-size: 12px;
2323
}
2324
2325
.journeyTimelineSection {
2326
  padding: 4px 0 24px;
2327
}
2328
2329
.journeyTimelineSection > div:first-child h3 {
2330
  margin: 0;
2331
  font-size: 14px;
2332
}
2333
2334
.journeyTimelineSection > div:first-child small {
2335
  color: var(--text-muted);
2336
  font-size: 11px;
2337
}
2338
2339
.journeyTimeline {
2340
  margin: 18px 0 0;
2341
  padding: 0;
2342
  list-style: none;
2343
}
2344
2345
.journeyTimeline li {
2346
  position: relative;
2347
  display: grid;
2348
  grid-template-columns: 8px minmax(0, 1fr) minmax(8.4em, max-content);
2349
  gap: 12px;
2350
  min-height: 76px;
2351
}
2352
2353
.journeyTimeline li:not(:last-child)::before {
2354
  position: absolute;
2355
  top: 12px;
2356
  bottom: -4px;
2357
  left: 3px;
2358
  width: 1px;
2359
  background: var(--border-strong);
2360
  content: '';
2361
}
2362
2363
.journeyNode {
2364
  z-index: 1;
2365
  width: 7px;
2366
  height: 7px;
2367
  margin-top: 5px;
2368
  border: 0;
2369
  border-radius: 1px;
2370
  background: var(--text-faint);
2371
  box-shadow: none;
2372
}
2373
2374
.journeyNode.good {
2375
  background: var(--live);
2376
}
2377
2378
.journeyNode.warn {
2379
  background: var(--warn);
2380
}
2381
2382
.journeyNode.danger {
2383
  background: var(--danger);
2384
}
2385
2386
.journeyTimeline li > .statusPill {
2387
  justify-self: start;
2388
  width: 100%;
2389
}
2390
2391
.journeyTimeline li > div {
2392
  display: flex;
2393
  min-width: 0;
2394
  flex-direction: column;
2395
  gap: 3px;
2396
  padding-bottom: 18px;
2397
}
2398
2399
.journeyTimeline li > div > span {
2400
  color: var(--text-faint);
2401
  font: 9px/1.3 var(--mono);
2402
  text-transform: uppercase;
2403
}
2404
2405
.journeyTimeline li strong {
2406
  font-size: 12px;
2407
}
2408
2409
.journeyTimeline li p {
2410
  margin: 0;
2411
  color: var(--text-muted);
2412
  font-size: 11px;
2413
  line-height: 1.5;
2414
}
2415
2416
.insightPrinciple {
2417
  display: grid;
2418
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr);
2419
  gap: 30px;
2420
  align-items: center;
2421
  margin-bottom: 16px;
2422
  padding: 8px 0 22px;
2423
  border: 0;
2424
  border-bottom: 1px solid var(--border);
2425
  border-radius: 0;
2426
  background: transparent;
2427
}
2428
2429
.insightPrinciple h2 {
2430
  margin: 0 0 5px;
2431
  font-size: 16px;
2432
  font-weight: 500;
2433
  letter-spacing: 0;
2434
}
2435
2436
.insightPrinciple p {
2437
  max-width: 680px;
2438
  margin: 0;
2439
  color: var(--text-muted);
2440
  font-size: 13px;
2441
  line-height: 1.55;
2442
}
2443
2444
.insightStats {
2445
  display: grid;
2446
  grid-template-columns: repeat(3, 1fr);
2447
  gap: 8px;
2448
}
2449
2450
.insightStats span {
2451
  display: flex;
2452
  min-width: 0;
2453
  flex-direction: column;
2454
  padding: 12px 0;
2455
  border: 0;
2456
  border-radius: 0;
2457
  color: var(--text-muted);
2458
  background: transparent;
2459
  font-size: 10px;
2460
  text-align: left;
2461
}
2462
2463
.insightStats strong {
2464
  margin-bottom: 3px;
2465
  color: var(--text);
2466
  font: 500 22px/1 var(--mono);
2467
}
2468
2469
.insightGrid {
2470
  display: grid;
2471
  grid-template-columns: repeat(2, minmax(0, 1fr));
2472
  gap: 16px;
2473
  margin-bottom: 16px;
2474
}
2475
2476
.insightGrid > .empty {
2477
  grid-column: 1 / -1;
2478
  border: 0;
2479
  border-radius: 0;
2480
  background: transparent;
2481
}
2482
2483
.profileHead {
2484
  display: flex;
2485
  align-items: flex-start;
2486
  justify-content: space-between;
2487
  gap: 12px;
2488
  margin-bottom: 2px;
2489
}
2490
2491
.profileHead > div {
2492
  display: flex;
2493
  min-width: 0;
2494
  flex-direction: column;
2495
  gap: 3px;
2496
}
2497
2498
.profileHeadCompact {
2499
  align-items: center;
2500
  margin-bottom: 11px;
2501
}
2502
2503
.profileHeadCompact > small {
2504
  color: var(--text-faint);
2505
  font: 10px/1.4 var(--mono);
2506
}
2507
2508
.sampleBadge {
2509
  padding: 4px 7px;
2510
  border-radius: 999px;
2511
  color: var(--accent);
2512
  background: var(--accent-dim);
2513
  font: 9px/1.2 var(--mono);
2514
  white-space: nowrap;
2515
}
2516
2517
:root[data-theme='light'] .sampleBadge {
2518
  color: #c43a22;
2519
}
2520
2521
:root[data-theme='light'] .account > span {
2522
  color: var(--accent-ink);
2523
}
2524
2525
:root[data-theme='light'] .profileDelta b.positive {
2526
  color: #c43a22;
2527
}
2528
2529
:root[data-theme='light'] .profileDelta b.negative {
2530
  color: #a33d2e;
2531
}
2532
2533
.profileEvidenceLine {
2534
  margin-bottom: 11px;
2535
  color: var(--text-faint);
2536
  font: 10px/1.4 var(--mono);
2537
}
2538
2539
.profileDelta {
2540
  margin-top: 14px;
2541
  padding-top: 12px;
2542
  border-top: 1px solid var(--border);
2543
}
2544
2545
.profileDelta > div {
2546
  display: flex;
2547
  flex-wrap: wrap;
2548
  gap: 5px;
2549
  margin-top: 7px;
2550
}
2551
2552
.profileDelta b {
2553
  padding: 4px 6px;
2554
  border-radius: 4px;
2555
  color: var(--text-muted);
2556
  background: var(--bg-well);
2557
  font: 9px/1.2 var(--mono);
2558
}
2559
2560
.profileDelta b.positive {
2561
  color: var(--accent);
2562
}
2563
2564
.profileDelta b.negative {
2565
  color: var(--danger);
2566
}
2567
2568
.learningDecisionList {
2569
  display: grid;
2570
}
2571
2572
.learningDecisionList article {
2573
  display: grid;
2574
  grid-template-columns: auto minmax(0, 1fr);
2575
  gap: 12px;
2576
  padding: 14px 0;
2577
  border-bottom: 1px solid var(--border);
2578
}
2579
2580
.learningDecisionList article:last-child {
2581
  border-bottom: 0;
2582
}
2583
2584
.learningDecisionList article > div {
2585
  display: flex;
2586
  min-width: 0;
2587
  flex-direction: column;
2588
  gap: 3px;
2589
}
2590
2591
.learningDecisionList strong {
2592
  overflow: hidden;
2593
  font: 11px/1.4 var(--mono);
2594
  text-overflow: ellipsis;
2595
}
2596
2597
.learningDecisionList small {
2598
  color: var(--text-muted);
2599
  font-size: 10px;
2600
}
2601
2602
.learningDecisionList p {
2603
  margin: 2px 0 0;
2604
  color: var(--text-muted);
2605
  font-size: 11px;
2606
}
2607
2608
@media (prefers-reduced-motion: reduce) {
2609
  .spinner,
2610
  .toggle span,
2611
  .liveDot,
2612
  .appMain > * {
2613
    animation: none;
2614
    transition: none;
2615
  }
2616
2617
  .primary {
2618
    transition: none;
2619
  }
2620
2621
  .primary:hover {
2622
    transform: none;
2623
  }
2624
}
2625
2626
/* Simplified agent workspace */
2627
.simpleShell {
2628
  min-height: 100svh;
2629
  background: var(--bg);
2630
}
2631
2632
.simpleShell.landingPage {
2633
  overflow-x: clip;
2634
}
2635
2636
.dashHeader {
2637
  position: sticky;
2638
  z-index: 30;
2639
}
2640
2641
.dashHeader .landingBrand {
2642
  border: 0;
2643
  padding: 0;
2644
  background: transparent;
2645
  cursor: pointer;
2646
}
2647
2648
.dashNav {
2649
  display: flex;
2650
  align-items: center;
2651
  gap: 28px;
2652
  color: var(--text-muted);
2653
  font-size: 12px;
2654
}
2655
2656
.dashNav button {
2657
  padding: 0;
2658
  border: 0;
2659
  color: inherit;
2660
  background: transparent;
2661
  letter-spacing: 0.06em;
2662
  text-transform: lowercase;
2663
  cursor: pointer;
2664
  font: inherit;
2665
  transition: color 140ms ease;
2666
}
2667
2668
.dashNav button::before {
2669
  margin-right: 2px;
2670
  color: var(--text-faint);
2671
  content: '/';
2672
}
2673
2674
.dashNav button:hover,
2675
.dashNav button[aria-current='page'] {
2676
  color: var(--text);
2677
}
2678
2679
.accountMark {
2680
  display: grid;
2681
  width: 34px;
2682
  height: 34px;
2683
  place-items: center;
2684
  border: 1px solid var(--border);
2685
  color: var(--text-muted);
2686
  background: transparent;
2687
  font: 500 10px/1 var(--mono);
2688
  letter-spacing: 0.08em;
2689
  cursor: pointer;
2690
}
2691
2692
.accountMark:hover,
2693
.accountMark[data-state='open'] {
2694
  border-color: var(--border-strong);
2695
  color: var(--text);
2696
}
2697
2698
.dashMenu {
2699
  min-width: 180px;
2700
  border-radius: 0;
2701
  font-family: var(--mono);
2702
  font-size: 12px;
2703
  letter-spacing: 0.04em;
2704
  text-transform: lowercase;
2705
}
2706
2707
.simpleMain {
2708
  position: relative;
2709
  z-index: 1;
2710
  width: min(1120px, calc(100% - 48px));
2711
  margin: 0 auto;
2712
  padding: 28px 0 80px;
2713
}
2714
2715
.simpleMain p,
2716
.simpleMain .lede,
2717
.simpleMain input,
2718
.simpleMain textarea,
2719
.simpleMain select {
2720
  font-family: var(--font);
2721
}
2722
2723
.workspacePage {
2724
  display: grid;
2725
  gap: 22px;
2726
}
2727
2728
.workspaceHead {
2729
  display: flex;
2730
  align-items: center;
2731
  justify-content: space-between;
2732
  gap: 16px;
2733
  min-height: 42px;
2734
}
2735
2736
.landingPage.simpleShell .workspaceHead h1,
2737
.landingPage.simpleShell .pageHead h1 {
2738
  display: flex;
2739
  align-items: baseline;
2740
  gap: 10px;
2741
  margin: 0;
2742
  font-size: 16px;
2743
  font-weight: 500;
2744
  letter-spacing: 0;
2745
  line-height: 1.2;
2746
}
2747
2748
.workspaceHead h1 small {
2749
  color: var(--text-muted);
2750
  font: 400 12px/1 var(--mono);
2751
}
2752
2753
.assuranceOverview {
2754
  display: grid;
2755
  padding: 18px 0;
2756
  grid-template-columns: minmax(240px, 1.15fr) minmax(320px, 1fr) auto;
2757
  align-items: center;
2758
  gap: 28px;
2759
  border-top: 1px solid var(--accent-line);
2760
  border-bottom: 1px solid var(--accent-line);
2761
}
2762
2763
.assuranceOverview h2 {
2764
  margin: 6px 0 4px;
2765
  font-size: 16px;
2766
  font-weight: 500;
2767
}
2768
2769
.assuranceOverview p {
2770
  max-width: 560px;
2771
  margin: 0;
2772
  color: var(--text-muted);
2773
  font-size: 11px;
2774
  line-height: 1.5;
2775
}
2776
2777
.assuranceOverviewStats {
2778
  display: grid;
2779
  grid-template-columns: repeat(4, minmax(70px, 1fr));
2780
  gap: 16px;
2781
}
2782
2783
.assuranceOverviewStats span {
2784
  display: grid;
2785
  gap: 3px;
2786
  color: var(--text-faint);
2787
  font: 400 9px/1.35 var(--mono);
2788
  text-transform: uppercase;
2789
}
2790
2791
.assuranceOverviewStats strong {
2792
  color: var(--text);
2793
  font-size: 16px;
2794
  font-weight: 500;
2795
}
2796
2797
.assuranceOverview > button {
2798
  display: inline-flex;
2799
  min-height: 34px;
2800
  padding: 0 12px;
2801
  align-items: center;
2802
  gap: 8px;
2803
  border: 1px solid var(--border-strong);
2804
  color: var(--text-muted);
2805
  background: transparent;
2806
  font: 500 10px/1 var(--mono);
2807
  cursor: pointer;
2808
  white-space: nowrap;
2809
}
2810
2811
.assuranceOverview > button svg {
2812
  width: 13px;
2813
}
2814
2815
@media (max-width: 980px) {
2816
  .assuranceOverview {
2817
    grid-template-columns: 1fr;
2818
  }
2819
2820
  .assuranceOverview > button {
2821
    width: fit-content;
2822
  }
2823
}
2824
2825
@media (max-width: 620px) {
2826
  .assuranceOverviewStats {
2827
    grid-template-columns: repeat(2, minmax(0, 1fr));
2828
  }
2829
}
2830
2831
.firstRunGuide {
2832
  position: relative;
2833
  display: grid;
2834
  gap: 0;
2835
  padding: 0 0 8px;
2836
  border: 1px solid var(--border-strong);
2837
  border-right-style: dashed;
2838
  background: color-mix(in srgb, var(--bg) 70%, transparent);
2839
}
2840
2841
.firstRunGuide:has(.firstRunComplete) .firstRunHeader,
2842
.firstRunGuide:has(.firstRunComplete) .firstRunSteps {
2843
  display: none;
2844
}
2845
2846
.firstRunGuide:has(.firstRunComplete) .firstRunComplete {
2847
  border-top: 0;
2848
}
2849
2850
.firstRunHeader,
2851
.firstRunStage,
2852
.firstRunWaiting,
2853
.firstRunComplete {
2854
  display: flex;
2855
  align-items: center;
2856
  gap: 14px;
2857
}
2858
2859
.firstRunHeader {
2860
  align-items: start;
2861
  justify-content: space-between;
2862
  padding: 22px 22px 8px;
2863
}
2864
2865
.firstRunHeader h2 {
2866
  margin: 0 0 6px;
2867
  font-size: 16px;
2868
  font-weight: 500;
2869
  letter-spacing: 0;
2870
}
2871
2872
.firstRunHeader p,
2873
.firstRunStage p,
2874
.firstRunWaiting p,
2875
.firstRunComplete p {
2876
  margin: 0;
2877
  color: var(--text-muted);
2878
  font-size: 13px;
2879
  line-height: 1.55;
2880
}
2881
2882
.firstRunCount {
2883
  color: var(--accent);
2884
  font: 600 13px/1 var(--mono);
2885
}
2886
2887
.firstRunSteps {
2888
  display: grid;
2889
  grid-template-columns: repeat(4, minmax(0, 1fr));
2890
  gap: 1px;
2891
  margin: 8px 22px 0;
2892
  padding: 0;
2893
  background: var(--border);
2894
  list-style: none;
2895
}
2896
2897
.firstRunSteps.twoSteps {
2898
  grid-template-columns: repeat(2, minmax(0, 1fr));
2899
}
2900
2901
.firstRunSteps li {
2902
  display: flex;
2903
  align-items: center;
2904
  gap: 9px;
2905
  min-height: 46px;
2906
  padding: 0 12px;
2907
  color: var(--text-muted);
2908
  background: var(--bg-elevated);
2909
  font-size: 12px;
2910
}
2911
2912
.firstRunSteps li > span {
2913
  display: grid;
2914
  width: 22px;
2915
  height: 22px;
2916
  place-items: center;
2917
  border: 1px solid var(--border-strong);
2918
  font: 500 10px/1 var(--mono);
2919
}
2920
2921
.firstRunSteps li.done {
2922
  color: var(--text);
2923
}
2924
2925
.firstRunSteps li.done > span {
2926
  border-color: var(--accent-line);
2927
  color: var(--accent);
2928
  background: var(--accent-dim);
2929
}
2930
2931
.firstRunSteps svg,
2932
.firstRunIcon svg,
2933
.firstRunComplete button svg {
2934
  width: 14px;
2935
  height: 14px;
2936
}
2937
2938
.firstRunForm {
2939
  display: grid;
2940
  grid-template-columns: repeat(2, minmax(0, 1fr));
2941
  gap: 14px;
2942
  padding: 18px 22px 22px;
2943
  border-top: 1px solid var(--border);
2944
}
2945
2946
.firstRunStage,
2947
.firstRunBlocked,
2948
.firstRunWaiting {
2949
  grid-column: 1 / -1;
2950
}
2951
2952
.firstRunStage {
2953
  align-items: start;
2954
}
2955
2956
.firstRunStage > div,
2957
.firstRunWaiting > div,
2958
.firstRunComplete > div {
2959
  display: grid;
2960
  flex: 1;
2961
  gap: 3px;
2962
}
2963
2964
.firstRunIcon {
2965
  display: grid;
2966
  width: 36px;
2967
  height: 36px;
2968
  flex: 0 0 auto;
2969
  place-items: center;
2970
  border: 1px solid var(--accent-line);
2971
  color: var(--accent);
2972
  background: transparent;
2973
  font: 500 11px/1 var(--mono);
2974
  letter-spacing: 0.06em;
2975
}
2976
2977
.firstRunIcon.complete {
2978
  border-color: var(--live);
2979
  color: var(--live);
2980
}
2981
2982
.firstRunForm label {
2983
  display: grid;
2984
  gap: 6px;
2985
  color: var(--text-muted);
2986
  font-size: 12px;
2987
}
2988
2989
.firstRunForm label.fullWidth {
2990
  grid-column: 1 / -1;
2991
}
2992
2993
.firstRunForm input,
2994
.firstRunForm select,
2995
.firstRunForm textarea {
2996
  width: 100%;
2997
  min-height: 42px;
2998
  padding: 9px 10px;
2999
  border: 1px solid var(--border-strong);
3000
  border-radius: 0;
3001
  color: var(--text);
3002
  background: var(--bg-elevated);
3003
  font: inherit;
3004
}
3005
3006
.firstRunForm textarea {
3007
  min-height: 86px;
3008
  resize: vertical;
3009
}
3010
3011
.firstRunForm > button[type='submit'] {
3012
  align-self: end;
3013
  justify-self: start;
3014
  min-height: 42px;
3015
}
3016
3017
.firstRunBlocked {
3018
  display: flex;
3019
  align-items: center;
3020
  justify-content: space-between;
3021
  gap: 14px;
3022
  padding: 14px;
3023
  border: 1px solid var(--border);
3024
  color: var(--text-muted);
3025
  background: var(--bg-elevated);
3026
  font-size: 13px;
3027
}
3028
3029
.firstRunBlocked button {
3030
  flex: 0 0 auto;
3031
}
3032
3033
.firstRunReview {
3034
  display: grid;
3035
  gap: 16px;
3036
  padding: 18px 22px 22px;
3037
  border-top: 1px solid var(--border);
3038
}
3039
3040
.agentCardPreview {
3041
  display: grid;
3042
  gap: 10px;
3043
  padding: 18px;
3044
  border: 1px solid var(--border-strong);
3045
  background: var(--bg-elevated);
3046
}
3047
3048
.agentCardPreview h3,
3049
.agentCardPreview p,
3050
.agentCardPreview dl,
3051
.agentCardPreview dd {
3052
  margin: 0;
3053
}
3054
3055
.agentCardPreview p,
3056
.agentCardPreview small,
3057
.firstRunComplete small {
3058
  color: var(--text-muted);
3059
}
3060
3061
.agentCardPreview dl {
3062
  display: grid;
3063
  grid-template-columns: repeat(2, minmax(0, 1fr));
3064
  gap: 12px;
3065
}
3066
3067
.agentCardPreview dl > div {
3068
  display: grid;
3069
  gap: 3px;
3070
}
3071
3072
.agentCardPreview dt {
3073
  color: var(--text-muted);
3074
  font: 500 10px/1.4 var(--mono);
3075
  letter-spacing: 0.08em;
3076
  text-transform: uppercase;
3077
}
3078
3079
.verifiedPublisher {
3080
  justify-self: start;
3081
  padding: 4px 7px;
3082
  border: 1px solid color-mix(in srgb, var(--live) 45%, transparent);
3083
  color: var(--live);
3084
  font: 500 11px/1 var(--mono);
3085
}
3086
3087
.firstRunWaiting {
3088
  align-items: start;
3089
  padding-top: 18px;
3090
  border-top: 1px solid var(--border);
3091
}
3092
3093
.firstRunWaiting small {
3094
  color: var(--text-muted);
3095
  font-size: 11px;
3096
  line-height: 1.5;
3097
}
3098
3099
.firstRunComplete {
3100
  display: grid;
3101
  grid-template-columns: auto 1fr auto;
3102
  padding: 18px 22px 22px;
3103
  border-top: 1px solid var(--border);
3104
}
3105
3106
.firstRunComplete button,
3107
.firstRunWaiting > button,
3108
.firstRunStage > button {
3109
  display: inline-flex;
3110
  align-items: center;
3111
  gap: 7px;
3112
  white-space: nowrap;
3113
}
3114
3115
.firstRunComplete a:not(.secondary) {
3116
  overflow-wrap: anywhere;
3117
  color: var(--accent);
3118
  font: 500 12px/1.5 var(--mono);
3119
}
3120
3121
.firstRunActions {
3122
  display: flex;
3123
  align-items: center;
3124
  gap: 8px;
3125
}
3126
3127
.firstRunActions svg {
3128
  width: 14px;
3129
  height: 14px;
3130
}
3131
3132
.compactRequests {
3133
  display: grid;
3134
  gap: 0;
3135
  border: 0;
3136
  border-top: 1px solid var(--accent-line);
3137
  border-bottom: 1px solid var(--accent-line);
3138
  background: transparent;
3139
}
3140
3141
.compactRequests article,
3142
.agentRequests article {
3143
  display: flex;
3144
  align-items: center;
3145
  gap: 13px;
3146
  padding: 12px 0;
3147
  background: transparent;
3148
  border-bottom: 1px dashed var(--border);
3149
}
3150
3151
.compactRequests article:last-child,
3152
.agentRequests article:last-child {
3153
  border-bottom: 0;
3154
}
3155
3156
.compactRequests article > div:nth-child(2),
3157
.agentRequests article > div:nth-child(2) {
3158
  display: grid;
3159
  min-width: 0;
3160
  gap: 2px;
3161
}
3162
3163
.compactRequests strong,
3164
.agentRequests strong {
3165
  overflow: hidden;
3166
  font-size: 13px;
3167
  text-overflow: ellipsis;
3168
  white-space: nowrap;
3169
}
3170
3171
.compactRequests small,
3172
.agentRequests small {
3173
  color: var(--text-muted);
3174
  font-size: 11px;
3175
}
3176
3177
.requestIcon {
3178
  display: grid;
3179
  width: 30px;
3180
  height: 30px;
3181
  place-items: center;
3182
  color: var(--accent);
3183
  background: var(--accent-dim);
3184
}
3185
3186
.requestIcon svg {
3187
  width: 15px;
3188
}
3189
3190
.iconDecisions {
3191
  display: flex;
3192
  gap: 6px;
3193
  margin-left: auto;
3194
}
3195
3196
.iconDecisions button {
3197
  display: grid;
3198
  width: 32px;
3199
  height: 32px;
3200
  place-items: center;
3201
  border: 1px solid var(--border-strong);
3202
  color: var(--text-muted);
3203
  background: transparent;
3204
  cursor: pointer;
3205
}
3206
3207
.iconDecisions button:hover {
3208
  color: var(--danger);
3209
  border-color: var(--danger-line);
3210
  background: var(--danger-dim);
3211
}
3212
3213
.iconDecisions button.approve {
3214
  color: var(--live);
3215
}
3216
3217
.iconDecisions button.approve:hover {
3218
  border-color: color-mix(in srgb, var(--live) 32%, transparent);
3219
  background: var(--live-dim);
3220
}
3221
3222
.iconDecisions svg {
3223
  width: 15px;
3224
}
3225
3226
.agentList {
3227
  display: grid;
3228
  gap: 0;
3229
  border-top: 1px solid var(--border);
3230
}
3231
3232
.agentRow {
3233
  overflow: visible;
3234
  border: 0;
3235
  border-bottom: 1px dashed var(--border);
3236
  background: transparent;
3237
}
3238
3239
.agentRow:hover,
3240
.agentRow.isExpanded {
3241
  border-color: var(--border);
3242
  background: color-mix(in srgb, var(--bg-hover) 55%, transparent);
3243
}
3244
3245
.agentRow.isExpanded {
3246
  border-bottom-style: solid;
3247
}
3248
3249
.agentRowSummary {
3250
  display: grid;
3251
  grid-template-columns: minmax(0, 1fr) minmax(190px, 230px) auto auto;
3252
  align-items: center;
3253
  gap: 16px;
3254
  width: 100%;
3255
  min-height: 82px;
3256
  padding: 16px 0;
3257
  color: inherit;
3258
  background: transparent;
3259
  text-align: left;
3260
}
3261
3262
.agentRowCore {
3263
  display: grid;
3264
  grid-template-columns: auto minmax(140px, 1.2fr) minmax(320px, 2fr);
3265
  align-items: center;
3266
  gap: 16px;
3267
  min-width: 0;
3268
  padding: 0;
3269
  border: 0;
3270
  color: inherit;
3271
  background: transparent;
3272
  text-align: left;
3273
  cursor: pointer;
3274
}
3275
3276
.agentRowCore:focus-visible,
3277
.scorecardTeaser:focus-visible,
3278
.agentExpandButton:focus-visible {
3279
  outline: 1px solid var(--accent);
3280
  outline-offset: 4px;
3281
}
3282
3283
.agentAvatar {
3284
  position: relative;
3285
  display: grid;
3286
  width: 42px;
3287
  height: 42px;
3288
  flex: none;
3289
  place-items: center;
3290
  border: 1px solid var(--accent-line);
3291
  color: var(--accent);
3292
  background: transparent;
3293
}
3294
3295
.agentAvatar b {
3296
  font: 500 12px/1 var(--mono);
3297
  letter-spacing: 0.08em;
3298
}
3299
3300
.agentAvatar.isSmall {
3301
  width: 28px;
3302
  height: 28px;
3303
}
3304
3305
.agentAvatar.isSmall b {
3306
  font-size: 9px;
3307
}
3308
3309
.agentAvatar i {
3310
  position: absolute;
3311
  right: -3px;
3312
  bottom: -3px;
3313
  width: 8px;
3314
  height: 8px;
3315
  border: 2px solid var(--bg);
3316
  background: var(--text-faint);
3317
}
3318
3319
.agentAvatar i.online {
3320
  background: var(--live);
3321
}
3322
3323
.agentIdentity {
3324
  display: grid;
3325
  min-width: 0;
3326
  gap: 3px;
3327
}
3328
3329
.agentIdentity strong {
3330
  overflow: hidden;
3331
  font-size: 14px;
3332
  text-overflow: ellipsis;
3333
  white-space: nowrap;
3334
}
3335
3336
.agentIdentity small {
3337
  color: var(--text-muted);
3338
  font-size: 10px;
3339
}
3340
3341
.agentSignals {
3342
  display: flex;
3343
  flex-wrap: wrap;
3344
  gap: 6px;
3345
}
3346
3347
.agentSignals span {
3348
  display: inline-flex;
3349
  align-items: center;
3350
  gap: 5px;
3351
  padding: 0;
3352
  border: 0;
3353
  color: var(--text-muted);
3354
  font: 400 11px/1 var(--mono);
3355
  letter-spacing: 0.04em;
3356
  text-transform: lowercase;
3357
}
3358
3359
.agentSignals svg {
3360
  width: 10px;
3361
  height: 10px;
3362
}
3363
3364
.agentSignals .signalOnline {
3365
  color: var(--live);
3366
  border-color: transparent;
3367
  background: transparent;
3368
}
3369
3370
.agentSignals .signalVerified {
3371
  color: var(--accent);
3372
  border-color: transparent;
3373
  background: transparent;
3374
}
3375
3376
.scorecardTeaser {
3377
  display: grid;
3378
  grid-template-columns: auto 1fr;
3379
  align-items: center;
3380
  gap: 12px;
3381
  min-width: 0;
3382
  padding: 0 0 0 16px;
3383
  border: 0;
3384
  border-left: 1px solid var(--border);
3385
  color: inherit;
3386
  background: transparent;
3387
  text-align: left;
3388
  cursor: pointer;
3389
}
3390
3391
.scorecardTeaser:hover {
3392
  border-color: var(--accent-line);
3393
}
3394
3395
.scorecardTeaser > span:last-child {
3396
  display: grid;
3397
  min-width: 0;
3398
  gap: 3px;
3399
}
3400
3401
.scorecardTeaser > strong {
3402
  color: var(--accent);
3403
  font: 500 22px/1 var(--mono);
3404
  letter-spacing: -0.04em;
3405
}
3406
3407
.scorecardTeaser b {
3408
  font: 500 11px/1 var(--mono);
3409
  letter-spacing: 0.08em;
3410
  text-transform: lowercase;
3411
}
3412
3413
.scorecardTeaser small {
3414
  overflow: hidden;
3415
  color: var(--text-muted);
3416
  font-size: 11px;
3417
  text-overflow: ellipsis;
3418
  text-transform: lowercase;
3419
  white-space: nowrap;
3420
}
3421
3422
.scorecardBars {
3423
  display: grid;
3424
  align-content: center;
3425
  gap: 3px;
3426
  height: 30px;
3427
  padding: 5px;
3428
  border-left: 2px solid var(--accent);
3429
  background: var(--bg-well);
3430
}
3431
3432
.scorecardBars i {
3433
  height: 2px;
3434
  max-width: 100%;
3435
  background: var(--accent);
3436
}
3437
3438
.agentExpandButton {
3439
  display: grid;
3440
  width: 30px;
3441
  height: 30px;
3442
  place-items: center;
3443
  padding: 0;
3444
  border: 0;
3445
  color: inherit;
3446
  background: transparent;
3447
  cursor: pointer;
3448
}
3449
3450
.notificationCount {
3451
  display: grid;
3452
  min-width: 22px;
3453
  height: 18px;
3454
  padding: 0 6px;
3455
  place-items: center;
3456
  border: 1px solid var(--accent-line);
3457
  color: var(--accent);
3458
  background: transparent;
3459
  font: 500 10px/1 var(--mono);
3460
}
3461
3462
.expandIcon {
3463
  width: 17px;
3464
  color: var(--text-faint);
3465
  transition: transform 160ms ease;
3466
}
3467
3468
.agentRow.isExpanded > .agentRowSummary .expandIcon {
3469
  transform: rotate(180deg);
3470
}
3471
3472
.scorecardDialog {
3473
  z-index: 80 !important;
3474
  width: min(1040px, calc(100vw - 32px)) !important;
3475
  max-width: 1040px !important;
3476
  max-height: calc(100vh - 32px);
3477
  gap: 14px !important;
3478
  overflow: auto;
3479
  padding: 18px !important;
3480
  border: 1px solid var(--border-strong) !important;
3481
  border-radius: 0 !important;
3482
  color: var(--text) !important;
3483
  opacity: 1 !important;
3484
  background: #0c0a0a !important;
3485
  box-shadow: 0 28px 100px rgb(0 0 0 / 58%) !important;
3486
}
3487
3488
[data-slot='dialog-overlay'] {
3489
  z-index: 70 !important;
3490
}
3491
3492
.scorecardA11yTitle {
3493
  position: absolute;
3494
  width: 1px;
3495
  height: 1px;
3496
  overflow: hidden;
3497
  clip: rect(0, 0, 0, 0);
3498
  white-space: nowrap;
3499
}
3500
3501
.behaviourScorecard {
3502
  position: relative;
3503
  overflow: hidden;
3504
  border: 1px solid var(--border-strong);
3505
  background: var(--bg);
3506
}
3507
3508
:root[data-theme='light'] .scorecardDialog {
3509
  background: #f7f4f2 !important;
3510
}
3511
3512
:root[data-theme='light'] .behaviourScorecard {
3513
  background: #fff;
3514
}
3515
3516
.behaviourScorecard::after {
3517
  content: none;
3518
}
3519
3520
.scorecardHeader,
3521
.scorecardIdentity,
3522
.scorecardFoot {
3523
  position: relative;
3524
  z-index: 1;
3525
}
3526
3527
.scorecardHeader {
3528
  display: flex;
3529
  align-items: center;
3530
  justify-content: space-between;
3531
  min-height: 58px;
3532
  padding: 0 24px;
3533
  border-bottom: 1px solid var(--border);
3534
}
3535
3536
.scorecardBrand,
3537
.scorecardHeader > span {
3538
  display: flex;
3539
  align-items: center;
3540
  gap: 8px;
3541
  color: var(--text-muted);
3542
  font: 600 9px/1 var(--mono);
3543
  letter-spacing: 0.08em;
3544
  text-transform: uppercase;
3545
}
3546
3547
.scorecardBrand svg,
3548
.scorecardHeader > span svg {
3549
  width: 14px;
3550
  height: 14px;
3551
}
3552
3553
.scorecardHeader > span.scorecardVerified {
3554
  color: var(--live);
3555
}
3556
3557
.scorecardIdentity {
3558
  display: flex;
3559
  align-items: end;
3560
  justify-content: space-between;
3561
  gap: 24px;
3562
  padding: 28px 24px 22px;
3563
}
3564
3565
.scorecardIdentity p {
3566
  margin: 0 0 8px;
3567
  color: var(--accent);
3568
  font: 600 9px/1 var(--mono);
3569
  letter-spacing: 0.16em;
3570
}
3571
3572
.scorecardIdentity h2 {
3573
  margin: 0;
3574
  font-size: clamp(26px, 4vw, 42px);
3575
  letter-spacing: -0.05em;
3576
}
3577
3578
.scorecardContext {
3579
  display: flex;
3580
  justify-content: flex-end;
3581
  flex-wrap: wrap;
3582
  gap: 5px;
3583
}
3584
3585
.scorecardContext span {
3586
  padding: 5px 7px;
3587
  border: 1px solid var(--border);
3588
  color: var(--text-muted);
3589
  background: var(--bg-well);
3590
  font: 500 8px/1 var(--mono);
3591
  text-transform: uppercase;
3592
}
3593
3594
.scorecardMetrics {
3595
  position: relative;
3596
  z-index: 1;
3597
  display: grid;
3598
  grid-template-columns: 1fr 1fr;
3599
  border-top: 1px solid var(--border);
3600
}
3601
3602
.scorecardMetrics > div {
3603
  display: grid;
3604
  grid-template-columns: minmax(150px, 0.9fr) minmax(120px, 1fr) 36px;
3605
  align-items: center;
3606
  gap: 14px;
3607
  min-height: 66px;
3608
  padding: 11px 24px;
3609
  border-bottom: 1px solid var(--border);
3610
}
3611
3612
.scorecardMetrics > div:nth-child(odd) {
3613
  border-right: 1px solid var(--border);
3614
}
3615
3616
.scorecardMetrics > div > span:first-child {
3617
  display: grid;
3618
  gap: 4px;
3619
}
3620
3621
.scorecardMetrics strong {
3622
  font-size: 11px;
3623
}
3624
3625
.scorecardMetrics small {
3626
  color: var(--text-faint);
3627
  font: 500 8px/1 var(--mono);
3628
  text-transform: uppercase;
3629
}
3630
3631
.scorecardMetrics b {
3632
  font: 500 18px/1 var(--mono);
3633
  text-align: right;
3634
}
3635
3636
.scorecardMeter {
3637
  height: 4px;
3638
  overflow: hidden;
3639
  background: var(--border);
3640
}
3641
3642
.scorecardMeter i {
3643
  display: block;
3644
  height: 100%;
3645
  background: var(--accent);
3646
}
3647
3648
.scorecardMetrics .isUnmeasured {
3649
  opacity: 0.55;
3650
}
3651
3652
.scorecardMetrics .isUnmeasured .scorecardMeter i {
3653
  width: 0 !important;
3654
}
3655
3656
.scorecardFoot {
3657
  display: grid;
3658
  grid-template-columns: auto auto 1fr;
3659
  align-items: center;
3660
  gap: 18px;
3661
  min-height: 58px;
3662
  padding: 12px 24px;
3663
  color: var(--text-muted);
3664
  font: 600 8px/1.2 var(--mono);
3665
  text-transform: uppercase;
3666
}
3667
3668
.scorecardFoot small {
3669
  justify-self: end;
3670
  color: var(--text-faint);
3671
  font: inherit;
3672
}
3673
3674
.scorecardActions {
3675
  display: flex;
3676
  justify-content: flex-end;
3677
  gap: 7px;
3678
}
3679
3680
.scorecardActions > span {
3681
  align-self: center;
3682
  margin-right: auto;
3683
  color: var(--live);
3684
  font: 600 9px/1 var(--mono);
3685
  text-transform: uppercase;
3686
}
3687
3688
.scorecardActions button {
3689
  display: inline-flex;
3690
  align-items: center;
3691
  gap: 7px;
3692
  min-height: 38px;
3693
  padding: 0 13px;
3694
  border: 1px solid var(--border-strong);
3695
  color: var(--text);
3696
  background: var(--bg-elevated);
3697
  font: 600 9px/1 var(--mono);
3698
  text-transform: uppercase;
3699
  cursor: pointer;
3700
}
3701
3702
.scorecardActions button.primary {
3703
  border-color: var(--accent);
3704
  color: white;
3705
  background: var(--accent);
3706
}
3707
3708
.scorecardActions svg {
3709
  width: 13px;
3710
}
3711
3712
.agentExpanded {
3713
  display: grid;
3714
  gap: 24px;
3715
  padding: 8px 0 22px 58px;
3716
  border-top: 1px dashed var(--border);
3717
  background: transparent;
3718
}
3719
3720
.agentRequests {
3721
  margin-top: 0;
3722
  border: 0;
3723
  border-top: 1px solid var(--accent-line);
3724
}
3725
3726
.agentRequests .sectionLabel {
3727
  padding: 9px 0;
3728
  border-bottom: 1px dashed var(--border);
3729
  background: transparent;
3730
}
3731
3732
.requestPulse {
3733
  width: 7px;
3734
  height: 7px;
3735
  border-radius: 999px;
3736
  background: var(--accent);
3737
}
3738
3739
.sectionLabel {
3740
  margin: 0;
3741
  color: var(--text-faint);
3742
  font: 600 9px/1 var(--mono);
3743
  letter-spacing: 0.14em;
3744
  text-transform: uppercase;
3745
}
3746
3747
.agentDetailStrip {
3748
  display: flex;
3749
  align-items: stretch;
3750
  border: 1px solid var(--border);
3751
}
3752
3753
.agentIntelligence {
3754
  display: grid;
3755
  grid-template-columns: minmax(220px, 1.2fr) auto minmax(240px, 1fr);
3756
  align-items: center;
3757
  gap: 22px;
3758
  padding: 18px;
3759
  border: 1px solid var(--accent-line);
3760
  background: linear-gradient(110deg, var(--accent-dim), transparent 62%);
3761
}
3762
3763
.intelligenceLead {
3764
  display: flex;
3765
  align-items: center;
3766
  gap: 14px;
3767
}
3768
3769
.intelligenceScore {
3770
  font: 500 42px/1 var(--mono);
3771
  letter-spacing: -0.08em;
3772
}
3773
3774
.intelligenceLead > div {
3775
  display: grid;
3776
  gap: 3px;
3777
}
3778
3779
.intelligenceLead strong {
3780
  font-size: 13px;
3781
}
3782
3783
.intelligenceLead small {
3784
  color: var(--text-muted);
3785
  font-size: 9px;
3786
  text-transform: uppercase;
3787
}
3788
3789
.intelligenceTrend {
3790
  display: grid;
3791
  gap: 5px;
3792
  text-align: right;
3793
}
3794
3795
.intelligenceTrend span {
3796
  font: 600 10px/1 var(--mono);
3797
  text-transform: uppercase;
3798
}
3799
3800
.intelligenceTrend .improving {
3801
  color: var(--live);
3802
}
3803
3804
.intelligenceTrend .declining {
3805
  color: var(--danger);
3806
}
3807
3808
.intelligenceTrend b {
3809
  color: var(--warn);
3810
  font: 500 8px/1.2 var(--mono);
3811
  text-transform: uppercase;
3812
}
3813
3814
.intelligenceSignals {
3815
  display: flex;
3816
  justify-content: flex-end;
3817
  flex-wrap: wrap;
3818
  gap: 5px;
3819
}
3820
3821
.intelligenceSignals span {
3822
  display: inline-flex;
3823
  align-items: center;
3824
  gap: 4px;
3825
  padding: 5px 7px;
3826
  border: 1px solid var(--border);
3827
  font: 500 8px/1 var(--mono);
3828
  text-transform: uppercase;
3829
}
3830
3831
.intelligenceSignals svg {
3832
  width: 9px;
3833
  height: 9px;
3834
}
3835
3836
.intelligenceSignals .strength {
3837
  color: var(--live);
3838
  border-color: color-mix(in srgb, var(--live) 24%, transparent);
3839
}
3840
3841
.intelligenceSignals .risk {
3842
  color: var(--warn);
3843
  border-color: var(--warn-line);
3844
}
3845
3846
.categoryScores {
3847
  display: flex;
3848
  grid-column: 1 / -1;
3849
  flex-wrap: wrap;
3850
  gap: 6px;
3851
  padding-top: 12px;
3852
  border-top: 1px solid var(--border);
3853
}
3854
3855
.categoryScores span {
3856
  padding: 5px 8px;
3857
  color: var(--text-muted);
3858
  background: var(--bg-well);
3859
  font: 500 9px/1 var(--mono);
3860
}
3861
3862
.categoryScores b {
3863
  color: var(--text);
3864
}
3865
3866
.intelligenceEmpty {
3867
  display: flex;
3868
  align-items: center;
3869
  gap: 14px;
3870
  padding: 17px;
3871
  border: 1px dashed var(--border-strong);
3872
}
3873
3874
.intelligenceEmpty > span {
3875
  font: 500 30px/1 var(--mono);
3876
  color: var(--text-faint);
3877
}
3878
3879
.intelligenceEmpty > div {
3880
  display: grid;
3881
  gap: 3px;
3882
}
3883
3884
.intelligenceEmpty strong {
3885
  font-size: 11px;
3886
}
3887
3888
.intelligenceEmpty small {
3889
  color: var(--text-muted);
3890
  font-size: 9px;
3891
}
3892
3893
.agentDetailStrip > span {
3894
  display: grid;
3895
  min-width: 140px;
3896
  gap: 3px;
3897
  padding: 13px 16px;
3898
  border-right: 1px solid var(--border);
3899
  color: var(--text-muted);
3900
  font-size: 10px;
3901
  text-transform: uppercase;
3902
}
3903
3904
.agentDetailStrip b {
3905
  color: var(--text);
3906
  font-size: 12px;
3907
  text-transform: none;
3908
}
3909
3910
.agentDetailStrip a {
3911
  display: inline-flex;
3912
  align-items: center;
3913
  gap: 6px;
3914
  margin-left: auto;
3915
  padding: 0 16px;
3916
  color: var(--accent);
3917
  font-size: 11px;
3918
  font-weight: 600;
3919
  text-decoration: none;
3920
}
3921
3922
.agentDetailStrip a svg {
3923
  width: 12px;
3924
}
3925
3926
.agentHistory {
3927
  display: grid;
3928
  gap: 0;
3929
  margin-top: 4px;
3930
  border-top: 1px solid var(--border);
3931
}
3932
3933
.historyHeading {
3934
  display: grid;
3935
  grid-template-columns: 1fr auto auto;
3936
  align-items: center;
3937
  gap: 12px;
3938
  width: 100%;
3939
  min-height: 44px;
3940
  padding: 0;
3941
  border: 0;
3942
  color: inherit;
3943
  background: transparent;
3944
  font: 500 14px/1.2 inherit;
3945
  letter-spacing: 0;
3946
  text-align: left;
3947
  cursor: pointer;
3948
}
3949
3950
.historyHeading small {
3951
  color: var(--text-muted);
3952
  font: 400 12px/1 var(--mono);
3953
}
3954
3955
.historyHeading .expandIcon,
3956
.historyEntry .expandIcon {
3957
  width: 14px;
3958
  color: var(--text-faint);
3959
  transition: transform 160ms ease;
3960
}
3961
3962
.historyHeading[aria-expanded='true'] > .expandIcon,
3963
.historyEntry.isExpanded > .historyRowSummary .expandIcon,
3964
.agentExpandButton[aria-expanded='true'] .expandIcon {
3965
  transform: rotate(180deg);
3966
}
3967
3968
.agentHistory ol {
3969
  display: grid;
3970
  margin: 0;
3971
  padding: 0;
3972
  list-style: none;
3973
  border-top: 1px dashed var(--border);
3974
}
3975
3976
.historyEntry {
3977
  border-bottom: 1px dashed var(--border);
3978
}
3979
3980
.historyEntry:last-child {
3981
  border-bottom: 0;
3982
}
3983
3984
.historyEntry.isExpanded {
3985
  border-bottom-style: solid;
3986
  background: color-mix(in srgb, var(--bg-hover) 40%, transparent);
3987
}
3988
3989
.historyRowSummary {
3990
  display: grid;
3991
  grid-template-columns: minmax(0, 1fr) auto;
3992
  align-items: center;
3993
  gap: 8px;
3994
}
3995
3996
.historyItem {
3997
  display: grid;
3998
  grid-template-columns: auto minmax(130px, 0.8fr) minmax(180px, 1.6fr) auto;
3999
  align-items: center;
4000
  gap: 13px;
4001
  width: 100%;
4002
  min-height: 52px;
4003
  padding: 0;
4004
  border: 0;
4005
  color: inherit;
4006
  background: transparent;
4007
  text-align: left;
4008
  cursor: pointer;
4009
}
4010
4011
.historyItem:focus-visible,
4012
.historyHeading:focus-visible {
4013
  outline: 1px solid var(--accent);
4014
  outline-offset: 4px;
4015
}
4016
4017
.historyIdentity {
4018
  display: grid;
4019
  min-width: 0;
4020
  gap: 2px;
4021
}
4022
4023
.historyEntry strong,
4024
.historyPurpose {
4025
  overflow: hidden;
4026
  font-size: 13px;
4027
  text-overflow: ellipsis;
4028
  white-space: nowrap;
4029
}
4030
4031
.historyEntry small {
4032
  color: var(--text-muted);
4033
  font-size: 10px;
4034
}
4035
4036
.historyPurpose {
4037
  color: var(--text-muted);
4038
  font-size: 11px;
4039
}
4040
4041
.historyDetail {
4042
  display: grid;
4043
  gap: 4px;
4044
  padding: 0 0 14px 37px;
4045
}
4046
4047
.historyDetail p {
4048
  margin: 0;
4049
  font-size: 13px;
4050
}
4051
4052
.historyDetail small {
4053
  font: 400 11px/1.4 var(--mono);
4054
}
4055
4056
.outcomeSymbol {
4057
  display: grid;
4058
  width: 24px;
4059
  height: 24px;
4060
  place-items: center;
4061
  border: 1px solid var(--border);
4062
  font: 600 10px/1 var(--mono);
4063
}
4064
4065
.outcomeSymbol svg {
4066
  width: 11px;
4067
}
4068
4069
.outcomeSymbol.success,
4070
.outcomeText.success {
4071
  color: var(--live);
4072
}
4073
4074
.outcomeSymbol.failure,
4075
.outcomeText.failure,
4076
.outcomeText.cancelled {
4077
  color: var(--danger);
4078
}
4079
4080
.outcomeSymbol.partial,
4081
.outcomeText.partial,
4082
.outcomeText.provisional {
4083
  color: var(--warn);
4084
}
4085
4086
.outcomeSymbol.pending,
4087
.outcomeText.pending,
4088
.outcomeText.active {
4089
  color: var(--text-faint);
4090
}
4091
4092
.outcomeText {
4093
  font: 600 9px/1 var(--mono);
4094
  text-transform: uppercase;
4095
}
4096
4097
.quietEmpty {
4098
  padding: 28px;
4099
  border: 0;
4100
  border-top: 1px dashed var(--border);
4101
  color: var(--text-muted);
4102
  font: 400 12px/1.5 var(--mono);
4103
  letter-spacing: 0.04em;
4104
  text-transform: lowercase;
4105
  text-align: left;
4106
}
4107
4108
.agentHistory .quietEmpty {
4109
  padding: 16px 0;
4110
  border-top: 0;
4111
}
4112
4113
.emptyAgentState {
4114
  position: relative;
4115
  display: grid;
4116
  min-height: 220px;
4117
  place-items: center;
4118
  align-content: center;
4119
  gap: 10px;
4120
  border: 1px solid var(--border-strong);
4121
  border-right-style: dashed;
4122
  color: var(--text);
4123
  background: color-mix(in srgb, var(--bg) 70%, transparent);
4124
  cursor: pointer;
4125
}
4126
4127
.emptyAgentState > span:not(.sceneCorner) {
4128
  color: var(--accent);
4129
  font: 500 18px/1 var(--mono);
4130
}
4131
4132
.emptyAgentState strong {
4133
  font-size: 15px;
4134
  font-weight: 500;
4135
}
4136
4137
.emptyAgentState span:last-child {
4138
  color: var(--text-muted);
4139
  font-family: var(--font);
4140
  font-size: 13px;
4141
}
4142
4143
.marketplaceHead {
4144
  align-items: center;
4145
}
4146
4147
.marketSearch {
4148
  display: flex;
4149
  align-items: center;
4150
  gap: 9px;
4151
  width: min(360px, 100%);
4152
  min-height: 42px;
4153
  padding: 0 13px;
4154
  border: 1px solid var(--border-strong);
4155
  background: var(--bg-input);
4156
}
4157
4158
.marketFilters {
4159
  display: flex;
4160
  align-items: end;
4161
  gap: 7px;
4162
}
4163
4164
.marketFilters > label:not(.marketSearch) {
4165
  display: grid;
4166
  gap: 5px;
4167
}
4168
4169
.marketFilters > label > span {
4170
  color: var(--text-faint);
4171
  font: 400 11px/1 var(--mono);
4172
  letter-spacing: 0.08em;
4173
  text-transform: lowercase;
4174
}
4175
4176
.marketFilters select,
4177
.marketFilters > label:not(.marketSearch) input {
4178
  min-width: 130px;
4179
  height: 42px;
4180
  padding: 0 10px;
4181
  border: 1px solid var(--border-strong);
4182
  color: var(--text);
4183
  background: var(--bg-input);
4184
  font-size: 11px;
4185
}
4186
4187
.marketContext {
4188
  margin-top: -8px;
4189
  padding: 0 0 4px;
4190
  border: 0;
4191
  color: var(--text-muted);
4192
  background: transparent;
4193
  font: 400 13px/1.55 var(--font);
4194
}
4195
4196
.marketSearch svg {
4197
  width: 16px;
4198
  color: var(--text-faint);
4199
}
4200
4201
.marketSearch input {
4202
  width: 100%;
4203
  border: 0;
4204
  color: var(--text);
4205
  background: transparent;
4206
  font-size: 12px;
4207
}
4208
4209
.marketGrid {
4210
  display: grid;
4211
  grid-template-columns: repeat(3, minmax(0, 1fr));
4212
  gap: 10px;
4213
}
4214
4215
.marketCard {
4216
  position: relative;
4217
  display: grid;
4218
  min-height: 285px;
4219
  padding: 22px 22px 18px;
4220
  border-top: 1px solid var(--border-strong);
4221
  border-right: 1px dashed var(--border);
4222
  border-bottom: 0;
4223
  border-left: 1px solid var(--border-strong);
4224
  background: color-mix(in srgb, var(--bg) 70%, transparent);
4225
}
4226
4227
.marketCard:hover {
4228
  border-color: var(--border-strong);
4229
  border-right-color: var(--accent-line);
4230
}
4231
4232
.marketCardTop {
4233
  display: flex;
4234
  align-items: start;
4235
  justify-content: space-between;
4236
}
4237
4238
.marketPresence {
4239
  padding: 0;
4240
  color: var(--text-faint);
4241
  background: transparent;
4242
  font: 400 11px/1 var(--mono);
4243
  letter-spacing: 0.06em;
4244
  text-transform: lowercase;
4245
}
4246
4247
.marketPresence.online {
4248
  color: var(--live);
4249
  background: transparent;
4250
}
4251
4252
.marketCard h2 {
4253
  margin: 17px 0 5px;
4254
  font-size: 18px;
4255
  font-weight: 500;
4256
  letter-spacing: -0.03em;
4257
}
4258
4259
.matchBadge {
4260
  display: flex;
4261
  align-items: baseline;
4262
  gap: 7px;
4263
  margin-top: 14px;
4264
  color: var(--text-muted);
4265
}
4266
4267
.matchBadge strong {
4268
  color: var(--text);
4269
  font: 500 18px/1 var(--mono);
4270
}
4271
4272
.matchBadge span {
4273
  font: 400 11px/1.3 var(--mono);
4274
  letter-spacing: 0.04em;
4275
  text-transform: lowercase;
4276
}
4277
4278
.matchBadge.strong strong,
4279
.matchBadge.strong span {
4280
  color: var(--live);
4281
}
4282
4283
.matchBadge.unproven strong {
4284
  color: var(--text-faint);
4285
}
4286
4287
.marketCard > p {
4288
  display: -webkit-box;
4289
  overflow: hidden;
4290
  min-height: 36px;
4291
  margin: 0 0 14px;
4292
  color: var(--text-muted);
4293
  font-size: 11px;
4294
  -webkit-box-orient: vertical;
4295
  -webkit-line-clamp: 2;
4296
}
4297
4298
.marketTags {
4299
  display: flex;
4300
  align-content: start;
4301
  flex-wrap: wrap;
4302
  gap: 5px;
4303
}
4304
4305
.marketTags span {
4306
  padding: 5px 7px;
4307
  border: 1px solid var(--border);
4308
  color: var(--text-muted);
4309
  font: 500 9px/1 var(--mono);
4310
}
4311
4312
.marketMeta {
4313
  display: flex;
4314
  align-items: center;
4315
  gap: 12px;
4316
  margin-top: auto;
4317
  padding-top: 14px;
4318
  border-top: 1px solid var(--border);
4319
}
4320
4321
.marketIntelligence {
4322
  display: flex;
4323
  align-items: center;
4324
  gap: 8px;
4325
  min-height: 34px;
4326
  margin-top: 10px;
4327
  padding: 8px 0 0;
4328
  border-top: 1px dashed var(--border);
4329
  color: var(--text-muted);
4330
  background: transparent;
4331
}
4332
4333
.marketIntelligence strong {
4334
  color: var(--accent);
4335
  font: 500 15px/1 var(--mono);
4336
}
4337
4338
.marketIntelligence span {
4339
  font: 400 11px/1.3 var(--mono);
4340
  letter-spacing: 0.04em;
4341
  text-transform: lowercase;
4342
}
4343
4344
.marketMeta span {
4345
  display: inline-flex;
4346
  align-items: center;
4347
  gap: 5px;
4348
  color: var(--text-muted);
4349
  font: 400 11px/1 var(--mono);
4350
  letter-spacing: 0.04em;
4351
  text-transform: lowercase;
4352
}
4353
4354
.marketMeta svg {
4355
  width: 11px;
4356
}
4357
4358
.marketProfileLink {
4359
  display: flex;
4360
  align-items: center;
4361
  justify-content: space-between;
4362
  margin-top: 14px;
4363
  color: var(--accent);
4364
  font: 500 12px/1 var(--mono);
4365
  letter-spacing: 0.04em;
4366
  text-decoration: none;
4367
  text-transform: lowercase;
4368
}
4369
4370
.marketProfileLink svg {
4371
  width: 14px;
4372
}
4373
4374
.marketSkeleton {
4375
  position: relative;
4376
  min-height: 285px;
4377
  border-top: 1px solid var(--border);
4378
  border-right: 1px dashed var(--border);
4379
  border-bottom: 0;
4380
  border-left: 1px solid var(--border);
4381
  background: color-mix(in srgb, var(--bg-well) 70%, transparent);
4382
}
4383
4384
.marketEmpty {
4385
  grid-column: 1 / -1;
4386
}
4387
4388
@media (max-width: 900px) {
4389
  .dashHeader {
4390
    grid-template-columns: auto 1fr auto;
4391
  }
4392
4393
  .dashHeader nav,
4394
  .dashHeader .dashNav {
4395
    display: flex;
4396
    justify-content: center;
4397
    gap: 16px;
4398
  }
4399
}
4400
4401
@media (max-width: 880px) {
4402
  .dashHeader .landingBrand strong {
4403
    display: none;
4404
  }
4405
4406
  .agentRowSummary {
4407
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) auto auto;
4408
  }
4409
4410
  .agentRowCore {
4411
    grid-template-columns: auto minmax(120px, 1fr);
4412
  }
4413
4414
  .agentSignals {
4415
    display: none;
4416
  }
4417
4418
  .marketGrid {
4419
    grid-template-columns: repeat(2, minmax(0, 1fr));
4420
  }
4421
4422
  .marketFilters {
4423
    flex-wrap: wrap;
4424
    justify-content: flex-end;
4425
  }
4426
4427
  .agentIntelligence {
4428
    grid-template-columns: 1fr auto;
4429
  }
4430
4431
  .intelligenceSignals {
4432
    grid-column: 1 / -1;
4433
    justify-content: flex-start;
4434
  }
4435
}
4436
4437
@media (max-width: 720px) {
4438
  .dashHeader {
4439
    grid-template-columns: 1fr auto;
4440
  }
4441
4442
  .dashHeader .dashNav,
4443
  .dashHeader .dashCta {
4444
    display: none;
4445
  }
4446
}
4447
4448
@media (max-width: 620px) {
4449
  .simpleMain {
4450
    width: min(100% - 24px, 1120px);
4451
    padding: 34px 0 70px;
4452
  }
4453
4454
  .workspaceHead,
4455
  .marketplaceHead {
4456
    display: grid;
4457
    align-items: stretch;
4458
  }
4459
4460
  .workspaceHead .landingPrimary,
4461
  .marketSearch {
4462
    width: 100%;
4463
    justify-content: center;
4464
  }
4465
4466
  .marketFilters {
4467
    display: grid;
4468
    grid-template-columns: 1fr 1fr;
4469
    width: 100%;
4470
  }
4471
4472
  .marketFilters .marketSearch {
4473
    grid-column: 1 / -1;
4474
  }
4475
4476
  .marketFilters select,
4477
  .marketFilters > label:not(.marketSearch) input {
4478
    width: 100%;
4479
    min-width: 0;
4480
  }
4481
4482
  .agentIntelligence {
4483
    grid-template-columns: 1fr;
4484
  }
4485
4486
  .intelligenceTrend {
4487
    text-align: left;
4488
  }
4489
4490
  .intelligenceSignals {
4491
    grid-column: auto;
4492
  }
4493
4494
  .agentRowSummary {
4495
    grid-template-columns: minmax(0, 1fr) auto auto;
4496
    gap: 11px;
4497
    min-height: 74px;
4498
    padding: 12px 0;
4499
  }
4500
4501
  .agentRowCore {
4502
    grid-template-columns: auto minmax(0, 1fr);
4503
    gap: 11px;
4504
  }
4505
4506
  .scorecardTeaser {
4507
    grid-template-columns: auto;
4508
    width: auto;
4509
    padding: 0 0 0 12px;
4510
  }
4511
4512
  .scorecardTeaser > span:last-child {
4513
    display: none;
4514
  }
4515
4516
  .scorecardIdentity {
4517
    display: grid;
4518
    align-items: start;
4519
  }
4520
4521
  .scorecardContext {
4522
    justify-content: flex-start;
4523
  }
4524
4525
  .scorecardMetrics {
4526
    grid-template-columns: 1fr;
4527
  }
4528
4529
  .scorecardMetrics > div:nth-child(odd) {
4530
    border-right: 0;
4531
  }
4532
4533
  .scorecardMetrics > div {
4534
    grid-template-columns: minmax(120px, 1fr) minmax(70px, 0.8fr) 30px;
4535
    padding: 10px 14px;
4536
  }
4537
4538
  .scorecardFoot {
4539
    grid-template-columns: 1fr 1fr;
4540
  }
4541
4542
  .scorecardFoot small {
4543
    display: none;
4544
  }
4545
4546
  .scorecardActions {
4547
    display: grid;
4548
    grid-template-columns: repeat(3, 1fr);
4549
  }
4550
4551
  .scorecardActions > span {
4552
    grid-column: 1 / -1;
4553
  }
4554
4555
  .scorecardActions button {
4556
    justify-content: center;
4557
    padding: 0 8px;
4558
    font-size: 8px;
4559
  }
4560
4561
  .agentExpanded {
4562
    padding: 8px 12px 18px;
4563
  }
4564
4565
  .agentDetailStrip {
4566
    display: grid;
4567
    grid-template-columns: repeat(3, 1fr);
4568
  }
4569
4570
  .agentDetailStrip > span {
4571
    min-width: 0;
4572
    padding: 10px;
4573
  }
4574
4575
  .agentDetailStrip a {
4576
    grid-column: 1 / -1;
4577
    min-height: 38px;
4578
    margin-left: 0;
4579
    border-top: 1px solid var(--border);
4580
  }
4581
4582
  .historyItem {
4583
    grid-template-columns: auto minmax(0, 1fr) auto;
4584
  }
4585
4586
  .historyPurpose {
4587
    display: none;
4588
  }
4589
4590
  .marketGrid {
4591
    grid-template-columns: 1fr;
4592
  }
4593
}
4594
4595
/* Authenticated product — same protocol chrome as the landing */
4596
html:has(.appInset) {
4597
  scrollbar-gutter: stable;
4598
  scrollbar-width: thin;
4599
  scrollbar-color: color-mix(in srgb, var(--accent) 70%, #8a6a62)
4600
    color-mix(in srgb, var(--bg) 92%, var(--border));
4601
}
4602
4603
html:has(.appInset)::-webkit-scrollbar,
4604
html:has(.appInset) body::-webkit-scrollbar {
4605
  width: 10px;
4606
}
4607
4608
html:has(.appInset)::-webkit-scrollbar-track,
4609
html:has(.appInset) body::-webkit-scrollbar-track {
4610
  background: var(--bg);
4611
  box-shadow: inset 1px 0 0 var(--border);
4612
}
4613
4614
html:has(.appInset)::-webkit-scrollbar-thumb,
4615
html:has(.appInset) body::-webkit-scrollbar-thumb {
4616
  background: color-mix(in srgb, var(--accent) 58%, #6e534c);
4617
  border: 3px solid var(--bg);
4618
  background-clip: padding-box;
4619
}
4620
4621
[data-slot='sidebar-wrapper'] {
4622
  background: var(--bg);
4623
}
4624
4625
[data-slot='sidebar'] {
4626
  border-right: 1px solid var(--border);
4627
  background: var(--bg) !important;
4628
}
4629
4630
[data-slot='sidebar-inner'] {
4631
  border: 0 !important;
4632
  border-radius: 0 !important;
4633
  background: var(--bg) !important;
4634
  box-shadow: none !important;
4635
}
4636
4637
[data-slot='sidebar-header'] {
4638
  padding: 16px 12px 14px;
4639
  border-bottom: 1px solid var(--border);
4640
}
4641
4642
[data-slot='sidebar-content'] {
4643
  padding: 10px 8px;
4644
}
4645
4646
[data-slot='sidebar-footer'] {
4647
  padding: 8px;
4648
  border-top: 1px solid var(--border);
4649
}
4650
4651
.sidebarBrandMark {
4652
  display: block;
4653
  width: 18px;
4654
  height: 18px;
4655
  flex: none;
4656
  color: var(--accent);
4657
}
4658
4659
.sidebarBrandText {
4660
  min-width: 0;
4661
  font-family: var(--mono);
4662
  font-size: 13px;
4663
  font-weight: 500;
4664
  letter-spacing: 0.04em;
4665
  text-transform: lowercase;
4666
}
4667
4668
.sidebarBrandText strong {
4669
  font-weight: 500;
4670
}
4671
4672
[data-sidebar='menu-button'] {
4673
  min-height: 34px;
4674
  border: 0 !important;
4675
  border-radius: 0 !important;
4676
  color: var(--text-muted);
4677
  font-family: var(--mono);
4678
  font-size: 12px;
4679
  letter-spacing: 0.04em;
4680
  text-transform: lowercase;
4681
  background: transparent !important;
4682
  box-shadow: none !important;
4683
}
4684
4685
[data-sidebar='menu-button']:hover {
4686
  color: var(--text);
4687
  background: transparent !important;
4688
}
4689
4690
[data-sidebar='menu-button'][data-active='true'] {
4691
  color: var(--text) !important;
4692
  background: transparent !important;
4693
  box-shadow: inset 2px 0 0 var(--accent);
4694
}
4695
4696
[data-sidebar='menu-button'][data-active='true'] svg {
4697
  color: var(--accent);
4698
}
4699
4700
[data-sidebar='menu-badge'] {
4701
  min-width: 16px;
4702
  height: 16px;
4703
  border: 0;
4704
  border-radius: 0;
4705
  color: var(--accent) !important;
4706
  background: transparent !important;
4707
  font: 500 10px/1 var(--mono);
4708
}
4709
4710
.appInset {
4711
  min-width: 0;
4712
  background: var(--bg) !important;
4713
}
4714
4715
.appTopbar {
4716
  position: sticky;
4717
  top: 0;
4718
  z-index: 8;
4719
  min-height: 52px;
4720
  padding: 0 28px;
4721
  border-bottom: 1px solid var(--border);
4722
  background: color-mix(in srgb, var(--bg) 88%, transparent);
4723
  backdrop-filter: blur(12px);
4724
  -webkit-backdrop-filter: blur(12px);
4725
}
4726
4727
.appTopbar [data-sidebar='trigger'] {
4728
  border: 1px solid var(--border);
4729
  border-radius: 0;
4730
  background: transparent;
4731
}
4732
4733
.commandTrigger {
4734
  height: 34px !important;
4735
  border-color: var(--border) !important;
4736
  border-radius: 0 !important;
4737
  background: transparent !important;
4738
  box-shadow: none !important;
4739
}
4740
4741
.appMain {
4742
  width: min(100%, 1120px);
4743
  max-width: none;
4744
  margin: 0 auto;
4745
  padding: 32px 32px 80px;
4746
}
4747
4748
.previewBanner {
4749
  width: fit-content;
4750
  margin-bottom: 18px;
4751
  padding: 0;
4752
  border: 0;
4753
  border-radius: 0;
4754
  color: var(--text-faint);
4755
  background: transparent;
4756
  font: 400 11px/1.4 var(--mono);
4757
  letter-spacing: 0.06em;
4758
  text-transform: lowercase;
4759
}
4760
4761
.previewBanner::before {
4762
  content: none;
4763
}
4764
4765
.pageKicker {
4766
  display: flex;
4767
  align-items: center;
4768
  gap: 10px;
4769
  margin: 0 0 10px;
4770
  color: var(--text-faint);
4771
  font-family: var(--mono);
4772
  font-size: 11px;
4773
  letter-spacing: 0.08em;
4774
  text-transform: lowercase;
4775
}
4776
4777
.pageKicker > span {
4778
  color: var(--accent);
4779
}
4780
4781
.pageHead {
4782
  display: flex;
4783
  align-items: center;
4784
  justify-content: space-between;
4785
  gap: 16px;
4786
  min-height: 42px;
4787
  padding: 0 0 16px;
4788
  border-bottom: 1px solid var(--border);
4789
}
4790
4791
.pageHead h1 {
4792
  margin: 0;
4793
  font-size: 16px;
4794
  font-weight: 500;
4795
  letter-spacing: 0;
4796
  line-height: 1.2;
4797
}
4798
4799
.primary,
4800
.secondary,
4801
.dangerButton {
4802
  min-height: 34px;
4803
  border-radius: 0;
4804
  font-weight: 500;
4805
  letter-spacing: 0.04em;
4806
  text-transform: lowercase;
4807
  box-shadow: none;
4808
}
4809
4810
.primary {
4811
  box-shadow: none;
4812
}
4813
4814
.primary:hover {
4815
  transform: none;
4816
  box-shadow: none;
4817
}
4818
4819
.primary:active,
4820
.secondary:active,
4821
.dangerButton:active {
4822
  transform: translateY(1px);
4823
}
4824
4825
.secondary {
4826
  background: transparent;
4827
}
4828
4829
.attentionBanner,
4830
.readiness {
4831
  min-height: 0;
4832
  margin-top: 16px;
4833
  padding: 14px 0;
4834
  border: 0;
4835
  border-bottom: 1px solid var(--border);
4836
  border-radius: 0;
4837
  background: transparent;
4838
  box-shadow: none;
4839
}
4840
4841
.attentionBanner {
4842
  border-color: transparent;
4843
  border-bottom-color: var(--accent-line);
4844
  background: transparent;
4845
}
4846
4847
.attentionBanner:hover {
4848
  border-color: transparent;
4849
  border-bottom-color: var(--accent);
4850
  transform: none;
4851
}
4852
4853
.statusIndex {
4854
  min-width: 1.6em;
4855
}
4856
4857
.metrics {
4858
  gap: 24px;
4859
  margin: 22px 0 8px;
4860
}
4861
4862
.metric {
4863
  min-height: 0;
4864
  padding: 4px 0;
4865
  border: 0;
4866
  border-radius: 0;
4867
  background: transparent;
4868
  box-shadow: none;
4869
}
4870
4871
.metric:hover {
4872
  border-color: transparent;
4873
  transform: none;
4874
}
4875
4876
.metric::before {
4877
  position: static;
4878
  width: 16px;
4879
  height: 1px;
4880
  margin: 0 0 10px;
4881
  border-radius: 0;
4882
  box-shadow: none;
4883
  background: var(--accent);
4884
}
4885
4886
.metric.warn::before {
4887
  background: var(--warn);
4888
  box-shadow: none;
4889
}
4890
4891
.metric > strong {
4892
  margin: 0 0 6px;
4893
  font-size: 28px;
4894
}
4895
4896
.panel,
4897
.setupRequests,
4898
.agentCard,
4899
.settingsCard,
4900
.insightPrinciple,
4901
.journeyDetail {
4902
  border: 0;
4903
  border-radius: 0;
4904
  background: transparent;
4905
  box-shadow: none;
4906
}
4907
4908
.panel {
4909
  padding: 8px 0 0;
4910
}
4911
4912
.panelHead {
4913
  padding-bottom: 12px;
4914
}
4915
4916
.panelHead h2,
4917
.panelKicker {
4918
  display: flex;
4919
  align-items: center;
4920
  gap: 8px;
4921
  margin: 0;
4922
  color: var(--text);
4923
  font: 500 12px/1.4 var(--mono);
4924
  letter-spacing: 0.06em;
4925
  text-transform: lowercase;
4926
}
4927
4928
.panelKicker > span,
4929
.panelHead h2 > span {
4930
  color: var(--accent);
4931
}
4932
4933
.panelHead p {
4934
  margin: 6px 0 0;
4935
}
4936
4937
.setupRequests > div:first-child h2 {
4938
  margin: 8px 0 4px;
4939
  font-size: 16px;
4940
  font-weight: 500;
4941
  letter-spacing: 0;
4942
}
4943
4944
.setupRequests {
4945
  margin: 18px 0;
4946
  padding: 8px 0;
4947
}
4948
4949
.setupRequest {
4950
  padding: 14px 0;
4951
  border-bottom: 1px solid var(--border);
4952
}
4953
4954
.historyRow {
4955
  margin: 0;
4956
  padding: 12px 0;
4957
  border-radius: 0;
4958
}
4959
4960
.historyRow:hover {
4961
  background: transparent;
4962
  transform: none;
4963
}
4964
4965
.agentGrid,
4966
.insightGrid {
4967
  gap: 16px;
4968
}
4969
4970
.agentCard {
4971
  min-height: 0;
4972
  padding: 18px 0;
4973
  border-top: 1px solid var(--border);
4974
}
4975
4976
.agentCard:hover {
4977
  border-color: var(--border);
4978
  box-shadow: none;
4979
  transform: none;
4980
}
4981
4982
.runtimeBox,
4983
.accessTokenBox,
4984
.notice,
4985
.successBanner,
4986
.conversationInsights,
4987
.outcomeCard,
4988
.insightStats span {
4989
  border-radius: 0;
4990
}
4991
4992
.runtimeBox input,
4993
.automationForm input,
4994
.automationForm select,
4995
.setting input,
4996
.setting select,
4997
.searchField,
4998
.providerForm input,
4999
.providerForm select,
5000
.providerForm textarea,
5001
.replyBox textarea {
5002
  border-radius: 0;
5003
}
5004
5005
.settingsCard {
5006
  padding: 0;
5007
}
5008
5009
.connectionTypePicker button {
5010
  border-radius: 0;
5011
  background: transparent;
5012
}
5013
5014
.threadList,
5015
.conversationDetail,
5016
.journeyDetail {
5017
  padding: 0;
5018
  border: 0;
5019
  border-radius: 0;
5020
  background: transparent;
5021
  box-shadow: none;
5022
}
5023
5024
.threadList > button,
5025
.journeyList > button {
5026
  border-radius: 0;
5027
}
5028
5029
[data-slot='dialog-content'],
5030
[data-slot='dropdown-menu-content'],
5031
[data-slot='command-dialog-content'] {
5032
  border-color: var(--border-strong) !important;
5033
  border-radius: 0 !important;
5034
  background: var(--popover) !important;
5035
  box-shadow: none !important;
5036
}
5037
5038
[data-slot='sidebar-footer'] [data-sidebar='menu-button'] {
5039
  text-transform: lowercase;
5040
}
5041
5042
[data-slot='sidebar-footer'] [data-sidebar='menu-button'] span {
5043
  font-family: var(--mono);
5044
  font-size: 11px;
5045
  letter-spacing: 0.03em;
5046
}
5047
5048
.appInset [data-slot='tabs-list'],
5049
.appInset [data-slot='tabs-trigger'] {
5050
  border-radius: 0 !important;
5051
}
5052
5053
.appInset [data-slot='tabs-trigger'] {
5054
  font-family: var(--mono);
5055
  font-size: 11px;
5056
  letter-spacing: 0.06em;
5057
  text-transform: lowercase;
5058
  background: transparent !important;
5059
  box-shadow: none !important;
5060
}
5061
5062
.appInset
5063
  [data-slot='tabs-list'][data-variant='line']
5064
  [data-slot='tabs-trigger'][data-state='active']::after {
5065
  height: 1px;
5066
  background: var(--accent);
5067
}
5068
5069
.textButton {
5070
  font-weight: 500;
5071
  letter-spacing: 0.04em;
5072
  text-transform: lowercase;
5073
}
5074
5075
.insightPrinciple .pageKicker {
5076
  margin-bottom: 8px;
5077
}
5078
5079
.setupRequests > div:first-child .pageKicker {
5080
  margin-bottom: 8px;
5081
}
5082
5083
.connectionTypePicker button {
5084
  font-weight: 500;
5085
  letter-spacing: 0.02em;
5086
}
5087
5088
@media (max-width: 840px) {
5089
  .appTopbar {
5090
    min-height: 48px;
5091
    padding: 0 16px;
5092
  }
5093
5094
  .appMain {
5095
    padding: 20px 16px 64px;
5096
  }
5097
5098
  .pageHead {
5099
    min-height: 0;
5100
  }
5101
}
5102
5103
@media (max-width: 980px) {
5104
  .contentGrid,
5105
  .connectLayout,
5106
  .conversationLayout,
5107
  .journeyLayout,
5108
  .insightPrinciple {
5109
    grid-template-columns: 1fr;
5110
  }
5111
5112
  .journeyList {
5113
    grid-template-columns: repeat(2, minmax(0, 1fr));
5114
  }
5115
5116
  .loginPage {
5117
    grid-template-columns: 1fr;
5118
  }
5119
5120
  .loginPitch {
5121
    display: none;
5122
  }
5123
5124
  .loginCard {
5125
    min-height: 100vh;
5126
    border: 0;
5127
  }
5128
5129
  .metrics {
5130
    grid-template-columns: 1fr 1fr;
5131
  }
5132
5133
  .agentGrid {
5134
    grid-template-columns: 1fr;
5135
  }
5136
5137
  .insightGrid {
5138
    grid-template-columns: 1fr;
5139
  }
5140
}
5141
5142
@media (max-width: 840px) {
5143
  .appTopbar {
5144
    min-height: 48px;
5145
    padding: 0 16px;
5146
  }
5147
5148
  .appMain {
5149
    padding: 16px 16px 64px;
5150
  }
5151
5152
  .pageHead {
5153
    align-items: flex-start;
5154
    flex-direction: column;
5155
  }
5156
5157
  .setting {
5158
    grid-template-columns: 1fr;
5159
    gap: 12px;
5160
  }
5161
5162
  .mcpClientSection > summary {
5163
    align-items: flex-start;
5164
    flex-direction: column;
5165
    gap: 6px;
5166
  }
5167
5168
  .connectionTypePicker,
5169
  .providerForm,
5170
  .firstRunForm,
5171
  .firstRunSteps {
5172
    grid-template-columns: 1fr;
5173
  }
5174
5175
  .firstRunSteps.twoSteps,
5176
  .agentCardPreview dl,
5177
  .firstRunComplete {
5178
    grid-template-columns: 1fr;
5179
  }
5180
5181
  .firstRunGuide {
5182
    padding: 18px;
5183
  }
5184
5185
  .firstRunHeader,
5186
  .firstRunStage,
5187
  .firstRunWaiting,
5188
  .firstRunComplete,
5189
  .firstRunBlocked {
5190
    align-items: flex-start;
5191
    flex-direction: column;
5192
  }
5193
5194
  .firstRunActions {
5195
    flex-wrap: wrap;
5196
  }
5197
5198
  .providerSubmit {
5199
    align-items: flex-start;
5200
    flex-direction: column;
5201
  }
5202
5203
  .tokenList > div {
5204
    align-items: flex-start;
5205
    flex-direction: column;
5206
  }
5207
5208
  .toggle {
5209
    margin-left: 0;
5210
  }
5211
5212
  .endpoint {
5213
    flex-direction: column;
5214
  }
5215
5216
  .readiness,
5217
  .attentionBanner,
5218
  .setupRequest {
5219
    align-items: flex-start;
5220
    flex-direction: column;
5221
  }
5222
5223
  .readiness > button,
5224
  .attentionBanner,
5225
  .decisionButtons {
5226
    width: 100%;
5227
  }
5228
5229
  .decisionButtons button {
5230
    flex: 1;
5231
  }
5232
5233
  .loginCard {
5234
    padding: 28px 20px;
5235
  }
5236
5237
  .historyRow > b {
5238
    display: none;
5239
  }
5240
5241
  .journeyList {
5242
    grid-template-columns: 1fr;
5243
  }
5244
5245
  .journeySummaryGrid,
5246
  .ratingGrid,
5247
  .insightStats {
5248
    grid-template-columns: 1fr;
5249
  }
5250
5251
  .journeySummaryGrid section {
5252
    border-right: 0;
5253
    border-bottom: 1px solid var(--border);
5254
  }
5255
5256
  .journeySummaryGrid section:last-child {
5257
    border-bottom: 0;
5258
  }
5259
5260
  .journeyTimeline li {
5261
    grid-template-columns: 8px minmax(0, 1fr);
5262
  }
5263
5264
  .journeyTimeline li > .statusPill {
5265
    grid-column: 2;
5266
    margin-top: -12px;
5267
    margin-bottom: 16px;
5268
  }
5269
}