Our Personal Data Server from scratch!
tranquil.farm
pds
rust
database
fun
oauth
atproto
1.loading-content p {
2 margin: 0;
3 color: var(--text-secondary);
4}
5
6.login-page,
7.verify-page,
8.reset-page,
9.recover-page,
10.recovery-page,
11.oauth-accounts-container,
12.oauth-2fa-container,
13.oauth-totp-container,
14.delegation-container,
15.oauth-register-container,
16.sso-register-container,
17.migration-page {
18 margin: var(--space-9) auto;
19 padding: var(--space-7);
20}
21
22.act-as-page .loading,
23.consent-container .loading,
24.oauth-accounts-container .loading,
25.delegation-container .loading {
26 display: flex;
27 align-items: center;
28 justify-content: center;
29 min-height: 200px;
30 color: var(--text-secondary);
31}
32
33.oauth-2fa-container .actions,
34.oauth-totp-container .actions,
35.delegation-container .actions {
36 display: flex;
37 gap: var(--space-4);
38 margin-top: var(--space-2);
39}
40
41.oauth-2fa-container .actions button,
42.oauth-totp-container .actions button,
43.delegation-container .actions button {
44 flex: 1;
45 padding: var(--space-3);
46 border: none;
47 font-size: var(--text-base);
48 cursor: pointer;
49}
50
51.login-page {
52 max-width: var(--width-lg);
53}
54
55.login-page .page-header {
56 margin-bottom: var(--space-6);
57 text-align: center;
58}
59
60.login-content {
61 max-width: var(--width-md);
62 margin: 0 auto;
63}
64
65.login-page .actions {
66 display: flex;
67 flex-direction: column;
68 gap: var(--space-3);
69 margin-top: var(--space-3);
70}
71
72.link-text {
73 margin-top: var(--space-6);
74 font-size: var(--text-sm);
75 color: var(--text-secondary);
76 text-align: center;
77}
78
79.link-text a {
80 color: var(--secondary);
81}
82
83.saved-accounts {
84 display: flex;
85 flex-direction: column;
86 gap: var(--space-3);
87 margin-bottom: var(--space-5);
88}
89
90.saved-accounts.grid {
91 display: grid;
92 grid-template-columns: 1fr;
93}
94
95@media (min-width: 700px) {
96 .saved-accounts.grid {
97 grid-template-columns: repeat(2, 1fr);
98 }
99}
100
101.account-item {
102 display: flex;
103 align-items: center;
104 justify-content: space-between;
105 padding: var(--space-5);
106 background: var(--bg-card);
107 cursor: pointer;
108}
109
110.account-item:hover:not(.disabled) {
111 border-color: var(--secondary);
112 box-shadow: var(--shadow-md);
113}
114
115.account-item.disabled {
116 opacity: 0.6;
117 cursor: not-allowed;
118}
119
120.account-info {
121 display: flex;
122 flex-direction: column;
123 gap: var(--space-1);
124 min-width: 0;
125}
126
127.account-handle {
128 font-weight: var(--font-medium);
129 color: var(--text-primary);
130}
131
132.account-did {
133 font-size: var(--text-xs);
134 color: var(--text-muted);
135 font-family: var(--font-mono);
136 overflow: hidden;
137 text-overflow: ellipsis;
138}
139
140.forget-btn {
141 flex-shrink: 0;
142 padding: var(--space-2) var(--space-3);
143 background: transparent;
144 border: none;
145 color: var(--text-muted);
146 cursor: pointer;
147 font-size: var(--text-xl);
148 line-height: 1;
149}
150
151button.forget-btn:hover {
152 background: var(--error-bg);
153 color: var(--error-text);
154}
155
156.verify-page {
157 max-width: var(--width-sm);
158}
159
160.handle-info {
161 font-size: var(--text-sm);
162 color: var(--text-secondary);
163 margin: 0 0 var(--space-6) 0;
164}
165
166.verify-page .info-text {
167 color: var(--text-secondary);
168 margin: var(--space-4) 0 var(--space-6) 0;
169}
170
171.field-help {
172 font-size: var(--text-xs);
173 color: var(--text-secondary);
174 margin: var(--space-1) 0 0 0;
175}
176
177.token-input {
178 font-family: var(--font-mono);
179 letter-spacing: 0.05em;
180}
181
182.verify-page .form-actions {
183 display: flex;
184 gap: var(--space-4);
185 margin-top: var(--space-4);
186}
187
188.verify-page .actions {
189 display: flex;
190 gap: var(--space-4);
191}
192
193.success-container,
194.loading-container {
195 text-align: center;
196}
197
198.success-container .actions {
199 justify-content: center;
200 margin-top: var(--space-6);
201}
202
203.bot-hint {
204 padding: var(--space-4);
205 background: var(--bg-secondary);
206}
207
208.bot-hint p {
209 margin: 0;
210}
211
212.bot-hint .manual-text {
213 font-size: var(--text-sm);
214 color: var(--text-secondary);
215 margin-top: var(--space-1);
216}
217
218.bot-hint .waiting-text {
219 font-size: var(--text-sm);
220 color: var(--text-secondary);
221 margin-top: var(--space-2);
222}
223
224.reset-page {
225 max-width: var(--width-sm);
226}
227
228.reset-page .link-text {
229 text-align: center;
230 margin-top: var(--space-6);
231 color: var(--text-secondary);
232}
233
234.reset-page .link-text a {
235 color: var(--secondary);
236}
237
238.recover-page {
239 max-width: var(--width-sm);
240}
241
242.error-message {
243 color: var(--text-secondary);
244 margin-bottom: var(--space-6);
245}
246
247.success-content {
248 text-align: center;
249}
250
251.success-icon {
252 font-size: var(--text-4xl);
253 color: var(--success-text);
254 margin-bottom: var(--space-4);
255}
256
257.success-message {
258 color: var(--text-secondary);
259 margin-bottom: var(--space-3);
260}
261
262.next-steps {
263 color: var(--text-muted);
264 font-size: var(--text-sm);
265 margin-bottom: var(--space-6);
266}
267
268.recovery-page {
269 max-width: var(--width-sm);
270}
271
272.recovery-page .info-text {
273 color: var(--text-secondary);
274 font-size: var(--text-sm);
275 margin-bottom: var(--space-6);
276}
277
278.recovery-page .link-text {
279 text-align: center;
280 margin-top: var(--space-7);
281}
282
283.recovery-page .link-text a {
284 color: var(--secondary);
285}
286
287.act-as-page .page {
288 max-width: var(--width-md);
289 margin: var(--space-9) auto;
290 padding: var(--space-7);
291}
292
293.act-as-page header {
294 margin-bottom: var(--space-6);
295}
296
297.act-as-page .message.error {
298 padding: var(--space-3);
299 background: var(--error-bg);
300 color: var(--error-text);
301 margin-bottom: var(--space-4);
302}
303
304.act-as-page .actions {
305 margin-top: var(--space-4);
306}
307
308.migration-page {
309 max-width: var(--width-lg);
310}
311
312.migration-page .page-header {
313 text-align: center;
314 margin-bottom: var(--space-8);
315}
316
317.migration-page .subtitle {
318 color: var(--text-secondary);
319 margin: 0;
320 font-size: var(--text-lg);
321}
322
323.direction-cards {
324 display: grid;
325 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
326 gap: var(--space-6);
327 margin-bottom: var(--space-8);
328}
329
330.direction-card {
331 display: flex;
332 flex-direction: column;
333 align-items: stretch;
334 background: var(--bg-secondary);
335 padding: var(--space-6);
336 text-align: left;
337 cursor: pointer;
338}
339
340.direction-card:hover:not(:disabled) {
341 border-color: var(--secondary);
342 transform: translateY(-2px);
343 box-shadow: var(--shadow-lg);
344}
345
346.direction-card:disabled {
347 opacity: 0.6;
348 cursor: not-allowed;
349}
350
351.direction-card h2 {
352 margin: 0 0 var(--space-3) 0;
353 font-size: var(--text-xl);
354 color: var(--text-primary);
355}
356
357.direction-card p {
358 color: var(--text-secondary);
359 margin: 0 0 var(--space-4) 0;
360 font-size: var(--text-sm);
361}
362
363.features {
364 margin: 0;
365 padding-left: var(--space-5);
366 color: var(--text-secondary);
367 font-size: var(--text-sm);
368}
369
370.features li {
371 margin-bottom: var(--space-2);
372}
373
374.info-section {
375 background: var(--bg-secondary);
376 padding: var(--space-6);
377}
378
379.info-section h3 {
380 margin: 0 0 var(--space-3) 0;
381 font-size: var(--text-lg);
382}
383
384.info-section h3:not(:first-child) {
385 margin-top: var(--space-6);
386}
387
388.info-section p {
389 color: var(--text-secondary);
390 line-height: var(--leading-relaxed);
391 margin: 0;
392}
393
394.info-section ul {
395 color: var(--text-secondary);
396 padding-left: var(--space-5);
397 margin: var(--space-3) 0 0 0;
398}
399
400.info-section li {
401 margin-bottom: var(--space-2);
402}
403
404.migration-page .warning-box {
405 margin-top: var(--space-6);
406 padding: var(--space-5);
407 background: var(--warning-bg);
408 font-size: var(--text-sm);
409}
410
411.migration-page .warning-box strong {
412 color: var(--warning-text);
413}
414
415.migration-page .warning-box a {
416 display: inline;
417 margin-top: var(--space-2);
418}
419
420.modal-overlay {
421 position: fixed;
422 inset: 0;
423 background: var(--overlay-bg);
424 display: flex;
425 align-items: center;
426 justify-content: center;
427 z-index: var(--z-modal);
428}
429
430.migration-page .modal {
431 background: var(--bg-primary);
432 padding: var(--space-6);
433 max-width: var(--width-sm);
434 width: 90%;
435}
436
437.migration-page .modal h2 {
438 margin: 0 0 var(--space-4) 0;
439}
440
441.migration-page .modal p {
442 color: var(--text-secondary);
443 margin: 0 0 var(--space-4) 0;
444}
445
446.resume-details {
447 background: var(--bg-secondary);
448 padding: var(--space-4);
449 margin-bottom: var(--space-4);
450}
451
452.detail-row {
453 display: flex;
454 justify-content: space-between;
455 padding: var(--space-2) 0;
456 font-size: var(--text-sm);
457}
458
459.detail-row:not(:last-child) {
460 border-bottom: 1px solid var(--border-color);
461}
462
463.detail-row .label {
464 color: var(--text-secondary);
465}
466
467.detail-row .value {
468 font-weight: var(--font-medium);
469}
470
471.note {
472 font-size: var(--text-sm);
473 font-style: italic;
474}
475
476.migration-page .modal-actions {
477 display: flex;
478 gap: var(--space-3);
479 justify-content: flex-end;
480}
481
482.oauth-error {
483 max-width: 500px;
484 margin: 0 auto;
485 text-align: center;
486 padding: var(--space-8);
487 background: var(--error-bg);
488}
489
490.oauth-error h2 {
491 margin: 0 0 var(--space-4) 0;
492 color: var(--error-text);
493}
494
495.oauth-error p {
496 color: var(--text-secondary);
497 margin: 0 0 var(--space-5) 0;
498}
499
500.register-form {
501 display: flex;
502 flex-direction: column;
503 gap: var(--space-3);
504 max-width: 500px;
505}
506
507.identity-section {
508 border: 1px solid var(--border-color);
509 padding: var(--space-4);
510 margin: 0;
511 margin-top: var(--space-5);
512}
513
514.identity-section legend {
515 font-weight: var(--font-medium);
516 font-size: var(--text-sm);
517 padding: 0 var(--space-2);
518}
519
520.passkey-step h2 {
521 margin: 0;
522}
523
524.passkey-step p {
525 color: var(--text-secondary);
526 margin: 0;
527}
528
529.no-providers {
530 text-align: center;
531 padding: var(--space-8);
532 color: var(--text-secondary);
533}
534
535.provider-list {
536 max-width: var(--width-md);
537}
538
539.provider-grid {
540 display: grid;
541 grid-template-columns: 1fr;
542 gap: var(--space-3);
543}
544
545@media (min-width: 500px) {
546 .provider-grid {
547 grid-template-columns: repeat(2, 1fr);
548 }
549}
550
551.provider-button {
552 display: flex;
553 align-items: center;
554 gap: var(--space-3);
555 padding: var(--space-4);
556 background: var(--bg-card);
557 border: 1px solid var(--border-dark);
558 cursor: pointer;
559 font-size: var(--text-base);
560 font-weight: var(--font-medium);
561 color: var(--text-primary);
562 text-align: left;
563 width: 100%;
564}
565
566.provider-button:hover:not(:disabled) {
567 background: var(--bg-secondary);
568 border-color: var(--secondary);
569}
570
571.provider-button:disabled {
572 opacity: 0.6;
573 cursor: not-allowed;
574}
575
576.provider-button .provider-name {
577 flex: 1;
578}
579
580.register-sso .form-actions {
581 margin-top: var(--space-5);
582 max-width: var(--width-md);
583}
584
585.sso-register-complete .provider-info {
586 margin-bottom: var(--space-6);
587}
588
589.sso-register-complete button[type="submit"] {
590 margin-top: var(--space-3);
591}
592
593.oauth-login .auth-methods {
594 display: grid;
595 grid-template-columns: 1fr;
596 gap: var(--space-5);
597 margin-top: var(--space-4);
598}
599
600.auth-methods {
601 display: grid;
602 grid-template-columns: 1fr;
603 gap: var(--space-5);
604 margin-top: var(--space-4);
605}
606
607.auth-methods.single-method {
608 grid-template-columns: 1fr;
609}
610
611.passkey-method,
612.password-method {
613 display: flex;
614 flex-direction: column;
615 gap: var(--space-4);
616 padding: var(--space-5);
617 background: var(--bg-secondary);
618}
619
620.passkey-method h3,
621.password-method h3 {
622 margin: 0;
623 font-size: var(--text-sm);
624 font-weight: var(--font-semibold);
625 color: var(--text-secondary);
626 text-transform: uppercase;
627 letter-spacing: 0.05em;
628}
629
630.method-divider {
631 display: flex;
632 align-items: center;
633 justify-content: center;
634 color: var(--text-muted);
635 font-size: var(--text-sm);
636}
637
638@media (max-width: 599px) {
639 .method-divider {
640 gap: var(--space-4);
641 }
642
643 .method-divider::before,
644 .method-divider::after {
645 content: '';
646 flex: 1;
647 height: 1px;
648 background: var(--border-color);
649 }
650}
651
652.remember-device {
653 display: flex;
654 align-items: center;
655 gap: var(--space-2);
656 cursor: pointer;
657 color: var(--text-secondary);
658 font-size: var(--text-sm);
659}
660
661.remember-device input {
662 width: 16px;
663 height: 16px;
664}
665
666.oauth-login .actions {
667 display: flex;
668 gap: var(--space-3);
669 margin-top: var(--space-2);
670 justify-content: flex-end;
671}
672
673.passkey-unavailable {
674 background: var(--bg-secondary);
675 color: var(--text-secondary);
676 border-color: var(--border-color);
677}
678
679.passkey-icon {
680 width: 20px;
681 height: 20px;
682}
683
684.passkey-text {
685 flex: 1;
686 text-align: left;
687}
688
689.sso-section {
690 margin-top: var(--space-6);
691}
692
693.sso-section-top {
694 margin-top: var(--space-4);
695 margin-bottom: 0;
696}
697
698.sso-section-top .sso-divider {
699 margin-top: var(--space-5);
700 margin-bottom: 0;
701}
702
703.sso-divider {
704 display: flex;
705 align-items: center;
706 gap: var(--space-4);
707 margin-bottom: var(--space-4);
708 color: var(--text-muted);
709 font-size: var(--text-sm);
710}
711
712.sso-divider::before,
713.sso-divider::after {
714 content: '';
715 flex: 1;
716 height: 1px;
717 background: var(--border-color);
718}
719
720.sso-buttons {
721 display: flex;
722 flex-wrap: wrap;
723 gap: var(--space-3);
724 justify-content: center;
725}
726
727.sso-btn {
728 display: flex;
729 align-items: center;
730 gap: var(--space-2);
731 padding: var(--space-2) var(--space-4);
732 background: var(--bg-secondary);
733 color: var(--text-primary);
734 border: 1px solid var(--border-color);
735 font-size: var(--text-sm);
736 cursor: pointer;
737}
738
739.sso-btn-prominent {
740 padding: var(--space-3) var(--space-5);
741 font-size: var(--text-base);
742 font-weight: var(--font-medium);
743}
744
745.sso-btn:hover:not(:disabled) {
746 background: var(--bg-tertiary);
747 border-color: var(--secondary);
748}
749
750.sso-btn:disabled {
751 opacity: 0.6;
752 cursor: not-allowed;
753}
754
755.consent-container {
756 max-width: var(--width-lg);
757 margin: var(--space-7) auto;
758 padding: var(--space-7);
759}
760
761.client-panel {
762 display: flex;
763 flex-direction: column;
764 gap: var(--space-5);
765}
766
767.permissions-panel {
768 min-width: 0;
769}
770
771.client-info {
772 text-align: center;
773 padding: var(--space-6);
774 background: var(--bg-secondary);
775}
776
777.client-logo {
778 width: 64px;
779 height: 64px;
780 margin-bottom: var(--space-4);
781}
782
783.client-info h1 {
784 margin: 0 0 var(--space-1) 0;
785 font-size: var(--text-xl);
786}
787
788.client-link {
789 display: inline-block;
790 margin-top: var(--space-2);
791 font-size: var(--text-sm);
792 color: var(--secondary);
793 text-decoration: none;
794}
795
796.client-link:hover {
797 text-decoration: underline;
798}
799
800.consent-container .account-info {
801 display: flex;
802 flex-direction: column;
803 gap: var(--space-1);
804 padding: var(--space-4);
805 background: var(--bg-secondary);
806 margin-bottom: var(--space-6);
807}
808
809.consent-account-label {
810 font-size: var(--text-xs);
811 color: var(--text-muted);
812 text-transform: uppercase;
813 letter-spacing: 0.05em;
814}
815
816.consent-account-did {
817 font-family: var(--font-mono);
818 font-size: var(--text-sm);
819 color: var(--text-secondary);
820 word-break: break-all;
821}
822
823.consent-account-handle {
824 font-size: var(--text-base);
825 font-weight: var(--font-medium);
826 color: var(--text-primary);
827}
828
829.delegation-badge {
830 display: inline-block;
831 padding: var(--space-1) var(--space-2);
832 background: var(--accent);
833 color: var(--text-inverse);
834 font-size: var(--text-xs);
835 font-weight: var(--font-semibold);
836 text-transform: uppercase;
837 letter-spacing: 0.05em;
838 margin-bottom: var(--space-3);
839}
840
841.delegation-info {
842 display: flex;
843 flex-direction: column;
844 gap: var(--space-2);
845}
846
847.delegation-info .info-row {
848 display: flex;
849 flex-direction: column;
850 gap: 2px;
851}
852
853.delegation-info .handle {
854 font-weight: var(--font-medium);
855 color: var(--text-primary);
856}
857
858.level-badge {
859 display: inline-block;
860 padding: 2px var(--space-2);
861 background: var(--bg-tertiary);
862 color: var(--text-primary);
863 font-size: var(--text-sm);
864 font-weight: var(--font-medium);
865}
866
867.level-badge.level-owner {
868 background: var(--success-bg);
869 color: var(--success-text);
870}
871
872.level-badge.level-admin {
873 background: var(--accent);
874 color: var(--text-inverse);
875}
876
877.level-badge.level-editor {
878 background: var(--warning-bg);
879 color: var(--warning-text);
880}
881
882.level-badge.level-viewer {
883 background: var(--bg-tertiary);
884 color: var(--text-secondary);
885}
886
887.permissions-notice {
888 margin-top: var(--space-3);
889 padding: var(--space-3);
890 background: var(--warning-bg);
891}
892
893.notice-header {
894 display: flex;
895 align-items: center;
896 gap: var(--space-2);
897 font-weight: var(--font-semibold);
898 color: var(--warning-text);
899 margin-bottom: var(--space-2);
900}
901
902.notice-header svg {
903 flex-shrink: 0;
904}
905
906.notice-text {
907 margin: 0;
908 font-size: var(--text-sm);
909 color: var(--warning-text);
910 line-height: 1.5;
911}
912
913.scopes-section {
914 margin-bottom: var(--space-6);
915}
916
917.scopes-section h2 {
918 font-size: var(--text-base);
919 margin: 0 0 var(--space-4) 0;
920 color: var(--text-secondary);
921}
922
923.scope-group {
924 margin-bottom: var(--space-4);
925}
926
927.category-title {
928 font-size: var(--text-sm);
929 font-weight: var(--font-semibold);
930 color: var(--text-primary);
931 margin: 0 0 var(--space-2) 0;
932 padding-bottom: var(--space-1);
933 border-bottom: 1px solid var(--border-color);
934}
935
936.scope-item {
937 display: flex;
938 gap: var(--space-3);
939 padding: var(--space-3);
940 background: var(--bg-card);
941 margin-bottom: var(--space-2);
942 cursor: pointer;
943 overflow: hidden;
944}
945
946.scope-item:hover:not(.required) {
947 border-color: var(--secondary);
948}
949
950.scope-item.required {
951 background: var(--bg-secondary);
952}
953
954.scope-item.read-only {
955 background: var(--bg-secondary);
956 border-style: dashed;
957}
958
959.scope-item input[type="checkbox"] {
960 flex-shrink: 0;
961 width: 18px;
962 height: 18px;
963 margin-top: 2px;
964}
965
966.scope-info {
967 flex: 1;
968 min-width: 0;
969 display: flex;
970 flex-direction: column;
971 gap: 2px;
972 overflow: hidden;
973}
974
975.scope-name {
976 font-weight: var(--font-medium);
977 color: var(--text-primary);
978 word-break: break-all;
979}
980
981.scope-description {
982 font-size: var(--text-sm);
983 color: var(--text-secondary);
984 word-break: break-all;
985}
986
987.required-badge {
988 display: inline-block;
989 font-size: 0.625rem;
990 padding: 2px var(--space-2);
991 background: var(--warning-bg);
992 color: var(--warning-text);
993 text-transform: uppercase;
994 letter-spacing: 0.05em;
995 margin-top: var(--space-1);
996 width: fit-content;
997}
998
999.remember-choice {
1000 display: flex;
1001 align-items: center;
1002 gap: var(--space-2);
1003 margin-top: var(--space-5);
1004 cursor: pointer;
1005 color: var(--text-secondary);
1006 font-size: var(--text-sm);
1007}
1008
1009.remember-choice input {
1010 width: 16px;
1011 height: 16px;
1012}
1013
1014.consent-container .actions {
1015 display: flex;
1016 gap: var(--space-4);
1017 margin-top: var(--space-6);
1018}
1019
1020.consent-container .actions button {
1021 flex: 1;
1022 padding: var(--space-3);
1023 border: none;
1024 font-size: var(--text-base);
1025 font-weight: var(--font-medium);
1026 cursor: pointer;
1027}
1028
1029.oauth-accounts-container {
1030 max-width: var(--width-sm);
1031}
1032
1033.accounts-list {
1034 display: flex;
1035 flex-direction: column;
1036 gap: var(--space-2);
1037 margin-bottom: var(--space-4);
1038}
1039
1040.oauth-accounts-container .account-item {
1041 display: flex;
1042 align-items: center;
1043 padding: var(--space-4);
1044 background: var(--bg-secondary);
1045 cursor: pointer;
1046 text-align: left;
1047 width: 100%;
1048}
1049
1050.oauth-accounts-container .account-item:hover:not(.disabled) {
1051 border-color: var(--secondary);
1052 background: var(--bg-tertiary);
1053}
1054
1055.oauth-accounts-container .account-item.disabled {
1056 opacity: 0.6;
1057 cursor: not-allowed;
1058}
1059
1060.oauth-accounts-container .account-info {
1061 display: flex;
1062 flex-direction: column;
1063 gap: var(--space-1);
1064}
1065
1066.oauth-accounts-container .account-handle {
1067 font-weight: var(--font-medium);
1068 color: var(--text-primary);
1069}
1070
1071.account-email {
1072 font-size: var(--text-sm);
1073 color: var(--text-secondary);
1074}
1075
1076.different-account {
1077 margin-top: var(--space-4);
1078 width: 100%;
1079}
1080
1081.oauth-2fa-container {
1082 max-width: var(--width-sm);
1083}
1084
1085.oauth-2fa-container input {
1086 padding: var(--space-3);
1087 border: 1px solid var(--border-color);
1088 font-size: var(--text-xl);
1089 letter-spacing: 0.5em;
1090 text-align: center;
1091 background: var(--bg-input);
1092 color: var(--text-primary);
1093}
1094
1095.oauth-totp-container {
1096 max-width: var(--width-sm);
1097}
1098
1099.oauth-totp-container input {
1100 padding: var(--space-3);
1101 border: 1px solid var(--border-color);
1102 font-size: var(--text-xl);
1103 letter-spacing: 0.25em;
1104 text-align: center;
1105 background: var(--bg-input);
1106 color: var(--text-primary);
1107 text-transform: uppercase;
1108}
1109
1110.oauth-totp-container .hint {
1111 font-size: var(--text-xs);
1112 color: var(--text-muted);
1113 margin: var(--space-1) 0 0 0;
1114 text-align: center;
1115}
1116
1117.trust-device-label {
1118 display: flex;
1119 align-items: center;
1120 gap: var(--space-2);
1121 cursor: pointer;
1122 font-size: var(--text-sm);
1123 color: var(--text-secondary);
1124 margin-top: var(--space-2);
1125}
1126
1127.trust-device-label input[type="checkbox"] {
1128 width: auto;
1129 margin: 0;
1130}
1131
1132.oauth-passkey-container {
1133 max-width: 400px;
1134 margin: 4rem auto;
1135 padding: 2rem;
1136 text-align: center;
1137}
1138
1139.oauth-passkey-container h1 {
1140 margin: 0 0 1.5rem 0;
1141}
1142
1143.oauth-passkey-container .error {
1144 padding: 0.75rem;
1145 background: var(--error-bg);
1146 color: var(--error-text);
1147 margin-bottom: 1.5rem;
1148 text-align: left;
1149}
1150
1151.passkey-status {
1152 padding: 2rem;
1153 background: var(--bg-secondary);
1154 margin-bottom: 1.5rem;
1155}
1156
1157.oauth-passkey-container .loading-indicator {
1158 display: flex;
1159 flex-direction: column;
1160 align-items: center;
1161 gap: 1rem;
1162}
1163
1164.oauth-passkey-container .loading-indicator p {
1165 margin: 0;
1166 color: var(--text-secondary);
1167}
1168
1169.oauth-passkey-container .actions {
1170 display: flex;
1171 justify-content: center;
1172 margin-bottom: 1.5rem;
1173}
1174
1175.delegation-container {
1176 max-width: var(--width-md);
1177}
1178
1179.delegation-container .page-header {
1180 margin-bottom: var(--space-6);
1181}
1182
1183.delegation-container .subtitle {
1184 color: var(--text-secondary);
1185 margin: 0;
1186 line-height: 1.6;
1187}
1188
1189.oauth-error-page h1 {
1190 margin: 0 0 var(--space-6) 0;
1191 color: var(--error-text);
1192}
1193
1194.error-box {
1195 padding: var(--space-6);
1196 background: var(--error-bg);
1197 margin-bottom: var(--space-6);
1198}
1199
1200.error-code {
1201 font-family: var(--font-mono);
1202 font-size: var(--text-base);
1203 color: var(--error-text);
1204 margin-bottom: var(--space-2);
1205}
1206
1207.error-description {
1208 color: var(--text-secondary);
1209 font-size: var(--text-sm);
1210}
1211
1212.oauth-error-page .actions {
1213 display: flex;
1214 gap: var(--space-3);
1215 justify-content: center;
1216}
1217
1218.oauth-register-container .loading,
1219.oauth-register-container .creating {
1220 display: flex;
1221 flex-direction: column;
1222 align-items: center;
1223 gap: var(--space-4);
1224 padding: var(--space-8);
1225}
1226
1227.oauth-register-container .loading p,
1228.oauth-register-container .creating p {
1229 color: var(--text-secondary);
1230}
1231
1232.oauth-register-container .page-header {
1233 margin-bottom: var(--space-6);
1234}
1235
1236.oauth-register-container .page-header h1 {
1237 margin: 0 0 var(--space-2) 0;
1238}
1239
1240.oauth-register-container form {
1241 display: flex;
1242 flex-direction: column;
1243 gap: var(--space-5);
1244}
1245
1246.oauth-register-container .actions {
1247 display: flex;
1248 gap: var(--space-4);
1249 margin-top: var(--space-2);
1250}
1251
1252.oauth-register-container fieldset {
1253 border: 1px solid var(--border-color);
1254 padding: var(--space-4);
1255}
1256
1257.oauth-register-container legend {
1258 padding: 0 var(--space-2);
1259 font-weight: var(--font-medium);
1260}
1261
1262.sso-register-container .loading {
1263 padding: var(--space-8);
1264}
1265
1266.sso-register-container .page-header {
1267 margin-bottom: var(--space-6);
1268}
1269
1270.sso-register-container .page-header h1 {
1271 margin: 0 0 var(--space-3) 0;
1272}
1273
1274.sso-register-container .form-section {
1275 min-width: 0;
1276}
1277
1278.sso-register-container form {
1279 display: flex;
1280 flex-direction: column;
1281 gap: var(--space-5);
1282}
1283
1284.sso-register-container .provider-info {
1285 margin-bottom: var(--space-6);
1286}
1287
1288.sso-register-container button[type="submit"] {
1289 margin-top: var(--space-3);
1290}
1291
1292.color-pair input[type="color"] {
1293 width: 40px;
1294 height: 36px;
1295 padding: 2px;
1296 cursor: pointer;
1297 flex-shrink: 0;
1298}
1299
1300.color-pair input[type="text"] {
1301 flex: 1;
1302}
1303
1304.key-choice-step {
1305 display: flex;
1306 flex-direction: column;
1307 gap: var(--space-4);
1308}
1309
1310.key-choice-options {
1311 display: flex;
1312 flex-direction: column;
1313 gap: var(--space-3);
1314}
1315
1316.key-choice-btn {
1317 display: flex;
1318 flex-direction: column;
1319 align-items: flex-start;
1320 gap: var(--space-2);
1321 padding: var(--space-5);
1322 background: var(--bg-card);
1323 text-align: left;
1324 cursor: pointer;
1325}
1326
1327.key-choice-btn:hover:not(:disabled) {
1328 border-color: var(--secondary);
1329}
1330
1331.key-choice-btn:disabled {
1332 opacity: 0.6;
1333 cursor: not-allowed;
1334}
1335
1336.key-choice-title {
1337 font-weight: var(--font-semibold);
1338 color: var(--text-primary);
1339}
1340
1341.key-choice-desc {
1342 font-size: var(--text-sm);
1343 color: var(--text-secondary);
1344}
1345
1346.key-choice-step .loading {
1347 text-align: center;
1348 color: var(--text-secondary);
1349}
1350
1351.did-doc-step {
1352 display: flex;
1353 flex-direction: column;
1354 gap: var(--space-4);
1355}
1356
1357.did-doc-step .warning-box {
1358 padding: var(--space-5);
1359 background: var(--warning-bg);
1360 font-size: var(--text-sm);
1361}
1362
1363.did-doc-step .warning-box strong {
1364 display: block;
1365 margin-bottom: var(--space-3);
1366 color: var(--warning-text);
1367}
1368
1369.did-doc-step .warning-box p {
1370 margin: 0;
1371 color: var(--warning-text);
1372}
1373
1374.did-url {
1375 display: block;
1376 margin-top: var(--space-3);
1377 padding: var(--space-3);
1378 background: var(--bg-input);
1379 font-size: var(--text-sm);
1380 word-break: break-all;
1381}
1382
1383.did-doc-display {
1384 background: var(--bg-card);
1385 overflow: hidden;
1386}
1387
1388.did-doc-code {
1389 margin: 0;
1390 padding: var(--space-4);
1391 background: var(--bg-input);
1392 font-size: var(--text-xs);
1393 overflow-x: auto;
1394 white-space: pre;
1395 max-height: 300px;
1396 overflow-y: auto;
1397}
1398
1399.did-doc-step .copy-btn {
1400 width: 100%;
1401 margin: 0;
1402 padding: var(--space-3) var(--space-5);
1403 font-size: var(--text-sm);
1404}
1405
1406.verification-step {
1407 display: flex;
1408 flex-direction: column;
1409 gap: var(--space-4);
1410}
1411
1412.verification-step .info-text {
1413 color: var(--text-secondary);
1414 margin: 0;
1415}
1416
1417.verification-step .info-text.waiting {
1418 font-size: var(--text-sm);
1419}
1420
1421.verification-step .info-text code {
1422 font-family: var(--font-mono, monospace);
1423 background: var(--bg-secondary);
1424 padding: 0.1em 0.3em;
1425}
1426
1427.code-input {
1428 font-family: var(--font-mono, monospace);
1429 font-size: var(--text-base);
1430 letter-spacing: 0.05em;
1431}
1432
1433.verification-step .hint {
1434 display: block;
1435 color: var(--text-secondary);
1436 font-size: var(--text-sm);
1437 margin-top: var(--space-1);
1438}
1439
1440@media (min-width: 600px) {
1441 .login-page .actions {
1442 flex-direction: row;
1443 }
1444
1445 .login-page .actions button {
1446 flex: 1;
1447 }
1448
1449 .oauth-login .auth-methods {
1450 grid-template-columns: 1fr auto 1fr;
1451 align-items: start;
1452 }
1453
1454 .auth-methods {
1455 grid-template-columns: 1fr auto 1fr;
1456 align-items: start;
1457 }
1458
1459 .auth-methods.single-method {
1460 grid-template-columns: 1fr;
1461 max-width: 400px;
1462 margin: var(--space-4) auto 0;
1463 }
1464
1465 .method-divider {
1466 flex-direction: column;
1467 padding: 0 var(--space-3);
1468 }
1469
1470 .method-divider::before,
1471 .method-divider::after {
1472 content: '';
1473 width: 1px;
1474 height: var(--space-6);
1475 background: var(--border-color);
1476 }
1477
1478 .method-divider span {
1479 writing-mode: vertical-rl;
1480 text-orientation: mixed;
1481 transform: rotate(180deg);
1482 padding: var(--space-2) 0;
1483 }
1484}
1485
1486@media (min-width: 800px) {
1487 .client-info {
1488 text-align: left;
1489 }
1490
1491 .consent-container .actions {
1492 max-width: 400px;
1493 margin-left: auto;
1494 }
1495}