Our Personal Data Server from scratch!
tranquil.farm
pds
rust
database
fun
oauth
atproto
1.dashboard {
2 display: flex;
3 height: 100vh;
4 background: var(--bg-primary);
5 overflow: hidden;
6}
7
8.sidebar {
9 width: 320px;
10 flex-shrink: 0;
11 background: var(--bg-secondary);
12 display: flex;
13 flex-direction: column;
14 height: 100%;
15 overflow: hidden;
16}
17
18.sidebar-header {
19 padding: var(--space-6);
20 border-bottom: 1px solid var(--border-color);
21}
22
23.sidebar-header h1 {
24 margin: 0;
25 font-size: var(--text-2xl);
26}
27
28.sidebar-subtitle {
29 margin: var(--space-1) 0 var(--space-4) 0;
30 font-size: var(--text-sm);
31 color: var(--text-secondary);
32}
33
34.account-section {
35 display: flex;
36 flex-direction: column;
37 gap: var(--space-3);
38}
39
40.account-dropdown {
41 position: relative;
42 width: 100%;
43}
44
45.account-trigger {
46 display: flex;
47 align-items: center;
48 justify-content: space-between;
49 gap: var(--space-3);
50 width: 100%;
51 padding: var(--space-3) var(--space-4);
52 background: var(--bg-card);
53 border: 1px solid var(--border-color);
54 cursor: pointer;
55 color: var(--text-primary);
56 text-align: left;
57}
58
59.account-trigger .account-handle {
60 font-weight: var(--font-medium);
61 overflow: hidden;
62 text-overflow: ellipsis;
63 white-space: nowrap;
64}
65
66.account-trigger:hover:not(:disabled) {
67 border-color: var(--secondary);
68 background: var(--bg-tertiary);
69}
70
71.account-trigger:disabled {
72 opacity: 0.6;
73 cursor: not-allowed;
74}
75
76.dropdown-arrow {
77 font-size: 0.625rem;
78 color: var(--text-secondary);
79 flex-shrink: 0;
80}
81
82.dropdown-menu {
83 position: absolute;
84 top: 100%;
85 left: 0;
86 right: 0;
87 margin-top: var(--space-2);
88 background: var(--bg-card);
89 box-shadow: var(--shadow-lg);
90 z-index: 100;
91 overflow: hidden;
92}
93
94.account-details {
95 display: flex;
96 flex-direction: column;
97 gap: var(--space-2);
98 padding: 0 var(--space-1);
99}
100
101.account-details .account-did {
102 font-size: var(--text-xs);
103 font-family: var(--font-mono);
104 color: var(--text-muted);
105 overflow: hidden;
106 text-overflow: ellipsis;
107 white-space: nowrap;
108}
109
110.account-status {
111 display: flex;
112 gap: var(--space-2);
113 flex-wrap: wrap;
114}
115
116.dropdown-section {
117 padding: var(--space-3) 0;
118}
119
120.dropdown-label {
121 display: block;
122 padding: var(--space-2) var(--space-5);
123 font-size: var(--text-xs);
124 color: var(--text-muted);
125 text-transform: uppercase;
126 letter-spacing: 0.05em;
127}
128
129button.dropdown-item {
130 display: block;
131 width: 100%;
132 padding: var(--space-3) var(--space-5);
133 background: transparent;
134 border: none;
135 text-align: left;
136 cursor: pointer;
137 color: var(--text-primary);
138 font-size: var(--text-sm);
139}
140
141button.dropdown-item:hover:not(:disabled) {
142 background: var(--bg-hover);
143 color: var(--text-primary);
144}
145
146button.dropdown-item.logout-item {
147 color: var(--error-text);
148}
149
150.dropdown-divider {
151 height: 1px;
152 background: var(--border-color);
153}
154
155.status-banner {
156 margin: var(--space-4);
157 padding: var(--space-4);
158}
159
160.status-banner.deactivated {
161 background: var(--warning-bg);
162}
163
164.status-banner.deactivated strong {
165 color: var(--warning-text);
166}
167
168.status-banner.deactivated p {
169 margin: var(--space-2) 0 0 0;
170 color: var(--warning-text);
171 font-size: var(--text-sm);
172}
173
174.status-banner.migrated {
175 background: var(--info-bg);
176}
177
178.status-banner.migrated strong {
179 color: var(--info-text);
180}
181
182.status-banner.migrated p {
183 margin: var(--space-2) 0 0 0;
184 color: var(--info-text);
185 font-size: var(--text-sm);
186}
187
188.nav-list {
189 flex: 1;
190 padding: var(--space-2);
191 overflow-y: auto;
192}
193
194.nav-item {
195 display: flex;
196 align-items: center;
197 justify-content: space-between;
198 width: 100%;
199 padding: var(--space-4);
200 background: transparent;
201 border: none;
202 cursor: pointer;
203 color: var(--text-primary);
204 font-size: var(--text-base);
205 text-align: left;
206}
207
208.nav-item:hover:not(.active) {
209 background: var(--bg-tertiary);
210 color: var(--secondary);
211}
212
213.nav-item:hover:not(.active) .nav-chevron {
214 color: var(--secondary);
215}
216
217.nav-item.active {
218 background: var(--accent);
219 color: var(--text-inverse);
220}
221
222.nav-item.active .nav-chevron {
223 color: var(--text-inverse);
224}
225
226.nav-item.highlight-admin {
227 color: var(--secondary);
228}
229
230.nav-item.highlight-admin.active {
231 background: var(--accent);
232 color: var(--text-inverse);
233}
234
235.nav-item.highlight-migrated {
236 color: var(--info-text);
237}
238
239.nav-item.highlight-migrated.active {
240 background: var(--info-text);
241 color: var(--text-inverse);
242}
243
244.nav-item.highlight-did-web {
245 color: var(--secondary);
246}
247
248.nav-item.highlight-did-web.active {
249 background: var(--accent);
250 color: var(--text-inverse);
251}
252
253.nav-chevron {
254 display: none;
255}
256
257.content {
258 flex: 1;
259 display: flex;
260 flex-direction: column;
261 min-width: 0;
262 height: 100%;
263 overflow: hidden;
264 background: var(--bg-primary);
265}
266
267.content-header {
268 display: none;
269 padding: var(--space-4) var(--space-6);
270 text-align: center;
271}
272
273.content-header h2 {
274 margin: 0;
275 font-size: var(--text-lg);
276}
277
278.back-button {
279 display: flex;
280 align-items: center;
281 gap: var(--space-1);
282 padding: var(--space-2) var(--space-3);
283 background: transparent;
284 border: none;
285 color: var(--text-secondary);
286 font-size: var(--text-base);
287 cursor: pointer;
288 margin-bottom: var(--space-2);
289 min-height: 44px;
290}
291
292.back-button:hover:not(:disabled) {
293 background: var(--bg-secondary);
294 color: var(--text-primary);
295}
296
297.back-arrow {
298 font-size: var(--text-xl);
299 font-weight: 300;
300}
301
302.content-body {
303 flex: 1;
304 padding: var(--space-6);
305 overflow-y: auto;
306}
307
308.content-body > * {
309 max-width: var(--width-lg);
310 margin: 0 auto;
311 width: 100%;
312}
313
314.loading-state .sidebar {
315 opacity: 0.7;
316}
317
318.skeleton-header {
319 height: 100px;
320 background: var(--bg-tertiary);
321 margin: var(--space-6);
322}
323
324.skeleton-nav-item {
325 height: 48px;
326 background: var(--bg-tertiary);
327 margin: var(--space-2) var(--space-2);
328}
329
330.skeleton-content {
331 height: 300px;
332 background: var(--bg-secondary);
333 margin: var(--space-6);
334}
335
336@media (max-width: 768px) {
337 .dashboard {
338 flex-direction: column;
339 height: 100vh;
340 }
341
342 .sidebar {
343 width: 100%;
344 height: auto;
345 flex: 1;
346 border-right: none;
347 border-bottom: 1px solid var(--border-color);
348 overflow-y: auto;
349 }
350
351 .sidebar.hidden-mobile {
352 display: none;
353 }
354
355 .content {
356 display: flex;
357 flex: 1;
358 height: auto;
359 }
360
361 .content.hidden-mobile {
362 display: none;
363 }
364
365 .content-header {
366 display: block;
367 }
368}
369
370@media (min-width: 769px) {
371 .back-button {
372 display: none;
373 }
374
375 .content-header {
376 display: block;
377 padding: var(--space-6);
378 }
379
380 .content-header h2 {
381 font-size: var(--text-xl);
382 }
383}
384
385.overview dl {
386 display: grid;
387 grid-template-columns: auto 1fr;
388 gap: var(--space-3) var(--space-5);
389 margin: 0;
390}
391
392.overview dt {
393 font-weight: var(--font-medium);
394 color: var(--text-secondary);
395}
396
397.overview dd {
398 margin: 0;
399 min-width: 0;
400}
401
402.overview .mono {
403 font-family: var(--font-mono);
404 font-size: var(--text-sm);
405 word-break: break-all;
406}
407
408.badge.deactivated {
409 background: var(--warning-bg);
410 color: var(--warning-text);
411}
412
413.badge.migrated {
414 background: var(--info-bg);
415 color: var(--info-text);
416}
417
418@media (max-width: 500px) {
419 .overview dl {
420 grid-template-columns: 1fr;
421 gap: var(--space-2);
422 }
423
424 .overview dt {
425 margin-top: var(--space-3);
426 }
427
428 .overview dt:first-child {
429 margin-top: 0;
430 }
431}
432
433.current {
434 color: var(--text-secondary);
435 font-size: var(--text-sm);
436 margin: 0 0 var(--space-3) 0;
437}
438
439.language-select {
440 width: 100%;
441}
442
443.passkey-list,
444.sso-list,
445.did-editor .list {
446 list-style: none;
447 padding: 0;
448 margin: 0 0 var(--space-4) 0;
449 display: flex;
450 flex-direction: column;
451 gap: var(--space-2);
452}
453
454.controllers .item-actions {
455 display: flex;
456 gap: var(--space-2);
457}
458
459.danger-zone h3 {
460 color: var(--error-text);
461}
462
463.warning-text {
464 color: var(--text-secondary);
465 font-size: var(--text-sm);
466 margin: 0 0 var(--space-4) 0;
467}
468
469.hint.success {
470 color: var(--success-text);
471 background: var(--success-bg);
472 padding: var(--space-2);
473 margin-bottom: var(--space-3);
474}
475
476.byo-handle {
477 margin-top: var(--space-3);
478}
479
480.verification-info {
481 background: var(--bg-card);
482 padding: var(--space-4);
483 margin-bottom: var(--space-4);
484}
485
486.verification-info h4 {
487 margin: 0 0 var(--space-2) 0;
488 font-size: var(--text-sm);
489 font-weight: var(--font-medium);
490}
491
492.verification-info h5 {
493 margin: var(--space-3) 0 var(--space-1) 0;
494 font-size: var(--text-xs);
495 font-weight: var(--font-medium);
496 color: var(--text-secondary);
497}
498
499.verification-info p {
500 margin: var(--space-1) 0;
501 font-size: var(--text-xs);
502 color: var(--text-secondary);
503}
504
505.method {
506 margin-top: var(--space-3);
507 padding-top: var(--space-3);
508 border-top: 1px solid var(--border-color);
509}
510
511.method:first-of-type {
512 margin-top: var(--space-2);
513 padding-top: 0;
514 border-top: none;
515}
516
517code.record {
518 display: block;
519 background: var(--bg-input);
520 padding: var(--space-2);
521 font-size: var(--text-xs);
522 word-break: break-all;
523 margin: var(--space-1) 0;
524}
525
526.security .loading {
527 color: var(--text-secondary);
528 padding: var(--space-4);
529}
530
531.status {
532 display: block;
533 padding: var(--space-2) var(--space-3);
534 font-size: var(--text-sm);
535 margin-bottom: var(--space-4);
536 width: fit-content;
537}
538
539.status.success {
540 background: var(--success-bg);
541 color: var(--success-text);
542}
543
544.status.warning {
545 background: var(--warning-bg);
546 color: var(--warning-text);
547}
548
549.status.info {
550 background: var(--accent-muted);
551 color: var(--secondary);
552}
553
554.passkey-item {
555 display: flex;
556 justify-content: space-between;
557 align-items: center;
558 padding: var(--space-3);
559 background: var(--bg-card);
560 gap: var(--space-3);
561}
562
563.passkey-info {
564 display: flex;
565 flex-direction: column;
566 gap: var(--space-1);
567 min-width: 0;
568}
569
570.passkey-name {
571 font-weight: var(--font-medium);
572}
573
574.passkey-meta {
575 font-size: var(--text-xs);
576 color: var(--text-secondary);
577}
578
579.passkey-actions,
580.edit-actions {
581 display: flex;
582 gap: var(--space-2);
583 flex-shrink: 0;
584}
585
586.passkey-edit {
587 display: flex;
588 gap: var(--space-2);
589 align-items: center;
590 width: 100%;
591}
592
593.passkey-edit input {
594 flex: 1;
595}
596
597.add-passkey {
598 display: flex;
599 gap: var(--space-2);
600 margin-top: var(--space-4);
601 padding-top: var(--space-4);
602 border-top: 1px solid var(--border-color);
603}
604
605.add-passkey input {
606 flex: 1;
607}
608
609.password-actions,
610.totp-actions {
611 display: flex;
612 gap: var(--space-3);
613}
614
615.remove-password-form {
616 background: var(--error-bg);
617 padding: var(--space-4);
618}
619
620.remove-password-form .warning-text {
621 color: var(--error-text);
622 font-size: var(--text-sm);
623 margin: 0 0 var(--space-4) 0;
624}
625
626.remove-password-form .actions {
627 gap: var(--space-2);
628}
629
630.setup-step {
631 background: var(--bg-card);
632 padding: var(--space-4);
633}
634
635.setup-step p {
636 color: var(--text-secondary);
637 font-size: var(--text-sm);
638 margin: 0 0 var(--space-4) 0;
639}
640
641.setup-step h4 {
642 margin: 0 0 var(--space-2) 0;
643}
644
645.qr-container {
646 display: flex;
647 flex-direction: column;
648 align-items: center;
649 margin: var(--space-4) 0;
650}
651
652.qr-code {
653 width: 180px;
654 height: 180px;
655 image-rendering: pixelated;
656}
657
658.manual-entry {
659 margin-bottom: var(--space-4);
660 font-size: var(--text-sm);
661}
662
663.manual-entry summary {
664 cursor: pointer;
665 color: var(--secondary);
666}
667
668.secret-code {
669 display: block;
670 margin-top: var(--space-2);
671 padding: var(--space-2);
672 background: var(--bg-input);
673 word-break: break-all;
674 font-size: var(--text-xs);
675}
676
677.code-input {
678 font-size: var(--text-xl);
679 letter-spacing: 0.3em;
680 text-align: center;
681 max-width: 180px;
682 margin: 0 auto var(--space-4) auto;
683 display: block;
684}
685
686.security .warning-text {
687 color: var(--error-text);
688 font-size: var(--text-sm);
689 margin-bottom: var(--space-4);
690}
691
692.backup-codes {
693 display: grid;
694 grid-template-columns: repeat(2, 1fr);
695 gap: var(--space-2);
696 margin-bottom: var(--space-4);
697}
698
699.backup-code {
700 padding: var(--space-2);
701 background: var(--bg-input);
702 text-align: center;
703 font-size: var(--text-sm);
704 font-family: var(--font-mono);
705}
706
707.security .inline-form {
708 margin-top: var(--space-4);
709}
710
711.security .inline-form.danger-form {
712 border-color: var(--error-border);
713}
714
715.security .inline-form h4 {
716 margin: 0 0 var(--space-3) 0;
717 font-size: var(--text-base);
718}
719
720.sso-item {
721 display: flex;
722 justify-content: space-between;
723 align-items: center;
724 padding: var(--space-3);
725 background: var(--bg-card);
726 gap: var(--space-3);
727}
728
729.sso-info,
730.password-info,
731.channel-info {
732 display: flex;
733 flex-direction: column;
734 gap: var(--space-1);
735}
736
737.sso-provider {
738 font-weight: var(--font-medium);
739}
740
741.sso-id {
742 font-size: var(--text-xs);
743 color: var(--text-secondary);
744}
745
746.sso-meta {
747 font-size: var(--text-xs);
748 color: var(--text-secondary);
749}
750
751.sso-providers {
752 padding-top: var(--space-4);
753 border-top: 1px solid var(--border-color);
754}
755
756.sso-providers h4 {
757 margin: 0 0 var(--space-3) 0;
758 font-size: var(--text-sm);
759 color: var(--text-secondary);
760}
761
762.provider-buttons {
763 display: flex;
764 flex-wrap: wrap;
765 gap: var(--space-2);
766}
767
768.provider-btn {
769 display: flex;
770 align-items: center;
771 gap: var(--space-2);
772 padding: var(--space-2) var(--space-4);
773 background: var(--bg-card);
774 border: 1px solid var(--border-color);
775 cursor: pointer;
776 color: var(--text-primary);
777}
778
779.provider-btn:hover:not(:disabled) {
780 border-color: var(--secondary);
781}
782
783.provider-btn:disabled {
784 opacity: 0.6;
785 cursor: not-allowed;
786}
787
788.linked-badge {
789 font-size: var(--text-xs);
790 padding: var(--space-1) var(--space-2);
791 background: var(--success-bg);
792 color: var(--success-text);
793}
794
795.empty-hint {
796 color: var(--text-secondary);
797 font-size: var(--text-sm);
798 margin: 0;
799}
800
801.hint-text {
802 color: var(--text-secondary);
803 font-size: var(--text-sm);
804 margin: var(--space-2) 0 0 0;
805}
806
807.device-list {
808 display: flex;
809 flex-direction: column;
810 gap: var(--space-3);
811}
812
813.device-card {
814 display: flex;
815 align-items: center;
816 gap: var(--space-3);
817 padding: var(--space-3);
818 background: var(--bg-card);
819}
820
821.device-header {
822 display: flex;
823 align-items: center;
824 gap: var(--space-2);
825 flex: 1;
826 min-width: 0;
827}
828
829.device-name {
830 font-weight: var(--font-medium);
831 white-space: nowrap;
832 overflow: hidden;
833 text-overflow: ellipsis;
834}
835
836.edit-name-input {
837 flex: 1;
838 padding: var(--space-2);
839 font-size: var(--text-sm);
840 min-width: 0;
841}
842
843.device-details {
844 display: flex;
845 gap: var(--space-3);
846 flex-shrink: 0;
847}
848
849.device-details .detail {
850 font-size: var(--text-xs);
851 color: var(--text-secondary);
852 white-space: nowrap;
853}
854
855.device-details .expiring-soon {
856 color: var(--warning-text);
857}
858
859@media (max-width: 500px) {
860 .passkey-item {
861 flex-direction: column;
862 align-items: stretch;
863 }
864
865 .passkey-actions {
866 width: 100%;
867 }
868
869 .passkey-actions button {
870 flex: 1;
871 }
872
873 .add-passkey {
874 flex-direction: column;
875 }
876
877 .device-card {
878 flex-direction: column;
879 align-items: stretch;
880 }
881
882 .device-details {
883 flex-direction: column;
884 gap: var(--space-1);
885 }
886
887 .device-card > button {
888 width: 100%;
889 }
890}
891
892.sessions-list {
893 display: flex;
894 flex-direction: column;
895 gap: var(--space-4);
896}
897
898.session-card {
899 background: var(--bg-secondary);
900 padding: var(--space-4);
901 display: flex;
902 justify-content: space-between;
903 align-items: center;
904 gap: var(--space-4);
905}
906
907.session-card.current {
908 border-color: var(--secondary);
909 background: var(--bg-card);
910}
911
912.session-info {
913 flex: 1;
914 min-width: 0;
915}
916
917.session-header {
918 margin-bottom: var(--space-2);
919 display: flex;
920 align-items: center;
921 gap: var(--space-2);
922 flex-wrap: wrap;
923}
924
925.client-name {
926 font-weight: var(--font-medium);
927 color: var(--text-primary);
928}
929
930.badge.current {
931 background: var(--accent);
932 color: var(--text-inverse);
933}
934
935.badge.type {
936 background: var(--bg-secondary);
937 color: var(--text-secondary);
938}
939
940.badge.type.oauth {
941 background: var(--success-bg);
942 color: var(--success-text);
943 border-color: var(--success-border);
944}
945
946.session-details {
947 display: flex;
948 flex-direction: column;
949 gap: var(--space-1);
950}
951
952.sessions .detail {
953 font-size: var(--text-sm);
954}
955
956.detail-label {
957 color: var(--text-secondary);
958 margin-right: var(--space-2);
959}
960
961.detail-value {
962 color: var(--text-primary);
963}
964
965.actions-bar {
966 margin-top: var(--space-4);
967 display: flex;
968 gap: var(--space-2);
969 flex-wrap: wrap;
970}
971
972@media (max-width: 500px) {
973 .session-card {
974 flex-direction: column;
975 align-items: stretch;
976 }
977
978 .revoke-btn {
979 width: 100%;
980 }
981}
982
983.new-password-banner {
984 background: var(--warning-bg);
985 padding: var(--space-4);
986 margin-bottom: var(--space-6);
987}
988
989.new-password-banner .password-label {
990 font-size: var(--text-sm);
991 color: var(--text-primary);
992 margin-bottom: var(--space-2);
993}
994
995.new-password-banner .warning {
996 color: var(--warning-text);
997 font-weight: var(--font-medium);
998 margin: 0 0 var(--space-3) 0;
999}
1000
1001.acknowledge-label {
1002 display: flex;
1003 align-items: center;
1004 gap: var(--space-2);
1005 margin-bottom: var(--space-3);
1006 cursor: pointer;
1007 font-size: var(--text-sm);
1008 color: var(--text-primary);
1009}
1010
1011.acknowledge-label input[type="checkbox"] {
1012 width: 18px;
1013 height: 18px;
1014 accent-color: var(--accent);
1015}
1016
1017.password-display {
1018 display: flex;
1019 gap: var(--space-2);
1020 margin-bottom: var(--space-3);
1021}
1022
1023.password-display code {
1024 flex: 1;
1025 padding: var(--space-3);
1026 background: var(--bg-card);
1027 font-family: var(--font-mono);
1028 word-break: break-all;
1029}
1030
1031.app-passwords .copy-btn {
1032 padding: var(--space-2) var(--space-3);
1033 font-size: var(--text-sm);
1034}
1035
1036.dismiss-btn {
1037 width: 100%;
1038}
1039
1040.create-form {
1041 background: var(--bg-secondary);
1042 padding: var(--space-5);
1043 margin-bottom: var(--space-6);
1044}
1045
1046form.create-form > div {
1047 margin-bottom: var(--space-4);
1048}
1049
1050.scope-selector {
1051 display: flex;
1052 flex-direction: column;
1053 gap: var(--space-2);
1054 margin-bottom: var(--space-4);
1055}
1056
1057.scope-label {
1058 font-size: var(--text-sm);
1059 color: var(--text-secondary);
1060}
1061
1062.scope-buttons {
1063 display: flex;
1064 flex-wrap: wrap;
1065 gap: var(--space-2);
1066}
1067
1068.scope-btn {
1069 padding: var(--space-2) var(--space-4);
1070 background: var(--bg-card);
1071 border: 1px solid var(--border-color);
1072 color: var(--text-primary);
1073 cursor: pointer;
1074 font-size: var(--text-sm);
1075}
1076
1077.scope-btn:hover:not(:disabled) {
1078 background: var(--bg-hover);
1079 border-color: var(--secondary);
1080}
1081
1082.scope-btn.selected {
1083 background: var(--accent);
1084 border-color: var(--accent);
1085 color: var(--text-inverse);
1086}
1087
1088.scope-btn:disabled {
1089 opacity: 0.6;
1090 cursor: not-allowed;
1091}
1092
1093.password-list,
1094.code-list {
1095 list-style: none;
1096 padding: 0;
1097 margin: 0;
1098 display: flex;
1099 flex-direction: column;
1100 gap: var(--space-3);
1101}
1102
1103.password-item {
1104 display: flex;
1105 justify-content: space-between;
1106 align-items: center;
1107 padding: var(--space-4);
1108 background: var(--bg-secondary);
1109 gap: var(--space-4);
1110}
1111
1112.password-name {
1113 font-weight: var(--font-medium);
1114}
1115
1116.password-meta {
1117 display: flex;
1118 align-items: center;
1119 flex-wrap: wrap;
1120 gap: var(--space-2);
1121 font-size: var(--text-sm);
1122 color: var(--text-secondary);
1123}
1124
1125.scope-badge {
1126 font-size: var(--text-xs);
1127 padding: var(--space-1) var(--space-2);
1128 background: var(--bg-card);
1129 color: var(--text-secondary);
1130}
1131
1132.scope-badge.full {
1133 background: var(--success-bg);
1134 border-color: var(--success-border);
1135 color: var(--success-text);
1136}
1137
1138.controller-badge {
1139 font-size: var(--text-xs);
1140 padding: var(--space-1) var(--space-2);
1141 background: var(--accent-muted);
1142 color: var(--secondary);
1143 cursor: help;
1144}
1145
1146.app-passwords .date {
1147 color: var(--text-secondary);
1148}
1149
1150@media (max-width: 500px) {
1151 .password-item {
1152 flex-direction: column;
1153 align-items: stretch;
1154 }
1155
1156 .app-passwords .delete-btn {
1157 width: 100%;
1158 }
1159
1160 .password-display {
1161 flex-direction: column;
1162 }
1163}
1164
1165.channel-options {
1166 display: flex;
1167 flex-direction: column;
1168 gap: var(--space-2);
1169}
1170
1171.channel-option {
1172 display: flex;
1173 align-items: center;
1174 gap: var(--space-3);
1175 padding: var(--space-3) var(--space-4);
1176 background: var(--bg-card);
1177 cursor: pointer;
1178}
1179
1180.channel-option input[type="radio"] {
1181 margin: 0;
1182 width: 18px;
1183 height: 18px;
1184 flex-shrink: 0;
1185 accent-color: var(--accent);
1186}
1187
1188.channel-option:hover:not(.disabled) {
1189 border-color: var(--secondary);
1190}
1191
1192.channel-option.disabled,
1193.channel-option.unavailable {
1194 opacity: 0.6;
1195 cursor: not-allowed;
1196}
1197
1198.channel-name {
1199 font-weight: var(--font-medium);
1200}
1201
1202.channel-desc {
1203 font-size: var(--text-xs);
1204 color: var(--text-secondary);
1205}
1206
1207.channel-hint {
1208 font-size: var(--text-xs);
1209 color: var(--text-muted);
1210 margin-left: auto;
1211}
1212
1213.channel-config {
1214 display: flex;
1215 flex-direction: column;
1216 gap: var(--space-4);
1217}
1218
1219.config-item {
1220 display: flex;
1221 flex-direction: column;
1222 gap: var(--space-2);
1223}
1224
1225.config-header {
1226 display: flex;
1227 align-items: center;
1228 justify-content: space-between;
1229}
1230
1231.config-input {
1232 display: flex;
1233 gap: var(--space-2);
1234}
1235
1236.config-input input {
1237 flex: 1;
1238}
1239
1240input.readonly {
1241 background: var(--bg-tertiary);
1242 color: var(--text-secondary);
1243}
1244
1245.comms .status {
1246 padding: var(--space-1) var(--space-2);
1247 font-size: var(--text-xs);
1248}
1249
1250.comms .status.verified {
1251 background: var(--success-bg);
1252 color: var(--success-text);
1253}
1254
1255.comms .status.unverified {
1256 background: var(--warning-bg);
1257 color: var(--warning-text);
1258}
1259
1260.telegram-verify-prompt,
1261.discord-verify-prompt {
1262 display: flex;
1263 flex-direction: column;
1264 gap: var(--space-2);
1265 padding: var(--space-3) var(--space-4);
1266 background: var(--bg-card);
1267 font-size: var(--text-sm);
1268 color: var(--text-primary);
1269}
1270
1271.manual-hint {
1272 font-size: var(--text-xs);
1273 color: var(--text-secondary);
1274}
1275
1276.verify-form {
1277 display: flex;
1278 flex-direction: column;
1279 gap: var(--space-2);
1280}
1281
1282.verify-form button {
1283 padding: var(--space-2) var(--space-3);
1284 font-size: var(--text-sm);
1285}
1286
1287.comms .actions {
1288 margin-bottom: var(--space-5);
1289}
1290
1291.history-section {
1292 margin-top: var(--space-6);
1293}
1294
1295.message-list {
1296 display: flex;
1297 flex-direction: column;
1298 gap: var(--space-3);
1299}
1300
1301.message-item {
1302 background: var(--bg-card);
1303 padding: var(--space-3);
1304}
1305
1306.message-header {
1307 display: flex;
1308 gap: var(--space-2);
1309 align-items: center;
1310 margin-bottom: var(--space-2);
1311}
1312
1313.message-type {
1314 font-weight: var(--font-medium);
1315 font-size: var(--text-sm);
1316}
1317
1318.message-channel {
1319 font-size: var(--text-xs);
1320 padding: var(--space-1) var(--space-2);
1321 background: var(--bg-secondary);
1322 color: var(--text-secondary);
1323}
1324
1325.message-status {
1326 font-size: var(--text-xs);
1327 padding: var(--space-1) var(--space-2);
1328 margin-left: auto;
1329}
1330
1331.message-status.sent {
1332 background: var(--success-bg);
1333 color: var(--success-text);
1334}
1335
1336.message-status.failed {
1337 background: var(--error-bg);
1338 color: var(--error-text);
1339}
1340
1341.message-subject {
1342 font-weight: var(--font-medium);
1343 font-size: var(--text-sm);
1344 margin-bottom: var(--space-1);
1345}
1346
1347.message-body {
1348 font-size: var(--text-sm);
1349 color: var(--text-secondary);
1350 white-space: pre-wrap;
1351}
1352
1353.message-date {
1354 font-size: var(--text-xs);
1355 color: var(--text-muted);
1356 margin-top: var(--space-2);
1357}
1358
1359.breadcrumb {
1360 display: flex;
1361 align-items: center;
1362 gap: var(--space-2);
1363 font-size: var(--text-sm);
1364 margin-bottom: var(--space-4);
1365 padding: var(--space-3) var(--space-4);
1366 background: var(--bg-secondary);
1367}
1368
1369.breadcrumb-sep {
1370 color: var(--text-muted);
1371}
1372
1373.breadcrumb-link {
1374 all: unset;
1375 color: var(--text-secondary);
1376 cursor: pointer;
1377 font-size: inherit;
1378 padding: var(--space-1) var(--space-2);
1379}
1380
1381button.breadcrumb-link:hover {
1382 color: var(--text-primary);
1383 background: var(--bg-hover);
1384}
1385
1386.breadcrumb-current {
1387 color: var(--text-primary);
1388 font-weight: var(--font-medium);
1389}
1390
1391.repo-explorer .message {
1392 margin-bottom: var(--space-4);
1393}
1394
1395.repo-explorer .message.error {
1396 display: flex;
1397 flex-direction: column;
1398 gap: var(--space-1);
1399}
1400
1401.error-code {
1402 font-family: var(--font-mono);
1403 font-size: var(--text-sm);
1404}
1405
1406.error-message {
1407 font-size: var(--text-sm);
1408}
1409
1410.toolbar {
1411 display: flex;
1412 gap: var(--space-2);
1413 margin-bottom: var(--space-4);
1414}
1415
1416.filter-input {
1417 flex: 1;
1418 padding: var(--space-2) var(--space-3);
1419 font-size: var(--text-sm);
1420}
1421
1422.collections {
1423 display: flex;
1424 flex-direction: column;
1425 gap: var(--space-4);
1426}
1427
1428.collection-group {
1429 background: var(--bg-secondary);
1430 padding: var(--space-4);
1431}
1432
1433.authority {
1434 margin: 0 0 var(--space-3) 0;
1435 font-size: var(--text-sm);
1436 color: var(--text-secondary);
1437 font-weight: var(--font-medium);
1438}
1439
1440.nsid-list {
1441 list-style: none;
1442 padding: 0;
1443 margin: 0;
1444 display: flex;
1445 flex-direction: column;
1446 gap: var(--space-1);
1447}
1448
1449.collection-link {
1450 display: flex;
1451 justify-content: space-between;
1452 align-items: center;
1453 width: 100%;
1454 padding: var(--space-3);
1455 background: var(--bg-card);
1456 cursor: pointer;
1457 text-align: left;
1458 color: var(--text-primary);
1459}
1460
1461button.collection-link:hover {
1462 background: var(--bg-hover);
1463 border-color: var(--secondary);
1464}
1465
1466.nsid {
1467 font-weight: var(--font-medium);
1468 color: var(--secondary);
1469}
1470
1471.arrow {
1472 color: var(--text-muted);
1473}
1474
1475.collection-link:hover .arrow {
1476 color: var(--secondary);
1477}
1478
1479.record-list,
1480.user-list {
1481 list-style: none;
1482 padding: 0;
1483 margin: 0;
1484 display: flex;
1485 flex-direction: column;
1486 gap: var(--space-2);
1487}
1488
1489.record-item {
1490 display: block;
1491 width: 100%;
1492 padding: var(--space-4);
1493 background: var(--bg-secondary);
1494 cursor: pointer;
1495 text-align: left;
1496 color: var(--text-primary);
1497}
1498
1499button.record-item:hover {
1500 background: var(--bg-hover);
1501 border-color: var(--secondary);
1502}
1503
1504.record-info {
1505 display: flex;
1506 justify-content: space-between;
1507 margin-bottom: var(--space-2);
1508}
1509
1510.rkey {
1511 font-family: var(--font-mono);
1512 font-weight: var(--font-medium);
1513 color: var(--secondary);
1514}
1515
1516.cid {
1517 font-family: var(--font-mono);
1518 font-size: var(--text-xs);
1519 color: var(--text-muted);
1520}
1521
1522.record-preview {
1523 margin: 0;
1524 padding: var(--space-2);
1525 background: var(--bg-card);
1526 font-family: var(--font-mono);
1527 font-size: var(--text-xs);
1528 color: var(--text-secondary);
1529 white-space: pre-wrap;
1530 word-break: break-word;
1531 max-height: 100px;
1532 overflow: hidden;
1533}
1534
1535.record-detail {
1536 display: flex;
1537 flex-direction: column;
1538 gap: var(--space-5);
1539}
1540
1541.record-meta {
1542 background: var(--bg-secondary);
1543 padding: var(--space-4);
1544}
1545
1546.record-meta dl {
1547 display: grid;
1548 grid-template-columns: auto 1fr;
1549 gap: var(--space-2) var(--space-4);
1550 margin: 0;
1551}
1552
1553.record-meta dt {
1554 font-weight: var(--font-medium);
1555 color: var(--text-secondary);
1556}
1557
1558.record-meta dd {
1559 margin: 0;
1560}
1561
1562.editor-container {
1563 margin-bottom: var(--space-4);
1564}
1565
1566.repo-explorer textarea {
1567 min-height: 300px;
1568 font-family: var(--font-mono);
1569 font-size: var(--text-sm);
1570 resize: vertical;
1571}
1572
1573.repo-explorer textarea.has-error {
1574 border-color: var(--error-text);
1575}
1576
1577.json-error {
1578 margin: var(--space-1) 0 0 0;
1579 font-size: var(--text-xs);
1580 color: var(--error-text);
1581}
1582
1583.repo-explorer .create-form {
1584 background: var(--bg-secondary);
1585 padding: var(--space-5);
1586}
1587
1588@media (max-width: 600px) {
1589 .toolbar {
1590 flex-direction: column;
1591 }
1592
1593 .record-meta dl {
1594 grid-template-columns: 1fr;
1595 }
1596
1597 .repo-explorer .actions {
1598 flex-direction: column;
1599 }
1600
1601 .repo-explorer .actions button {
1602 width: 100%;
1603 }
1604}
1605
1606.controllers {
1607}
1608
1609.controllers .section {
1610 background: var(--bg-secondary);
1611 padding: var(--space-5);
1612 margin-bottom: var(--space-5);
1613}
1614
1615.controllers .section-header {
1616 margin-bottom: var(--space-4);
1617}
1618
1619.controllers .section-header h3 {
1620 margin: 0 0 var(--space-1) 0;
1621 font-size: var(--text-base);
1622}
1623
1624.constraint-notice {
1625 background: var(--bg-tertiary);
1626 padding: var(--space-4);
1627 margin-top: var(--space-4);
1628}
1629
1630.constraint-notice p {
1631 margin: 0;
1632 color: var(--text-secondary);
1633 font-size: var(--text-sm);
1634}
1635
1636.items-list {
1637 display: flex;
1638 flex-direction: column;
1639 gap: var(--space-4);
1640 margin-bottom: var(--space-4);
1641}
1642
1643.item-card {
1644 background: var(--bg-card);
1645 padding: var(--space-4);
1646 display: flex;
1647 justify-content: space-between;
1648 align-items: center;
1649 gap: var(--space-4);
1650 flex-wrap: wrap;
1651}
1652
1653.item-card.inactive {
1654 opacity: 0.6;
1655}
1656
1657.controllers .item-info {
1658 flex: 1;
1659 min-width: 200px;
1660}
1661
1662.item-header {
1663 margin-bottom: var(--space-2);
1664 display: flex;
1665 align-items: center;
1666 gap: var(--space-2);
1667 flex-wrap: wrap;
1668}
1669
1670.item-handle {
1671 font-weight: var(--font-semibold);
1672 color: var(--text-primary);
1673}
1674
1675.badge.scope {
1676 background: var(--accent);
1677 color: var(--text-inverse);
1678}
1679
1680.badge.inactive {
1681 background: var(--error-bg);
1682 color: var(--error-text);
1683}
1684
1685.controllers .item-details {
1686 display: flex;
1687 flex-direction: column;
1688 gap: var(--space-1);
1689}
1690
1691.controllers .detail {
1692 font-size: var(--text-sm);
1693}
1694
1695.detail-value-did {
1696 font-family: var(--font-mono);
1697 font-size: var(--text-xs);
1698 word-break: break-all;
1699}
1700
1701.btn-link {
1702 display: inline-block;
1703 padding: var(--space-2) var(--space-4);
1704 border: 1px solid var(--secondary);
1705 background: transparent;
1706 color: var(--secondary);
1707 font-size: var(--text-sm);
1708 font-weight: var(--font-medium);
1709 text-decoration: none;
1710}
1711
1712a.btn-link:hover {
1713 background: var(--accent);
1714 color: var(--text-inverse);
1715}
1716
1717.controllers .danger-outline {
1718 padding: var(--space-2) var(--space-4);
1719 border: 1px solid var(--error-text);
1720 font-size: var(--text-sm);
1721}
1722
1723.controllers .ghost {
1724 border: 1px solid var(--border-color);
1725}
1726
1727.controllers .ghost:hover {
1728 border-color: var(--secondary);
1729}
1730
1731.form-card {
1732 background: var(--bg-card);
1733 padding: var(--space-5);
1734 margin-top: var(--space-4);
1735}
1736
1737.form-card h4 {
1738 margin: 0 0 var(--space-4) 0;
1739 font-size: var(--text-base);
1740}
1741
1742.controllers .warning-header {
1743 font-weight: var(--font-semibold);
1744 color: var(--warning-text);
1745 margin-bottom: var(--space-2);
1746}
1747
1748.controllers .warning-text {
1749 margin: 0 0 var(--space-3) 0;
1750 color: var(--warning-text);
1751 font-size: var(--text-sm);
1752 line-height: 1.5;
1753}
1754
1755.warning-bullets {
1756 margin: 0;
1757 padding-left: var(--space-5);
1758 color: var(--warning-text);
1759 font-size: var(--text-sm);
1760 line-height: 1.6;
1761}
1762
1763.controller-search {
1764 position: relative;
1765}
1766
1767.search-wrapper {
1768 position: relative;
1769}
1770
1771.typeahead-dropdown {
1772 position: absolute;
1773 top: 100%;
1774 left: 0;
1775 right: 0;
1776 z-index: 10;
1777 background: var(--bg-card);
1778 box-shadow: var(--shadow-lg);
1779 max-height: 240px;
1780 overflow-y: auto;
1781}
1782
1783.typeahead-item {
1784 display: flex;
1785 align-items: center;
1786 gap: var(--space-2);
1787 width: 100%;
1788 padding: var(--space-2) var(--space-3);
1789 border: none;
1790 background: transparent;
1791 cursor: pointer;
1792 text-align: left;
1793 color: var(--text-primary);
1794}
1795
1796button.typeahead-item:hover {
1797 background: var(--bg-tertiary);
1798}
1799
1800.typeahead-avatar {
1801 width: 28px;
1802 height: 28px;
1803 flex-shrink: 0;
1804}
1805
1806.typeahead-text {
1807 display: flex;
1808 flex-direction: column;
1809 min-width: 0;
1810}
1811
1812.typeahead-name {
1813 font-size: var(--text-sm);
1814 font-weight: var(--font-medium);
1815 white-space: nowrap;
1816 overflow: hidden;
1817 text-overflow: ellipsis;
1818}
1819
1820.typeahead-handle {
1821 font-size: var(--text-xs);
1822 color: var(--text-secondary);
1823 white-space: nowrap;
1824 overflow: hidden;
1825 text-overflow: ellipsis;
1826}
1827
1828.resolve-status {
1829 display: block;
1830 font-size: var(--text-xs);
1831 color: var(--text-secondary);
1832 margin-top: var(--space-1);
1833}
1834
1835.resolve-status.error {
1836 color: var(--error-text);
1837}
1838
1839.resolved-info {
1840 display: flex;
1841 align-items: center;
1842 gap: var(--space-2);
1843 flex-wrap: wrap;
1844 margin-top: var(--space-2);
1845 padding: var(--space-2) var(--space-3);
1846 background: var(--bg-tertiary);
1847 font-size: var(--text-xs);
1848}
1849
1850.resolved-did {
1851 font-family: var(--font-mono);
1852 color: var(--text-secondary);
1853 word-break: break-all;
1854}
1855
1856.resolved-handle {
1857 color: var(--text-primary);
1858 font-weight: var(--font-medium);
1859}
1860
1861.badge.external {
1862 background: var(--info-bg);
1863 color: var(--info-text);
1864}
1865
1866.audit-entries {
1867 display: flex;
1868 flex-direction: column;
1869 gap: var(--space-3);
1870}
1871
1872.audit-entry {
1873 background: var(--bg-card);
1874 padding: var(--space-4);
1875}
1876
1877.audit-entry-header {
1878 display: flex;
1879 justify-content: space-between;
1880 align-items: center;
1881 margin-bottom: var(--space-3);
1882}
1883
1884.action-type {
1885 font-weight: var(--font-medium);
1886 padding: var(--space-1) var(--space-2);
1887 background: var(--accent);
1888 color: var(--text-inverse);
1889 font-size: var(--text-sm);
1890}
1891
1892.audit-entry-date {
1893 font-size: var(--text-sm);
1894 color: var(--text-secondary);
1895}
1896
1897.audit-entry-details {
1898 display: flex;
1899 flex-direction: column;
1900 gap: var(--space-2);
1901}
1902
1903.audit-details-value {
1904 font-family: var(--font-mono);
1905 font-size: var(--text-xs);
1906 word-break: break-word;
1907}
1908
1909@media (max-width: 600px) {
1910 .item-card {
1911 flex-direction: column;
1912 align-items: stretch;
1913 }
1914
1915 .controllers .item-actions {
1916 width: 100%;
1917 }
1918
1919 .controllers .item-actions button,
1920 .controllers .item-actions a {
1921 width: 100%;
1922 text-align: center;
1923 }
1924
1925 .audit-entry-header {
1926 flex-direction: column;
1927 align-items: flex-start;
1928 gap: var(--space-2);
1929 }
1930
1931 .audit-entry-details .value.did {
1932 overflow: hidden;
1933 text-overflow: ellipsis;
1934 white-space: nowrap;
1935 max-width: 60vw;
1936 }
1937}
1938
1939.created-code {
1940 padding: var(--space-5);
1941 background: var(--success-bg);
1942 margin-bottom: var(--space-6);
1943}
1944
1945.created-code h3 {
1946 margin: 0 0 var(--space-4) 0;
1947 color: var(--success-text);
1948}
1949
1950.code-display {
1951 display: flex;
1952 align-items: center;
1953 gap: var(--space-4);
1954 background: var(--bg-card);
1955 padding: var(--space-4);
1956 margin-bottom: var(--space-4);
1957}
1958
1959.code-display code {
1960 font-size: var(--text-lg);
1961 font-family: var(--font-mono);
1962 flex: 1;
1963}
1964
1965.list-section h2 {
1966 font-size: var(--text-lg);
1967 margin: 0 0 var(--space-4) 0;
1968}
1969
1970.code-item {
1971 padding: var(--space-4);
1972 background: var(--bg-secondary);
1973}
1974
1975.skeleton-item {
1976 pointer-events: none;
1977}
1978
1979.code-item.disabled {
1980 opacity: 0.6;
1981}
1982
1983.code-item.used {
1984 background: var(--bg-tertiary);
1985}
1986
1987.code-main {
1988 display: flex;
1989 align-items: center;
1990 gap: var(--space-3);
1991 margin-bottom: var(--space-2);
1992}
1993
1994.code-value {
1995 font-family: var(--font-mono);
1996 font-size: var(--text-sm);
1997 padding: var(--space-2) var(--space-3);
1998 background: var(--bg-card);
1999}
2000
2001.invite-codes .copy-btn {
2002 flex-shrink: 0;
2003}
2004
2005.code-meta {
2006 display: flex;
2007 gap: var(--space-4);
2008 font-size: var(--text-sm);
2009 align-items: center;
2010 flex-wrap: wrap;
2011}
2012
2013.invite-codes .date {
2014 color: var(--text-secondary);
2015}
2016
2017.invite-codes .status {
2018 padding: var(--space-1) var(--space-2);
2019 font-size: var(--text-xs);
2020}
2021
2022.invite-codes .status.available {
2023 background: var(--success-bg);
2024 color: var(--success-text);
2025}
2026
2027.invite-codes .status.used {
2028 background: var(--bg-secondary);
2029 color: var(--text-secondary);
2030}
2031
2032.invite-codes .status.spent {
2033 background: var(--bg-tertiary);
2034 color: var(--text-tertiary);
2035}
2036
2037.invite-codes .status.disabled {
2038 background: var(--error-bg);
2039 color: var(--error-text);
2040}
2041
2042@media (max-width: 500px) {
2043 .code-display {
2044 flex-direction: column;
2045 align-items: stretch;
2046 }
2047
2048 .code-main {
2049 flex-direction: column;
2050 align-items: stretch;
2051 }
2052}
2053
2054.did-editor .loading,
2055.did-editor .empty {
2056 color: var(--text-secondary);
2057 padding: var(--space-4);
2058}
2059
2060.did-editor section h3 {
2061 margin: 0 0 var(--space-2) 0;
2062 font-size: var(--text-base);
2063}
2064
2065.help-section {
2066 background: var(--bg-card);
2067}
2068
2069.help-text {
2070 color: var(--text-secondary);
2071 font-size: var(--text-sm);
2072 margin: 0;
2073 line-height: 1.5;
2074}
2075
2076.did-editor .description,
2077.migration .description {
2078 margin: 0 0 var(--space-4) 0;
2079}
2080
2081.did-editor .list-item {
2082 display: flex;
2083 justify-content: space-between;
2084 align-items: flex-start;
2085 padding: var(--space-3);
2086 background: var(--bg-card);
2087 gap: var(--space-3);
2088}
2089
2090.item-id {
2091 font-weight: var(--font-medium);
2092 font-family: var(--font-mono);
2093 font-size: var(--text-sm);
2094}
2095
2096.item-type {
2097 font-size: var(--text-xs);
2098 padding: var(--space-1) var(--space-2);
2099 background: var(--accent);
2100 color: var(--text-inverse);
2101}
2102
2103.item-key {
2104 font-family: var(--font-mono);
2105 font-size: var(--text-xs);
2106 color: var(--text-secondary);
2107 word-break: break-all;
2108}
2109
2110.did-editor .item-handle {
2111 font-family: var(--font-mono);
2112 font-size: var(--text-sm);
2113}
2114
2115.did-editor .field {
2116 display: flex;
2117 flex-direction: column;
2118 gap: var(--space-1);
2119}
2120
2121.did-editor .field label {
2122 font-size: var(--text-sm);
2123 font-weight: var(--font-medium);
2124 color: var(--text-secondary);
2125}
2126
2127.add-form {
2128 display: grid;
2129 grid-template-columns: 1fr 2fr auto;
2130 gap: var(--space-3);
2131 align-items: end;
2132}
2133
2134.add-form.single {
2135 grid-template-columns: 1fr auto;
2136}
2137
2138.preview-section pre {
2139 background: var(--bg-card);
2140 padding: var(--space-4);
2141 overflow-x: auto;
2142 font-size: var(--text-xs);
2143 font-family: var(--font-mono);
2144}
2145
2146.did-editor .actions {
2147 display: flex;
2148 justify-content: flex-end;
2149}
2150
2151@media (max-width: 600px) {
2152 .add-form {
2153 grid-template-columns: 1fr;
2154 }
2155
2156 .did-editor .list-item {
2157 flex-direction: column;
2158 }
2159
2160 .did-editor .remove-btn {
2161 width: 100%;
2162 }
2163}
2164
2165.migration section h3 {
2166 margin: 0 0 var(--space-2) 0;
2167 font-size: var(--text-base);
2168}
2169
2170.feature-list li {
2171 padding: var(--space-2) 0;
2172 padding-left: var(--space-4);
2173 position: relative;
2174 font-size: var(--text-sm);
2175 color: var(--text-secondary);
2176}
2177
2178.feature-list li::before {
2179 content: '\2713';
2180 position: absolute;
2181 left: 0;
2182 color: var(--success-text);
2183}
2184
2185.info-section {
2186 background: var(--info-bg);
2187}
2188
2189.info-section h3 {
2190 color: var(--info-text);
2191}
2192
2193.info-section p {
2194 color: var(--info-text);
2195 font-size: var(--text-sm);
2196 margin: 0;
2197}
2198
2199.stats-grid {
2200 display: grid;
2201 grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
2202 gap: var(--space-4);
2203}
2204
2205.stat-item {
2206 background: var(--bg-card);
2207 padding: var(--space-4);
2208 text-align: center;
2209}
2210
2211.stat-value {
2212 display: block;
2213 font-size: var(--text-2xl);
2214 font-weight: var(--font-bold);
2215 color: var(--secondary);
2216}
2217
2218.stat-label {
2219 display: block;
2220 font-size: var(--text-sm);
2221 color: var(--text-secondary);
2222 margin-top: var(--space-1);
2223}
2224
2225.search-bar {
2226 display: flex;
2227 gap: var(--space-2);
2228 margin-bottom: var(--space-4);
2229}
2230
2231.search-bar input {
2232 flex: 1;
2233}
2234
2235.user-item {
2236 list-style: none;
2237}
2238
2239.user-item-btn {
2240 display: flex;
2241 align-items: flex-start;
2242 width: 100%;
2243 padding: var(--space-3);
2244 background: var(--bg-card);
2245 gap: var(--space-3);
2246 cursor: pointer;
2247 text-align: left;
2248 color: inherit;
2249 font: inherit;
2250}
2251
2252button.user-item-btn:hover {
2253 background: var(--bg-secondary);
2254 border-color: var(--secondary);
2255}
2256
2257.user-info {
2258 flex: 1;
2259 min-width: 0;
2260 display: flex;
2261 flex-direction: column;
2262 gap: var(--space-1);
2263}
2264
2265.user-handle {
2266 font-weight: var(--font-medium);
2267}
2268
2269.user-did {
2270 font-family: var(--font-mono);
2271 font-size: var(--text-xs);
2272 color: var(--text-secondary);
2273 word-break: break-all;
2274}
2275
2276.user-email {
2277 font-size: var(--text-sm);
2278 color: var(--text-secondary);
2279}
2280
2281.user-date {
2282 font-size: var(--text-xs);
2283 color: var(--text-muted);
2284}
2285
2286.user-badges {
2287 display: flex;
2288 gap: var(--space-2);
2289 flex-shrink: 0;
2290}
2291
2292.admin .badge.verified {
2293 background: var(--success-bg);
2294 color: var(--success-text);
2295}
2296
2297.admin .badge.unverified {
2298 background: var(--bg-tertiary);
2299 color: var(--text-secondary);
2300}
2301
2302.field-help {
2303 display: block;
2304 font-size: var(--text-xs);
2305 color: var(--text-secondary);
2306 margin-top: var(--space-1);
2307}
2308
2309.logo-section {
2310 display: flex;
2311 flex-direction: column;
2312 gap: var(--space-3);
2313}
2314
2315.logo-preview {
2316 display: flex;
2317 align-items: center;
2318 gap: var(--space-3);
2319}
2320
2321.logo-preview img {
2322 width: 48px;
2323 height: 48px;
2324 object-fit: contain;
2325 background: var(--bg-card);
2326 padding: var(--space-2);
2327}
2328
2329.remove-logo {
2330 padding: var(--space-2) var(--space-3);
2331 font-size: var(--text-sm);
2332 background: transparent;
2333 border: 1px solid var(--error-border);
2334 color: var(--error-text);
2335 cursor: pointer;
2336}
2337
2338button.remove-logo:hover {
2339 background: var(--error-bg);
2340}
2341
2342.colors-grid {
2343 margin-bottom: var(--space-5);
2344}
2345
2346.colors-grid h4 {
2347 margin: 0 0 var(--space-2) 0;
2348 font-size: var(--text-sm);
2349 font-weight: var(--font-medium);
2350}
2351
2352.color-fields {
2353 display: grid;
2354 grid-template-columns: repeat(2, 1fr);
2355 gap: var(--space-3);
2356 margin-top: var(--space-3);
2357}
2358
2359.color-field label {
2360 display: block;
2361 font-size: var(--text-xs);
2362 color: var(--text-secondary);
2363 margin-bottom: var(--space-1);
2364}
2365
2366.color-input-row {
2367 display: flex;
2368 gap: var(--space-2);
2369 align-items: center;
2370}
2371
2372.color-input-row input[type="color"] {
2373 width: 40px;
2374 height: 36px;
2375 padding: 2px;
2376 border: 1px solid var(--border-color);
2377 cursor: pointer;
2378 flex-shrink: 0;
2379}
2380
2381.color-input-row input[type="text"] {
2382 flex: 1;
2383 font-family: var(--font-mono);
2384 font-size: var(--text-sm);
2385}
2386
2387.load-more {
2388 display: block;
2389 width: 100%;
2390 margin-top: var(--space-4);
2391}
2392
2393.admin .definition-list {
2394 margin-bottom: var(--space-5);
2395}
2396
2397.definition-mono {
2398 font-family: var(--font-mono);
2399 font-size: var(--text-xs);
2400 word-break: break-all;
2401}
2402
2403.admin .modal {
2404 width: 90%;
2405 box-shadow: var(--shadow-lg);
2406 padding: 0;
2407}
2408
2409@media (max-width: 600px) {
2410 .user-item {
2411 flex-direction: column;
2412 }
2413
2414 .user-item-btn {
2415 flex-direction: column;
2416 gap: var(--space-2);
2417 }
2418
2419 .user-info {
2420 width: 100%;
2421 }
2422
2423 .user-badges {
2424 width: 100%;
2425 flex-wrap: wrap;
2426 }
2427
2428 .search-bar {
2429 flex-direction: column;
2430 }
2431
2432 .color-fields {
2433 grid-template-columns: 1fr;
2434 }
2435}