refactor(frontend): extract controllers, repo styles + dashboard.css

-458

frontend/src/components/dashboard/ControllersContent.svelte

··· 626 626 </section> 627 627 {/if} 628 628 </div> 629 - 630 - <style> 631 - .controllers { 632 - max-width: var(--width-lg); 633 - } 634 - 635 - .loading, 636 - .empty { 637 - color: var(--text-secondary); 638 - padding: var(--space-4); 639 - text-align: center; 640 - } 641 - 642 - .section { 643 - background: var(--bg-secondary); 644 - padding: var(--space-5); 645 - border-radius: var(--radius-lg); 646 - margin-bottom: var(--space-5); 647 - } 648 - 649 - .section-header { 650 - margin-bottom: var(--space-4); 651 - } 652 - 653 - .section-header h3 { 654 - margin: 0 0 var(--space-1) 0; 655 - font-size: var(--text-base); 656 - } 657 - 658 - .section-description { 659 - color: var(--text-secondary); 660 - margin: 0; 661 - font-size: var(--text-sm); 662 - } 663 - 664 - .constraint-notice { 665 - background: var(--bg-tertiary); 666 - border: 1px solid var(--border-color); 667 - border-radius: var(--radius-md); 668 - padding: var(--space-4); 669 - margin-top: var(--space-4); 670 - } 671 - 672 - .constraint-notice p { 673 - margin: 0; 674 - color: var(--text-secondary); 675 - font-size: var(--text-sm); 676 - } 677 - 678 - .items-list { 679 - display: flex; 680 - flex-direction: column; 681 - gap: var(--space-4); 682 - margin-bottom: var(--space-4); 683 - } 684 - 685 - .item-card { 686 - background: var(--bg-card); 687 - border: 1px solid var(--border-color); 688 - border-radius: var(--radius-lg); 689 - padding: var(--space-4); 690 - display: flex; 691 - justify-content: space-between; 692 - align-items: center; 693 - gap: var(--space-4); 694 - flex-wrap: wrap; 695 - } 696 - 697 - .item-card.inactive { 698 - opacity: 0.6; 699 - } 700 - 701 - .item-info { 702 - flex: 1; 703 - min-width: 200px; 704 - } 705 - 706 - .item-header { 707 - margin-bottom: var(--space-2); 708 - display: flex; 709 - align-items: center; 710 - gap: var(--space-2); 711 - flex-wrap: wrap; 712 - } 713 - 714 - .item-handle { 715 - font-weight: var(--font-semibold); 716 - color: var(--text-primary); 717 - } 718 - 719 - .badge { 720 - display: inline-block; 721 - padding: var(--space-1) var(--space-2); 722 - border-radius: var(--radius-md); 723 - font-size: var(--text-xs); 724 - font-weight: var(--font-medium); 725 - } 726 - 727 - .badge.scope { 728 - background: var(--accent); 729 - color: var(--text-inverse); 730 - } 731 - 732 - .badge.inactive { 733 - background: var(--error-bg); 734 - color: var(--error-text); 735 - border: 1px solid var(--error-border); 736 - } 737 - 738 - .item-details { 739 - display: flex; 740 - flex-direction: column; 741 - gap: var(--space-1); 742 - } 743 - 744 - .detail { 745 - font-size: var(--text-sm); 746 - } 747 - 748 - .detail .label { 749 - color: var(--text-secondary); 750 - margin-right: var(--space-2); 751 - } 752 - 753 - .detail .value { 754 - color: var(--text-primary); 755 - } 756 - 757 - .detail .value.did { 758 - font-family: var(--font-mono); 759 - font-size: var(--text-xs); 760 - word-break: break-all; 761 - } 762 - 763 - .item-actions { 764 - display: flex; 765 - gap: var(--space-2); 766 - } 767 - 768 - .btn-link { 769 - display: inline-block; 770 - padding: var(--space-2) var(--space-4); 771 - border: 1px solid var(--accent); 772 - border-radius: var(--radius-md); 773 - background: transparent; 774 - color: var(--accent); 775 - font-size: var(--text-sm); 776 - font-weight: var(--font-medium); 777 - text-decoration: none; 778 - } 779 - 780 - .btn-link:hover { 781 - background: var(--accent); 782 - color: var(--text-inverse); 783 - } 784 - 785 - .danger-outline { 786 - padding: var(--space-2) var(--space-4); 787 - border: 1px solid var(--error-text); 788 - border-radius: var(--radius-md); 789 - background: transparent; 790 - color: var(--error-text); 791 - font-size: var(--text-sm); 792 - cursor: pointer; 793 - } 794 - 795 - .danger-outline:hover { 796 - background: var(--error-bg); 797 - } 798 - 799 - .ghost { 800 - background: transparent; 801 - border: 1px solid var(--border-color); 802 - color: var(--text-primary); 803 - } 804 - 805 - .ghost:hover { 806 - border-color: var(--accent); 807 - } 808 - 809 - .full-width { 810 - width: 100%; 811 - } 812 - 813 - .form-card { 814 - background: var(--bg-card); 815 - border: 1px solid var(--border-color); 816 - border-radius: var(--radius-lg); 817 - padding: var(--space-5); 818 - margin-top: var(--space-4); 819 - } 820 - 821 - .form-card h4 { 822 - margin: 0 0 var(--space-4) 0; 823 - font-size: var(--text-base); 824 - } 825 - 826 - .warning-box { 827 - background: var(--warning-bg); 828 - border: 1px solid var(--warning-border); 829 - border-radius: var(--radius-md); 830 - padding: var(--space-4); 831 - margin-bottom: var(--space-5); 832 - } 833 - 834 - .warning-header { 835 - font-weight: var(--font-semibold); 836 - color: var(--warning-text); 837 - margin-bottom: var(--space-2); 838 - } 839 - 840 - .warning-text { 841 - margin: 0 0 var(--space-3) 0; 842 - color: var(--warning-text); 843 - font-size: var(--text-sm); 844 - line-height: 1.5; 845 - } 846 - 847 - .warning-bullets { 848 - margin: 0; 849 - padding-left: var(--space-5); 850 - color: var(--warning-text); 851 - font-size: var(--text-sm); 852 - line-height: 1.6; 853 - } 854 - 855 - .confirm-checkbox { 856 - display: flex; 857 - align-items: flex-start; 858 - gap: var(--space-2); 859 - cursor: pointer; 860 - padding: var(--space-3); 861 - background: var(--bg-tertiary); 862 - border: 1px solid var(--border-color); 863 - border-radius: var(--radius-md); 864 - margin-bottom: var(--space-4); 865 - } 866 - 867 - .confirm-checkbox input { 868 - width: 18px; 869 - height: 18px; 870 - flex-shrink: 0; 871 - margin-top: 2px; 872 - } 873 - 874 - .confirm-checkbox span { 875 - font-size: var(--text-sm); 876 - font-weight: var(--font-medium); 877 - color: var(--text-primary); 878 - line-height: 1.4; 879 - } 880 - 881 - .field { 882 - margin-bottom: var(--space-4); 883 - } 884 - 885 - .field label { 886 - display: block; 887 - font-size: var(--text-sm); 888 - font-weight: var(--font-medium); 889 - margin-bottom: var(--space-1); 890 - } 891 - 892 - .field input, 893 - .field select { 894 - width: 100%; 895 - } 896 - 897 - .form-actions { 898 - display: flex; 899 - gap: var(--space-3); 900 - justify-content: flex-end; 901 - } 902 - 903 - .controller-search { 904 - position: relative; 905 - } 906 - 907 - .search-wrapper { 908 - position: relative; 909 - } 910 - 911 - .typeahead-dropdown { 912 - position: absolute; 913 - top: 100%; 914 - left: 0; 915 - right: 0; 916 - z-index: 10; 917 - background: var(--bg-card); 918 - border: 1px solid var(--border-color); 919 - border-radius: var(--radius-md); 920 - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 921 - max-height: 240px; 922 - overflow-y: auto; 923 - } 924 - 925 - .typeahead-item { 926 - display: flex; 927 - align-items: center; 928 - gap: var(--space-2); 929 - width: 100%; 930 - padding: var(--space-2) var(--space-3); 931 - border: none; 932 - background: transparent; 933 - cursor: pointer; 934 - text-align: left; 935 - color: var(--text-primary); 936 - } 937 - 938 - .typeahead-item:hover { 939 - background: var(--bg-tertiary); 940 - } 941 - 942 - .typeahead-avatar { 943 - width: 28px; 944 - height: 28px; 945 - border-radius: 50%; 946 - flex-shrink: 0; 947 - } 948 - 949 - .typeahead-text { 950 - display: flex; 951 - flex-direction: column; 952 - min-width: 0; 953 - } 954 - 955 - .typeahead-name { 956 - font-size: var(--text-sm); 957 - font-weight: var(--font-medium); 958 - white-space: nowrap; 959 - overflow: hidden; 960 - text-overflow: ellipsis; 961 - } 962 - 963 - .typeahead-handle { 964 - font-size: var(--text-xs); 965 - color: var(--text-secondary); 966 - white-space: nowrap; 967 - overflow: hidden; 968 - text-overflow: ellipsis; 969 - } 970 - 971 - .resolve-status { 972 - display: block; 973 - font-size: var(--text-xs); 974 - color: var(--text-secondary); 975 - margin-top: var(--space-1); 976 - } 977 - 978 - .resolve-status.error { 979 - color: var(--error-text); 980 - } 981 - 982 - .resolved-info { 983 - display: flex; 984 - align-items: center; 985 - gap: var(--space-2); 986 - flex-wrap: wrap; 987 - margin-top: var(--space-2); 988 - padding: var(--space-2) var(--space-3); 989 - background: var(--bg-tertiary); 990 - border-radius: var(--radius-md); 991 - font-size: var(--text-xs); 992 - } 993 - 994 - .resolved-did { 995 - font-family: var(--font-mono); 996 - color: var(--text-secondary); 997 - word-break: break-all; 998 - } 999 - 1000 - .resolved-handle { 1001 - color: var(--text-primary); 1002 - font-weight: var(--font-medium); 1003 - } 1004 - 1005 - .badge.external { 1006 - background: var(--info-bg, var(--bg-tertiary)); 1007 - color: var(--info-text, var(--text-secondary)); 1008 - border: 1px solid var(--info-border, var(--border-color)); 1009 - } 1010 - 1011 - .audit-entries { 1012 - display: flex; 1013 - flex-direction: column; 1014 - gap: var(--space-3); 1015 - } 1016 - 1017 - .audit-entry { 1018 - background: var(--bg-card); 1019 - border: 1px solid var(--border-color); 1020 - border-radius: var(--radius-lg); 1021 - padding: var(--space-4); 1022 - } 1023 - 1024 - .audit-entry-header { 1025 - display: flex; 1026 - justify-content: space-between; 1027 - align-items: center; 1028 - margin-bottom: var(--space-3); 1029 - } 1030 - 1031 - .action-type { 1032 - font-weight: var(--font-medium); 1033 - padding: var(--space-1) var(--space-2); 1034 - background: var(--accent); 1035 - color: var(--text-inverse); 1036 - border-radius: var(--radius-md); 1037 - font-size: var(--text-sm); 1038 - } 1039 - 1040 - .audit-entry-date { 1041 - font-size: var(--text-sm); 1042 - color: var(--text-secondary); 1043 - } 1044 - 1045 - .audit-entry-details { 1046 - display: flex; 1047 - flex-direction: column; 1048 - gap: var(--space-2); 1049 - } 1050 - 1051 - .audit-details-value { 1052 - font-family: var(--font-mono); 1053 - font-size: var(--text-xs); 1054 - word-break: break-word; 1055 - } 1056 - 1057 - @media (max-width: 600px) { 1058 - .item-card { 1059 - flex-direction: column; 1060 - align-items: stretch; 1061 - } 1062 - 1063 - .item-actions { 1064 - width: 100%; 1065 - } 1066 - 1067 - .item-actions button, 1068 - .item-actions a { 1069 - width: 100%; 1070 - text-align: center; 1071 - } 1072 - 1073 - .audit-entry-header { 1074 - flex-direction: column; 1075 - align-items: flex-start; 1076 - gap: var(--space-2); 1077 - } 1078 - 1079 - .audit-entry-details .value.did { 1080 - overflow: hidden; 1081 - text-overflow: ellipsis; 1082 - white-space: nowrap; 1083 - max-width: 60vw; 1084 - } 1085 - } 1086 - </style>

