DocsLog in

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

Viewing files at commit f1f8fc237d6aCommit detailsView latest

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