DocsLog in

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

Viewing files at commit 1da1b7ef4016Commit detailsView latest

apps/dashboard/src/styles.css 1248 lines · 22.8 KB · css
1
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');
2
:root {
3
  font-family: Manrope, sans-serif;
4
  color: #e8ebe6;
5
  background: #0b0d0b;
6
  font-synthesis: none;
7
}
8
:root[data-theme='light'] {
9
  color: #192019;
10
  background: #f5f7f2;
11
}
12
* {
13
  box-sizing: border-box;
14
}
15
body {
16
  margin: 0;
17
  min-width: 320px;
18
  background: #0b0d0b;
19
}
20
:root[data-theme='light'] body {
21
  background: #f5f7f2;
22
}
23
button,
24
input,
25
select {
26
  font: inherit;
27
}
28
.eyebrow {
29
  margin: 0;
30
  color: #758078;
31
  font: 500 10px 'DM Mono';
32
  letter-spacing: 0.14em;
33
  text-transform: uppercase;
34
}
35
.mark {
36
  display: grid;
37
  width: 40px;
38
  height: 40px;
39
  place-items: center;
40
  border-radius: 5px;
41
  color: #11150f;
42
  background: #b9f27c;
43
  font: 500 13px 'DM Mono';
44
}
45
.appShell {
46
  display: grid;
47
  grid-template-columns: 248px 1fr;
48
  min-height: 100vh;
49
}
50
.appShell aside {
51
  position: sticky;
52
  top: 0;
53
  display: flex;
54
  height: 100vh;
55
  flex-direction: column;
56
  padding: 24px 18px;
57
  border-right: 1px solid #262a26;
58
  background: #0e100e;
59
}
60
.brand {
61
  display: flex;
62
  align-items: center;
63
  gap: 12px;
64
}
65
.brand > div:last-child {
66
  display: flex;
67
  flex-direction: column;
68
  gap: 3px;
69
}
70
.brand strong {
71
  font-size: 15px;
72
}
73
.brand small {
74
  color: #69716a;
75
  font: 8px 'DM Mono';
76
  letter-spacing: 0.1em;
77
}
78
.appShell nav {
79
  display: flex;
80
  flex-direction: column;
81
  gap: 4px;
82
  margin-top: 42px;
83
}
84
.appShell nav button {
85
  display: flex;
86
  align-items: center;
87
  gap: 12px;
88
  padding: 11px 12px;
89
  border: 0;
90
  border-radius: 5px;
91
  color: #7e867f;
92
  background: transparent;
93
  text-align: left;
94
  font-size: 12px;
95
  cursor: pointer;
96
}
97
.appShell nav button span {
98
  width: 17px;
99
  color: #69716a;
100
  font: 15px 'DM Mono';
101
  text-align: center;
102
}
103
.appShell nav button:hover,
104
.appShell nav button.active {
105
  color: #e7ebe4;
106
  background: #191d19;
107
}
108
.appShell nav button.active span {
109
  color: #b9f27c;
110
}
111
.themeSwitch {
112
  display: flex;
113
  align-items: center;
114
  gap: 10px;
115
  margin-top: 18px;
116
  padding: 10px 12px;
117
  border: 1px solid #303630;
118
  border-radius: 5px;
119
  color: #b9f27c;
120
  background: #151815;
121
  font-size: 10px;
122
  cursor: pointer;
123
}
124
.themeSwitch:hover {
125
  background: #1d211d;
126
}
127
.themeSwitch span {
128
  width: 17px;
129
  font-size: 15px;
130
  text-align: center;
131
}
132
.privacyStamp {
133
  display: flex;
134
  align-items: flex-start;
135
  gap: 10px;
136
  margin-top: auto;
137
  padding: 14px 10px;
138
  border: 1px solid #252a25;
139
  border-radius: 5px;
140
  background: #121512;
141
}
142
.privacyStamp > div {
143
  display: flex;
144
  flex-direction: column;
145
  gap: 4px;
146
}
147
.privacyStamp strong {
148
  font-size: 10px;
149
}
150
.privacyStamp small {
151
  color: #626b63;
152
  font-size: 8px;
153
  line-height: 1.4;
154
}
155
.liveDot {
156
  width: 6px;
157
  height: 6px;
158
  margin-top: 4px;
159
  border-radius: 50%;
160
  background: #b9f27c;
161
  box-shadow: 0 0 9px #b9f27c;
162
}
163
.account {
164
  display: flex;
165
  align-items: center;
166
  gap: 9px;
167
  width: 100%;
168
  margin-top: 12px;
169
  padding: 10px;
170
  border: 0;
171
  border-radius: 5px;
172
  color: #dfe4dd;
173
  background: transparent;
174
  text-align: left;
175
  cursor: pointer;
176
}
177
.account:hover {
178
  background: #171a17;
179
}
180
.account > span {
181
  display: grid;
182
  width: 30px;
183
  height: 30px;
184
  place-items: center;
185
  border: 1px solid #363c36;
186
  border-radius: 50%;
187
  color: #b9f27c;
188
  font: 10px 'DM Mono';
189
}
190
.account > div {
191
  display: flex;
192
  min-width: 0;
193
  flex: 1;
194
  flex-direction: column;
195
  gap: 3px;
196
}
197
.account strong,
198
.account small {
199
  overflow: hidden;
200
  text-overflow: ellipsis;
201
  white-space: nowrap;
202
}
203
.account strong {
204
  font-size: 10px;
205
}
206
.account small {
207
  color: #626a63;
208
  font-size: 8px;
209
}
210
.account > b {
211
  color: #626a63;
212
  font-size: 10px;
213
}
214
.appShell main {
215
  width: 100%;
216
  max-width: 1440px;
217
  padding: 46px 48px 80px;
218
}
219
.pageHead {
220
  display: flex;
221
  align-items: flex-end;
222
  justify-content: space-between;
223
  padding-bottom: 30px;
224
  border-bottom: 1px solid #282c28;
225
}
226
.pageHead h1 {
227
  max-width: 790px;
228
  margin: 9px 0 0;
229
  font-size: clamp(30px, 4vw, 52px);
230
  font-weight: 500;
231
  letter-spacing: -0.055em;
232
  line-height: 1.05;
233
}
234
.primary,
235
.secondary {
236
  padding: 10px 15px;
237
  border-radius: 5px;
238
  cursor: pointer;
239
  font-size: 11px;
240
}
241
.primary {
242
  border: 1px solid #b9f27c;
243
  color: #10140e;
244
  background: #b9f27c;
245
}
246
.primary:hover {
247
  background: #cafb96;
248
}
249
.primary:disabled {
250
  opacity: 0.5;
251
}
252
.secondary {
253
  border: 1px solid #3a403a;
254
  color: #dfe4dc;
255
  background: #171a17;
256
}
257
.metrics {
258
  display: grid;
259
  grid-template-columns: repeat(4, 1fr);
260
  margin: 18px 0;
261
}
262
.readiness {
263
  display: flex;
264
  align-items: center;
265
  justify-content: space-between;
266
  gap: 20px;
267
  margin: 18px 0 0;
268
  padding: 16px 18px;
269
  border: 1px solid #4e4430;
270
  border-radius: 6px;
271
  background: linear-gradient(110deg, #17150f, #111411 60%);
272
}
273
.readiness.ready {
274
  border-color: #38522e;
275
  background: linear-gradient(110deg, #121a10, #111411 60%);
276
}
277
.readiness > div {
278
  display: flex;
279
  align-items: center;
280
  gap: 12px;
281
}
282
.readiness > div > div {
283
  display: flex;
284
  flex-direction: column;
285
  gap: 4px;
286
}
287
.readiness strong {
288
  font-size: 11px;
289
}
290
.readiness small {
291
  color: #727b73;
292
  font-size: 9px;
293
}
294
.statusOrb {
295
  display: grid;
296
  width: 30px;
297
  height: 30px;
298
  flex: none;
299
  place-items: center;
300
  border-radius: 50%;
301
  color: #17130c;
302
  background: #f1c476;
303
  font: 600 11px 'DM Mono';
304
}
305
.readiness.ready .statusOrb {
306
  color: #11150f;
307
  background: #b9f27c;
308
}
309
.metric {
310
  display: flex;
311
  min-height: 142px;
312
  flex-direction: column;
313
  padding: 21px;
314
  border: 1px solid #292d29;
315
  border-right: 0;
316
  background: #111411;
317
}
318
.metric:first-child {
319
  border-radius: 6px 0 0 6px;
320
}
321
.metric:last-child {
322
  border-right: 1px solid #292d29;
323
  border-radius: 0 6px 6px 0;
324
}
325
.metric > span {
326
  color: #7a837b;
327
  font: 9px 'DM Mono';
328
  text-transform: uppercase;
329
}
330
.metric > strong {
331
  margin: auto 0 6px;
332
  font: 500 35px 'DM Mono';
333
}
334
.metric > small {
335
  color: #687069;
336
  font-size: 9px;
337
}
338
.metric.warn > strong {
339
  color: #f1c476;
340
}
341
.contentGrid,
342
.connectLayout {
343
  display: grid;
344
  grid-template-columns: 1.3fr 1fr;
345
  gap: 18px;
346
}
347
.setupRequests {
348
  margin: 18px 0;
349
  padding: 22px;
350
  border: 1px solid #4b5d3d;
351
  border-radius: 6px;
352
  background: #131912;
353
}
354
.setupRequests > div:first-child h2 {
355
  margin: 8px 0 4px;
356
  font-size: 16px;
357
}
358
.setupRequests > div:first-child > p:last-child {
359
  margin: 0 0 18px;
360
  color: #778078;
361
  font-size: 10px;
362
}
363
.setupRequest {
364
  display: flex;
365
  align-items: center;
366
  justify-content: space-between;
367
  gap: 20px;
368
  padding: 16px;
369
  border: 1px solid #303830;
370
  border-radius: 5px;
371
  background: #101410;
372
}
373
.setupRequest + .setupRequest {
374
  margin-top: 10px;
375
}
376
.setupRequest > div:first-child {
377
  display: flex;
378
  flex-direction: column;
379
  gap: 5px;
380
}
381
.setupRequest strong {
382
  font-size: 12px;
383
}
384
.setupRequest small {
385
  color: #717a72;
386
  font: 9px 'DM Mono';
387
}
388
.decisionButtons {
389
  display: flex;
390
  flex: none;
391
  gap: 8px;
392
}
393
.setupRequests > .loginError {
394
  margin-top: 10px;
395
}
396
.panel {
397
  min-width: 0;
398
  padding: 22px;
399
  border: 1px solid #292e29;
400
  border-radius: 6px;
401
  background: #111411;
402
}
403
.panelHead {
404
  padding-bottom: 17px;
405
  border-bottom: 1px solid #252925;
406
}
407
.panelHead h2 {
408
  margin: 0;
409
  font-size: 13px;
410
}
411
.panelHead p {
412
  margin: 5px 0 0;
413
  color: #69716a;
414
  font-size: 10px;
415
}
416
.historyRow {
417
  display: flex;
418
  align-items: center;
419
  gap: 12px;
420
  padding: 14px 0;
421
  border-bottom: 1px solid #222622;
422
}
423
.historyRow > div {
424
  display: flex;
425
  min-width: 0;
426
  flex: 1;
427
  flex-direction: column;
428
  gap: 4px;
429
}
430
.historyRow strong {
431
  font-size: 11px;
432
  text-transform: capitalize;
433
}
434
.historyRow small {
435
  overflow: hidden;
436
  color: #687069;
437
  font: 9px 'DM Mono';
438
  text-overflow: ellipsis;
439
  white-space: nowrap;
440
}
441
.historyRow > b {
442
  color: #7f8880;
443
  font: 8px 'DM Mono';
444
  text-transform: uppercase;
445
}
446
.eventDot {
447
  width: 7px;
448
  height: 7px;
449
  flex: none;
450
  border-radius: 50%;
451
  background: #91b96b;
452
}
453
.eventDot.policy_warning,
454
.eventDot.objection {
455
  background: #f1c476;
456
}
457
.eventDot.policy_violation,
458
.eventDot.dispute {
459
  background: #ef826f;
460
}
461
.eventDot.receipt {
462
  background: #80b9e9;
463
}
464
.textButton {
465
  margin-top: 15px;
466
  padding: 0;
467
  border: 0;
468
  color: #b9f27c;
469
  background: transparent;
470
  font-size: 10px;
471
  cursor: pointer;
472
}
473
.empty {
474
  display: grid;
475
  min-height: 220px;
476
  place-items: center;
477
  align-content: center;
478
  padding: 30px;
479
  text-align: center;
480
}
481
.empty > span {
482
  display: grid;
483
  width: 42px;
484
  height: 42px;
485
  place-items: center;
486
  margin-bottom: 14px;
487
  border: 1px solid #303630;
488
  border-radius: 50%;
489
  color: #899189;
490
}
491
.empty strong {
492
  font-size: 12px;
493
}
494
.empty p {
495
  max-width: 420px;
496
  margin: 7px 0 16px;
497
  color: #666e67;
498
  font-size: 10px;
499
  line-height: 1.6;
500
}
501
.profile {
502
  padding: 16px 0;
503
  border-bottom: 1px solid #232723;
504
}
505
.profile:last-child {
506
  border-bottom: 0;
507
}
508
.profile > div:first-child {
509
  display: flex;
510
  justify-content: space-between;
511
  margin-bottom: 13px;
512
}
513
.profile > div:first-child strong {
514
  font-size: 10px;
515
}
516
.profile > div:first-child small {
517
  color: #69716a;
518
  font: 8px 'DM Mono';
519
}
520
.meter {
521
  display: grid;
522
  grid-template-columns: 82px 1fr 35px;
523
  align-items: center;
524
  gap: 8px;
525
  margin: 8px 0;
526
  color: #737b74;
527
  font: 8px 'DM Mono';
528
}
529
.meter i {
530
  height: 3px;
531
  background: #292e29;
532
}
533
.meter i b {
534
  display: block;
535
  height: 100%;
536
  background: #b9f27c;
537
}
538
.meter strong {
539
  text-align: right;
540
}
541
.agentGrid {
542
  display: grid;
543
  grid-template-columns: repeat(2, minmax(0, 1fr));
544
  gap: 16px;
545
  margin-top: 18px;
546
}
547
.agentGrid > .empty {
548
  grid-column: 1/-1;
549
  border: 1px solid #292e29;
550
  border-radius: 6px;
551
  background: #111411;
552
}
553
.agentCard {
554
  min-height: 230px;
555
  padding: 22px;
556
  border: 1px solid #292e29;
557
  border-radius: 6px;
558
  background: #111411;
559
}
560
.agentTop {
561
  display: flex;
562
  align-items: center;
563
  justify-content: space-between;
564
}
565
.agentGlyph {
566
  display: grid;
567
  width: 38px;
568
  height: 38px;
569
  place-items: center;
570
  border: 1px solid #303630;
571
  border-radius: 5px;
572
  color: #b9f27c;
573
}
574
.agentTop b {
575
  color: #b9f27c;
576
  font: 8px 'DM Mono';
577
}
578
.agentTop b.bad {
579
  color: #ef826f;
580
}
581
.agentBadges {
582
  display: flex;
583
  align-items: center;
584
  gap: 7px;
585
}
586
.agentTop .readyBadge,
587
.agentTop .needsBadge,
588
.agentTop .onlineBadge,
589
.agentTop .offlineBadge {
590
  padding: 5px 7px;
591
  border: 1px solid #3d5931;
592
  border-radius: 99px;
593
  color: #b9f27c;
594
  background: #172015;
595
}
596
.agentTop .needsBadge {
597
  border-color: #5b4931;
598
  color: #f1c476;
599
  background: #211b12;
600
}
601
.agentTop .onlineBadge {
602
  border-color: #3d5931;
603
  color: #b9f27c;
604
  background: #172015;
605
}
606
.agentTop .offlineBadge {
607
  border-color: #414741;
608
  color: #858d85;
609
  background: #181b18;
610
}
611
.agentCard h2 {
612
  margin: 24px 0 4px;
613
  font-size: 15px;
614
}
615
.agentCard p,
616
.agentCard > small {
617
  color: #687069;
618
  font-size: 9px;
619
}
620
.agentCard > small {
621
  display: block;
622
  margin-top: 20px;
623
}
624
.agentCard > button {
625
  width: 100%;
626
  margin-top: 18px;
627
}
628
.automationSummary {
629
  display: flex;
630
  flex-wrap: wrap;
631
  gap: 7px;
632
  margin-top: 18px;
633
}
634
.automationSummary span,
635
.automationPreview span {
636
  padding: 6px 8px;
637
  border: 1px solid #303630;
638
  border-radius: 4px;
639
  color: #909990;
640
  background: #151815;
641
  font: 8px 'DM Mono';
642
}
643
.automationForm {
644
  display: grid;
645
  gap: 13px;
646
  margin-top: 18px;
647
  padding-top: 18px;
648
  border-top: 1px solid #282d28;
649
}
650
.automationForm label {
651
  display: grid;
652
  gap: 6px;
653
  color: #7e877f;
654
  font-size: 9px;
655
}
656
.automationForm input,
657
.automationForm select {
658
  width: 100%;
659
  padding: 10px 11px;
660
  border: 1px solid #343a34;
661
  border-radius: 4px;
662
  outline: none;
663
  color: #e1e6df;
664
  background: #0c0f0c;
665
  font-size: 10px;
666
}
667
.automationForm input:focus,
668
.automationForm select:focus {
669
  border-color: #82a761;
670
  box-shadow: 0 0 0 2px rgb(185 242 124 / 8%);
671
}
672
.automationForm .checkControl {
673
  display: flex;
674
  grid-template-columns: none;
675
  align-items: center;
676
  gap: 8px;
677
}
678
.automationForm .checkControl input {
679
  width: 14px;
680
  height: 14px;
681
  accent-color: #b9f27c;
682
}
683
.agentActions {
684
  display: flex;
685
  justify-content: flex-end;
686
  gap: 8px;
687
}
688
.automationPreview {
689
  display: flex;
690
  flex-wrap: wrap;
691
  gap: 6px;
692
  margin-top: 8px;
693
}
694
.autoAccepted {
695
  color: #91ba6b !important;
696
}
697
.tags {
698
  display: flex;
699
  flex-wrap: wrap;
700
  gap: 5px;
701
  margin-top: 16px;
702
}
703
.tags span {
704
  padding: 5px 7px;
705
  border: 1px solid #2e342e;
706
  border-radius: 3px;
707
  color: #8f988f;
708
  font: 8px 'DM Mono';
709
}
710
.notice {
711
  margin: 18px 0;
712
  padding: 15px 18px;
713
  border-left: 2px solid #b9f27c;
714
  color: #838b84;
715
  background: #121612;
716
  font-size: 10px;
717
}
718
.notice strong {
719
  margin-right: 5px;
720
  color: #dfe5dc;
721
}
722
.connectLayout {
723
  margin-top: 18px;
724
}
725
.endpoint {
726
  display: flex;
727
  gap: 8px;
728
  margin: 24px 0;
729
}
730
.endpoint code {
731
  overflow: auto;
732
  flex: 1;
733
  padding: 13px;
734
  border: 1px solid #303530;
735
  border-radius: 4px;
736
  color: #b9f27c;
737
  background: #0c0e0c;
738
  font: 10px 'DM Mono';
739
  white-space: nowrap;
740
}
741
.endpoint button {
742
  padding: 0 14px;
743
  border: 1px solid #3a413a;
744
  border-radius: 4px;
745
  color: #dfe4dd;
746
  background: #1a1e1a;
747
  cursor: pointer;
748
}
749
.connectLayout ol {
750
  margin: 10px 0;
751
  padding-left: 25px;
752
  color: #899189;
753
  font-size: 11px;
754
  line-height: 2.2;
755
}
756
.checkList {
757
  margin: 22px 0 0;
758
  padding: 0;
759
  list-style: none;
760
}
761
.checkList li {
762
  padding: 11px 0;
763
  border-bottom: 1px solid #252925;
764
  color: #8b948c;
765
  font-size: 11px;
766
}
767
.checkList li::before {
768
  content: '✓';
769
  margin-right: 10px;
770
  color: #b9f27c;
771
}
772
.settingsCard {
773
  margin-top: 18px;
774
  border: 1px solid #292e29;
775
  border-radius: 6px;
776
  background: #111411;
777
}
778
.setting {
779
  display: grid;
780
  grid-template-columns: 1fr minmax(230px, 0.6fr);
781
  align-items: center;
782
  gap: 30px;
783
  padding: 22px 24px;
784
  border-bottom: 1px solid #262a26;
785
}
786
.setting strong {
787
  font-size: 12px;
788
}
789
.setting p {
790
  max-width: 580px;
791
  margin: 5px 0 0;
792
  color: #69716a;
793
  font-size: 9px;
794
  line-height: 1.6;
795
}
796
.setting input,
797
.setting select {
798
  width: 100%;
799
  padding: 10px 12px;
800
  border: 1px solid #333933;
801
  border-radius: 4px;
802
  outline: 0;
803
  color: #dfe4dc;
804
  background: #0c0f0c;
805
  font-size: 10px;
806
}
807
.setting input:focus,
808
.setting select:focus {
809
  border-color: #789b58;
810
}
811
.locked {
812
  float: right;
813
  color: #71806c;
814
  font: 9px 'DM Mono';
815
}
816
.toggle {
817
  position: relative;
818
  display: block;
819
  width: 42px;
820
  height: 23px;
821
  margin-left: auto;
822
  padding: 0;
823
  border: 1px solid #363c36;
824
  border-radius: 99px;
825
  background: #1a1e1a;
826
  cursor: pointer;
827
}
828
.toggle span {
829
  position: absolute;
830
  top: 3px;
831
  left: 3px;
832
  width: 15px;
833
  height: 15px;
834
  border-radius: 50%;
835
  background: #707970;
836
  transition: 0.2s;
837
}
838
.toggle.on {
839
  border-color: #789b58;
840
  background: #23301f;
841
}
842
.toggle.on span {
843
  left: 22px;
844
  background: #b9f27c;
845
}
846
.saveRow {
847
  display: flex;
848
  align-items: center;
849
  gap: 12px;
850
  padding: 20px 24px;
851
}
852
.saveRow span {
853
  color: #b9f27c;
854
  font-size: 10px;
855
}
856
.loginPage {
857
  display: grid;
858
  grid-template-columns: 1.05fr 0.95fr;
859
  min-height: 100vh;
860
}
861
.loginPitch {
862
  display: flex;
863
  flex-direction: column;
864
  justify-content: space-between;
865
  padding: 48px 7vw;
866
  background: radial-gradient(circle at 10% 90%, #273c2e 0, transparent 36rem), #0b0d0b;
867
}
868
.loginPitch h1 {
869
  max-width: 650px;
870
  margin: 15px 0 22px;
871
  font-size: clamp(48px, 6vw, 86px);
872
  font-weight: 500;
873
  letter-spacing: -0.07em;
874
  line-height: 0.95;
875
}
876
.loginPitch > div > p:last-child {
877
  max-width: 580px;
878
  color: #899189;
879
  font-size: 14px;
880
  line-height: 1.75;
881
}
882
.loginProof {
883
  display: grid;
884
  grid-template-columns: auto 1fr;
885
  gap: 10px 13px;
886
  color: #8b948c;
887
  font: 9px 'DM Mono';
888
  text-transform: uppercase;
889
}
890
.loginProof span {
891
  color: #b9f27c;
892
}
893
.loginCard {
894
  display: flex;
895
  flex-direction: column;
896
  justify-content: center;
897
  padding: 8vw;
898
  gap: 34px;
899
  border-left: 1px solid #292d29;
900
  background: #101310;
901
}
902
.loginCard h2 {
903
  margin: 10px 0;
904
  font-size: 28px;
905
  font-weight: 500;
906
  letter-spacing: -0.04em;
907
}
908
.socialButtons {
909
  display: grid;
910
  gap: 10px;
911
}
912
.socialButtons button {
913
  display: flex;
914
  align-items: center;
915
  justify-content: center;
916
  gap: 10px;
917
  width: 100%;
918
  padding: 13px;
919
  border: 1px solid #3a413a;
920
  border-radius: 5px;
921
  color: #e5e9e3;
922
  background: #171b17;
923
  font-size: 11px;
924
  font-weight: 600;
925
  cursor: pointer;
926
}
927
.socialButtons button:hover {
928
  border-color: #687266;
929
  background: #1d221d;
930
}
931
.socialButtons span {
932
  display: grid;
933
  width: 19px;
934
  height: 19px;
935
  place-items: center;
936
  font-size: 15px;
937
}
938
.socialButtons .google {
939
  color: #79a7ee;
940
  font-weight: 700;
941
}
942
.loginError {
943
  padding: 10px;
944
  border: 1px solid #673e38;
945
  border-radius: 4px;
946
  color: #f3a296;
947
  background: #261513;
948
  font-size: 10px;
949
}
950
.loginCard > div > p:last-child,
951
.loginCard > small {
952
  color: #737c74;
953
  font-size: 10px;
954
  line-height: 1.6;
955
}
956
.loading {
957
  display: grid;
958
  min-height: 100vh;
959
  place-items: center;
960
  align-content: center;
961
  gap: 14px;
962
  color: #737b74;
963
  font: 9px 'DM Mono';
964
  text-transform: uppercase;
965
}
966
.loading.compact {
967
  min-height: 50vh;
968
}
969
.errorBar {
970
  margin-bottom: 14px;
971
  padding: 12px 14px;
972
  border: 1px solid #673e38;
973
  border-radius: 4px;
974
  color: #f3a296;
975
  background: #261513;
976
  font-size: 10px;
977
}
978
:root[data-theme='light'] .appShell aside {
979
  border-color: #dbe1d8;
980
  background: #ffffff;
981
}
982
:root[data-theme='light'] .brand small,
983
:root[data-theme='light'] .eyebrow,
984
:root[data-theme='light'] .appShell nav button,
985
:root[data-theme='light'] .metric > span,
986
:root[data-theme='light'] .metric > small,
987
:root[data-theme='light'] .panelHead p,
988
:root[data-theme='light'] .historyRow small,
989
:root[data-theme='light'] .agentCard p,
990
:root[data-theme='light'] .agentCard > small,
991
:root[data-theme='light'] .setting p,
992
:root[data-theme='light'] .empty p,
993
:root[data-theme='light'] .loginCard > small,
994
:root[data-theme='light'] .loginCard > div > p:last-child {
995
  color: #5c675d;
996
}
997
:root[data-theme='light'] .appShell nav button:hover,
998
:root[data-theme='light'] .appShell nav button.active,
999
:root[data-theme='light'] .account:hover {
1000
  color: #172117;
1001
  background: #edf2e9;
1002
}
1003
:root[data-theme='light'] .privacyStamp,
1004
:root[data-theme='light'] .themeSwitch,
1005
:root[data-theme='light'] .secondary,
1006
:root[data-theme='light'] .endpoint button,
1007
:root[data-theme='light'] .toggle {
1008
  border-color: #d2dbcf;
1009
  color: #243024;
1010
  background: #f0f4ed;
1011
}
1012
:root[data-theme='light'] .themeSwitch:hover,
1013
:root[data-theme='light'] .secondary:hover,
1014
:root[data-theme='light'] .endpoint button:hover {
1015
  background: #e4ece0;
1016
}
1017
:root[data-theme='light'] .pageHead,
1018
:root[data-theme='light'] .metric,
1019
:root[data-theme='light'] .panel,
1020
:root[data-theme='light'] .agentCard,
1021
:root[data-theme='light'] .agentGrid > .empty,
1022
:root[data-theme='light'] .settingsCard,
1023
:root[data-theme='light'] .setting,
1024
:root[data-theme='light'] .historyRow,
1025
:root[data-theme='light'] .profile,
1026
:root[data-theme='light'] .panelHead,
1027
:root[data-theme='light'] .checkList li {
1028
  border-color: #dbe1d8;
1029
}
1030
:root[data-theme='light'] .metric,
1031
:root[data-theme='light'] .panel,
1032
:root[data-theme='light'] .agentCard,
1033
:root[data-theme='light'] .agentGrid > .empty,
1034
:root[data-theme='light'] .settingsCard,
1035
:root[data-theme='light'] .setupRequest {
1036
  background: #ffffff;
1037
}
1038
:root[data-theme='light'] .setupRequests {
1039
  border-color: #b8d69d;
1040
  background: #f1f8eb;
1041
}
1042
:root[data-theme='light'] .notice {
1043
  color: #405040;
1044
  background: #eef6e8;
1045
}
1046
:root[data-theme='light'] .notice strong {
1047
  color: #1b291b;
1048
}
1049
:root[data-theme='light'] .tags span,
1050
:root[data-theme='light'] .agentGlyph,
1051
:root[data-theme='light'] .account > span,
1052
:root[data-theme='light'] .endpoint code,
1053
:root[data-theme='light'] .setting input,
1054
:root[data-theme='light'] .setting select {
1055
  border-color: #d2dbcf;
1056
  color: #294029;
1057
  background: #f8faf6;
1058
}
1059
:root[data-theme='light'] .loginPitch {
1060
  background: radial-gradient(circle at 10% 90%, #d9ebcc 0, transparent 36rem), #f5f7f2;
1061
}
1062
:root[data-theme='light'] .loginCard {
1063
  border-color: #dbe1d8;
1064
  background: #ffffff;
1065
}
1066
:root[data-theme='light'] .socialButtons button {
1067
  border-color: #d2dbcf;
1068
  color: #1d281d;
1069
  background: #f4f7f1;
1070
}
1071
:root[data-theme='light'] .readiness {
1072
  border-color: #d8c59f;
1073
  background: linear-gradient(110deg, #fff8ea, #ffffff 60%);
1074
}
1075
:root[data-theme='light'] .readiness.ready {
1076
  border-color: #bdd9a6;
1077
  background: linear-gradient(110deg, #eff8e9, #ffffff 60%);
1078
}
1079
:root[data-theme='light'] .automationSummary span,
1080
:root[data-theme='light'] .automationPreview span,
1081
:root[data-theme='light'] .automationForm input,
1082
:root[data-theme='light'] .automationForm select {
1083
  border-color: #d2dbcf;
1084
  color: #304030;
1085
  background: #f8faf6;
1086
}
1087
@media (max-width: 900px) {
1088
  .agentGrid {
1089
    grid-template-columns: 1fr 1fr;
1090
  }
1091
  .contentGrid,
1092
  .connectLayout {
1093
    grid-template-columns: 1fr;
1094
  }
1095
  .loginPage {
1096
    grid-template-columns: 1fr;
1097
  }
1098
  .loginPitch {
1099
    display: none;
1100
  }
1101
  .loginCard {
1102
    min-height: 100vh;
1103
    border: 0;
1104
  }
1105
  .appShell {
1106
    grid-template-columns: 76px 1fr;
1107
  }
1108
  .appShell aside {
1109
    padding: 20px 12px;
1110
  }
1111
  .brand > div:last-child,
1112
  .appShell nav button:not(.active) {
1113
    font-size: 0;
1114
  }
1115
  .appShell nav button {
1116
    justify-content: center;
1117
  }
1118
  .appShell nav button span {
1119
    font-size: 15px;
1120
  }
1121
  .privacyStamp,
1122
  .account > div,
1123
  .account > b {
1124
    display: none;
1125
  }
1126
  .themeSwitch {
1127
    justify-content: center;
1128
    padding: 10px;
1129
    font-size: 0;
1130
  }
1131
  .account {
1132
    justify-content: center;
1133
  }
1134
  .appShell main {
1135
    padding: 35px 28px;
1136
  }
1137
  .metrics {
1138
    grid-template-columns: 1fr 1fr;
1139
  }
1140
  .metric:nth-child(2) {
1141
    border-right: 1px solid #292d29;
1142
  }
1143
  .metric:first-child {
1144
    border-radius: 6px 0 0;
1145
  }
1146
  .metric:nth-child(2) {
1147
    border-radius: 0 6px 0 0;
1148
  }
1149
  .metric:nth-child(3) {
1150
    border-radius: 0 0 0 6px;
1151
  }
1152
  .metric:last-child {
1153
    border-radius: 0 0 6px;
1154
  }
1155
  .setting {
1156
    grid-template-columns: 1fr;
1157
  }
1158
}
1159
@media (max-width: 560px) {
1160
  .appShell {
1161
    display: block;
1162
  }
1163
  .appShell aside {
1164
    position: fixed;
1165
    z-index: 10;
1166
    top: auto;
1167
    bottom: 0;
1168
    width: 100%;
1169
    height: 64px;
1170
    flex-direction: row;
1171
    padding: 8px;
1172
    border: 0;
1173
    border-top: 1px solid #292d29;
1174
  }
1175
  .appShell aside > .brand,
1176
  .privacyStamp,
1177
  .account,
1178
  .themeSwitch {
1179
    display: none;
1180
  }
1181
  .appShell nav {
1182
    display: grid;
1183
    width: 100%;
1184
    grid-template-columns: repeat(6, 1fr);
1185
    margin: 0;
1186
  }
1187
  .appShell nav button,
1188
  .appShell nav button:not(.active) {
1189
    display: flex;
1190
    justify-content: center;
1191
    padding: 8px;
1192
    font-size: 0;
1193
  }
1194
  .appShell main {
1195
    padding: 28px 16px 90px;
1196
  }
1197
  .pageHead {
1198
    align-items: flex-start;
1199
  }
1200
  .pageHead h1 {
1201
    font-size: 34px;
1202
  }
1203
  .metrics,
1204
  .agentGrid {
1205
    grid-template-columns: 1fr;
1206
  }
1207
  .metric,
1208
  .metric:nth-child(n) {
1209
    border: 1px solid #292d29;
1210
    border-bottom: 0;
1211
    border-radius: 0;
1212
  }
1213
  .metric:first-child {
1214
    border-radius: 6px 6px 0 0;
1215
  }
1216
  .metric:last-child {
1217
    border-bottom: 1px solid #292d29;
1218
    border-radius: 0 0 6px 6px;
1219
  }
1220
  .setting {
1221
    grid-template-columns: 1fr;
1222
    gap: 14px;
1223
  }
1224
  .toggle {
1225
    margin-left: 0;
1226
  }
1227
  .endpoint {
1228
    flex-direction: column;
1229
  }
1230
  .readiness,
1231
  .setupRequest {
1232
    align-items: flex-start;
1233
    flex-direction: column;
1234
  }
1235
  .readiness > button,
1236
  .decisionButtons {
1237
    width: 100%;
1238
  }
1239
  .decisionButtons button {
1240
    flex: 1;
1241
  }
1242
  .loginCard {
1243
    padding: 24px;
1244
  }
1245
  .historyRow > b {
1246
    display: none;
1247
  }
1248
}