DocsLog in

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

Viewing files at commit 9a8fdf2387ffCommit detailsView latest

apps/dashboard/src/styles.css 1236 lines · 22.5 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
  padding: 5px 7px;
589
  border: 1px solid #3d5931;
590
  border-radius: 99px;
591
  color: #b9f27c;
592
  background: #172015;
593
}
594
.agentTop .needsBadge {
595
  border-color: #5b4931;
596
  color: #f1c476;
597
  background: #211b12;
598
}
599
.agentCard h2 {
600
  margin: 24px 0 4px;
601
  font-size: 15px;
602
}
603
.agentCard p,
604
.agentCard > small {
605
  color: #687069;
606
  font-size: 9px;
607
}
608
.agentCard > small {
609
  display: block;
610
  margin-top: 20px;
611
}
612
.agentCard > button {
613
  width: 100%;
614
  margin-top: 18px;
615
}
616
.automationSummary {
617
  display: flex;
618
  flex-wrap: wrap;
619
  gap: 7px;
620
  margin-top: 18px;
621
}
622
.automationSummary span,
623
.automationPreview span {
624
  padding: 6px 8px;
625
  border: 1px solid #303630;
626
  border-radius: 4px;
627
  color: #909990;
628
  background: #151815;
629
  font: 8px 'DM Mono';
630
}
631
.automationForm {
632
  display: grid;
633
  gap: 13px;
634
  margin-top: 18px;
635
  padding-top: 18px;
636
  border-top: 1px solid #282d28;
637
}
638
.automationForm label {
639
  display: grid;
640
  gap: 6px;
641
  color: #7e877f;
642
  font-size: 9px;
643
}
644
.automationForm input,
645
.automationForm select {
646
  width: 100%;
647
  padding: 10px 11px;
648
  border: 1px solid #343a34;
649
  border-radius: 4px;
650
  outline: none;
651
  color: #e1e6df;
652
  background: #0c0f0c;
653
  font-size: 10px;
654
}
655
.automationForm input:focus,
656
.automationForm select:focus {
657
  border-color: #82a761;
658
  box-shadow: 0 0 0 2px rgb(185 242 124 / 8%);
659
}
660
.automationForm .checkControl {
661
  display: flex;
662
  grid-template-columns: none;
663
  align-items: center;
664
  gap: 8px;
665
}
666
.automationForm .checkControl input {
667
  width: 14px;
668
  height: 14px;
669
  accent-color: #b9f27c;
670
}
671
.agentActions {
672
  display: flex;
673
  justify-content: flex-end;
674
  gap: 8px;
675
}
676
.automationPreview {
677
  display: flex;
678
  flex-wrap: wrap;
679
  gap: 6px;
680
  margin-top: 8px;
681
}
682
.autoAccepted {
683
  color: #91ba6b !important;
684
}
685
.tags {
686
  display: flex;
687
  flex-wrap: wrap;
688
  gap: 5px;
689
  margin-top: 16px;
690
}
691
.tags span {
692
  padding: 5px 7px;
693
  border: 1px solid #2e342e;
694
  border-radius: 3px;
695
  color: #8f988f;
696
  font: 8px 'DM Mono';
697
}
698
.notice {
699
  margin: 18px 0;
700
  padding: 15px 18px;
701
  border-left: 2px solid #b9f27c;
702
  color: #838b84;
703
  background: #121612;
704
  font-size: 10px;
705
}
706
.notice strong {
707
  margin-right: 5px;
708
  color: #dfe5dc;
709
}
710
.connectLayout {
711
  margin-top: 18px;
712
}
713
.endpoint {
714
  display: flex;
715
  gap: 8px;
716
  margin: 24px 0;
717
}
718
.endpoint code {
719
  overflow: auto;
720
  flex: 1;
721
  padding: 13px;
722
  border: 1px solid #303530;
723
  border-radius: 4px;
724
  color: #b9f27c;
725
  background: #0c0e0c;
726
  font: 10px 'DM Mono';
727
  white-space: nowrap;
728
}
729
.endpoint button {
730
  padding: 0 14px;
731
  border: 1px solid #3a413a;
732
  border-radius: 4px;
733
  color: #dfe4dd;
734
  background: #1a1e1a;
735
  cursor: pointer;
736
}
737
.connectLayout ol {
738
  margin: 10px 0;
739
  padding-left: 25px;
740
  color: #899189;
741
  font-size: 11px;
742
  line-height: 2.2;
743
}
744
.checkList {
745
  margin: 22px 0 0;
746
  padding: 0;
747
  list-style: none;
748
}
749
.checkList li {
750
  padding: 11px 0;
751
  border-bottom: 1px solid #252925;
752
  color: #8b948c;
753
  font-size: 11px;
754
}
755
.checkList li::before {
756
  content: '✓';
757
  margin-right: 10px;
758
  color: #b9f27c;
759
}
760
.settingsCard {
761
  margin-top: 18px;
762
  border: 1px solid #292e29;
763
  border-radius: 6px;
764
  background: #111411;
765
}
766
.setting {
767
  display: grid;
768
  grid-template-columns: 1fr minmax(230px, 0.6fr);
769
  align-items: center;
770
  gap: 30px;
771
  padding: 22px 24px;
772
  border-bottom: 1px solid #262a26;
773
}
774
.setting strong {
775
  font-size: 12px;
776
}
777
.setting p {
778
  max-width: 580px;
779
  margin: 5px 0 0;
780
  color: #69716a;
781
  font-size: 9px;
782
  line-height: 1.6;
783
}
784
.setting input,
785
.setting select {
786
  width: 100%;
787
  padding: 10px 12px;
788
  border: 1px solid #333933;
789
  border-radius: 4px;
790
  outline: 0;
791
  color: #dfe4dc;
792
  background: #0c0f0c;
793
  font-size: 10px;
794
}
795
.setting input:focus,
796
.setting select:focus {
797
  border-color: #789b58;
798
}
799
.locked {
800
  float: right;
801
  color: #71806c;
802
  font: 9px 'DM Mono';
803
}
804
.toggle {
805
  position: relative;
806
  display: block;
807
  width: 42px;
808
  height: 23px;
809
  margin-left: auto;
810
  padding: 0;
811
  border: 1px solid #363c36;
812
  border-radius: 99px;
813
  background: #1a1e1a;
814
  cursor: pointer;
815
}
816
.toggle span {
817
  position: absolute;
818
  top: 3px;
819
  left: 3px;
820
  width: 15px;
821
  height: 15px;
822
  border-radius: 50%;
823
  background: #707970;
824
  transition: 0.2s;
825
}
826
.toggle.on {
827
  border-color: #789b58;
828
  background: #23301f;
829
}
830
.toggle.on span {
831
  left: 22px;
832
  background: #b9f27c;
833
}
834
.saveRow {
835
  display: flex;
836
  align-items: center;
837
  gap: 12px;
838
  padding: 20px 24px;
839
}
840
.saveRow span {
841
  color: #b9f27c;
842
  font-size: 10px;
843
}
844
.loginPage {
845
  display: grid;
846
  grid-template-columns: 1.05fr 0.95fr;
847
  min-height: 100vh;
848
}
849
.loginPitch {
850
  display: flex;
851
  flex-direction: column;
852
  justify-content: space-between;
853
  padding: 48px 7vw;
854
  background: radial-gradient(circle at 10% 90%, #273c2e 0, transparent 36rem), #0b0d0b;
855
}
856
.loginPitch h1 {
857
  max-width: 650px;
858
  margin: 15px 0 22px;
859
  font-size: clamp(48px, 6vw, 86px);
860
  font-weight: 500;
861
  letter-spacing: -0.07em;
862
  line-height: 0.95;
863
}
864
.loginPitch > div > p:last-child {
865
  max-width: 580px;
866
  color: #899189;
867
  font-size: 14px;
868
  line-height: 1.75;
869
}
870
.loginProof {
871
  display: grid;
872
  grid-template-columns: auto 1fr;
873
  gap: 10px 13px;
874
  color: #8b948c;
875
  font: 9px 'DM Mono';
876
  text-transform: uppercase;
877
}
878
.loginProof span {
879
  color: #b9f27c;
880
}
881
.loginCard {
882
  display: flex;
883
  flex-direction: column;
884
  justify-content: center;
885
  padding: 8vw;
886
  gap: 34px;
887
  border-left: 1px solid #292d29;
888
  background: #101310;
889
}
890
.loginCard h2 {
891
  margin: 10px 0;
892
  font-size: 28px;
893
  font-weight: 500;
894
  letter-spacing: -0.04em;
895
}
896
.socialButtons {
897
  display: grid;
898
  gap: 10px;
899
}
900
.socialButtons button {
901
  display: flex;
902
  align-items: center;
903
  justify-content: center;
904
  gap: 10px;
905
  width: 100%;
906
  padding: 13px;
907
  border: 1px solid #3a413a;
908
  border-radius: 5px;
909
  color: #e5e9e3;
910
  background: #171b17;
911
  font-size: 11px;
912
  font-weight: 600;
913
  cursor: pointer;
914
}
915
.socialButtons button:hover {
916
  border-color: #687266;
917
  background: #1d221d;
918
}
919
.socialButtons span {
920
  display: grid;
921
  width: 19px;
922
  height: 19px;
923
  place-items: center;
924
  font-size: 15px;
925
}
926
.socialButtons .google {
927
  color: #79a7ee;
928
  font-weight: 700;
929
}
930
.loginError {
931
  padding: 10px;
932
  border: 1px solid #673e38;
933
  border-radius: 4px;
934
  color: #f3a296;
935
  background: #261513;
936
  font-size: 10px;
937
}
938
.loginCard > div > p:last-child,
939
.loginCard > small {
940
  color: #737c74;
941
  font-size: 10px;
942
  line-height: 1.6;
943
}
944
.loading {
945
  display: grid;
946
  min-height: 100vh;
947
  place-items: center;
948
  align-content: center;
949
  gap: 14px;
950
  color: #737b74;
951
  font: 9px 'DM Mono';
952
  text-transform: uppercase;
953
}
954
.loading.compact {
955
  min-height: 50vh;
956
}
957
.errorBar {
958
  margin-bottom: 14px;
959
  padding: 12px 14px;
960
  border: 1px solid #673e38;
961
  border-radius: 4px;
962
  color: #f3a296;
963
  background: #261513;
964
  font-size: 10px;
965
}
966
:root[data-theme='light'] .appShell aside {
967
  border-color: #dbe1d8;
968
  background: #ffffff;
969
}
970
:root[data-theme='light'] .brand small,
971
:root[data-theme='light'] .eyebrow,
972
:root[data-theme='light'] .appShell nav button,
973
:root[data-theme='light'] .metric > span,
974
:root[data-theme='light'] .metric > small,
975
:root[data-theme='light'] .panelHead p,
976
:root[data-theme='light'] .historyRow small,
977
:root[data-theme='light'] .agentCard p,
978
:root[data-theme='light'] .agentCard > small,
979
:root[data-theme='light'] .setting p,
980
:root[data-theme='light'] .empty p,
981
:root[data-theme='light'] .loginCard > small,
982
:root[data-theme='light'] .loginCard > div > p:last-child {
983
  color: #5c675d;
984
}
985
:root[data-theme='light'] .appShell nav button:hover,
986
:root[data-theme='light'] .appShell nav button.active,
987
:root[data-theme='light'] .account:hover {
988
  color: #172117;
989
  background: #edf2e9;
990
}
991
:root[data-theme='light'] .privacyStamp,
992
:root[data-theme='light'] .themeSwitch,
993
:root[data-theme='light'] .secondary,
994
:root[data-theme='light'] .endpoint button,
995
:root[data-theme='light'] .toggle {
996
  border-color: #d2dbcf;
997
  color: #243024;
998
  background: #f0f4ed;
999
}
1000
:root[data-theme='light'] .themeSwitch:hover,
1001
:root[data-theme='light'] .secondary:hover,
1002
:root[data-theme='light'] .endpoint button:hover {
1003
  background: #e4ece0;
1004
}
1005
:root[data-theme='light'] .pageHead,
1006
:root[data-theme='light'] .metric,
1007
:root[data-theme='light'] .panel,
1008
:root[data-theme='light'] .agentCard,
1009
:root[data-theme='light'] .agentGrid > .empty,
1010
:root[data-theme='light'] .settingsCard,
1011
:root[data-theme='light'] .setting,
1012
:root[data-theme='light'] .historyRow,
1013
:root[data-theme='light'] .profile,
1014
:root[data-theme='light'] .panelHead,
1015
:root[data-theme='light'] .checkList li {
1016
  border-color: #dbe1d8;
1017
}
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'] .setupRequest {
1024
  background: #ffffff;
1025
}
1026
:root[data-theme='light'] .setupRequests {
1027
  border-color: #b8d69d;
1028
  background: #f1f8eb;
1029
}
1030
:root[data-theme='light'] .notice {
1031
  color: #405040;
1032
  background: #eef6e8;
1033
}
1034
:root[data-theme='light'] .notice strong {
1035
  color: #1b291b;
1036
}
1037
:root[data-theme='light'] .tags span,
1038
:root[data-theme='light'] .agentGlyph,
1039
:root[data-theme='light'] .account > span,
1040
:root[data-theme='light'] .endpoint code,
1041
:root[data-theme='light'] .setting input,
1042
:root[data-theme='light'] .setting select {
1043
  border-color: #d2dbcf;
1044
  color: #294029;
1045
  background: #f8faf6;
1046
}
1047
:root[data-theme='light'] .loginPitch {
1048
  background: radial-gradient(circle at 10% 90%, #d9ebcc 0, transparent 36rem), #f5f7f2;
1049
}
1050
:root[data-theme='light'] .loginCard {
1051
  border-color: #dbe1d8;
1052
  background: #ffffff;
1053
}
1054
:root[data-theme='light'] .socialButtons button {
1055
  border-color: #d2dbcf;
1056
  color: #1d281d;
1057
  background: #f4f7f1;
1058
}
1059
:root[data-theme='light'] .readiness {
1060
  border-color: #d8c59f;
1061
  background: linear-gradient(110deg, #fff8ea, #ffffff 60%);
1062
}
1063
:root[data-theme='light'] .readiness.ready {
1064
  border-color: #bdd9a6;
1065
  background: linear-gradient(110deg, #eff8e9, #ffffff 60%);
1066
}
1067
:root[data-theme='light'] .automationSummary span,
1068
:root[data-theme='light'] .automationPreview span,
1069
:root[data-theme='light'] .automationForm input,
1070
:root[data-theme='light'] .automationForm select {
1071
  border-color: #d2dbcf;
1072
  color: #304030;
1073
  background: #f8faf6;
1074
}
1075
@media (max-width: 900px) {
1076
  .agentGrid {
1077
    grid-template-columns: 1fr 1fr;
1078
  }
1079
  .contentGrid,
1080
  .connectLayout {
1081
    grid-template-columns: 1fr;
1082
  }
1083
  .loginPage {
1084
    grid-template-columns: 1fr;
1085
  }
1086
  .loginPitch {
1087
    display: none;
1088
  }
1089
  .loginCard {
1090
    min-height: 100vh;
1091
    border: 0;
1092
  }
1093
  .appShell {
1094
    grid-template-columns: 76px 1fr;
1095
  }
1096
  .appShell aside {
1097
    padding: 20px 12px;
1098
  }
1099
  .brand > div:last-child,
1100
  .appShell nav button:not(.active) {
1101
    font-size: 0;
1102
  }
1103
  .appShell nav button {
1104
    justify-content: center;
1105
  }
1106
  .appShell nav button span {
1107
    font-size: 15px;
1108
  }
1109
  .privacyStamp,
1110
  .account > div,
1111
  .account > b {
1112
    display: none;
1113
  }
1114
  .themeSwitch {
1115
    justify-content: center;
1116
    padding: 10px;
1117
    font-size: 0;
1118
  }
1119
  .account {
1120
    justify-content: center;
1121
  }
1122
  .appShell main {
1123
    padding: 35px 28px;
1124
  }
1125
  .metrics {
1126
    grid-template-columns: 1fr 1fr;
1127
  }
1128
  .metric:nth-child(2) {
1129
    border-right: 1px solid #292d29;
1130
  }
1131
  .metric:first-child {
1132
    border-radius: 6px 0 0;
1133
  }
1134
  .metric:nth-child(2) {
1135
    border-radius: 0 6px 0 0;
1136
  }
1137
  .metric:nth-child(3) {
1138
    border-radius: 0 0 0 6px;
1139
  }
1140
  .metric:last-child {
1141
    border-radius: 0 0 6px;
1142
  }
1143
  .setting {
1144
    grid-template-columns: 1fr;
1145
  }
1146
}
1147
@media (max-width: 560px) {
1148
  .appShell {
1149
    display: block;
1150
  }
1151
  .appShell aside {
1152
    position: fixed;
1153
    z-index: 10;
1154
    top: auto;
1155
    bottom: 0;
1156
    width: 100%;
1157
    height: 64px;
1158
    flex-direction: row;
1159
    padding: 8px;
1160
    border: 0;
1161
    border-top: 1px solid #292d29;
1162
  }
1163
  .appShell aside > .brand,
1164
  .privacyStamp,
1165
  .account,
1166
  .themeSwitch {
1167
    display: none;
1168
  }
1169
  .appShell nav {
1170
    display: grid;
1171
    width: 100%;
1172
    grid-template-columns: repeat(6, 1fr);
1173
    margin: 0;
1174
  }
1175
  .appShell nav button,
1176
  .appShell nav button:not(.active) {
1177
    display: flex;
1178
    justify-content: center;
1179
    padding: 8px;
1180
    font-size: 0;
1181
  }
1182
  .appShell main {
1183
    padding: 28px 16px 90px;
1184
  }
1185
  .pageHead {
1186
    align-items: flex-start;
1187
  }
1188
  .pageHead h1 {
1189
    font-size: 34px;
1190
  }
1191
  .metrics,
1192
  .agentGrid {
1193
    grid-template-columns: 1fr;
1194
  }
1195
  .metric,
1196
  .metric:nth-child(n) {
1197
    border: 1px solid #292d29;
1198
    border-bottom: 0;
1199
    border-radius: 0;
1200
  }
1201
  .metric:first-child {
1202
    border-radius: 6px 6px 0 0;
1203
  }
1204
  .metric:last-child {
1205
    border-bottom: 1px solid #292d29;
1206
    border-radius: 0 0 6px 6px;
1207
  }
1208
  .setting {
1209
    grid-template-columns: 1fr;
1210
    gap: 14px;
1211
  }
1212
  .toggle {
1213
    margin-left: 0;
1214
  }
1215
  .endpoint {
1216
    flex-direction: column;
1217
  }
1218
  .readiness,
1219
  .setupRequest {
1220
    align-items: flex-start;
1221
    flex-direction: column;
1222
  }
1223
  .readiness > button,
1224
  .decisionButtons {
1225
    width: 100%;
1226
  }
1227
  .decisionButtons button {
1228
    flex: 1;
1229
  }
1230
  .loginCard {
1231
    padding: 24px;
1232
  }
1233
  .historyRow > b {
1234
    display: none;
1235
  }
1236
}