+2 -353

frontend/src/components/dashboard/RepoContent.svelte

··· 419 419 420 420 {:else if view === 'create'} 421 421 <form class="create-form" onsubmit={handleCreate}> 422 - <div class="field"> 422 + <div> 423 423 <label for="collection">{$_('repoExplorer.collectionNsid')}</label> 424 424 <input 425 425 id="collection" ··· 430 430 required 431 431 /> 432 432 </div> 433 - <div class="field"> 433 + <div> 434 434 <label for="rkey">{$_('repoExplorer.recordKeyOptional')}</label> 435 435 <input 436 436 id="rkey" ··· 465 465 </form> 466 466 {/if} 467 467 </div> 468 - 469 - <style> 470 - .repo-explorer { 471 - max-width: var(--width-xl); 472 - } 473 - 474 - .breadcrumb { 475 - display: flex; 476 - align-items: center; 477 - gap: var(--space-2); 478 - font-size: var(--text-sm); 479 - margin-bottom: var(--space-4); 480 - padding: var(--space-3) var(--space-4); 481 - background: var(--bg-secondary); 482 - border-radius: var(--radius-md); 483 - } 484 - 485 - .breadcrumb-sep { 486 - color: var(--text-muted); 487 - } 488 - 489 - .breadcrumb-link { 490 - all: unset; 491 - color: var(--text-secondary); 492 - cursor: pointer; 493 - font-size: inherit; 494 - padding: var(--space-1) var(--space-2); 495 - border-radius: var(--radius-sm); 496 - transition: color var(--transition-normal), background var(--transition-normal); 497 - } 498 - 499 - .breadcrumb-link:hover { 500 - color: var(--text-primary); 501 - background: var(--bg-hover); 502 - } 503 - 504 - .breadcrumb-current { 505 - color: var(--text-primary); 506 - font-weight: var(--font-medium); 507 - } 508 - 509 - .message { 510 - padding: var(--space-4); 511 - border-radius: var(--radius-lg); 512 - margin-bottom: var(--space-4); 513 - } 514 - 515 - .message.error { 516 - background: var(--error-bg); 517 - border: 1px solid var(--error-border); 518 - color: var(--error-text); 519 - display: flex; 520 - flex-direction: column; 521 - gap: var(--space-1); 522 - } 523 - 524 - .error-code { 525 - font-family: var(--font-mono); 526 - font-size: var(--text-sm); 527 - } 528 - 529 - .error-message { 530 - font-size: var(--text-sm); 531 - } 532 - 533 - .message.success { 534 - background: var(--success-bg); 535 - border: 1px solid var(--success-border); 536 - color: var(--success-text); 537 - } 538 - 539 - .loading { 540 - color: var(--text-secondary); 541 - padding: var(--space-6); 542 - text-align: center; 543 - } 544 - 545 - .toolbar { 546 - display: flex; 547 - gap: var(--space-2); 548 - margin-bottom: var(--space-4); 549 - } 550 - 551 - .filter-input { 552 - flex: 1; 553 - padding: var(--space-2) var(--space-3); 554 - border: 1px solid var(--border-color); 555 - border-radius: var(--radius-md); 556 - font-size: var(--text-sm); 557 - background: var(--bg-input); 558 - color: var(--text-primary); 559 - } 560 - 561 - .filter-input:focus { 562 - outline: none; 563 - border-color: var(--accent); 564 - } 565 - 566 - 567 - .empty { 568 - text-align: center; 569 - color: var(--text-secondary); 570 - padding: var(--space-8); 571 - background: var(--bg-secondary); 572 - border-radius: var(--radius-lg); 573 - } 574 - 575 - .collections { 576 - display: flex; 577 - flex-direction: column; 578 - gap: var(--space-4); 579 - } 580 - 581 - .collection-group { 582 - background: var(--bg-secondary); 583 - border-radius: var(--radius-lg); 584 - padding: var(--space-4); 585 - } 586 - 587 - .authority { 588 - margin: 0 0 var(--space-3) 0; 589 - font-size: var(--text-sm); 590 - color: var(--text-secondary); 591 - font-weight: var(--font-medium); 592 - } 593 - 594 - .nsid-list { 595 - list-style: none; 596 - padding: 0; 597 - margin: 0; 598 - display: flex; 599 - flex-direction: column; 600 - gap: var(--space-1); 601 - } 602 - 603 - .collection-link { 604 - display: flex; 605 - justify-content: space-between; 606 - align-items: center; 607 - width: 100%; 608 - padding: var(--space-3); 609 - background: var(--bg-card); 610 - border: 1px solid var(--border-color); 611 - border-radius: var(--radius-md); 612 - cursor: pointer; 613 - text-align: left; 614 - color: var(--text-primary); 615 - transition: background var(--transition-normal), border-color var(--transition-normal); 616 - } 617 - 618 - .collection-link:hover { 619 - background: var(--bg-hover); 620 - border-color: var(--accent); 621 - } 622 - 623 - .nsid { 624 - font-weight: var(--font-medium); 625 - color: var(--accent); 626 - } 627 - 628 - .arrow { 629 - color: var(--text-muted); 630 - } 631 - 632 - .collection-link:hover .arrow { 633 - color: var(--accent); 634 - } 635 - 636 - .record-list { 637 - list-style: none; 638 - padding: 0; 639 - margin: 0; 640 - display: flex; 641 - flex-direction: column; 642 - gap: var(--space-2); 643 - } 644 - 645 - .record-item { 646 - display: block; 647 - width: 100%; 648 - padding: var(--space-4); 649 - background: var(--bg-secondary); 650 - border: 1px solid var(--border-color); 651 - border-radius: var(--radius-lg); 652 - cursor: pointer; 653 - text-align: left; 654 - color: var(--text-primary); 655 - transition: background var(--transition-normal), border-color var(--transition-normal); 656 - } 657 - 658 - .record-item:hover { 659 - background: var(--bg-hover); 660 - border-color: var(--accent); 661 - } 662 - 663 - .record-info { 664 - display: flex; 665 - justify-content: space-between; 666 - margin-bottom: var(--space-2); 667 - } 668 - 669 - .rkey { 670 - font-family: var(--font-mono); 671 - font-weight: var(--font-medium); 672 - color: var(--accent); 673 - } 674 - 675 - .cid { 676 - font-family: var(--font-mono); 677 - font-size: var(--text-xs); 678 - color: var(--text-muted); 679 - } 680 - 681 - .record-preview { 682 - margin: 0; 683 - padding: var(--space-2); 684 - background: var(--bg-card); 685 - border-radius: var(--radius-md); 686 - font-family: var(--font-mono); 687 - font-size: var(--text-xs); 688 - color: var(--text-secondary); 689 - white-space: pre-wrap; 690 - word-break: break-word; 691 - max-height: 100px; 692 - overflow: hidden; 693 - } 694 - 695 - .record-detail { 696 - display: flex; 697 - flex-direction: column; 698 - gap: var(--space-5); 699 - } 700 - 701 - .record-meta { 702 - background: var(--bg-secondary); 703 - padding: var(--space-4); 704 - border-radius: var(--radius-lg); 705 - } 706 - 707 - .record-meta dl { 708 - display: grid; 709 - grid-template-columns: auto 1fr; 710 - gap: var(--space-2) var(--space-4); 711 - margin: 0; 712 - } 713 - 714 - .record-meta dt { 715 - font-weight: var(--font-medium); 716 - color: var(--text-secondary); 717 - } 718 - 719 - .record-meta dd { 720 - margin: 0; 721 - } 722 - 723 - .mono { 724 - font-family: var(--font-mono); 725 - font-size: var(--text-xs); 726 - word-break: break-all; 727 - } 728 - 729 - .field { 730 - margin-bottom: var(--space-4); 731 - } 732 - 733 - .field label { 734 - display: block; 735 - font-size: var(--text-sm); 736 - font-weight: var(--font-medium); 737 - margin-bottom: var(--space-1); 738 - } 739 - 740 - .field input { 741 - width: 100%; 742 - } 743 - 744 - .hint { 745 - font-size: var(--text-xs); 746 - color: var(--text-muted); 747 - margin: var(--space-1) 0 0 0; 748 - } 749 - 750 - .editor-container { 751 - margin-bottom: var(--space-4); 752 - } 753 - 754 - .editor-container label { 755 - display: block; 756 - font-size: var(--text-sm); 757 - font-weight: var(--font-medium); 758 - margin-bottom: var(--space-1); 759 - } 760 - 761 - textarea { 762 - width: 100%; 763 - min-height: 300px; 764 - padding: var(--space-4); 765 - border: 1px solid var(--border-color); 766 - border-radius: var(--radius-md); 767 - font-family: var(--font-mono); 768 - font-size: var(--text-sm); 769 - background: var(--bg-input); 770 - color: var(--text-primary); 771 - resize: vertical; 772 - box-sizing: border-box; 773 - } 774 - 775 - textarea:focus { 776 - outline: none; 777 - border-color: var(--accent); 778 - } 779 - 780 - textarea.has-error { 781 - border-color: var(--error-text); 782 - } 783 - 784 - .json-error { 785 - margin: var(--space-1) 0 0 0; 786 - font-size: var(--text-xs); 787 - color: var(--error-text); 788 - } 789 - 790 - .actions { 791 - display: flex; 792 - gap: var(--space-2); 793 - } 794 - 795 - .create-form { 796 - background: var(--bg-secondary); 797 - padding: var(--space-5); 798 - border-radius: var(--radius-lg); 799 - } 800 - 801 - @media (max-width: 600px) { 802 - .toolbar { 803 - flex-direction: column; 804 - } 805 - 806 - .record-meta dl { 807 - grid-template-columns: 1fr; 808 - } 809 - 810 - .actions { 811 - flex-direction: column; 812 - } 813 - 814 - .actions button { 815 - width: 100%; 816 - } 817 - } 818 - </style>

+2545

frontend/src/styles/dashboard.css

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

Configure Feed

Configure Feed