DocsLog in

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

Viewing files at commit 2307e7ec1ffeCommit detailsView latest

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