@arcblock/did-connect-service 4.1.12 → 4.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (127) hide show
  1. package/dist/_generated/asset-bytes.js +1 -1
  2. package/dist/_generated/asset-manifest.js +4 -4
  3. package/dist/_generated/login-bundle-string.d.ts +1 -1
  4. package/dist/_generated/login-bundle-string.d.ts.map +1 -1
  5. package/dist/_generated/login-bundle-string.js +1 -1
  6. package/dist/_generated/login-bundle-string.js.map +1 -1
  7. package/dist/access/change-role.d.ts +48 -0
  8. package/dist/access/change-role.d.ts.map +1 -0
  9. package/dist/access/change-role.js +52 -0
  10. package/dist/access/change-role.js.map +1 -0
  11. package/dist/assets/{admin-core.cbbdbe6d.js → admin-core.a63bbc69.js} +16 -17
  12. package/dist/assets/{admin-extra.35b91f98.js → admin-extra.5b309e5e.js} +8 -4
  13. package/dist/assets/{admin.c26bb17a.css → admin.dfeedbe4.css} +10 -0
  14. package/dist/assets/login.76c483c2.js +720 -0
  15. package/dist/blocklet-service.d.ts.map +1 -1
  16. package/dist/blocklet-service.js +5 -1
  17. package/dist/blocklet-service.js.map +1 -1
  18. package/dist/handler-errors.d.ts +118 -0
  19. package/dist/handler-errors.d.ts.map +1 -0
  20. package/dist/handler-errors.js +38 -0
  21. package/dist/handler-errors.js.map +1 -0
  22. package/dist/handlers/access-key-connect-handler.d.ts +3 -0
  23. package/dist/handlers/access-key-connect-handler.d.ts.map +1 -1
  24. package/dist/handlers/access-key-connect-handler.js +7 -1
  25. package/dist/handlers/access-key-connect-handler.js.map +1 -1
  26. package/dist/handlers/admin-instance-handler.d.ts.map +1 -1
  27. package/dist/handlers/admin-instance-handler.js +2 -1
  28. package/dist/handlers/admin-instance-handler.js.map +1 -1
  29. package/dist/handlers/auth-handler.d.ts.map +1 -1
  30. package/dist/handlers/auth-handler.js +33 -9
  31. package/dist/handlers/auth-handler.js.map +1 -1
  32. package/dist/handlers/branding-handler.d.ts.map +1 -1
  33. package/dist/handlers/branding-handler.js +12 -9
  34. package/dist/handlers/branding-handler.js.map +1 -1
  35. package/dist/handlers/did-connect-handler.d.ts.map +1 -1
  36. package/dist/handlers/did-connect-handler.js +6 -5
  37. package/dist/handlers/did-connect-handler.js.map +1 -1
  38. package/dist/handlers/email-login-handler.d.ts +1 -1
  39. package/dist/handlers/email-login-handler.d.ts.map +1 -1
  40. package/dist/handlers/email-login-handler.js +63 -12
  41. package/dist/handlers/email-login-handler.js.map +1 -1
  42. package/dist/handlers/federation-admin-handler.d.ts +2 -0
  43. package/dist/handlers/federation-admin-handler.d.ts.map +1 -1
  44. package/dist/handlers/federation-admin-handler.js +105 -51
  45. package/dist/handlers/federation-admin-handler.js.map +1 -1
  46. package/dist/handlers/oauth-handler.d.ts.map +1 -1
  47. package/dist/handlers/oauth-handler.js +23 -12
  48. package/dist/handlers/oauth-handler.js.map +1 -1
  49. package/dist/handlers/passkey-handler.d.ts.map +1 -1
  50. package/dist/handlers/passkey-handler.js +5 -4
  51. package/dist/handlers/passkey-handler.js.map +1 -1
  52. package/dist/handlers/team-handler.d.ts.map +1 -1
  53. package/dist/handlers/team-handler.js +19 -19
  54. package/dist/handlers/team-handler.js.map +1 -1
  55. package/dist/identity/refresh-tokens.d.ts +21 -0
  56. package/dist/identity/refresh-tokens.d.ts.map +1 -0
  57. package/dist/identity/refresh-tokens.js +45 -0
  58. package/dist/identity/refresh-tokens.js.map +1 -0
  59. package/dist/identity/session-context.d.ts +12 -0
  60. package/dist/identity/session-context.d.ts.map +1 -1
  61. package/dist/identity/session-context.js +12 -0
  62. package/dist/identity/session-context.js.map +1 -1
  63. package/dist/identity/session-tokens.d.ts +15 -0
  64. package/dist/identity/session-tokens.d.ts.map +1 -0
  65. package/dist/identity/session-tokens.js +15 -0
  66. package/dist/identity/session-tokens.js.map +1 -0
  67. package/dist/locale.d.ts +1 -1
  68. package/dist/locale.d.ts.map +1 -1
  69. package/dist/og/templates.d.ts.map +1 -1
  70. package/dist/og/templates.js +33 -4
  71. package/dist/og/templates.js.map +1 -1
  72. package/dist/pages/admin/i18n.d.ts.map +1 -1
  73. package/dist/pages/admin/i18n.js +33 -9
  74. package/dist/pages/admin/i18n.js.map +1 -1
  75. package/dist/pages/admin/scripts/api-client.d.ts +1 -1
  76. package/dist/pages/admin/scripts/api-client.d.ts.map +1 -1
  77. package/dist/pages/admin/scripts/api-client.js +4 -4
  78. package/dist/pages/admin/scripts/utils.d.ts +1 -1
  79. package/dist/pages/admin/scripts/utils.d.ts.map +1 -1
  80. package/dist/pages/admin/scripts/utils.js +7 -8
  81. package/dist/pages/admin/scripts/utils.js.map +1 -1
  82. package/dist/pages/admin/styles.d.ts +1 -1
  83. package/dist/pages/admin/styles.d.ts.map +1 -1
  84. package/dist/pages/admin/styles.js +10 -0
  85. package/dist/pages/admin/styles.js.map +1 -1
  86. package/dist/pages/admin/tab-access-keys.d.ts +1 -1
  87. package/dist/pages/admin/tab-access-keys.d.ts.map +1 -1
  88. package/dist/pages/admin/tab-access-keys.js +4 -4
  89. package/dist/pages/admin/tab-invitations.d.ts +1 -1
  90. package/dist/pages/admin/tab-invitations.d.ts.map +1 -1
  91. package/dist/pages/admin/tab-invitations.js +2 -2
  92. package/dist/pages/admin/tab-members.d.ts +1 -1
  93. package/dist/pages/admin/tab-members.d.ts.map +1 -1
  94. package/dist/pages/admin/tab-members.js +7 -3
  95. package/dist/pages/admin/tab-members.js.map +1 -1
  96. package/dist/pages/admin/tab-profile-accounts.js +1 -1
  97. package/dist/pages/admin-instances-page.d.ts +1 -1
  98. package/dist/pages/admin-instances-page.d.ts.map +1 -1
  99. package/dist/pages/admin-instances-page.js +195 -65
  100. package/dist/pages/admin-instances-page.js.map +1 -1
  101. package/dist/pages/gen-access-key-page.d.ts +1 -1
  102. package/dist/pages/gen-access-key-page.d.ts.map +1 -1
  103. package/dist/pages/gen-access-key-page.js +163 -35
  104. package/dist/pages/gen-access-key-page.js.map +1 -1
  105. package/dist/pages/homepage.d.ts.map +1 -1
  106. package/dist/pages/homepage.js +0 -4
  107. package/dist/pages/homepage.js.map +1 -1
  108. package/dist/pages/invite-page.d.ts +1 -1
  109. package/dist/pages/invite-page.d.ts.map +1 -1
  110. package/dist/pages/invite-page.js +91 -21
  111. package/dist/pages/invite-page.js.map +1 -1
  112. package/dist/pages/oauth-callback-page.d.ts.map +1 -1
  113. package/dist/pages/oauth-callback-page.js +7 -3
  114. package/dist/pages/oauth-callback-page.js.map +1 -1
  115. package/dist/store/d1-store.d.ts +55 -1
  116. package/dist/store/d1-store.d.ts.map +1 -1
  117. package/dist/store/d1-store.js +162 -9
  118. package/dist/store/d1-store.js.map +1 -1
  119. package/migrations/0011_refresh_tokens.sql +23 -0
  120. package/package.json +7 -7
  121. package/dist/assets/admin-core.a13c2729.js +0 -1461
  122. package/dist/assets/admin-core.c0b5af61.js +0 -1393
  123. package/dist/assets/admin-core.e83fd379.js +0 -1397
  124. package/dist/assets/admin-extra.7ca9c16b.js +0 -2529
  125. package/dist/assets/admin-extra.841b2bbe.js +0 -2530
  126. package/dist/assets/admin-extra.afcb3651.js +0 -2528
  127. package/dist/assets/login.d3f05790.js +0 -720
package/dist/pages/admin/styles.d.ts CHANGED
@@ -5,5 +5,5 @@
5
5
  * Includes shared component styles formerly from shared-styles.ts
6
6
  * (body, h1, .input, .btn, .btn-secondary, .btn-danger, .badge variants).
7
7
  */
8
- export declare const ADMIN_STYLES = "\n .hidden { display: none !important; }\n\n /* \u2500\u2500\u2500 Shared component styles (extracted from shared-styles.ts) \u2500\u2500\u2500\u2500\u2500 */\n h1 {\n font-size: 24px;\n font-weight: 600;\n margin-bottom: 8px;\n color: var(--text-white);\n letter-spacing: -0.01em;\n line-height: 1.25;\n }\n .input {\n width: 100%;\n height: 40px;\n padding: 0 14px;\n font-size: 14px;\n color: var(--text);\n background: var(--bg-input);\n border: 1px solid var(--border-strong);\n border-radius: var(--radius-sm);\n outline: none;\n margin-bottom: 0;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n }\n textarea.input { height: auto; padding: 10px 14px; }\n .input:focus { border-color: var(--blue); box-shadow: var(--shadow-focus); }\n .input::placeholder { color: var(--text-placeholder); }\n .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n width: 100%;\n height: 36px;\n padding: 0 16px;\n font-size: 14px;\n font-weight: 500;\n color: #fff;\n background: var(--blue);\n border: none;\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: background-color 0.15s ease;\n line-height: 1;\n }\n .btn:hover { background: var(--blue-hover); }\n .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n .btn:focus-visible { box-shadow: var(--shadow-focus); }\n .btn svg { width: 18px; height: 18px; }\n .btn-secondary {\n background: transparent;\n border: 1px solid var(--border-strong);\n color: var(--text);\n }\n .btn-secondary:hover { background: var(--bg-hover); border-color: rgba(255,255,255,0.20); }\n .btn-danger { background: var(--red); }\n .btn-danger:hover { background: #c22a2a; }\n .badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n border-radius: var(--radius-full);\n font-size: 11px;\n font-weight: 500;\n line-height: 1.45;\n white-space: nowrap;\n }\n .badge-owner { background: var(--blue-light); color: var(--blue-muted); }\n .badge-admin { background: var(--info-light); color: var(--info-text); }\n .badge-member { background: var(--green-light); color: var(--green-text); }\n .badge-guest { background: var(--yellow-light); color: var(--yellow-text); }\n .badge-verified { background: var(--green-light); color: var(--green-text); }\n .badge-unverified { background: var(--yellow-light); color: var(--yellow-text); }\n\n /* \u2500\u2500\u2500 Admin layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n body {\n display: block;\n min-height: 100vh;\n }\n\n /* \u2500\u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .admin-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 24px;\n height: 56px;\n border-bottom: 1px solid var(--border);\n background: var(--bg-surface);\n }\n .admin-header-left {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n .admin-header-left a {\n font-size: 13px;\n transition: color 0.15s ease;\n }\n .admin-header-left .app-name-link {\n color: var(--text);\n }\n .admin-header-left .app-name-link:hover {\n color: var(--text);\n text-decoration: none;\n }\n .admin-header h1 {\n font-size: 15px;\n font-weight: 600;\n margin: 0;\n letter-spacing: -0.006em;\n }\n .admin-header-right {\n position: relative;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n /* \u2500\u2500\u2500 Toolbar buttons (ghost style) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .toolbar-wrapper {\n position: relative;\n }\n .toolbar-btn {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: none;\n border-radius: var(--radius-sm);\n color: var(--text-tertiary);\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease;\n -webkit-tap-highlight-color: transparent;\n }\n .toolbar-btn:hover { background: var(--bg-hover); color: var(--text); }\n .toolbar-btn:active { background: var(--bg-active); }\n .toolbar-btn svg { width: 16px; height: 16px; }\n\n /* \u2500\u2500\u2500 Popover (language picker) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .popover {\n position: absolute;\n right: 0;\n top: calc(100% + 6px);\n min-width: 160px;\n background: var(--bg-card);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-lg);\n z-index: 1000;\n overflow: hidden;\n opacity: 0;\n transform: translateY(-4px) scale(0.96);\n pointer-events: none;\n transform-origin: top right;\n transition: opacity 0.15s ease, transform 0.15s ease;\n }\n .popover.open {\n opacity: 1;\n transform: translateY(0) scale(1);\n pointer-events: auto;\n }\n .popover-header {\n padding: 8px 14px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--text-tertiary);\n border-bottom: 1px solid var(--border-subtle);\n }\n .popover-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n font-size: 13px;\n color: var(--text);\n cursor: pointer;\n transition: background 0.12s;\n -webkit-tap-highlight-color: transparent;\n }\n .popover-item:hover { background: var(--bg-hover); }\n .popover-item:active { background: var(--bg-active); }\n .popover-item.selected { color: var(--blue-muted); font-weight: 500; }\n .popover-item .check-icon { width: 14px; display: flex; align-items: center; flex-shrink: 0; }\n .popover-item .check-icon svg { width: 14px; height: 14px; }\n\n /* \u2500\u2500\u2500 Mobile: larger touch targets, full-width popover \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .admin-header { padding: 0 12px; }\n .admin-header-right { gap: 4px; }\n .toolbar-btn { width: 40px; height: 40px; }\n .popover { right: -8px; min-width: 150px; }\n .popover-item { padding: 12px 14px; font-size: 14px; }\n .user-menu-arrow { display: none; }\n .user-dropdown { right: -12px; width: 220px; }\n .dropdown-item { padding: 12px 16px; }\n }\n\n /* \u2500\u2500\u2500 User menu trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .user-menu-trigger {\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n }\n .user-menu-arrow {\n font-size: 12px;\n color: var(--text-tertiary);\n line-height: 1;\n }\n\n /* \u2500\u2500\u2500 User dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .user-dropdown {\n position: absolute;\n right: 0;\n top: calc(100% + 8px);\n width: 240px;\n max-width: calc(100vw - 32px);\n background: var(--bg-card);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-lg);\n z-index: 1000;\n overflow: hidden;\n }\n .dropdown-user {\n padding: 12px 16px;\n display: flex;\n align-items: center;\n gap: 8px;\n border-bottom: 1px solid var(--border-subtle);\n }\n .dropdown-user-name {\n font-weight: 600;\n font-size: 15px;\n color: var(--text-white);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .dropdown-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n color: var(--text);\n font-size: 14px;\n cursor: pointer;\n transition: background 0.15s;\n text-decoration: none;\n }\n .dropdown-item:hover { background: var(--bg-hover); }\n .dropdown-item.danger { color: var(--red-text); }\n .dropdown-item.danger:hover { background: var(--red-light); }\n .dropdown-divider {\n height: 1px;\n background: var(--border-subtle);\n margin: 4px 0;\n }\n .dropdown-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-secondary); }\n .dropdown-item.danger svg { color: var(--red-text); }\n\n /* \u2500\u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .tabs {\n display: flex;\n gap: 0;\n border-bottom: 1px solid var(--border);\n padding: 0 24px;\n background: var(--bg-surface);\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n }\n .tabs::-webkit-scrollbar { display: none; }\n [data-tab] {\n position: relative;\n padding: 10px 16px;\n font-size: 13px;\n font-weight: 500;\n color: var(--text-tertiary);\n cursor: pointer;\n border: none;\n background: none;\n border-bottom: 2px solid transparent;\n transition: color 0.15s ease, border-color 0.15s ease;\n }\n [data-tab]:hover { color: var(--text-secondary); }\n .tab-active {\n color: var(--text-white) !important;\n border-bottom-color: var(--text-white) !important;\n }\n .tab-panel {\n padding: 32px 40px;\n max-width: 1120px;\n margin: 0 auto;\n }\n\n /* \u2500\u2500\u2500 Section titles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .section-title {\n font-size: 20px;\n font-weight: 600;\n color: var(--text-white);\n letter-spacing: -0.02em;\n line-height: 1.25;\n margin-bottom: 4px;\n }\n .section-desc {\n font-size: 14px;\n color: var(--text-tertiary);\n margin-bottom: 32px;\n padding-bottom: 24px;\n border-bottom: 1px solid var(--border-subtle);\n line-height: 1.5;\n }\n\n /* \u2500\u2500\u2500 Profile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .profile-header {\n padding: 16px 20px;\n display: flex;\n align-items: center;\n gap: 14px;\n }\n .avatar-lg {\n width: 48px;\n height: 48px;\n font-size: 18px;\n }\n .profile-header-body {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .profile-header-name {\n font-weight: 600;\n font-size: 15px;\n color: var(--text-white);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .profile-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n border-top: 1px solid var(--border);\n }\n .profile-cell {\n padding: 12px 20px;\n }\n .profile-cell-label {\n display: block;\n font-size: 11px;\n font-weight: 500;\n color: var(--text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 4px;\n }\n .profile-cell-value {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: var(--text);\n min-height: 24px;\n }\n .profile-cell-editable {\n margin: -2px -8px;\n }\n @media (max-width: 560px) {\n .profile-grid { grid-template-columns: 1fr; }\n }\n .profile-editable {\n flex: 1;\n min-width: 0;\n height: 30px;\n padding: 0 8px;\n font-size: 13px;\n color: var(--text);\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--radius-sm);\n outline: none;\n transition: border-color 0.15s, background 0.15s;\n }\n .profile-editable:hover {\n border-color: var(--border-strong);\n background: var(--bg-input);\n }\n .profile-editable:focus {\n border-color: var(--blue);\n background: var(--bg-input);\n box-shadow: var(--shadow-focus);\n }\n .btn-text {\n background: none;\n border: none;\n color: var(--blue);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n padding: 4px 8px;\n border-radius: var(--radius-sm);\n white-space: nowrap;\n flex-shrink: 0;\n }\n .btn-text:hover { background: var(--blue-light); }\n .btn-text:disabled { opacity: 0.5; cursor: default; }\n .avatar {\n width: 48px;\n height: 48px;\n border-radius: var(--radius-full);\n background: var(--blue-light);\n color: var(--blue-muted);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n font-weight: 600;\n flex-shrink: 0;\n overflow: hidden;\n position: relative;\n }\n .avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n .avatar-fallback {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .avatar-sm {\n width: 32px;\n height: 32px;\n font-size: 12px;\n }\n .avatar-editable { cursor: pointer; }\n .avatar-overlay {\n position: absolute;\n inset: 0;\n background: rgba(0,0,0,0.5);\n display: none;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 12px;\n border-radius: inherit;\n }\n .avatar-editable:hover .avatar-overlay { display: flex; }\n /* <did-address> Web Component theme bridge \u2014 CSS custom properties penetrate Shadow DOM */\n did-address {\n --did-text-color: var(--text-secondary);\n --did-copy-success-color: var(--green);\n font-size: 11px;\n }\n did-address:hover {\n --did-text-color: var(--text-white);\n }\n .profile-meta {\n margin: 16px 0;\n font-size: 13px;\n }\n\n /* \u2500\u2500\u2500 Settings card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .settings-card {\n background: var(--bg-card);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n margin-bottom: 24px;\n }\n .settings-card-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--border-subtle);\n gap: 12px;\n }\n details.settings-card > summary.settings-card-header {\n list-style: none;\n }\n details.settings-card > summary.settings-card-header::before {\n content: \"\\25B6\";\n font-size: 10px;\n transition: transform 0.2s;\n margin-right: 4px;\n }\n details[open].settings-card > summary.settings-card-header::before {\n transform: rotate(90deg);\n }\n details.settings-card > summary.settings-card-header::-webkit-details-marker {\n display: none;\n }\n\n /* Icon action buttons for access/policy tables */\n .ap-actions {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n white-space: nowrap;\n }\n .ap-icon-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n background: var(--bg-card);\n color: var(--text-secondary);\n cursor: pointer;\n transition: background 0.15s, color 0.15s, border-color 0.15s;\n flex-shrink: 0;\n }\n .ap-icon-btn:hover {\n background: var(--bg-hover);\n color: var(--text-white);\n border-color: var(--border-strong);\n }\n .ap-icon-btn-danger:hover {\n background: var(--red-light);\n color: var(--red-text);\n border-color: var(--red-text);\n }\n\n .ap-lock-name {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: var(--fg);\n }\n .ap-lock-name svg {\n color: var(--fg-muted);\n flex-shrink: 0;\n }\n\n tr.ap-separator td {\n padding: 0;\n border-bottom: 2px solid var(--border);\n }\n\n .ap-switch {\n position: relative;\n display: inline-block;\n width: 36px;\n height: 20px;\n cursor: pointer;\n }\n .ap-switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n .ap-switch-slider {\n position: absolute;\n inset: 0;\n background: var(--bg-tertiary, #ccc);\n border-radius: 20px;\n transition: background 0.2s;\n }\n .ap-switch-slider::before {\n content: \"\";\n position: absolute;\n left: 2px;\n top: 2px;\n width: 16px;\n height: 16px;\n background: #fff;\n border-radius: 50%;\n transition: transform 0.2s;\n }\n .ap-switch input:checked + .ap-switch-slider {\n background: var(--color-primary, #2563eb);\n }\n .ap-switch input:checked + .ap-switch-slider::before {\n transform: translateX(16px);\n }\n\n .settings-card-header-desc {\n font-size: 12px;\n color: var(--text-tertiary);\n font-weight: 400;\n flex: 1;\n text-align: right;\n }\n .settings-card-desc {\n font-size: 12px;\n color: var(--text-tertiary);\n padding: 8px 20px 0;\n margin: 0;\n line-height: 1.5;\n }\n .settings-card-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--text-white);\n }\n .settings-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 20px;\n border-bottom: 1px solid var(--border-subtle);\n }\n .settings-row:last-child { border-bottom: none; }\n .settings-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--text);\n }\n .settings-value {\n font-size: 13px;\n color: var(--text-secondary);\n }\n\n /* \u2500\u2500\u2500 Connected Accounts chips \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .ca-section {\n padding: 12px 20px;\n }\n .ca-section + .ca-section {\n padding-top: 0;\n }\n .ca-section-label {\n font-size: 11px;\n font-weight: 500;\n color: var(--text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 8px;\n }\n .ca-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n .ca-chip {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 12px;\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n background: var(--bg-elevated);\n font-size: 13px;\n color: var(--text);\n transition: border-color 0.15s, background 0.15s;\n position: relative;\n max-width: 260px;\n }\n .ca-chip-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n flex-shrink: 0;\n }\n .ca-chip-icon svg { width: 18px; height: 18px; }\n .ca-chip-body {\n display: flex;\n flex-direction: column;\n min-width: 0;\n }\n .ca-chip-name {\n font-weight: 500;\n font-size: 13px;\n line-height: 1.3;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .ca-chip-detail {\n font-size: 11px;\n color: var(--text-secondary);\n line-height: 1.3;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .ca-chip-badge {\n display: inline-flex;\n font-size: 10px;\n font-weight: 500;\n padding: 1px 6px;\n border-radius: var(--radius-full);\n background: var(--blue-light);\n color: var(--blue-muted);\n white-space: nowrap;\n vertical-align: middle;\n margin-left: 4px;\n }\n .ca-chip-remove {\n display: none;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border: none;\n background: transparent;\n color: var(--text-tertiary);\n cursor: pointer;\n padding: 0;\n border-radius: var(--radius-full);\n flex-shrink: 0;\n transition: color 0.15s, background 0.15s;\n }\n .ca-chip-remove:hover { color: var(--red-text); background: var(--red-light); }\n .ca-chip:hover .ca-chip-remove { display: inline-flex; }\n\n /* \u2500\u2500\u2500 Bound account cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .ca-bound-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n gap: 12px;\n }\n .ca-bound-card {\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 16px;\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n background: var(--bg-card);\n transition: border-color 0.15s;\n }\n .ca-bound-card:hover { border-color: var(--border-strong); }\n .ca-bound-top {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n }\n .ca-bound-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: var(--radius-sm);\n background: var(--bg-elevated);\n border: 1px solid var(--border);\n flex-shrink: 0;\n margin-top: 1px;\n }\n .ca-bound-icon svg { width: 22px; height: 22px; }\n .ca-bound-icon-lg {\n width: 48px;\n height: 48px;\n background: var(--blue-light);\n border-color: transparent;\n }\n .ca-bound-icon-lg svg { width: 28px; height: 28px; color: var(--blue-muted); }\n .ca-bound-top-body {\n flex: 1;\n min-width: 0;\n }\n .ca-bound-header {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .ca-bound-name {\n font-weight: 600;\n font-size: 15px;\n color: var(--text-white);\n line-height: 1.3;\n }\n .ca-bound-detail {\n font-size: 13px;\n color: var(--text-secondary);\n line-height: 1.4;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .ca-bound-field {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n }\n .ca-bound-field-label {\n font-size: 11px;\n font-weight: 500;\n color: var(--text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.4px;\n flex-shrink: 0;\n width: 36px;\n }\n .ca-bound-field-value {\n flex: 1;\n min-width: 0;\n font-size: 12px;\n color: var(--text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-family: 'JetBrains Mono', 'SF Mono', monospace;\n }\n .ca-bound-copy {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border: none;\n background: transparent;\n color: var(--text-tertiary);\n cursor: pointer;\n padding: 0;\n border-radius: var(--radius-sm);\n flex-shrink: 0;\n transition: color 0.15s, background 0.15s;\n }\n .ca-bound-copy:hover { color: var(--text); background: var(--bg-hover); }\n .ca-bound-copy svg { width: 14px; height: 14px; }\n .ca-bound-actions {\n display: flex;\n align-items: center;\n gap: 4px;\n flex-shrink: 0;\n }\n\n /* \u2500\u2500\u2500 Connected Accounts: mobile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .ca-bound-grid { grid-template-columns: 1fr; gap: 8px; }\n .ca-bound-card { padding: 12px; gap: 10px; }\n .ca-bound-top { gap: 10px; }\n .ca-bound-icon { width: 32px; height: 32px; }\n .ca-bound-icon svg { width: 18px; height: 18px; }\n .ca-bound-icon-lg { width: 40px; height: 40px; }\n .ca-bound-icon-lg svg { width: 22px; height: 22px; }\n .ca-bound-name { font-size: 14px; }\n .ca-bound-detail { font-size: 12px; }\n .ca-bound-field-label { display: none; }\n .ca-bound-field-value { font-size: 11px; }\n .ca-section { padding: 10px 16px; }\n .ca-chips { gap: 6px; }\n .ca-chip { padding: 5px 10px; font-size: 12px; }\n }\n .ca-chip-unbound {\n border-style: dashed;\n color: var(--text-tertiary);\n cursor: pointer;\n }\n .ca-chip-unbound:hover {\n border-color: var(--border-strong);\n background: var(--bg-hover);\n color: var(--text);\n }\n .ca-chip-add-icon {\n font-size: 14px;\n font-weight: 300;\n line-height: 1;\n color: var(--text-tertiary);\n }\n .ca-chip-unbound:hover .ca-chip-add-icon { color: var(--text-secondary); }\n .ca-passkey-add {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border: 1px dashed var(--border);\n border-radius: var(--radius-sm);\n background: transparent;\n font-size: 13px;\n color: var(--text-tertiary);\n cursor: pointer;\n transition: border-color 0.15s, background 0.15s, color 0.15s;\n }\n .ca-passkey-add:hover {\n border-color: var(--border-strong);\n background: var(--bg-hover);\n color: var(--text);\n }\n\n /* \u2500\u2500\u2500 Forms \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .form-group {\n margin-bottom: 16px;\n }\n .form-label {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n font-weight: 600;\n color: var(--text-secondary);\n margin-bottom: 4px;\n }\n .form-actions {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 24px;\n }\n .form-actions .btn { width: auto; }\n .text-muted { color: var(--text-secondary); }\n\n /* \u2500\u2500\u2500 Tables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .table {\n width: 100%;\n border-collapse: collapse;\n }\n .table th, .table td {\n padding: 12px 16px;\n text-align: left;\n border-bottom: 1px solid var(--border-subtle);\n font-size: 14px;\n vertical-align: middle;\n }\n .table th {\n color: var(--text-tertiary);\n font-weight: 500;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n background: transparent;\n border-bottom-color: var(--border);\n }\n .table th.sortable {\n cursor: pointer;\n user-select: none;\n transition: color 0.1s ease;\n }\n .table th.sortable:hover { color: var(--text-secondary); }\n .table th.sort-active { color: var(--text-white); }\n .table th .sort-arrow {\n display: inline-block;\n margin-left: 4px;\n font-size: 10px;\n opacity: 0.25;\n transition: opacity 0.1s ease;\n }\n .table th.sortable:hover .sort-arrow { opacity: 0.6; }\n .table th .sort-arrow-active { opacity: 1; }\n .table tbody tr {\n transition: background-color 0.1s ease;\n }\n .table tbody tr:hover { background: var(--bg-hover); }\n\n /* Action cell \u2014 hosts \u22EF trigger + dropdown menu */\n .action-cell {\n position: relative;\n width: 40px;\n text-align: center;\n }\n\n /* Member identity cell */\n .member-identity {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n .member-name {\n font-size: 14px;\n font-weight: 500;\n color: var(--text);\n line-height: 1.3;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .member-email {\n font-size: 12px;\n color: var(--text-secondary);\n line-height: 1.3;\n margin-top: 1px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .cell-date {\n font-size: 13px;\n color: var(--text-tertiary);\n font-variant-numeric: tabular-nums;\n }\n\n /* \u2500\u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .tab-toolbar {\n display: flex;\n gap: 8px;\n margin-bottom: 20px;\n align-items: center;\n }\n .search-wrapper {\n position: relative;\n width: 280px;\n }\n .search-icon {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--text-tertiary);\n width: 16px;\n height: 16px;\n pointer-events: none;\n }\n .search-bar {\n width: 100%;\n height: 36px;\n padding: 0 12px 0 34px;\n background: transparent;\n border: 1px solid var(--border-strong);\n border-radius: var(--radius-sm);\n font-size: 14px;\n color: var(--text);\n outline: none;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n }\n .search-bar::placeholder { color: var(--text-tertiary); }\n .search-bar:focus { border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(255,255,255,0.05); }\n .select {\n height: 36px;\n padding: 0 12px;\n font-size: 13px;\n color: var(--text);\n background: transparent;\n border: 1px solid var(--border-strong);\n border-radius: var(--radius-sm);\n outline: none;\n cursor: pointer;\n transition: border-color 0.15s ease;\n }\n .select:focus { border-color: var(--border-focus); }\n .btn-sm { height: 36px; padding: 0 12px; font-size: 13px; width: auto; }\n .btn-xs { height: 28px; padding: 0 10px; font-size: 12px; width: auto; }\n\n /* \u2500\u2500\u2500 OAuth provider picker \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .provider-picker {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 8px;\n }\n .provider-card {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 10px 6px 8px;\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n background: var(--bg-elevated);\n cursor: pointer;\n transition: border-color 0.15s, background 0.15s;\n position: relative;\n min-width: 0;\n }\n .provider-card:hover:not(.added) { border-color: var(--border-strong); background: var(--bg-hover); }\n .provider-card.selected { border-color: var(--blue); background: rgba(108,71,255,0.08); }\n .provider-card.added { opacity: 0.45; cursor: default; }\n .provider-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; }\n .provider-icon svg { width: 20px; height: 20px; }\n .provider-name { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }\n .provider-card.selected .provider-name { color: var(--text); }\n .provider-added-badge {\n position: absolute;\n top: -6px; right: -6px;\n font-size: 9px;\n font-weight: 600;\n padding: 1px 4px;\n border-radius: 4px;\n background: var(--bg-card);\n border: 1px solid var(--border);\n color: var(--text-tertiary);\n line-height: 1.4;\n white-space: nowrap;\n }\n\n /* \u2500\u2500\u2500 Pagination \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .pagination {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 16px;\n font-size: 13px;\n color: var(--text-tertiary);\n }\n .pagination-btns {\n display: flex;\n gap: 4px;\n }\n .page-btn {\n min-width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: var(--text-secondary);\n border-radius: var(--radius-sm);\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n transition: background-color 0.1s ease;\n }\n .page-btn:hover { background: var(--bg-hover); color: var(--text); }\n .page-btn.active { background: var(--bg-active); color: var(--text-white); }\n .page-btn:disabled { opacity: 0.3; cursor: not-allowed; }\n\n /* \u2500\u2500\u2500 Empty state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n text-align: center;\n }\n .empty-state-icon {\n width: 48px;\n height: 48px;\n border-radius: var(--radius);\n background: rgba(255,255,255,0.06);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-tertiary);\n margin-bottom: 16px;\n }\n .empty-state-title {\n font-size: 15px;\n font-weight: 500;\n color: var(--text);\n margin-bottom: 4px;\n }\n .empty-state-desc {\n font-size: 13px;\n color: var(--text-secondary);\n max-width: 320px;\n line-height: 1.5;\n }\n\n /* \u2500\u2500\u2500 Dialogs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n dialog {\n background: var(--bg-elevated);\n border: 1px solid var(--border-strong);\n border-radius: var(--radius-lg);\n color: var(--text);\n padding: 0;\n margin: auto;\n max-width: 520px;\n width: 90%;\n box-shadow: var(--shadow-lg);\n overflow: hidden;\n animation: modalIn 0.2s ease;\n }\n dialog::backdrop { background: rgba(0,0,0,0.7); }\n .dialog-content {\n padding: 24px;\n }\n .dialog-content h3 {\n font-size: 16px;\n font-weight: 600;\n color: var(--text-white);\n margin-bottom: 4px;\n letter-spacing: -0.01em;\n }\n .dialog-desc {\n font-size: 14px;\n color: var(--text-secondary);\n margin-bottom: 20px;\n line-height: 1.5;\n }\n .dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n padding: 16px 24px;\n border-top: 1px solid var(--border);\n }\n .dialog-actions .btn { width: auto; }\n\n /* \u2500\u2500\u2500 Wallet bind QR (mirrors login-page .qr-view) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .wallet-qr-view {\n margin: 16px auto;\n display: flex;\n justify-content: center;\n min-height: 212px;\n align-items: center;\n }\n .wallet-qr-placeholder {\n width: 212px;\n height: 212px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius);\n background: var(--bg-elevated);\n }\n .wallet-qr-spinner {\n display: inline-block;\n width: 32px; height: 32px;\n border: 3px solid var(--border-strong);\n border-top-color: var(--blue-muted);\n border-radius: 50%;\n animation: spin 0.6s linear infinite;\n }\n @keyframes spin { to { transform: rotate(360deg); } }\n .wallet-deep-link-btn {\n margin-top: 4px;\n width: 212px;\n }\n .wallet-bind-status {\n margin-top: 12px;\n font-size: 13px;\n min-height: 18px;\n color: var(--text-secondary);\n margin-bottom: 0;\n }\n .wallet-bind-error {\n color: var(--red-text);\n padding: 10px 12px;\n background: rgba(220,53,69,0.08);\n border: 1px solid rgba(220,53,69,0.25);\n border-radius: var(--radius-sm);\n margin-top: 8px;\n }\n\n @keyframes modalIn {\n from { opacity: 0; transform: scale(0.98); }\n to { opacity: 1; transform: scale(1); }\n }\n\n /* \u2500\u2500\u2500 Action menus \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .action-trigger {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-sm);\n border: none;\n background: transparent;\n color: var(--text-tertiary);\n cursor: pointer;\n font-size: 16px;\n transition: background-color 0.15s ease, color 0.15s ease;\n flex-shrink: 0;\n }\n .action-trigger:hover { background: var(--bg-hover); color: var(--text-secondary); }\n .action-menu {\n display: none;\n position: absolute;\n right: 8px;\n top: 100%;\n z-index: 50;\n min-width: 180px;\n padding: 4px;\n background: var(--bg-elevated);\n border: 1px solid var(--border-strong);\n border-radius: var(--radius);\n box-shadow: var(--shadow-md);\n }\n .action-menu.open { display: block; }\n .action-menu-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 8px;\n border-radius: var(--radius-xs);\n font-size: 13px;\n color: var(--text);\n cursor: pointer;\n border: none;\n background: none;\n width: 100%;\n text-align: left;\n transition: background-color 0.1s ease;\n }\n .action-menu-item:hover { background: var(--bg-hover); }\n .action-menu-item.danger { color: var(--red-text); }\n .action-menu-item.danger:hover { background: var(--red-light); }\n .action-menu-sep {\n height: 1px;\n background: var(--border);\n margin: 4px 0;\n }\n\n /* \u2500\u2500\u2500 Status badges \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .badge-active { background: var(--green-light); color: var(--green-text); }\n .badge-pending { background: var(--yellow-light); color: var(--yellow-text); }\n .badge-blocked { background: var(--red-light); color: var(--red-text); }\n .badge-expired { background: rgba(255,255,255,0.06); color: var(--text-tertiary); }\n .badge-neutral { background: rgba(255,255,255,0.06); color: var(--text-secondary); }\n\n /* \u2500\u2500\u2500 Toast \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .toast-container {\n position: fixed;\n bottom: 24px;\n right: 24px;\n z-index: 100;\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n .toast {\n padding: 10px 16px;\n border-radius: var(--radius);\n font-size: 13px;\n font-weight: 500;\n color: var(--text);\n background: var(--bg-elevated);\n border: 1px solid var(--border-strong);\n box-shadow: var(--shadow-md);\n animation: toastIn 0.2s ease;\n }\n .toast.success { border-left: 3px solid var(--green); }\n .toast.error { background: var(--red); color: #fff; border-color: var(--red); }\n @keyframes toastIn {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n /* \u2500\u2500\u2500 Toggle switch \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .toggle-switch {\n position: relative;\n display: inline-block;\n width: 40px;\n height: 22px;\n cursor: pointer;\n }\n .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }\n .toggle-slider {\n position: absolute;\n inset: 0;\n background: var(--bg-hover);\n border-radius: 11px;\n transition: background-color 0.2s ease;\n }\n .toggle-slider::before {\n content: \"\";\n position: absolute;\n left: 2px;\n top: 2px;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--text-secondary);\n transition: transform 0.2s ease, background-color 0.2s ease;\n }\n .toggle-switch input:checked + .toggle-slider { background: var(--blue); }\n .toggle-switch input:checked + .toggle-slider::before {\n transform: translateX(18px);\n background: #fff;\n }\n\n /* \u2500\u2500\u2500 Range slider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .range-slider {\n -webkit-appearance: none;\n width: 100%;\n height: 6px;\n border-radius: 3px;\n background: var(--bg-hover);\n outline: none;\n margin: 8px 0;\n }\n .range-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--blue);\n cursor: pointer;\n }\n .range-slider::-moz-range-thumb {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--blue);\n cursor: pointer;\n border: none;\n }\n\n /* \u2500\u2500\u2500 Branding: Section layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .br-section {\n margin-bottom: 56px;\n }\n .br-section-header {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n margin-bottom: 20px;\n }\n .br-section-title {\n font-size: 16px;\n font-weight: 600;\n color: var(--text);\n letter-spacing: -0.01em;\n }\n .br-section-category {\n font-size: 10px;\n font-weight: 600;\n color: var(--text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n }\n .br-two-col {\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 32px;\n }\n .br-col-desc {\n font-size: 13px;\n color: var(--text-secondary);\n line-height: 1.6;\n }\n .br-field-hint {\n font-size: 11px;\n color: var(--text-tertiary);\n margin-top: 4px;\n margin-bottom: 12px;\n }\n /* Info icon tooltip */\n .info-tip {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: rgba(255,255,255,0.08);\n color: var(--text-tertiary);\n font-size: 10px;\n font-weight: 600;\n cursor: help;\n flex-shrink: 0;\n }\n .info-tip::after {\n content: attr(data-tip);\n position: absolute;\n bottom: calc(100% + 8px);\n left: 50%;\n transform: translateX(-50%);\n background: var(--bg-card);\n border: 1px solid var(--border-strong);\n color: var(--text-secondary);\n font-size: 12px;\n font-weight: 400;\n padding: 8px 14px;\n border-radius: var(--radius);\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.15s ease;\n z-index: 10;\n box-shadow: var(--shadow-md);\n min-width: 220px;\n max-width: 360px;\n white-space: normal;\n line-height: 1.5;\n text-align: left;\n }\n .info-tip:hover::after { opacity: 1; }\n .br-panel {\n background: var(--bg-elevated);\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius-lg);\n padding: 20px 24px;\n }\n .accent-dot {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n cursor: pointer;\n border: 2px solid transparent;\n transition: transform 0.1s ease, border-color 0.15s ease;\n }\n .accent-dot:hover { transform: scale(1.15); }\n .accent-dot.selected { border-color: var(--text-white); }\n\n /* \u2500\u2500\u2500 Branding: Language toggles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .lang-toggles {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n align-items: center;\n }\n .lang-toggle {\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: var(--bg-elevated);\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius);\n font-size: 13px;\n font-weight: 500;\n color: var(--text-secondary);\n cursor: pointer;\n transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;\n }\n .lang-toggle:hover { border-color: var(--border-strong); color: var(--text); }\n .lang-toggle.active {\n border-color: var(--border-strong);\n color: var(--text-white);\n background: rgba(255,255,255,0.04);\n }\n .lang-toggle.active::after {\n content: \"\u2713\";\n position: absolute;\n top: -1px;\n right: -1px;\n width: 16px;\n height: 16px;\n background: var(--blue);\n border-radius: 0 var(--radius) 0 var(--radius);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n font-weight: 700;\n color: #fff;\n line-height: 1;\n }\n\n /* \u2500\u2500\u2500 Branding: Logo grid (redesigned) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .logo-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 16px;\n }\n .logo-item {\n position: relative;\n background: var(--bg-elevated);\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius-lg);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n padding: 16px;\n transition: border-color 0.15s ease;\n min-height: 170px;\n }\n .logo-item:hover { border-color: rgba(255,255,255,0.15); }\n .logo-item-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: auto;\n }\n .logo-item-icon {\n color: var(--text-tertiary);\n font-size: 20px;\n line-height: 1;\n }\n .logo-item-spec {\n font-size: 10px;\n font-weight: 600;\n color: var(--text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.03em;\n }\n .logo-preview {\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n }\n .logo-preview img {\n max-width: 100%;\n max-height: 80px;\n object-fit: contain;\n }\n .logo-item-footer {\n margin-top: 12px;\n }\n .logo-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--text-white);\n margin-bottom: 2px;\n }\n .logo-subtitle {\n font-size: 12px;\n color: var(--text-tertiary);\n }\n .logo-placeholder {\n font-size: 24px;\n color: var(--text-tertiary);\n opacity: 0.3;\n }\n /* Hover overlay for upload \u2014 glassmorphism */\n .logo-hover-upload {\n position: absolute;\n inset: 0;\n background: rgba(20,20,30,0.65);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 6px;\n opacity: 0;\n transition: opacity 0.2s ease;\n cursor: pointer;\n border-radius: inherit;\n }\n .logo-item:hover .logo-hover-upload { opacity: 1; }\n .logo-hover-icon {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background: rgba(255,255,255,0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-white);\n margin-bottom: 2px;\n }\n .logo-hover-icon svg { width: 18px; height: 18px; }\n .logo-hover-text {\n font-size: 12px;\n font-weight: 500;\n color: var(--text-secondary);\n letter-spacing: 0.02em;\n }\n /* Uploaded state: replace/discard shown on hover via overlay */\n .logo-uploaded-overlay {\n position: absolute;\n inset: 0;\n background: rgba(20,20,30,0.65);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n opacity: 0;\n transition: opacity 0.2s ease;\n border-radius: inherit;\n z-index: 2;\n }\n .logo-item:hover .logo-uploaded-overlay { opacity: 1; }\n .logo-overlay-btn {\n font-size: 12px;\n font-weight: 600;\n padding: 6px 14px;\n border-radius: var(--radius-sm);\n cursor: pointer;\n border: 1px solid;\n transition: background 0.15s ease;\n }\n .logo-overlay-btn-replace { color: var(--blue); border-color: var(--blue); background: transparent; }\n .logo-overlay-btn-replace:hover { background: rgba(99,102,241,0.12); }\n .logo-overlay-btn-discard { color: var(--red-text); border-color: rgba(224,46,46,0.4); background: transparent; }\n .logo-overlay-btn-discard:hover { background: rgba(224,46,46,0.1); }\n .btn-text { background: none; border: none; color: var(--blue); font-size: 11px; font-weight: 600; cursor: pointer; padding: 0; }\n .btn-text:hover { text-decoration: underline; }\n .btn-text-danger { color: var(--red-text); }\n\n /* \u2500\u2500\u2500 Branding: Sticky save bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .br-save-bar {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 40;\n background: rgba(28,28,32,0.85);\n backdrop-filter: blur(12px);\n border-top: 1px solid var(--border-subtle);\n padding: 16px 40px;\n display: none;\n }\n .br-save-bar.visible { display: block; }\n .br-save-bar-inner {\n max-width: 1120px;\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n }\n .br-save-hint {\n font-size: 12px;\n color: var(--text-tertiary);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .br-save-actions {\n display: flex;\n gap: 8px;\n }\n .br-save-actions .btn { width: auto; }\n\n /* \u2500\u2500\u2500 Branding: Accent color swatches \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .accent-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n gap: 10px;\n }\n .accent-swatch {\n position: relative;\n height: 64px;\n border-radius: var(--radius);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 6px 8px;\n cursor: pointer;\n transition: transform 0.1s ease, box-shadow 0.15s ease;\n border: 2px solid transparent;\n }\n .accent-swatch:hover { transform: scale(1.02); }\n .accent-swatch.selected { border-color: var(--text-white); }\n .accent-swatch .accent-check {\n position: absolute;\n top: 4px;\n right: 4px;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: rgba(0,0,0,0.5);\n display: none;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 12px;\n }\n .accent-swatch.selected .accent-check { display: flex; }\n .accent-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }\n .accent-hex { font-size: 10px; font-weight: 700; }\n\n /* \u2500\u2500\u2500 Branding tab: Language grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .lang-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n gap: 4px 16px;\n }\n .lang-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n padding: 4px 0;\n cursor: pointer;\n }\n\n /* \u2500\u2500\u2500 Crop dialog \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n dialog.dialog-wide { max-width: 660px; }\n .crop-container {\n width: 100%;\n height: 400px;\n background: var(--bg);\n border-radius: var(--radius-sm);\n overflow: hidden;\n }\n .crop-toolbar {\n display: flex;\n justify-content: center;\n gap: 6px;\n padding: 12px 0 4px;\n }\n .crop-tool-btn {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--bg-input);\n border: 1px solid var(--border-strong);\n border-radius: var(--radius-sm);\n color: var(--text-secondary);\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease;\n }\n .crop-tool-btn:hover { background: var(--bg-hover); color: var(--text); }\n .crop-tool-btn svg { width: 18px; height: 18px; }\n\n /* Crop dialog progress */\n .crop-progress {\n width: 120px;\n height: 4px;\n background: var(--bg-hover);\n border-radius: 2px;\n overflow: hidden;\n }\n .crop-progress-bar {\n width: 30%;\n height: 100%;\n background: var(--blue);\n border-radius: 2px;\n animation: cropProgress 1.5s ease infinite;\n }\n @keyframes cropProgress {\n 0% { width: 10%; margin-left: 0; }\n 50% { width: 40%; margin-left: 30%; }\n 100% { width: 10%; margin-left: 90%; }\n }\n\n /* cropperjs dark theme overrides */\n .cropper-view-box { outline-color: var(--blue) !important; }\n .cropper-line { background-color: var(--blue) !important; }\n .cropper-point { background-color: var(--blue) !important; width: 8px !important; height: 8px !important; }\n .cropper-modal { background-color: rgba(0,0,0,0.6) !important; }\n .cropper-dashed { border-color: rgba(255,255,255,0.3) !important; }\n\n /* \u2500\u2500\u2500 Branding: Mobile responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 768px) {\n .br-two-col { grid-template-columns: 1fr; gap: 16px; }\n .logo-grid { grid-template-columns: repeat(2, 1fr); }\n .br-save-bar { padding: 12px 16px; }\n .br-save-bar-inner { flex-direction: column; gap: 12px; text-align: center; }\n .br-save-actions { justify-content: center; }\n .tab-panel { padding: 20px 16px; }\n .accent-grid { grid-template-columns: repeat(3, 1fr); }\n .br-panel > div[style*=\"grid-template-columns: 1fr 1fr\"] { grid-template-columns: 1fr !important; }\n }\n @media (max-width: 480px) {\n .logo-grid { grid-template-columns: 1fr; }\n .accent-grid { grid-template-columns: repeat(2, 1fr); }\n }\n\n /* \u2500\u2500\u2500 Appearance tab: Color input \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .color-input {\n width: 40px;\n height: 28px;\n padding: 0;\n border: 1px solid var(--border-strong);\n border-radius: 4px;\n cursor: pointer;\n background: none;\n }\n\n /* \u2500\u2500\u2500 Auto theme: follow system preference \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (prefers-color-scheme: light) {\n [data-theme=\"auto\"] {\n --bg-root: #f8f9fa;\n --bg-surface: #ffffff;\n --bg-card: #ffffff;\n --bg-elevated: #f0f1f3;\n --bg-hover: #e9eaec;\n --bg-active: #dddee1;\n --bg-input: rgba(0,0,0,0.04);\n --border: rgba(0,0,0,0.10);\n --border-subtle: rgba(0,0,0,0.06);\n --border-strong: rgba(0,0,0,0.15);\n --border-focus: rgba(0,0,0,0.25);\n --text: #1a1a1a;\n --text-secondary: #6b7280;\n --text-tertiary: #9ca3af;\n --text-placeholder: #c0c5ce;\n --text-white: #1a1a1a;\n --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.06);\n --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.06);\n --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.12), 0 4px 6px -4px rgba(0,0,0,0.08);\n --shadow-focus: 0 0 0 1px rgba(0,0,0,0.08), 0 0 0 3px rgba(108,71,255,0.2);\n color-scheme: light;\n }\n }\n\n /* \u2500\u2500\u2500 Skeleton loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @keyframes shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n }\n .skel {\n display: block;\n background: linear-gradient(90deg, var(--bg-hover) 25%, var(--bg-active, rgba(255,255,255,0.06)) 50%, var(--bg-hover) 75%);\n background-size: 200% 100%;\n animation: shimmer 1.4s infinite;\n border-radius: 4px;\n }\n .skel-circle { border-radius: 50%; }\n .skel-row td { padding: 12px 16px; }\n\n /* \u2500\u2500\u2500 Responsive: column visibility helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n /* col-hide-lg: hide on tablet (\u2264900px) */\n @media (max-width: 900px) {\n .col-hide-lg { display: none; }\n }\n /* col-hide-md: hide on small tablet (\u2264768px) */\n @media (max-width: 768px) {\n .col-hide-md { display: none; }\n }\n /* col-hide-sm: hide on mobile (\u2264640px) */\n @media (max-width: 640px) {\n .col-hide-sm { display: none; }\n }\n\n /* \u2500\u2500\u2500 Mobile sidebar drawer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .sidebar-toggle { display: none; }\n .sidebar-overlay {\n display: none;\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.5);\n z-index: 200;\n opacity: 0;\n transition: opacity 0.25s ease;\n }\n .sidebar-overlay-visible {\n display: block;\n opacity: 1;\n }\n .sidebar {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 280px;\n max-width: 80vw;\n background: var(--bg-surface);\n border-right: 1px solid var(--border);\n z-index: 210;\n transform: translateX(-100%);\n transition: transform 0.25s ease;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n }\n .sidebar-open { transform: translateX(0); }\n .sidebar-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n border-bottom: 1px solid var(--border);\n }\n .sidebar-header h2 {\n font-size: 15px;\n font-weight: 600;\n color: var(--text-white);\n margin: 0;\n }\n .sidebar-nav {\n padding: 8px;\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n .sidebar-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n border: none;\n background: transparent;\n border-radius: var(--radius-sm);\n font-size: 14px;\n font-weight: 500;\n color: var(--text-secondary);\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n text-align: left;\n width: 100%;\n -webkit-tap-highlight-color: transparent;\n }\n .sidebar-item:hover { background: var(--bg-hover); color: var(--text); }\n .sidebar-item:active { background: var(--bg-active); }\n .sidebar-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-tertiary); transition: color 0.15s; }\n .sidebar-item:hover svg { color: var(--text-secondary); }\n .sidebar-item-active {\n background: var(--bg-hover);\n color: var(--text-white);\n }\n .sidebar-item-active svg { color: var(--text-white); }\n\n /* \u2500\u2500\u2500 Responsive: show sidebar toggle, hide tabs on mobile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .sidebar-toggle { display: flex; }\n .sidebar { display: block; }\n .tabs { display: none; }\n }\n\n /* \u2500\u2500\u2500 Responsive: toolbar / filter bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .tab-toolbar {\n flex-wrap: wrap;\n gap: 6px;\n }\n .search-wrapper {\n width: 100%;\n min-width: 0;\n }\n .tab-toolbar .select {\n flex: 1;\n min-width: 0;\n font-size: 12px;\n padding: 0 8px;\n height: 34px;\n }\n .tab-toolbar .btn-sm {\n font-size: 12px;\n padding: 0 10px;\n height: 34px;\n }\n }\n\n /* \u2500\u2500\u2500 Responsive: header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .admin-header-left {\n gap: 6px;\n min-width: 0;\n overflow: hidden;\n }\n .admin-header-left a {\n max-width: 80px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex-shrink: 1;\n }\n .admin-header h1 {\n font-size: 13px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .header-dot { display: none; }\n }\n\n /* \u2500\u2500\u2500 Responsive: table compact \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .table th, .table td {\n padding: 10px 8px;\n font-size: 13px;\n }\n .table th {\n font-size: 10px;\n }\n .member-identity {\n gap: 8px;\n }\n .member-name {\n font-size: 13px;\n max-width: 120px;\n }\n .member-email {\n font-size: 11px;\n max-width: 100px;\n }\n .action-cell { width: 32px; }\n }\n\n /* \u2500\u2500\u2500 Responsive: pagination \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .pagination {\n flex-direction: column;\n gap: 8px;\n align-items: center;\n font-size: 12px;\n }\n .pagination-info {\n font-size: 12px;\n }\n .page-btn {\n min-width: 28px;\n height: 28px;\n font-size: 12px;\n }\n }\n\n /* \u2500\u2500\u2500 Responsive: section titles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .section-title { font-size: 17px; }\n .section-desc { font-size: 13px; margin-bottom: 20px; padding-bottom: 16px; }\n }\n\n /* \u2500\u2500\u2500 Responsive: settings card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .settings-card { border-radius: var(--radius-sm); }\n .settings-card-header {\n gap: 8px;\n padding: 12px 14px;\n }\n .settings-card-header-desc { text-align: left; }\n .settings-row {\n gap: 6px;\n padding: 12px 14px;\n }\n .settings-row.settings-row-stack {\n flex-direction: column;\n align-items: flex-start;\n }\n }\n\n /* \u2500\u2500\u2500 Responsive: table horizontal scroll on very small screens \u2500\u2500\u2500 */\n @media (max-width: 480px) {\n .settings-card {\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n .settings-card .table {\n min-width: 360px;\n }\n }\n\n /* \u2500\u2500\u2500 Settings: OAuth card grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .st-oauth-grid {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 8px 20px 16px;\n }\n .st-oauth-card {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n border: 1px solid var(--border);\n border-radius: var(--radius-md);\n cursor: pointer;\n transition: border-color 0.15s, background 0.15s;\n min-width: 110px;\n }\n .st-oauth-card:hover {\n border-color: var(--border-strong);\n background: var(--bg-hover);\n }\n .st-oauth-card-icon {\n display: inline-flex;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n }\n .st-oauth-card-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--text);\n }\n .st-oauth-dot {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n flex-shrink: 0;\n margin-left: auto;\n }\n .st-oauth-dot-on { background: var(--green-text); }\n .st-oauth-dot-off { background: var(--text-tertiary); }\n\n /* \u2500\u2500\u2500 Settings: dual panel (login methods + email) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .st-dual-panel {\n display: flex;\n gap: 16px;\n }\n @media (max-width: 640px) {\n .st-dual-panel {\n flex-direction: column;\n }\n }\n\n /* \u2500\u2500\u2500 Settings: email hint \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .st-hint {\n font-size: 11px;\n color: var(--yellow-text, #92400e);\n font-weight: 400;\n margin-left: 4px;\n }\n\n /* \u2500\u2500\u2500 Federation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .fed-status-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n font-weight: 500;\n padding: 2px 8px;\n border-radius: var(--radius-full);\n }\n .fed-status-badge.master {\n background: var(--blue-light);\n color: var(--blue-muted);\n }\n .fed-status-badge.member {\n background: var(--green-light);\n color: var(--green-text);\n }\n .fed-star {\n color: var(--yellow);\n font-size: 14px;\n }\n .fed-site-row {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 20px;\n border-bottom: 1px solid var(--border);\n }\n .fed-site-row:last-child { border-bottom: none; }\n .fed-site-row { flex-wrap: wrap; }\n .fed-site-name { flex: 1 1 0%; min-width: 120px; font-weight: 500; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 6px; overflow: hidden; flex-wrap: nowrap; }\n .fed-site-name > span { flex-shrink: 0; }\n .fed-site-name > span.fed-site-label { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .fed-site-url { flex: 0 0 500px; min-width: 0; font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .fed-site-url a { color: var(--text-secondary); text-decoration: none; }\n .fed-site-url a:hover { color: var(--blue); text-decoration: underline; }\n .fed-site-role { width: 80px; font-size: 12px; color: var(--text-tertiary); }\n .fed-site-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; min-width: 64px; flex-shrink: 0; }\n @media (max-width: 768px) {\n .fed-site-row { flex-wrap: wrap; }\n .fed-site-name { flex: 1 1 100%; }\n .fed-site-url { flex: 1 1 auto; }\n }\n .fed-delegation-status { display: flex; align-items: center; gap: 8px; padding: 12px 20px; font-size: 13px; color: var(--text-secondary); }\n .fed-delegation-status .checkmark { color: var(--green); font-weight: 600; }\n .fed-init-buttons { display: flex; gap: 12px; justify-content: center; padding: 8px 20px 16px; }\n .fed-init-buttons .btn { width: auto; min-width: 160px; }\n";
8
+ export declare const ADMIN_STYLES = "\n .hidden { display: none !important; }\n\n /* \u2500\u2500\u2500 Shared component styles (extracted from shared-styles.ts) \u2500\u2500\u2500\u2500\u2500 */\n h1 {\n font-size: 24px;\n font-weight: 600;\n margin-bottom: 8px;\n color: var(--text-white);\n letter-spacing: -0.01em;\n line-height: 1.25;\n }\n .input {\n width: 100%;\n height: 40px;\n padding: 0 14px;\n font-size: 14px;\n color: var(--text);\n background: var(--bg-input);\n border: 1px solid var(--border-strong);\n border-radius: var(--radius-sm);\n outline: none;\n margin-bottom: 0;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n }\n textarea.input { height: auto; padding: 10px 14px; }\n .input:focus { border-color: var(--blue); box-shadow: var(--shadow-focus); }\n .input::placeholder { color: var(--text-placeholder); }\n .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n width: 100%;\n height: 36px;\n padding: 0 16px;\n font-size: 14px;\n font-weight: 500;\n color: #fff;\n background: var(--blue);\n border: none;\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: background-color 0.15s ease;\n line-height: 1;\n }\n .btn:hover { background: var(--blue-hover); }\n .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n .btn:focus-visible { box-shadow: var(--shadow-focus); }\n .btn svg { width: 18px; height: 18px; }\n .btn-secondary {\n background: transparent;\n border: 1px solid var(--border-strong);\n color: var(--text);\n }\n .btn-secondary:hover { background: var(--bg-hover); border-color: rgba(255,255,255,0.20); }\n .btn-danger { background: var(--red); }\n .btn-danger:hover { background: #c22a2a; }\n .badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n border-radius: var(--radius-full);\n font-size: 11px;\n font-weight: 500;\n line-height: 1.45;\n white-space: nowrap;\n }\n .badge-owner { background: var(--blue-light); color: var(--blue-muted); }\n .badge-admin { background: var(--info-light); color: var(--info-text); }\n .badge-member { background: var(--green-light); color: var(--green-text); }\n .badge-guest { background: var(--yellow-light); color: var(--yellow-text); }\n .badge-verified { background: var(--green-light); color: var(--green-text); }\n .badge-unverified { background: var(--yellow-light); color: var(--yellow-text); }\n\n /* \u2500\u2500\u2500 Admin layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n body {\n display: block;\n min-height: 100vh;\n }\n\n /* \u2500\u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .admin-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 24px;\n height: 56px;\n border-bottom: 1px solid var(--border);\n background: var(--bg-surface);\n }\n .admin-header-left {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n .admin-header-left a {\n font-size: 13px;\n transition: color 0.15s ease;\n }\n .admin-header-left .app-name-link {\n color: var(--text);\n }\n .admin-header-left .app-name-link:hover {\n color: var(--text);\n text-decoration: none;\n }\n .admin-header h1 {\n font-size: 15px;\n font-weight: 600;\n margin: 0;\n letter-spacing: -0.006em;\n }\n .admin-header-right {\n position: relative;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n /* \u2500\u2500\u2500 Toolbar buttons (ghost style) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .toolbar-wrapper {\n position: relative;\n }\n .toolbar-btn {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: none;\n border-radius: var(--radius-sm);\n color: var(--text-tertiary);\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease;\n -webkit-tap-highlight-color: transparent;\n }\n .toolbar-btn:hover { background: var(--bg-hover); color: var(--text); }\n .toolbar-btn:active { background: var(--bg-active); }\n .toolbar-btn svg { width: 16px; height: 16px; }\n\n /* \u2500\u2500\u2500 Popover (language picker) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .popover {\n position: absolute;\n right: 0;\n top: calc(100% + 6px);\n min-width: 160px;\n background: var(--bg-card);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-lg);\n z-index: 1000;\n overflow: hidden;\n opacity: 0;\n transform: translateY(-4px) scale(0.96);\n pointer-events: none;\n transform-origin: top right;\n transition: opacity 0.15s ease, transform 0.15s ease;\n }\n .popover.open {\n opacity: 1;\n transform: translateY(0) scale(1);\n pointer-events: auto;\n }\n .popover-header {\n padding: 8px 14px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--text-tertiary);\n border-bottom: 1px solid var(--border-subtle);\n }\n .popover-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n font-size: 13px;\n color: var(--text);\n cursor: pointer;\n transition: background 0.12s;\n -webkit-tap-highlight-color: transparent;\n }\n .popover-item:hover { background: var(--bg-hover); }\n .popover-item:active { background: var(--bg-active); }\n .popover-item.selected { color: var(--blue-muted); font-weight: 500; }\n .popover-item .check-icon { width: 14px; display: flex; align-items: center; flex-shrink: 0; }\n .popover-item .check-icon svg { width: 14px; height: 14px; }\n\n /* \u2500\u2500\u2500 Mobile: larger touch targets, full-width popover \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .admin-header { padding: 0 12px; }\n .admin-header-right { gap: 4px; }\n .toolbar-btn { width: 40px; height: 40px; }\n .popover { right: -8px; min-width: 150px; }\n .popover-item { padding: 12px 14px; font-size: 14px; }\n .user-menu-arrow { display: none; }\n .user-dropdown { right: -12px; width: 220px; }\n .dropdown-item { padding: 12px 16px; }\n }\n\n /* \u2500\u2500\u2500 User menu trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .user-menu-trigger {\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n }\n .user-menu-arrow {\n font-size: 12px;\n color: var(--text-tertiary);\n line-height: 1;\n }\n\n /* \u2500\u2500\u2500 User dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .user-dropdown {\n position: absolute;\n right: 0;\n top: calc(100% + 8px);\n width: 240px;\n max-width: calc(100vw - 32px);\n background: var(--bg-card);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-lg);\n z-index: 1000;\n overflow: hidden;\n }\n .dropdown-user {\n padding: 12px 16px;\n display: flex;\n align-items: center;\n gap: 8px;\n border-bottom: 1px solid var(--border-subtle);\n }\n .dropdown-user-name {\n font-weight: 600;\n font-size: 15px;\n color: var(--text-white);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .dropdown-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n color: var(--text);\n font-size: 14px;\n cursor: pointer;\n transition: background 0.15s;\n text-decoration: none;\n }\n .dropdown-item:hover { background: var(--bg-hover); }\n .dropdown-item.danger { color: var(--red-text); }\n .dropdown-item.danger:hover { background: var(--red-light); }\n .dropdown-divider {\n height: 1px;\n background: var(--border-subtle);\n margin: 4px 0;\n }\n .dropdown-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-secondary); }\n .dropdown-item.danger svg { color: var(--red-text); }\n\n /* \u2500\u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .tabs {\n display: flex;\n gap: 0;\n border-bottom: 1px solid var(--border);\n padding: 0 24px;\n background: var(--bg-surface);\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n }\n .tabs::-webkit-scrollbar { display: none; }\n [data-tab] {\n position: relative;\n padding: 10px 16px;\n font-size: 13px;\n font-weight: 500;\n color: var(--text-tertiary);\n cursor: pointer;\n border: none;\n background: none;\n border-bottom: 2px solid transparent;\n transition: color 0.15s ease, border-color 0.15s ease;\n }\n [data-tab]:hover { color: var(--text-secondary); }\n .tab-active {\n color: var(--text-white) !important;\n border-bottom-color: var(--text-white) !important;\n }\n .tab-panel {\n padding: 32px 40px;\n max-width: 1120px;\n margin: 0 auto;\n }\n\n /* \u2500\u2500\u2500 Section titles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .section-title {\n font-size: 20px;\n font-weight: 600;\n color: var(--text-white);\n letter-spacing: -0.02em;\n line-height: 1.25;\n margin-bottom: 4px;\n }\n .section-desc {\n font-size: 14px;\n color: var(--text-tertiary);\n margin-bottom: 32px;\n padding-bottom: 24px;\n border-bottom: 1px solid var(--border-subtle);\n line-height: 1.5;\n }\n\n /* \u2500\u2500\u2500 Profile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .profile-header {\n padding: 16px 20px;\n display: flex;\n align-items: center;\n gap: 14px;\n }\n .avatar-lg {\n width: 48px;\n height: 48px;\n font-size: 18px;\n }\n .profile-header-body {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .profile-header-name {\n font-weight: 600;\n font-size: 15px;\n color: var(--text-white);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .profile-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n border-top: 1px solid var(--border);\n }\n .profile-cell {\n padding: 12px 20px;\n }\n .profile-cell-label {\n display: block;\n font-size: 11px;\n font-weight: 500;\n color: var(--text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 4px;\n }\n .profile-cell-value {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: var(--text);\n min-height: 24px;\n }\n .profile-cell-editable {\n margin: -2px -8px;\n }\n @media (max-width: 560px) {\n .profile-grid { grid-template-columns: 1fr; }\n }\n .profile-editable {\n flex: 1;\n min-width: 0;\n height: 30px;\n padding: 0 8px;\n font-size: 13px;\n color: var(--text);\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--radius-sm);\n outline: none;\n transition: border-color 0.15s, background 0.15s;\n }\n .profile-editable:hover {\n border-color: var(--border-strong);\n background: var(--bg-input);\n }\n .profile-editable:focus {\n border-color: var(--blue);\n background: var(--bg-input);\n box-shadow: var(--shadow-focus);\n }\n .btn-text {\n background: none;\n border: none;\n color: var(--blue);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n padding: 4px 8px;\n border-radius: var(--radius-sm);\n white-space: nowrap;\n flex-shrink: 0;\n }\n .btn-text:hover { background: var(--blue-light); }\n .btn-text:disabled { opacity: 0.5; cursor: default; }\n .avatar {\n width: 48px;\n height: 48px;\n border-radius: var(--radius-full);\n background: var(--blue-light);\n color: var(--blue-muted);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n font-weight: 600;\n flex-shrink: 0;\n overflow: hidden;\n position: relative;\n }\n .avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n .avatar-fallback {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .avatar-sm {\n width: 32px;\n height: 32px;\n font-size: 12px;\n }\n .avatar-editable { cursor: pointer; }\n .avatar-overlay {\n position: absolute;\n inset: 0;\n background: rgba(0,0,0,0.5);\n display: none;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 12px;\n border-radius: inherit;\n }\n .avatar-editable:hover .avatar-overlay { display: flex; }\n /* <did-address> Web Component theme bridge \u2014 CSS custom properties penetrate Shadow DOM */\n did-address {\n --did-text-color: var(--text-secondary);\n --did-copy-success-color: var(--green);\n font-size: 11px;\n }\n did-address:hover {\n --did-text-color: var(--text-white);\n }\n .profile-meta {\n margin: 16px 0;\n font-size: 13px;\n }\n\n /* \u2500\u2500\u2500 Settings card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .settings-card {\n background: var(--bg-card);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n margin-bottom: 24px;\n }\n .settings-card-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--border-subtle);\n gap: 12px;\n }\n details.settings-card > summary.settings-card-header {\n list-style: none;\n }\n details.settings-card > summary.settings-card-header::before {\n content: \"\\25B6\";\n font-size: 10px;\n transition: transform 0.2s;\n margin-right: 4px;\n }\n details[open].settings-card > summary.settings-card-header::before {\n transform: rotate(90deg);\n }\n details.settings-card > summary.settings-card-header::-webkit-details-marker {\n display: none;\n }\n\n /* Icon action buttons for access/policy tables */\n .ap-actions {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n white-space: nowrap;\n }\n .ap-icon-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n background: var(--bg-card);\n color: var(--text-secondary);\n cursor: pointer;\n transition: background 0.15s, color 0.15s, border-color 0.15s;\n flex-shrink: 0;\n }\n .ap-icon-btn:hover {\n background: var(--bg-hover);\n color: var(--text-white);\n border-color: var(--border-strong);\n }\n .ap-icon-btn-danger:hover {\n background: var(--red-light);\n color: var(--red-text);\n border-color: var(--red-text);\n }\n\n .ap-lock-name {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: var(--fg);\n }\n .ap-lock-name svg {\n color: var(--fg-muted);\n flex-shrink: 0;\n }\n\n tr.ap-separator td {\n padding: 0;\n border-bottom: 2px solid var(--border);\n }\n\n .ap-switch {\n position: relative;\n display: inline-block;\n width: 36px;\n height: 20px;\n cursor: pointer;\n }\n .ap-switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n .ap-switch-slider {\n position: absolute;\n inset: 0;\n background: var(--bg-tertiary, #ccc);\n border-radius: 20px;\n transition: background 0.2s;\n }\n .ap-switch-slider::before {\n content: \"\";\n position: absolute;\n left: 2px;\n top: 2px;\n width: 16px;\n height: 16px;\n background: #fff;\n border-radius: 50%;\n transition: transform 0.2s;\n }\n .ap-switch input:checked + .ap-switch-slider {\n background: var(--color-primary, #2563eb);\n }\n .ap-switch input:checked + .ap-switch-slider::before {\n transform: translateX(16px);\n }\n\n .settings-card-header-desc {\n font-size: 12px;\n color: var(--text-tertiary);\n font-weight: 400;\n flex: 1;\n text-align: right;\n }\n .settings-card-desc {\n font-size: 12px;\n color: var(--text-tertiary);\n padding: 8px 20px 0;\n margin: 0;\n line-height: 1.5;\n }\n .settings-card-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--text-white);\n }\n .settings-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 20px;\n border-bottom: 1px solid var(--border-subtle);\n }\n .settings-row:last-child { border-bottom: none; }\n .settings-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--text);\n }\n .settings-value {\n font-size: 13px;\n color: var(--text-secondary);\n }\n\n /* \u2500\u2500\u2500 Connected Accounts chips \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .ca-section {\n padding: 12px 20px;\n }\n .ca-section + .ca-section {\n padding-top: 0;\n }\n .ca-section-label {\n font-size: 11px;\n font-weight: 500;\n color: var(--text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 8px;\n }\n .ca-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n .ca-chip {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 12px;\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n background: var(--bg-elevated);\n font-size: 13px;\n color: var(--text);\n transition: border-color 0.15s, background 0.15s;\n position: relative;\n max-width: 260px;\n }\n .ca-chip-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n flex-shrink: 0;\n }\n .ca-chip-icon svg { width: 18px; height: 18px; }\n .ca-chip-body {\n display: flex;\n flex-direction: column;\n min-width: 0;\n }\n .ca-chip-name {\n font-weight: 500;\n font-size: 13px;\n line-height: 1.3;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .ca-chip-detail {\n font-size: 11px;\n color: var(--text-secondary);\n line-height: 1.3;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .ca-chip-badge {\n display: inline-flex;\n font-size: 10px;\n font-weight: 500;\n padding: 1px 6px;\n border-radius: var(--radius-full);\n background: var(--blue-light);\n color: var(--blue-muted);\n white-space: nowrap;\n vertical-align: middle;\n margin-left: 4px;\n }\n .ca-chip-remove {\n display: none;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border: none;\n background: transparent;\n color: var(--text-tertiary);\n cursor: pointer;\n padding: 0;\n border-radius: var(--radius-full);\n flex-shrink: 0;\n transition: color 0.15s, background 0.15s;\n }\n .ca-chip-remove:hover { color: var(--red-text); background: var(--red-light); }\n .ca-chip:hover .ca-chip-remove { display: inline-flex; }\n\n /* \u2500\u2500\u2500 Bound account cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .ca-bound-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n gap: 12px;\n }\n .ca-bound-card {\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 16px;\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n background: var(--bg-card);\n transition: border-color 0.15s;\n }\n .ca-bound-card:hover { border-color: var(--border-strong); }\n .ca-bound-top {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n }\n .ca-bound-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: var(--radius-sm);\n background: var(--bg-elevated);\n border: 1px solid var(--border);\n flex-shrink: 0;\n margin-top: 1px;\n }\n .ca-bound-icon svg { width: 22px; height: 22px; }\n .ca-bound-icon-lg {\n width: 48px;\n height: 48px;\n background: var(--blue-light);\n border-color: transparent;\n }\n .ca-bound-icon-lg svg { width: 28px; height: 28px; color: var(--blue-muted); }\n .ca-bound-top-body {\n flex: 1;\n min-width: 0;\n }\n .ca-bound-header {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .ca-bound-name {\n font-weight: 600;\n font-size: 15px;\n color: var(--text-white);\n line-height: 1.3;\n }\n .ca-bound-detail {\n font-size: 13px;\n color: var(--text-secondary);\n line-height: 1.4;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .ca-bound-field {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n }\n .ca-bound-field-label {\n font-size: 11px;\n font-weight: 500;\n color: var(--text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.4px;\n flex-shrink: 0;\n width: 36px;\n }\n .ca-bound-field-value {\n flex: 1;\n min-width: 0;\n font-size: 12px;\n color: var(--text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-family: 'JetBrains Mono', 'SF Mono', monospace;\n }\n .ca-bound-copy {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border: none;\n background: transparent;\n color: var(--text-tertiary);\n cursor: pointer;\n padding: 0;\n border-radius: var(--radius-sm);\n flex-shrink: 0;\n transition: color 0.15s, background 0.15s;\n }\n .ca-bound-copy:hover { color: var(--text); background: var(--bg-hover); }\n .ca-bound-copy svg { width: 14px; height: 14px; }\n .ca-bound-actions {\n display: flex;\n align-items: center;\n gap: 4px;\n flex-shrink: 0;\n }\n\n /* \u2500\u2500\u2500 Connected Accounts: mobile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .ca-bound-grid { grid-template-columns: 1fr; gap: 8px; }\n .ca-bound-card { padding: 12px; gap: 10px; }\n .ca-bound-top { gap: 10px; }\n .ca-bound-icon { width: 32px; height: 32px; }\n .ca-bound-icon svg { width: 18px; height: 18px; }\n .ca-bound-icon-lg { width: 40px; height: 40px; }\n .ca-bound-icon-lg svg { width: 22px; height: 22px; }\n .ca-bound-name { font-size: 14px; }\n .ca-bound-detail { font-size: 12px; }\n .ca-bound-field-label { display: none; }\n .ca-bound-field-value { font-size: 11px; }\n .ca-section { padding: 10px 16px; }\n .ca-chips { gap: 6px; }\n .ca-chip { padding: 5px 10px; font-size: 12px; }\n }\n .ca-chip-unbound {\n border-style: dashed;\n color: var(--text-tertiary);\n cursor: pointer;\n }\n .ca-chip-unbound:hover {\n border-color: var(--border-strong);\n background: var(--bg-hover);\n color: var(--text);\n }\n .ca-chip-add-icon {\n font-size: 14px;\n font-weight: 300;\n line-height: 1;\n color: var(--text-tertiary);\n }\n .ca-chip-unbound:hover .ca-chip-add-icon { color: var(--text-secondary); }\n .ca-passkey-add {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border: 1px dashed var(--border);\n border-radius: var(--radius-sm);\n background: transparent;\n font-size: 13px;\n color: var(--text-tertiary);\n cursor: pointer;\n transition: border-color 0.15s, background 0.15s, color 0.15s;\n }\n .ca-passkey-add:hover {\n border-color: var(--border-strong);\n background: var(--bg-hover);\n color: var(--text);\n }\n\n /* \u2500\u2500\u2500 Forms \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .form-group {\n margin-bottom: 16px;\n }\n .form-label {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n font-weight: 600;\n color: var(--text-secondary);\n margin-bottom: 4px;\n }\n .form-actions {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 24px;\n }\n .form-actions .btn { width: auto; }\n .text-muted { color: var(--text-secondary); }\n\n /* \u2500\u2500\u2500 Tables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .table {\n width: 100%;\n border-collapse: collapse;\n }\n .table th, .table td {\n padding: 12px 16px;\n text-align: left;\n border-bottom: 1px solid var(--border-subtle);\n font-size: 14px;\n vertical-align: middle;\n }\n .table th {\n color: var(--text-tertiary);\n font-weight: 500;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n background: transparent;\n border-bottom-color: var(--border);\n }\n .table th.sortable {\n cursor: pointer;\n user-select: none;\n transition: color 0.1s ease;\n }\n .table th.sortable:hover { color: var(--text-secondary); }\n .table th.sort-active { color: var(--text-white); }\n .table th .sort-arrow {\n display: inline-block;\n margin-left: 4px;\n font-size: 10px;\n opacity: 0.25;\n transition: opacity 0.1s ease;\n }\n .table th.sortable:hover .sort-arrow { opacity: 0.6; }\n .table th .sort-arrow-active { opacity: 1; }\n .table tbody tr {\n transition: background-color 0.1s ease;\n }\n .table tbody tr:hover { background: var(--bg-hover); }\n\n /* Action cell \u2014 hosts \u22EF trigger + dropdown menu */\n .action-cell {\n position: relative;\n width: 40px;\n text-align: center;\n }\n\n /* Member identity cell */\n .member-identity {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n .member-name {\n font-size: 14px;\n font-weight: 500;\n color: var(--text);\n line-height: 1.3;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .member-email {\n font-size: 12px;\n color: var(--text-secondary);\n line-height: 1.3;\n margin-top: 1px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .cell-date {\n font-size: 13px;\n color: var(--text-tertiary);\n font-variant-numeric: tabular-nums;\n }\n\n /* \u2500\u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .tab-toolbar {\n display: flex;\n gap: 8px;\n margin-bottom: 20px;\n align-items: center;\n }\n .search-wrapper {\n position: relative;\n width: 280px;\n }\n .search-icon {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--text-tertiary);\n width: 16px;\n height: 16px;\n pointer-events: none;\n }\n .search-bar {\n width: 100%;\n height: 36px;\n padding: 0 12px 0 34px;\n background: transparent;\n border: 1px solid var(--border-strong);\n border-radius: var(--radius-sm);\n font-size: 14px;\n color: var(--text);\n outline: none;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n }\n .search-bar::placeholder { color: var(--text-tertiary); }\n .search-bar:focus { border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(255,255,255,0.05); }\n .select {\n height: 36px;\n padding: 0 12px;\n font-size: 13px;\n color: var(--text);\n background: transparent;\n border: 1px solid var(--border-strong);\n border-radius: var(--radius-sm);\n outline: none;\n cursor: pointer;\n transition: border-color 0.15s ease;\n }\n .select:focus { border-color: var(--border-focus); }\n .btn-sm { height: 36px; padding: 0 12px; font-size: 13px; width: auto; }\n .btn-xs { height: 28px; padding: 0 10px; font-size: 12px; width: auto; }\n\n /* \u2500\u2500\u2500 OAuth provider picker \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .provider-picker {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 8px;\n }\n .provider-card {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 10px 6px 8px;\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n background: var(--bg-elevated);\n cursor: pointer;\n transition: border-color 0.15s, background 0.15s;\n position: relative;\n min-width: 0;\n }\n .provider-card:hover:not(.added) { border-color: var(--border-strong); background: var(--bg-hover); }\n .provider-card.selected { border-color: var(--blue); background: rgba(108,71,255,0.08); }\n .provider-card.added { opacity: 0.45; cursor: default; }\n .provider-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; }\n .provider-icon svg { width: 20px; height: 20px; }\n .provider-name { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }\n .provider-card.selected .provider-name { color: var(--text); }\n .provider-added-badge {\n position: absolute;\n top: -6px; right: -6px;\n font-size: 9px;\n font-weight: 600;\n padding: 1px 4px;\n border-radius: 4px;\n background: var(--bg-card);\n border: 1px solid var(--border);\n color: var(--text-tertiary);\n line-height: 1.4;\n white-space: nowrap;\n }\n\n /* \u2500\u2500\u2500 Pagination \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .pagination {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 16px;\n font-size: 13px;\n color: var(--text-tertiary);\n }\n .pagination-btns {\n display: flex;\n gap: 4px;\n }\n .page-btn {\n min-width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: var(--text-secondary);\n border-radius: var(--radius-sm);\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n transition: background-color 0.1s ease;\n }\n .page-btn:hover { background: var(--bg-hover); color: var(--text); }\n .page-btn.active { background: var(--bg-active); color: var(--text-white); }\n .page-btn:disabled { opacity: 0.3; cursor: not-allowed; }\n\n /* \u2500\u2500\u2500 Empty state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n text-align: center;\n }\n .empty-state-icon {\n width: 48px;\n height: 48px;\n border-radius: var(--radius);\n background: rgba(255,255,255,0.06);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-tertiary);\n margin-bottom: 16px;\n }\n .empty-state-title {\n font-size: 15px;\n font-weight: 500;\n color: var(--text);\n margin-bottom: 4px;\n }\n .empty-state-desc {\n font-size: 13px;\n color: var(--text-secondary);\n max-width: 320px;\n line-height: 1.5;\n }\n\n /* \u2500\u2500\u2500 Dialogs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n dialog {\n background: var(--bg-elevated);\n border: 1px solid var(--border-strong);\n border-radius: var(--radius-lg);\n color: var(--text);\n padding: 0;\n margin: auto;\n max-width: 520px;\n width: 90%;\n box-shadow: var(--shadow-lg);\n max-height: calc(100vh - 32px);\n max-height: calc(100dvh - 32px);\n overflow: hidden;\n animation: modalIn 0.2s ease;\n }\n dialog[open] {\n display: flex;\n flex-direction: column;\n }\n dialog::backdrop { background: rgba(0,0,0,0.7); }\n .dialog-content {\n min-height: 0;\n overflow-y: auto;\n overscroll-behavior: contain;\n padding: 24px;\n }\n .dialog-content h3 {\n font-size: 16px;\n font-weight: 600;\n color: var(--text-white);\n margin-bottom: 4px;\n letter-spacing: -0.01em;\n }\n .dialog-desc {\n font-size: 14px;\n color: var(--text-secondary);\n margin-bottom: 20px;\n line-height: 1.5;\n }\n .dialog-actions {\n display: flex;\n flex: 0 0 auto;\n justify-content: flex-end;\n gap: 8px;\n padding: 16px 24px;\n border-top: 1px solid var(--border);\n }\n .dialog-actions .btn { width: auto; }\n\n /* \u2500\u2500\u2500 Wallet bind QR (mirrors login-page .qr-view) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .wallet-qr-view {\n margin: 16px auto;\n display: flex;\n justify-content: center;\n min-height: 212px;\n align-items: center;\n }\n .wallet-qr-placeholder {\n width: 212px;\n height: 212px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius);\n background: var(--bg-elevated);\n }\n .wallet-qr-spinner {\n display: inline-block;\n width: 32px; height: 32px;\n border: 3px solid var(--border-strong);\n border-top-color: var(--blue-muted);\n border-radius: 50%;\n animation: spin 0.6s linear infinite;\n }\n @keyframes spin { to { transform: rotate(360deg); } }\n .wallet-deep-link-btn {\n margin-top: 4px;\n width: 212px;\n }\n .wallet-bind-status {\n margin-top: 12px;\n font-size: 13px;\n min-height: 18px;\n color: var(--text-secondary);\n margin-bottom: 0;\n }\n .wallet-bind-error {\n color: var(--red-text);\n padding: 10px 12px;\n background: rgba(220,53,69,0.08);\n border: 1px solid rgba(220,53,69,0.25);\n border-radius: var(--radius-sm);\n margin-top: 8px;\n }\n\n @keyframes modalIn {\n from { opacity: 0; transform: scale(0.98); }\n to { opacity: 1; transform: scale(1); }\n }\n\n /* \u2500\u2500\u2500 Action menus \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .action-trigger {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-sm);\n border: none;\n background: transparent;\n color: var(--text-tertiary);\n cursor: pointer;\n font-size: 16px;\n transition: background-color 0.15s ease, color 0.15s ease;\n flex-shrink: 0;\n }\n .action-trigger:hover { background: var(--bg-hover); color: var(--text-secondary); }\n .action-menu {\n display: none;\n position: absolute;\n right: 8px;\n top: 100%;\n z-index: 50;\n min-width: 180px;\n padding: 4px;\n background: var(--bg-elevated);\n border: 1px solid var(--border-strong);\n border-radius: var(--radius);\n box-shadow: var(--shadow-md);\n }\n .action-menu.open { display: block; }\n .action-menu-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 8px;\n border-radius: var(--radius-xs);\n font-size: 13px;\n color: var(--text);\n cursor: pointer;\n border: none;\n background: none;\n width: 100%;\n text-align: left;\n transition: background-color 0.1s ease;\n }\n .action-menu-item:hover { background: var(--bg-hover); }\n .action-menu-item.danger { color: var(--red-text); }\n .action-menu-item.danger:hover { background: var(--red-light); }\n .action-menu-sep {\n height: 1px;\n background: var(--border);\n margin: 4px 0;\n }\n\n /* \u2500\u2500\u2500 Status badges \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .badge-active { background: var(--green-light); color: var(--green-text); }\n .badge-pending { background: var(--yellow-light); color: var(--yellow-text); }\n .badge-blocked { background: var(--red-light); color: var(--red-text); }\n .badge-expired { background: rgba(255,255,255,0.06); color: var(--text-tertiary); }\n .badge-neutral { background: rgba(255,255,255,0.06); color: var(--text-secondary); }\n\n /* \u2500\u2500\u2500 Toast \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .toast-container {\n position: fixed;\n bottom: 24px;\n right: 24px;\n z-index: 100;\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n .toast {\n padding: 10px 16px;\n border-radius: var(--radius);\n font-size: 13px;\n font-weight: 500;\n color: var(--text);\n background: var(--bg-elevated);\n border: 1px solid var(--border-strong);\n box-shadow: var(--shadow-md);\n animation: toastIn 0.2s ease;\n }\n .toast.success { border-left: 3px solid var(--green); }\n .toast.error { background: var(--red); color: #fff; border-color: var(--red); }\n @keyframes toastIn {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n /* \u2500\u2500\u2500 Toggle switch \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .toggle-switch {\n position: relative;\n display: inline-block;\n width: 40px;\n height: 22px;\n cursor: pointer;\n }\n .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }\n .toggle-slider {\n position: absolute;\n inset: 0;\n background: var(--bg-hover);\n border-radius: 11px;\n transition: background-color 0.2s ease;\n }\n .toggle-slider::before {\n content: \"\";\n position: absolute;\n left: 2px;\n top: 2px;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--text-secondary);\n transition: transform 0.2s ease, background-color 0.2s ease;\n }\n .toggle-switch input:checked + .toggle-slider { background: var(--blue); }\n .toggle-switch input:checked + .toggle-slider::before {\n transform: translateX(18px);\n background: #fff;\n }\n\n /* \u2500\u2500\u2500 Range slider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .range-slider {\n -webkit-appearance: none;\n width: 100%;\n height: 6px;\n border-radius: 3px;\n background: var(--bg-hover);\n outline: none;\n margin: 8px 0;\n }\n .range-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--blue);\n cursor: pointer;\n }\n .range-slider::-moz-range-thumb {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--blue);\n cursor: pointer;\n border: none;\n }\n\n /* \u2500\u2500\u2500 Branding: Section layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .br-section {\n margin-bottom: 56px;\n }\n .br-section-header {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n margin-bottom: 20px;\n }\n .br-section-title {\n font-size: 16px;\n font-weight: 600;\n color: var(--text);\n letter-spacing: -0.01em;\n }\n .br-section-category {\n font-size: 10px;\n font-weight: 600;\n color: var(--text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n }\n .br-two-col {\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 32px;\n }\n .br-col-desc {\n font-size: 13px;\n color: var(--text-secondary);\n line-height: 1.6;\n }\n .br-field-hint {\n font-size: 11px;\n color: var(--text-tertiary);\n margin-top: 4px;\n margin-bottom: 12px;\n }\n /* Info icon tooltip */\n .info-tip {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: rgba(255,255,255,0.08);\n color: var(--text-tertiary);\n font-size: 10px;\n font-weight: 600;\n cursor: help;\n flex-shrink: 0;\n }\n .info-tip::after {\n content: attr(data-tip);\n position: absolute;\n bottom: calc(100% + 8px);\n left: 50%;\n transform: translateX(-50%);\n background: var(--bg-card);\n border: 1px solid var(--border-strong);\n color: var(--text-secondary);\n font-size: 12px;\n font-weight: 400;\n padding: 8px 14px;\n border-radius: var(--radius);\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.15s ease;\n z-index: 10;\n box-shadow: var(--shadow-md);\n min-width: 220px;\n max-width: 360px;\n white-space: normal;\n line-height: 1.5;\n text-align: left;\n }\n .info-tip:hover::after { opacity: 1; }\n .br-panel {\n background: var(--bg-elevated);\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius-lg);\n padding: 20px 24px;\n }\n .accent-dot {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n cursor: pointer;\n border: 2px solid transparent;\n transition: transform 0.1s ease, border-color 0.15s ease;\n }\n .accent-dot:hover { transform: scale(1.15); }\n .accent-dot.selected { border-color: var(--text-white); }\n\n /* \u2500\u2500\u2500 Branding: Language toggles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .lang-toggles {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n align-items: center;\n }\n .lang-toggle {\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n background: var(--bg-elevated);\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius);\n font-size: 13px;\n font-weight: 500;\n color: var(--text-secondary);\n cursor: pointer;\n transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;\n }\n .lang-toggle:hover { border-color: var(--border-strong); color: var(--text); }\n .lang-toggle.active {\n border-color: var(--border-strong);\n color: var(--text-white);\n background: rgba(255,255,255,0.04);\n }\n .lang-toggle.active::after {\n content: \"\u2713\";\n position: absolute;\n top: -1px;\n right: -1px;\n width: 16px;\n height: 16px;\n background: var(--blue);\n border-radius: 0 var(--radius) 0 var(--radius);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n font-weight: 700;\n color: #fff;\n line-height: 1;\n }\n\n /* \u2500\u2500\u2500 Branding: Logo grid (redesigned) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .logo-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 16px;\n }\n .logo-item {\n position: relative;\n background: var(--bg-elevated);\n border: 1px solid var(--border-subtle);\n border-radius: var(--radius-lg);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n padding: 16px;\n transition: border-color 0.15s ease;\n min-height: 170px;\n }\n .logo-item:hover { border-color: rgba(255,255,255,0.15); }\n .logo-item-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: auto;\n }\n .logo-item-icon {\n color: var(--text-tertiary);\n font-size: 20px;\n line-height: 1;\n }\n .logo-item-spec {\n font-size: 10px;\n font-weight: 600;\n color: var(--text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.03em;\n }\n .logo-preview {\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n }\n .logo-preview img {\n max-width: 100%;\n max-height: 80px;\n object-fit: contain;\n }\n .logo-item-footer {\n margin-top: 12px;\n }\n .logo-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--text-white);\n margin-bottom: 2px;\n }\n .logo-subtitle {\n font-size: 12px;\n color: var(--text-tertiary);\n }\n .logo-placeholder {\n font-size: 24px;\n color: var(--text-tertiary);\n opacity: 0.3;\n }\n /* Hover overlay for upload \u2014 glassmorphism */\n .logo-hover-upload {\n position: absolute;\n inset: 0;\n background: rgba(20,20,30,0.65);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 6px;\n opacity: 0;\n transition: opacity 0.2s ease;\n cursor: pointer;\n border-radius: inherit;\n }\n .logo-item:hover .logo-hover-upload { opacity: 1; }\n .logo-hover-icon {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background: rgba(255,255,255,0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-white);\n margin-bottom: 2px;\n }\n .logo-hover-icon svg { width: 18px; height: 18px; }\n .logo-hover-text {\n font-size: 12px;\n font-weight: 500;\n color: var(--text-secondary);\n letter-spacing: 0.02em;\n }\n /* Uploaded state: replace/discard shown on hover via overlay */\n .logo-uploaded-overlay {\n position: absolute;\n inset: 0;\n background: rgba(20,20,30,0.65);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n opacity: 0;\n transition: opacity 0.2s ease;\n border-radius: inherit;\n z-index: 2;\n }\n .logo-item:hover .logo-uploaded-overlay { opacity: 1; }\n .logo-overlay-btn {\n font-size: 12px;\n font-weight: 600;\n padding: 6px 14px;\n border-radius: var(--radius-sm);\n cursor: pointer;\n border: 1px solid;\n transition: background 0.15s ease;\n }\n .logo-overlay-btn-replace { color: var(--blue); border-color: var(--blue); background: transparent; }\n .logo-overlay-btn-replace:hover { background: rgba(99,102,241,0.12); }\n .logo-overlay-btn-discard { color: var(--red-text); border-color: rgba(224,46,46,0.4); background: transparent; }\n .logo-overlay-btn-discard:hover { background: rgba(224,46,46,0.1); }\n .btn-text { background: none; border: none; color: var(--blue); font-size: 11px; font-weight: 600; cursor: pointer; padding: 0; }\n .btn-text:hover { text-decoration: underline; }\n .btn-text-danger { color: var(--red-text); }\n\n /* \u2500\u2500\u2500 Branding: Sticky save bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .br-save-bar {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 40;\n background: rgba(28,28,32,0.85);\n backdrop-filter: blur(12px);\n border-top: 1px solid var(--border-subtle);\n padding: 16px 40px;\n display: none;\n }\n .br-save-bar.visible { display: block; }\n .br-save-bar-inner {\n max-width: 1120px;\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n }\n .br-save-hint {\n font-size: 12px;\n color: var(--text-tertiary);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .br-save-actions {\n display: flex;\n gap: 8px;\n }\n .br-save-actions .btn { width: auto; }\n\n /* \u2500\u2500\u2500 Branding: Accent color swatches \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .accent-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n gap: 10px;\n }\n .accent-swatch {\n position: relative;\n height: 64px;\n border-radius: var(--radius);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 6px 8px;\n cursor: pointer;\n transition: transform 0.1s ease, box-shadow 0.15s ease;\n border: 2px solid transparent;\n }\n .accent-swatch:hover { transform: scale(1.02); }\n .accent-swatch.selected { border-color: var(--text-white); }\n .accent-swatch .accent-check {\n position: absolute;\n top: 4px;\n right: 4px;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: rgba(0,0,0,0.5);\n display: none;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 12px;\n }\n .accent-swatch.selected .accent-check { display: flex; }\n .accent-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }\n .accent-hex { font-size: 10px; font-weight: 700; }\n\n /* \u2500\u2500\u2500 Branding tab: Language grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .lang-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n gap: 4px 16px;\n }\n .lang-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n padding: 4px 0;\n cursor: pointer;\n }\n\n /* \u2500\u2500\u2500 Crop dialog \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n dialog.dialog-wide { max-width: 660px; }\n .crop-container {\n width: 100%;\n height: 400px;\n background: var(--bg);\n border-radius: var(--radius-sm);\n overflow: hidden;\n }\n .crop-toolbar {\n display: flex;\n justify-content: center;\n gap: 6px;\n padding: 12px 0 4px;\n }\n .crop-tool-btn {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--bg-input);\n border: 1px solid var(--border-strong);\n border-radius: var(--radius-sm);\n color: var(--text-secondary);\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease;\n }\n .crop-tool-btn:hover { background: var(--bg-hover); color: var(--text); }\n .crop-tool-btn svg { width: 18px; height: 18px; }\n\n /* Crop dialog progress */\n .crop-progress {\n width: 120px;\n height: 4px;\n background: var(--bg-hover);\n border-radius: 2px;\n overflow: hidden;\n }\n .crop-progress-bar {\n width: 30%;\n height: 100%;\n background: var(--blue);\n border-radius: 2px;\n animation: cropProgress 1.5s ease infinite;\n }\n @keyframes cropProgress {\n 0% { width: 10%; margin-left: 0; }\n 50% { width: 40%; margin-left: 30%; }\n 100% { width: 10%; margin-left: 90%; }\n }\n\n /* cropperjs dark theme overrides */\n .cropper-view-box { outline-color: var(--blue) !important; }\n .cropper-line { background-color: var(--blue) !important; }\n .cropper-point { background-color: var(--blue) !important; width: 8px !important; height: 8px !important; }\n .cropper-modal { background-color: rgba(0,0,0,0.6) !important; }\n .cropper-dashed { border-color: rgba(255,255,255,0.3) !important; }\n\n /* \u2500\u2500\u2500 Branding: Mobile responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 768px) {\n .br-two-col { grid-template-columns: 1fr; gap: 16px; }\n .logo-grid { grid-template-columns: repeat(2, 1fr); }\n .br-save-bar { padding: 12px 16px; }\n .br-save-bar-inner { flex-direction: column; gap: 12px; text-align: center; }\n .br-save-actions { justify-content: center; }\n .tab-panel { padding: 20px 16px; }\n .accent-grid { grid-template-columns: repeat(3, 1fr); }\n .br-panel > div[style*=\"grid-template-columns: 1fr 1fr\"] { grid-template-columns: 1fr !important; }\n }\n @media (max-width: 480px) {\n .logo-grid { grid-template-columns: 1fr; }\n .accent-grid { grid-template-columns: repeat(2, 1fr); }\n }\n\n /* \u2500\u2500\u2500 Appearance tab: Color input \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .color-input {\n width: 40px;\n height: 28px;\n padding: 0;\n border: 1px solid var(--border-strong);\n border-radius: 4px;\n cursor: pointer;\n background: none;\n }\n\n /* \u2500\u2500\u2500 Auto theme: follow system preference \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (prefers-color-scheme: light) {\n [data-theme=\"auto\"] {\n --bg-root: #f8f9fa;\n --bg-surface: #ffffff;\n --bg-card: #ffffff;\n --bg-elevated: #f0f1f3;\n --bg-hover: #e9eaec;\n --bg-active: #dddee1;\n --bg-input: rgba(0,0,0,0.04);\n --border: rgba(0,0,0,0.10);\n --border-subtle: rgba(0,0,0,0.06);\n --border-strong: rgba(0,0,0,0.15);\n --border-focus: rgba(0,0,0,0.25);\n --text: #1a1a1a;\n --text-secondary: #6b7280;\n --text-tertiary: #9ca3af;\n --text-placeholder: #c0c5ce;\n --text-white: #1a1a1a;\n --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.06);\n --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.06);\n --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.12), 0 4px 6px -4px rgba(0,0,0,0.08);\n --shadow-focus: 0 0 0 1px rgba(0,0,0,0.08), 0 0 0 3px rgba(108,71,255,0.2);\n color-scheme: light;\n }\n }\n\n /* \u2500\u2500\u2500 Skeleton loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @keyframes shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n }\n .skel {\n display: block;\n background: linear-gradient(90deg, var(--bg-hover) 25%, var(--bg-active, rgba(255,255,255,0.06)) 50%, var(--bg-hover) 75%);\n background-size: 200% 100%;\n animation: shimmer 1.4s infinite;\n border-radius: 4px;\n }\n .skel-circle { border-radius: 50%; }\n .skel-row td { padding: 12px 16px; }\n\n /* \u2500\u2500\u2500 Responsive: column visibility helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n /* col-hide-lg: hide on tablet (\u2264900px) */\n @media (max-width: 900px) {\n .col-hide-lg { display: none; }\n }\n /* col-hide-md: hide on small tablet (\u2264768px) */\n @media (max-width: 768px) {\n .col-hide-md { display: none; }\n }\n /* col-hide-sm: hide on mobile (\u2264640px) */\n @media (max-width: 640px) {\n .col-hide-sm { display: none; }\n }\n\n /* \u2500\u2500\u2500 Mobile sidebar drawer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .sidebar-toggle { display: none; }\n .sidebar-overlay {\n display: none;\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.5);\n z-index: 200;\n opacity: 0;\n transition: opacity 0.25s ease;\n }\n .sidebar-overlay-visible {\n display: block;\n opacity: 1;\n }\n .sidebar {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 280px;\n max-width: 80vw;\n background: var(--bg-surface);\n border-right: 1px solid var(--border);\n z-index: 210;\n transform: translateX(-100%);\n transition: transform 0.25s ease;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n }\n .sidebar-open { transform: translateX(0); }\n .sidebar-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n border-bottom: 1px solid var(--border);\n }\n .sidebar-header h2 {\n font-size: 15px;\n font-weight: 600;\n color: var(--text-white);\n margin: 0;\n }\n .sidebar-nav {\n padding: 8px;\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n .sidebar-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n border: none;\n background: transparent;\n border-radius: var(--radius-sm);\n font-size: 14px;\n font-weight: 500;\n color: var(--text-secondary);\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n text-align: left;\n width: 100%;\n -webkit-tap-highlight-color: transparent;\n }\n .sidebar-item:hover { background: var(--bg-hover); color: var(--text); }\n .sidebar-item:active { background: var(--bg-active); }\n .sidebar-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-tertiary); transition: color 0.15s; }\n .sidebar-item:hover svg { color: var(--text-secondary); }\n .sidebar-item-active {\n background: var(--bg-hover);\n color: var(--text-white);\n }\n .sidebar-item-active svg { color: var(--text-white); }\n\n /* \u2500\u2500\u2500 Responsive: show sidebar toggle, hide tabs on mobile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .sidebar-toggle { display: flex; }\n .sidebar { display: block; }\n .tabs { display: none; }\n }\n\n /* \u2500\u2500\u2500 Responsive: toolbar / filter bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .tab-toolbar {\n flex-wrap: wrap;\n gap: 6px;\n }\n .search-wrapper {\n width: 100%;\n min-width: 0;\n }\n .tab-toolbar .select {\n flex: 1;\n min-width: 0;\n font-size: 12px;\n padding: 0 8px;\n height: 34px;\n }\n .tab-toolbar .btn-sm {\n font-size: 12px;\n padding: 0 10px;\n height: 34px;\n }\n }\n\n /* \u2500\u2500\u2500 Responsive: header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .admin-header-left {\n gap: 6px;\n min-width: 0;\n overflow: hidden;\n }\n .admin-header-left a {\n max-width: 80px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex-shrink: 1;\n }\n .admin-header h1 {\n font-size: 13px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .header-dot { display: none; }\n }\n\n /* \u2500\u2500\u2500 Responsive: table compact \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .table th, .table td {\n padding: 10px 8px;\n font-size: 13px;\n }\n .table th {\n font-size: 10px;\n }\n .member-identity {\n gap: 8px;\n }\n .member-name {\n font-size: 13px;\n max-width: 120px;\n }\n .member-email {\n font-size: 11px;\n max-width: 100px;\n }\n .action-cell { width: 32px; }\n }\n\n /* \u2500\u2500\u2500 Responsive: pagination \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .pagination {\n flex-direction: column;\n gap: 8px;\n align-items: center;\n font-size: 12px;\n }\n .pagination-info {\n font-size: 12px;\n }\n .page-btn {\n min-width: 28px;\n height: 28px;\n font-size: 12px;\n }\n }\n\n /* \u2500\u2500\u2500 Responsive: section titles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .section-title { font-size: 17px; }\n .section-desc { font-size: 13px; margin-bottom: 20px; padding-bottom: 16px; }\n }\n\n /* \u2500\u2500\u2500 Responsive: settings card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 640px) {\n .settings-card { border-radius: var(--radius-sm); }\n .settings-card-header {\n gap: 8px;\n padding: 12px 14px;\n }\n .settings-card-header-desc { text-align: left; }\n .settings-row {\n gap: 6px;\n padding: 12px 14px;\n }\n .settings-row.settings-row-stack {\n flex-direction: column;\n align-items: flex-start;\n }\n }\n\n /* \u2500\u2500\u2500 Responsive: table horizontal scroll on very small screens \u2500\u2500\u2500 */\n @media (max-width: 480px) {\n .settings-card {\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n .settings-card .table {\n min-width: 360px;\n }\n }\n\n /* \u2500\u2500\u2500 Settings: OAuth card grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .st-oauth-grid {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 8px 20px 16px;\n }\n .st-oauth-card {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n border: 1px solid var(--border);\n border-radius: var(--radius-md);\n cursor: pointer;\n transition: border-color 0.15s, background 0.15s;\n min-width: 110px;\n }\n .st-oauth-card:hover {\n border-color: var(--border-strong);\n background: var(--bg-hover);\n }\n .st-oauth-card-icon {\n display: inline-flex;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n }\n .st-oauth-card-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--text);\n }\n .st-oauth-dot {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n flex-shrink: 0;\n margin-left: auto;\n }\n .st-oauth-dot-on { background: var(--green-text); }\n .st-oauth-dot-off { background: var(--text-tertiary); }\n\n /* \u2500\u2500\u2500 Settings: dual panel (login methods + email) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .st-dual-panel {\n display: flex;\n gap: 16px;\n }\n @media (max-width: 640px) {\n .st-dual-panel {\n flex-direction: column;\n }\n }\n\n /* \u2500\u2500\u2500 Settings: email hint \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .st-hint {\n font-size: 11px;\n color: var(--yellow-text, #92400e);\n font-weight: 400;\n margin-left: 4px;\n }\n\n /* \u2500\u2500\u2500 Federation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .fed-status-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n font-weight: 500;\n padding: 2px 8px;\n border-radius: var(--radius-full);\n }\n .fed-status-badge.master {\n background: var(--blue-light);\n color: var(--blue-muted);\n }\n .fed-status-badge.member {\n background: var(--green-light);\n color: var(--green-text);\n }\n .fed-star {\n color: var(--yellow);\n font-size: 14px;\n }\n .fed-site-row {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 20px;\n border-bottom: 1px solid var(--border);\n }\n .fed-site-row:last-child { border-bottom: none; }\n .fed-site-row { flex-wrap: wrap; }\n .fed-site-name { flex: 1 1 0%; min-width: 120px; font-weight: 500; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 6px; overflow: hidden; flex-wrap: nowrap; }\n .fed-site-name > span { flex-shrink: 0; }\n .fed-site-name > span.fed-site-label { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .fed-site-url { flex: 0 0 500px; min-width: 0; font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .fed-site-url a { color: var(--text-secondary); text-decoration: none; }\n .fed-site-url a:hover { color: var(--blue); text-decoration: underline; }\n .fed-site-role { width: 80px; font-size: 12px; color: var(--text-tertiary); }\n .fed-site-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; min-width: 64px; flex-shrink: 0; }\n @media (max-width: 768px) {\n .fed-site-row { flex-wrap: wrap; }\n .fed-site-name { flex: 1 1 100%; }\n .fed-site-url { flex: 1 1 auto; }\n }\n .fed-delegation-status { display: flex; align-items: center; gap: 8px; padding: 12px 20px; font-size: 13px; color: var(--text-secondary); }\n .fed-delegation-status .checkmark { color: var(--green); font-weight: 600; }\n .fed-init-buttons { display: flex; gap: 12px; justify-content: center; padding: 8px 20px 16px; }\n .fed-init-buttons .btn { width: auto; min-width: 160px; }\n";
9
9
  //# sourceMappingURL=styles.d.ts.map
package/dist/pages/admin/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/pages/admin/styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,YAAY,67rEA2qExB,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/pages/admin/styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,YAAY,mrsEAqrExB,CAAC"}
package/dist/pages/admin/styles.js CHANGED
@@ -1164,11 +1164,20 @@ export const ADMIN_STYLES = /* css */ `
1164
1164
  max-width: 520px;
1165
1165
  width: 90%;
1166
1166
  box-shadow: var(--shadow-lg);
1167
+ max-height: calc(100vh - 32px);
1168
+ max-height: calc(100dvh - 32px);
1167
1169
  overflow: hidden;
1168
1170
  animation: modalIn 0.2s ease;
1169
1171
  }
1172
+ dialog[open] {
1173
+ display: flex;
1174
+ flex-direction: column;
1175
+ }
1170
1176
  dialog::backdrop { background: rgba(0,0,0,0.7); }
1171
1177
  .dialog-content {
1178
+ min-height: 0;
1179
+ overflow-y: auto;
1180
+ overscroll-behavior: contain;
1172
1181
  padding: 24px;
1173
1182
  }
1174
1183
  .dialog-content h3 {
@@ -1186,6 +1195,7 @@ export const ADMIN_STYLES = /* css */ `
1186
1195
  }
1187
1196
  .dialog-actions {
1188
1197
  display: flex;
1198
+ flex: 0 0 auto;
1189
1199
  justify-content: flex-end;
1190
1200
  gap: 8px;
1191
1201
  padding: 16px 24px;
package/dist/pages/admin/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/pages/admin/styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2qErC,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/pages/admin/styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqrErC,CAAC"}
package/dist/pages/admin/tab-access-keys.d.ts CHANGED
@@ -3,6 +3,6 @@
3
3
  */
4
4
  type TFn = (key: string, params?: Record<string, string>) => string;
5
5
  export declare function accessKeysTabHtml(t: TFn): string;
6
- export declare const ACCESS_KEYS_TAB_SCRIPT = "\nvar akPage = 1;\nvar akPageSize = 20;\nvar akSearchTimer = null;\n\nfunction debounceAkSearch() {\n clearTimeout(akSearchTimer);\n akSearchTimer = setTimeout(function() { loadAccessKeys(1); }, 300);\n}\n\nasync function loadAccessKeys(page) {\n akPage = page || 1;\n var search = document.getElementById(\"ak-search\").value.trim();\n var qs = \"?page=\" + akPage + \"&pageSize=\" + akPageSize;\n if (search) qs += \"&search=\" + encodeURIComponent(search);\n document.getElementById(\"ak-table-wrap\").innerHTML = skeletonTable(7, 5);\n document.getElementById(\"ak-pagination\").innerHTML = \"\";\n var data = await apiRaw(\"GET\", \"/.well-known/service/api/access-keys\" + qs);\n if (!data || data.error) {\n document.getElementById(\"ak-table-wrap\").innerHTML = '<div class=\"empty-state\"><div class=\"empty-state-title\">' + __t(\"accessKeys.loadFailed\") + '</div></div>';\n return;\n }\n renderAccessKeys(data.keys, { total: data.total, page: data.page, pageSize: data.pageSize });\n}\n\nfunction renderAccessKeys(keys, paging) {\n var wrap = document.getElementById(\"ak-table-wrap\");\n if (!keys || keys.length === 0) {\n wrap.innerHTML = '<div class=\"empty-state\"><div class=\"empty-state-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4\"/></svg></div><div class=\"empty-state-title\">' + __t(\"accessKeys.noKeys\") + '</div><div class=\"empty-state-desc\">' + __t(\"accessKeys.noKeysHint\") + '</div></div>';\n document.getElementById(\"ak-pagination\").innerHTML = \"\";\n return;\n }\n\n var html = '<table class=\"table\"><thead><tr><th>' + __t(\"accessKeys.col.keyId\") + '</th><th>' + __t(\"accessKeys.col.role\") + '</th><th class=\"col-hide-sm\">' + __t(\"accessKeys.col.remark\") + '</th><th class=\"col-hide-md\">' + __t(\"accessKeys.col.createdBy\") + '</th><th>' + __t(\"accessKeys.col.expires\") + '</th><th class=\"col-hide-md\">' + __t(\"accessKeys.col.lastUsed\") + '</th><th>' + __t(\"common.actions\") + '</th></tr></thead><tbody>';\n keys.forEach(function(k) {\n var keyIdHtml = '<did-address did=\"' + escapeHtml(k.accessKeyId) + '\" compact></did-address>';\n var roleBadge = '<span class=\"badge badge-' + k.role + '\">' + __t(\"common.\" + k.role) + '</span>';\n var remark = k.remark ? escapeHtml(k.remark.length > 40 ? k.remark.slice(0, 40) + \"...\" : k.remark) : '<span style=\"color:var(--text-secondary)\">\u2014</span>';\n var creator = k.createdByName\n ? escapeHtml(k.createdByName)\n : '<did-address did=\"' + escapeHtml(k.createdBy) + '\" compact></did-address>';\n var expiry = k.expireAt ? (new Date(k.expireAt) < new Date() ? '<span style=\"color:var(--error)\">' + __t(\"common.expired\") + '</span>' : relativeTime(k.expireAt)) : __t(\"common.never\");\n var lastUsed = k.lastUsedAt ? relativeTime(k.lastUsedAt) : __t(\"common.never\");\n var deleteLabel = k.remark ? escapeHtml(k.remark) : truncateDid(k.accessKeyId);\n\n html += '<tr>';\n html += '<td><code style=\"font-size:12px\">' + keyIdHtml + '</code></td>';\n html += '<td>' + roleBadge + '</td>';\n html += '<td class=\"col-hide-sm\">' + remark + '</td>';\n html += '<td class=\"col-hide-md\">' + creator + '</td>';\n html += '<td>' + expiry + '</td>';\n html += '<td class=\"col-hide-md\">' + lastUsed + '</td>';\n html += '<td class=\"action-cell\"><button class=\"action-trigger\" onclick=\"event.stopPropagation();toggleActionMenu(this)\">\u22EF</button><div class=\"action-menu\"><button class=\"action-menu-item\" onclick=\"event.stopPropagation();openEditAkDialog(\\''+k.accessKeyId+'\\')\">' + __t(\"common.edit\") + '</button><div class=\"action-menu-sep\"></div><button class=\"action-menu-item danger\" onclick=\"event.stopPropagation();confirmDeleteAk(\\''+k.accessKeyId+'\\',\\''+escapeHtml(deleteLabel)+'\\')\">' + __t(\"common.delete\") + '</button></div></td>';\n html += '</tr>';\n });\n html += '</tbody></table>';\n wrap.innerHTML = html;\n\n renderPagination(\"ak-pagination\", paging, loadAccessKeys);\n}\n\nfunction openCreateAkDialog() {\n var callerRole = __caller.role;\n var roleOptions = '<option value=\"guest\">Guest</option>';\n if (callerRole === \"member\" || callerRole === \"admin\" || callerRole === \"owner\") roleOptions += '<option value=\"member\"' + (callerRole === \"member\" ? ' selected' : '') + '>Member</option>';\n if (callerRole === \"admin\" || callerRole === \"owner\") roleOptions += '<option value=\"admin\"' + (callerRole === \"admin\" ? ' selected' : '') + '>Admin</option>';\n if (callerRole === \"owner\") roleOptions += '<option value=\"owner\">Owner</option>';\n\n var expiryOptions = '<option value=\"\">' + __t(\"accessKeys.expirations.never\") + '</option><option value=\"7d\">' + __t(\"accessKeys.expirations.days7\") + '</option><option value=\"30d\">' + __t(\"accessKeys.expirations.days30\") + '</option><option value=\"90d\">' + __t(\"accessKeys.expirations.days90\") + '</option><option value=\"custom\">' + __t(\"accessKeys.expirations.custom\") + '</option>';\n\n var html = '<div class=\"form-group\"><label class=\"form-label\">' + __t(\"accessKeys.role\") + '</label><select class=\"select\" id=\"ak-create-role\">' + roleOptions + '</select></div>';\n html += '<div class=\"form-group\"><label class=\"form-label\">' + __t(\"accessKeys.remark\") + '</label><input type=\"text\" class=\"input\" id=\"ak-create-remark\" placeholder=\"' + __t(\"accessKeys.remarkPlaceholder\") + '\" maxlength=\"200\" /></div>';\n html += '<div class=\"form-group\"><label class=\"form-label\">' + __t(\"accessKeys.expiration\") + '</label><select class=\"select\" id=\"ak-create-expiry\" onchange=\"toggleAkCustomExpiry()\">' + expiryOptions + '</select></div>';\n html += '<div class=\"form-group hidden\" id=\"ak-custom-expiry-wrap\"><label class=\"form-label\">' + __t(\"accessKeys.customDate\") + '</label><input type=\"datetime-local\" class=\"input\" id=\"ak-create-custom-expiry\" /></div>';\n\n openDialog(__t(\"accessKeys.createTitle\"), html, __t(\"common.save\"), async function() {\n var role = document.getElementById(\"ak-create-role\").value;\n var remark = document.getElementById(\"ak-create-remark\").value;\n var expirySelect = document.getElementById(\"ak-create-expiry\").value;\n var expireAt = null;\n\n if (expirySelect === \"custom\") {\n var customDate = document.getElementById(\"ak-create-custom-expiry\").value;\n if (!customDate) { showToast(__t(\"accessKeys.selectExpDate\"), \"error\"); return; }\n expireAt = new Date(customDate).toISOString();\n } else if (expirySelect) {\n var days = parseInt(expirySelect);\n expireAt = new Date(Date.now() + days * 86400000).toISOString();\n }\n\n var result = await apiRaw(\"POST\", \"/.well-known/service/api/access-keys\", { role: role, remark: remark, expireAt: expireAt });\n if (!result || result.error) {\n showToast(result ? result.error : __t(\"accessKeys.createFailed\"), \"error\");\n return;\n }\n\n closeDialog();\n showSecretDialog(result.accessKeySecret);\n loadAccessKeys(1);\n });\n}\n\nfunction toggleAkCustomExpiry() {\n var sel = document.getElementById(\"ak-create-expiry\").value;\n var wrap = document.getElementById(\"ak-custom-expiry-wrap\");\n if (sel === \"custom\") wrap.classList.remove(\"hidden\");\n else wrap.classList.add(\"hidden\");\n}\n\n// Slugify a display name into something safe to use as an MCP server name\n// (lowercase, alnum + hyphens). Falls back to a fixed default when empty.\nfunction akSlug(s) {\n var slug = String(s || \"\").toLowerCase().replace(/[^a-z0-9]+/g, \"-\").replace(/^-+|-+$/g, \"\");\n return slug || \"did-connect\";\n}\n\nvar __akSnippets = null;\n\nfunction showSecretDialog(secret) {\n var html = '<div style=\"margin-bottom:12px;color:var(--error);font-weight:500\">' + __t(\"accessKeys.secretWarning\") + '</div>';\n var copyIconSvg = '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"/></svg>';\n var copyBtnStyle = 'position:absolute;top:4px;right:4px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-base);border:1px solid var(--border);border-radius:4px;cursor:pointer;color:var(--text-secondary);transition:color 0.15s,border-color 0.15s';\n html += '<div style=\"position:relative\"><code id=\"ak-secret-display\" style=\"display:block;padding:12px 40px 12px 12px;background:var(--bg-base);border:1px solid var(--border);border-radius:6px;font-size:13px;word-break:break-all;user-select:all;overflow-wrap:anywhere\">' + escapeHtml(secret) + '</code>';\n html += '<button id=\"ak-copy-btn\" style=\"' + copyBtnStyle + '\" onclick=\"copyAkSecret()\" title=\"' + __t(\"common.copy\") + '\">' + copyIconSvg + '</button></div>';\n\n var mcpUrl = location.origin + \"/mcp\";\n var serverName = akSlug(__pageData && __pageData.appName);\n\n __akSnippets = {\n curl: {\n label: __t(\"accessKeys.tabCurl\"),\n hint: \"\",\n code: 'curl -H \"Authorization: Bearer ' + secret + '\" ' + location.origin + '/.well-known/service/api/did/session',\n },\n claude: {\n label: __t(\"accessKeys.tabClaude\"),\n hint: \"\",\n code: 'claude mcp add --transport http ' + serverName + ' ' + mcpUrl + ' --header \"Authorization: Bearer ' + secret + '\"',\n },\n codex: {\n label: __t(\"accessKeys.tabCodex\"),\n hint: __t(\"accessKeys.addToConfig\", { file: \"~/.codex/config.toml\" }),\n code: '[mcp_servers.' + serverName + ']\\nurl = \"' + mcpUrl + '\"\\nhttp_headers = { \"Authorization\" = \"Bearer ' + secret + '\" }',\n },\n cursor: {\n label: __t(\"accessKeys.tabCursor\"),\n hint: __t(\"accessKeys.addToConfig\", { file: \"mcp.json\" }),\n code: '{\\n \"mcpServers\": {\\n \"' + serverName + '\": {\\n \"url\": \"' + mcpUrl + '\",\\n \"headers\": {\\n \"Authorization\": \"Bearer ' + secret + '\"\\n }\\n }\\n }\\n}',\n },\n };\n\n html += '<div style=\"margin-top:16px;font-size:13px;color:var(--text-secondary)\"><strong>' + __t(\"accessKeys.usage\") + '</strong></div>';\n html += '<div style=\"display:flex;gap:4px;margin-top:8px;border-bottom:1px solid var(--border)\">';\n [\"curl\", \"claude\", \"codex\", \"cursor\"].forEach(function(key) {\n var isActive = key === \"curl\";\n html += '<button type=\"button\" class=\"ak-tab-btn\" data-ak-tab=\"' + key + '\" onclick=\"switchAkTab(\\'' + key + '\\')\" style=\"padding:6px 12px;font-size:12px;font-weight:500;border:none;background:none;cursor:pointer;color:' + (isActive ? \"var(--text-white)\" : \"var(--text-tertiary)\") + ';border-bottom:2px solid ' + (isActive ? \"var(--text-white)\" : \"transparent\") + '\">' + __akSnippets[key].label + '</button>';\n });\n html += '</div>';\n html += '<div id=\"ak-snippet-hint\" style=\"margin-top:8px;font-size:12px;color:var(--text-secondary);display:none\"></div>';\n html += '<div style=\"position:relative;margin-top:6px\"><pre id=\"ak-snippet-display\" style=\"margin:0;display:block;padding:12px 40px 12px 12px;background:var(--bg-base);border:1px solid var(--border);border-radius:6px;font-size:12px;white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;user-select:all;font-family:inherit\"></pre>';\n html += '<button id=\"ak-snippet-copy-btn\" style=\"' + copyBtnStyle + '\" onclick=\"copyAkSnippet()\" title=\"' + __t(\"common.copy\") + '\">' + copyIconSvg + '</button></div>';\n\n openDialog(__t(\"accessKeys.secretTitle\"), html, __t(\"accessKeys.done\"), function() {\n document.getElementById(\"ak-secret-display\").textContent = \"\";\n __akSnippets = null;\n closeDialog();\n });\n\n switchAkTab(\"curl\");\n}\n\nfunction switchAkTab(key) {\n var snippet = __akSnippets && __akSnippets[key];\n if (!snippet) return;\n\n document.querySelectorAll(\".ak-tab-btn\").forEach(function(btn) {\n var isActive = btn.getAttribute(\"data-ak-tab\") === key;\n btn.style.color = isActive ? \"var(--text-white)\" : \"var(--text-tertiary)\";\n btn.style.borderBottomColor = isActive ? \"var(--text-white)\" : \"transparent\";\n });\n\n var hintEl = document.getElementById(\"ak-snippet-hint\");\n if (hintEl) {\n hintEl.textContent = snippet.hint || \"\";\n hintEl.style.display = snippet.hint ? \"block\" : \"none\";\n }\n var displayEl = document.getElementById(\"ak-snippet-display\");\n if (displayEl) displayEl.textContent = snippet.code;\n}\n\nfunction copyAkSnippet() {\n var text = document.getElementById(\"ak-snippet-display\").textContent;\n var btn = document.getElementById(\"ak-snippet-copy-btn\");\n var origHtml = btn.innerHTML;\n function onCopied() {\n btn.innerHTML = '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 13l4 4L19 7\"/></svg>';\n btn.style.color = \"var(--green)\";\n setTimeout(function() { btn.innerHTML = origHtml; btn.style.color = \"\"; }, 2000);\n }\n if (navigator.clipboard && navigator.clipboard.writeText) {\n navigator.clipboard.writeText(text).then(onCopied).catch(function() {\n fallbackCopy(text);\n onCopied();\n });\n } else {\n fallbackCopy(text);\n onCopied();\n }\n}\n\nfunction copyAkSecret() {\n var text = document.getElementById(\"ak-secret-display\").textContent;\n var btn = document.getElementById(\"ak-copy-btn\");\n var origHtml = btn.innerHTML;\n function onCopied() {\n btn.innerHTML = '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 13l4 4L19 7\"/></svg>';\n btn.style.color = \"var(--green)\";\n setTimeout(function() { btn.innerHTML = origHtml; btn.style.color = \"\"; }, 2000);\n }\n if (navigator.clipboard && navigator.clipboard.writeText) {\n navigator.clipboard.writeText(text).then(onCopied).catch(function() {\n fallbackCopy(text);\n onCopied();\n });\n } else {\n fallbackCopy(text);\n onCopied();\n }\n}\n\nasync function openEditAkDialog(accessKeyId) {\n var data = await apiRaw(\"GET\", \"/.well-known/service/api/access-keys/\" + encodeURIComponent(accessKeyId));\n if (!data || data.error) { showToast(__t(\"accessKeys.loadKeyFailed\"), \"error\"); return; }\n\n var html = '<div class=\"form-group\"><label class=\"form-label\">' + __t(\"accessKeys.col.keyId\") + '</label><code style=\"font-size:12px\">' + escapeHtml(data.accessKeyId) + '</code></div>';\n html += '<div class=\"form-group\"><label class=\"form-label\">' + __t(\"accessKeys.role\") + '</label><span class=\"badge badge-' + data.role + '\">' + __t(\"common.\" + data.role) + '</span></div>';\n html += '<div class=\"form-group\"><label class=\"form-label\">' + __t(\"accessKeys.remark\") + '</label><input type=\"text\" class=\"input\" id=\"ak-edit-remark\" value=\"' + escapeHtml(data.remark || \"\") + '\" maxlength=\"200\" /></div>';\n html += '<div class=\"form-group\"><label class=\"form-label\">' + __t(\"accessKeys.expiration\") + '</label><input type=\"datetime-local\" class=\"input\" id=\"ak-edit-expiry\" value=\"' + (data.expireAt ? data.expireAt.slice(0,16) : \"\") + '\" /> <label style=\"margin-top:4px;display:block;font-size:13px\"><input type=\"checkbox\" id=\"ak-edit-no-expiry\"' + (data.expireAt ? \"\" : \" checked\") + ' onchange=\"toggleAkEditExpiry()\" /> ' + __t(\"accessKeys.neverExpires\") + '</label></div>';\n\n openDialog(__t(\"accessKeys.editTitle\"), html, __t(\"common.save\"), async function() {\n var remark = document.getElementById(\"ak-edit-remark\").value;\n var noExpiry = document.getElementById(\"ak-edit-no-expiry\").checked;\n var expireAt = noExpiry ? null : (document.getElementById(\"ak-edit-expiry\").value ? new Date(document.getElementById(\"ak-edit-expiry\").value).toISOString() : undefined);\n\n var body = { remark: remark };\n if (expireAt !== undefined) body.expireAt = expireAt;\n\n var result = await apiRaw(\"PUT\", \"/.well-known/service/api/access-keys/\" + encodeURIComponent(accessKeyId), body);\n if (!result || result.error) {\n showToast(result ? result.error : __t(\"accessKeys.updateFailed\"), \"error\");\n return;\n }\n closeDialog();\n showToast(__t(\"accessKeys.keyUpdated\"), \"success\");\n loadAccessKeys(akPage);\n });\n}\n\nfunction toggleAkEditExpiry() {\n var noExpiry = document.getElementById(\"ak-edit-no-expiry\").checked;\n document.getElementById(\"ak-edit-expiry\").disabled = noExpiry;\n}\n\nfunction confirmDeleteAk(accessKeyId, label) {\n openDialog(__t(\"accessKeys.deleteTitle\"), '<p>' + __t(\"accessKeys.deleteMsg\", { label: escapeHtml(label) }) + '</p><p style=\"color:var(--error)\">' + __t(\"accessKeys.deleteWarning\") + '</p>', __t(\"common.delete\"), async function() {\n var result = await apiRaw(\"DELETE\", \"/.well-known/service/api/access-keys/\" + encodeURIComponent(accessKeyId));\n if (result && result.error) {\n showToast(result.error, \"error\");\n return;\n }\n closeDialog();\n showToast(__t(\"accessKeys.keyDeleted\"), \"success\");\n loadAccessKeys(akPage);\n });\n}\n\n// Direct API call (bypasses team handler's /team prefix)\nasync function apiRaw(method, path, body) {\n try {\n var opts = { method: method, headers: { \"Accept\": \"application/json\" } };\n if (body !== undefined) {\n opts.headers[\"Content-Type\"] = \"application/json\";\n opts.body = JSON.stringify(body);\n }\n var res = await fetch(path, opts);\n if (res.status === 204) return {};\n return await res.json();\n } catch(e) {\n return null;\n }\n}\n\nregisterTab(\"access-keys\", function() { loadAccessKeys(1); });\n";
6
+ export declare const ACCESS_KEYS_TAB_SCRIPT = "\nvar akPage = 1;\nvar akPageSize = 20;\nvar akSearchTimer = null;\n\nfunction debounceAkSearch() {\n clearTimeout(akSearchTimer);\n akSearchTimer = setTimeout(function() { loadAccessKeys(1); }, 300);\n}\n\nasync function loadAccessKeys(page) {\n akPage = page || 1;\n var search = document.getElementById(\"ak-search\").value.trim();\n var qs = \"?page=\" + akPage + \"&pageSize=\" + akPageSize;\n if (search) qs += \"&search=\" + encodeURIComponent(search);\n document.getElementById(\"ak-table-wrap\").innerHTML = skeletonTable(7, 5);\n document.getElementById(\"ak-pagination\").innerHTML = \"\";\n var data = await apiRaw(\"GET\", \"/.well-known/service/api/access-keys\" + qs);\n if (!data || data.error) {\n document.getElementById(\"ak-table-wrap\").innerHTML = '<div class=\"empty-state\"><div class=\"empty-state-title\">' + __t(\"accessKeys.loadFailed\") + '</div></div>';\n return;\n }\n renderAccessKeys(data.keys, { total: data.total, page: data.page, pageSize: data.pageSize });\n}\n\nfunction renderAccessKeys(keys, paging) {\n var wrap = document.getElementById(\"ak-table-wrap\");\n if (!keys || keys.length === 0) {\n wrap.innerHTML = '<div class=\"empty-state\"><div class=\"empty-state-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4\"/></svg></div><div class=\"empty-state-title\">' + __t(\"accessKeys.noKeys\") + '</div><div class=\"empty-state-desc\">' + __t(\"accessKeys.noKeysHint\") + '</div></div>';\n document.getElementById(\"ak-pagination\").innerHTML = \"\";\n return;\n }\n\n var html = '<table class=\"table\"><thead><tr><th>' + __t(\"accessKeys.col.keyId\") + '</th><th>' + __t(\"accessKeys.col.role\") + '</th><th class=\"col-hide-sm\">' + __t(\"accessKeys.col.remark\") + '</th><th class=\"col-hide-md\">' + __t(\"accessKeys.col.createdBy\") + '</th><th>' + __t(\"accessKeys.col.expires\") + '</th><th class=\"col-hide-md\">' + __t(\"accessKeys.col.lastUsed\") + '</th><th>' + __t(\"common.actions\") + '</th></tr></thead><tbody>';\n keys.forEach(function(k) {\n var keyIdHtml = '<did-address did=\"' + escapeHtml(k.accessKeyId) + '\" compact></did-address>';\n var roleBadge = '<span class=\"badge badge-' + k.role + '\">' + __t(\"common.\" + k.role) + '</span>';\n var remark = k.remark ? escapeHtml(k.remark.length > 40 ? k.remark.slice(0, 40) + \"...\" : k.remark) : '<span style=\"color:var(--text-secondary)\">\u2014</span>';\n var creator = k.createdByName\n ? escapeHtml(k.createdByName)\n : '<did-address did=\"' + escapeHtml(k.createdBy) + '\" compact></did-address>';\n var expiry = k.expireAt ? (new Date(k.expireAt) < new Date() ? '<span style=\"color:var(--error)\">' + __t(\"common.expired\") + '</span>' : relativeTime(k.expireAt)) : __t(\"common.never\");\n var lastUsed = k.lastUsedAt ? relativeTime(k.lastUsedAt) : __t(\"common.never\");\n var deleteLabel = k.remark ? escapeHtml(k.remark) : truncateDid(k.accessKeyId);\n\n html += '<tr>';\n html += '<td><code style=\"font-size:12px\">' + keyIdHtml + '</code></td>';\n html += '<td>' + roleBadge + '</td>';\n html += '<td class=\"col-hide-sm\">' + remark + '</td>';\n html += '<td class=\"col-hide-md\">' + creator + '</td>';\n html += '<td>' + expiry + '</td>';\n html += '<td class=\"col-hide-md\">' + lastUsed + '</td>';\n html += '<td class=\"action-cell\"><button class=\"action-trigger\" onclick=\"event.stopPropagation();toggleActionMenu(this)\">\u22EF</button><div class=\"action-menu\"><button class=\"action-menu-item\" onclick=\"event.stopPropagation();openEditAkDialog(\\''+k.accessKeyId+'\\')\">' + __t(\"common.edit\") + '</button><div class=\"action-menu-sep\"></div><button class=\"action-menu-item danger\" onclick=\"event.stopPropagation();confirmDeleteAk(\\''+k.accessKeyId+'\\',\\''+escapeHtml(deleteLabel)+'\\')\">' + __t(\"common.delete\") + '</button></div></td>';\n html += '</tr>';\n });\n html += '</tbody></table>';\n wrap.innerHTML = html;\n\n renderPagination(\"ak-pagination\", paging, loadAccessKeys);\n}\n\nfunction openCreateAkDialog() {\n var callerRole = __caller.role;\n var roleOptions = '<option value=\"guest\">' + __t(\"common.guest\") + '</option>';\n if (callerRole === \"member\" || callerRole === \"admin\" || callerRole === \"owner\") roleOptions += '<option value=\"member\"' + (callerRole === \"member\" ? ' selected' : '') + '>' + __t(\"common.member\") + '</option>';\n if (callerRole === \"admin\" || callerRole === \"owner\") roleOptions += '<option value=\"admin\"' + (callerRole === \"admin\" ? ' selected' : '') + '>' + __t(\"common.admin\") + '</option>';\n if (callerRole === \"owner\") roleOptions += '<option value=\"owner\">' + __t(\"common.owner\") + '</option>';\n\n var expiryOptions = '<option value=\"\">' + __t(\"accessKeys.expirations.never\") + '</option><option value=\"7d\">' + __t(\"accessKeys.expirations.days7\") + '</option><option value=\"30d\">' + __t(\"accessKeys.expirations.days30\") + '</option><option value=\"90d\">' + __t(\"accessKeys.expirations.days90\") + '</option><option value=\"custom\">' + __t(\"accessKeys.expirations.custom\") + '</option>';\n\n var html = '<div class=\"form-group\"><label class=\"form-label\">' + __t(\"accessKeys.role\") + '</label><select class=\"select\" id=\"ak-create-role\">' + roleOptions + '</select></div>';\n html += '<div class=\"form-group\"><label class=\"form-label\">' + __t(\"accessKeys.remark\") + '</label><input type=\"text\" class=\"input\" id=\"ak-create-remark\" placeholder=\"' + __t(\"accessKeys.remarkPlaceholder\") + '\" maxlength=\"200\" /></div>';\n html += '<div class=\"form-group\"><label class=\"form-label\">' + __t(\"accessKeys.expiration\") + '</label><select class=\"select\" id=\"ak-create-expiry\" onchange=\"toggleAkCustomExpiry()\">' + expiryOptions + '</select></div>';\n html += '<div class=\"form-group hidden\" id=\"ak-custom-expiry-wrap\"><label class=\"form-label\">' + __t(\"accessKeys.customDate\") + '</label><input type=\"datetime-local\" class=\"input\" id=\"ak-create-custom-expiry\" /></div>';\n\n openDialog(__t(\"accessKeys.createTitle\"), html, __t(\"common.save\"), async function() {\n var role = document.getElementById(\"ak-create-role\").value;\n var remark = document.getElementById(\"ak-create-remark\").value;\n var expirySelect = document.getElementById(\"ak-create-expiry\").value;\n var expireAt = null;\n\n if (expirySelect === \"custom\") {\n var customDate = document.getElementById(\"ak-create-custom-expiry\").value;\n if (!customDate) { showToast(__t(\"accessKeys.selectExpDate\"), \"error\"); return; }\n expireAt = new Date(customDate).toISOString();\n } else if (expirySelect) {\n var days = parseInt(expirySelect);\n expireAt = new Date(Date.now() + days * 86400000).toISOString();\n }\n\n var result = await apiRaw(\"POST\", \"/.well-known/service/api/access-keys\", { role: role, remark: remark, expireAt: expireAt });\n if (!result || result.error) {\n showToast(result ? result.error : __t(\"accessKeys.createFailed\"), \"error\");\n return;\n }\n\n closeDialog();\n showSecretDialog(result.accessKeySecret);\n loadAccessKeys(1);\n });\n}\n\nfunction toggleAkCustomExpiry() {\n var sel = document.getElementById(\"ak-create-expiry\").value;\n var wrap = document.getElementById(\"ak-custom-expiry-wrap\");\n if (sel === \"custom\") wrap.classList.remove(\"hidden\");\n else wrap.classList.add(\"hidden\");\n}\n\n// Slugify a display name into something safe to use as an MCP server name\n// (lowercase, alnum + hyphens). Falls back to a fixed default when empty.\nfunction akSlug(s) {\n var slug = String(s || \"\").toLowerCase().replace(/[^a-z0-9]+/g, \"-\").replace(/^-+|-+$/g, \"\");\n return slug || \"did-connect\";\n}\n\nvar __akSnippets = null;\n\nfunction showSecretDialog(secret) {\n var html = '<div style=\"margin-bottom:12px;color:var(--error);font-weight:500\">' + __t(\"accessKeys.secretWarning\") + '</div>';\n var copyIconSvg = '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"/></svg>';\n var copyBtnStyle = 'position:absolute;top:4px;right:4px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-base);border:1px solid var(--border);border-radius:4px;cursor:pointer;color:var(--text-secondary);transition:color 0.15s,border-color 0.15s';\n html += '<div style=\"position:relative\"><code id=\"ak-secret-display\" style=\"display:block;padding:12px 40px 12px 12px;background:var(--bg-base);border:1px solid var(--border);border-radius:6px;font-size:13px;word-break:break-all;user-select:all;overflow-wrap:anywhere\">' + escapeHtml(secret) + '</code>';\n html += '<button id=\"ak-copy-btn\" style=\"' + copyBtnStyle + '\" onclick=\"copyAkSecret()\" title=\"' + __t(\"common.copy\") + '\">' + copyIconSvg + '</button></div>';\n\n var mcpUrl = location.origin + \"/mcp\";\n var serverName = akSlug(__pageData && __pageData.appName);\n\n __akSnippets = {\n curl: {\n label: __t(\"accessKeys.tabCurl\"),\n hint: \"\",\n code: 'curl -H \"Authorization: Bearer ' + secret + '\" ' + location.origin + '/.well-known/service/api/did/session',\n },\n claude: {\n label: __t(\"accessKeys.tabClaude\"),\n hint: \"\",\n code: 'claude mcp add --transport http ' + serverName + ' ' + mcpUrl + ' --header \"Authorization: Bearer ' + secret + '\"',\n },\n codex: {\n label: __t(\"accessKeys.tabCodex\"),\n hint: __t(\"accessKeys.addToConfig\", { file: \"~/.codex/config.toml\" }),\n code: '[mcp_servers.' + serverName + ']\\nurl = \"' + mcpUrl + '\"\\nhttp_headers = { \"Authorization\" = \"Bearer ' + secret + '\" }',\n },\n cursor: {\n label: __t(\"accessKeys.tabCursor\"),\n hint: __t(\"accessKeys.addToConfig\", { file: \"mcp.json\" }),\n code: '{\\n \"mcpServers\": {\\n \"' + serverName + '\": {\\n \"url\": \"' + mcpUrl + '\",\\n \"headers\": {\\n \"Authorization\": \"Bearer ' + secret + '\"\\n }\\n }\\n }\\n}',\n },\n };\n\n html += '<div style=\"margin-top:16px;font-size:13px;color:var(--text-secondary)\"><strong>' + __t(\"accessKeys.usage\") + '</strong></div>';\n html += '<div style=\"display:flex;gap:4px;margin-top:8px;border-bottom:1px solid var(--border)\">';\n [\"curl\", \"claude\", \"codex\", \"cursor\"].forEach(function(key) {\n var isActive = key === \"curl\";\n html += '<button type=\"button\" class=\"ak-tab-btn\" data-ak-tab=\"' + key + '\" onclick=\"switchAkTab(\\'' + key + '\\')\" style=\"padding:6px 12px;font-size:12px;font-weight:500;border:none;background:none;cursor:pointer;color:' + (isActive ? \"var(--text-white)\" : \"var(--text-tertiary)\") + ';border-bottom:2px solid ' + (isActive ? \"var(--text-white)\" : \"transparent\") + '\">' + __akSnippets[key].label + '</button>';\n });\n html += '</div>';\n html += '<div id=\"ak-snippet-hint\" style=\"margin-top:8px;font-size:12px;color:var(--text-secondary);display:none\"></div>';\n html += '<div style=\"position:relative;margin-top:6px\"><pre id=\"ak-snippet-display\" style=\"margin:0;display:block;padding:12px 40px 12px 12px;background:var(--bg-base);border:1px solid var(--border);border-radius:6px;font-size:12px;white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;user-select:all;font-family:inherit\"></pre>';\n html += '<button id=\"ak-snippet-copy-btn\" style=\"' + copyBtnStyle + '\" onclick=\"copyAkSnippet()\" title=\"' + __t(\"common.copy\") + '\">' + copyIconSvg + '</button></div>';\n\n openDialog(__t(\"accessKeys.secretTitle\"), html, __t(\"accessKeys.done\"), function() {\n document.getElementById(\"ak-secret-display\").textContent = \"\";\n __akSnippets = null;\n closeDialog();\n });\n\n switchAkTab(\"curl\");\n}\n\nfunction switchAkTab(key) {\n var snippet = __akSnippets && __akSnippets[key];\n if (!snippet) return;\n\n document.querySelectorAll(\".ak-tab-btn\").forEach(function(btn) {\n var isActive = btn.getAttribute(\"data-ak-tab\") === key;\n btn.style.color = isActive ? \"var(--text-white)\" : \"var(--text-tertiary)\";\n btn.style.borderBottomColor = isActive ? \"var(--text-white)\" : \"transparent\";\n });\n\n var hintEl = document.getElementById(\"ak-snippet-hint\");\n if (hintEl) {\n hintEl.textContent = snippet.hint || \"\";\n hintEl.style.display = snippet.hint ? \"block\" : \"none\";\n }\n var displayEl = document.getElementById(\"ak-snippet-display\");\n if (displayEl) displayEl.textContent = snippet.code;\n}\n\nfunction copyAkSnippet() {\n var text = document.getElementById(\"ak-snippet-display\").textContent;\n var btn = document.getElementById(\"ak-snippet-copy-btn\");\n var origHtml = btn.innerHTML;\n function onCopied() {\n btn.innerHTML = '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 13l4 4L19 7\"/></svg>';\n btn.style.color = \"var(--green)\";\n setTimeout(function() { btn.innerHTML = origHtml; btn.style.color = \"\"; }, 2000);\n }\n if (navigator.clipboard && navigator.clipboard.writeText) {\n navigator.clipboard.writeText(text).then(onCopied).catch(function() {\n fallbackCopy(text);\n onCopied();\n });\n } else {\n fallbackCopy(text);\n onCopied();\n }\n}\n\nfunction copyAkSecret() {\n var text = document.getElementById(\"ak-secret-display\").textContent;\n var btn = document.getElementById(\"ak-copy-btn\");\n var origHtml = btn.innerHTML;\n function onCopied() {\n btn.innerHTML = '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 13l4 4L19 7\"/></svg>';\n btn.style.color = \"var(--green)\";\n setTimeout(function() { btn.innerHTML = origHtml; btn.style.color = \"\"; }, 2000);\n }\n if (navigator.clipboard && navigator.clipboard.writeText) {\n navigator.clipboard.writeText(text).then(onCopied).catch(function() {\n fallbackCopy(text);\n onCopied();\n });\n } else {\n fallbackCopy(text);\n onCopied();\n }\n}\n\nasync function openEditAkDialog(accessKeyId) {\n var data = await apiRaw(\"GET\", \"/.well-known/service/api/access-keys/\" + encodeURIComponent(accessKeyId));\n if (!data || data.error) { showToast(__t(\"accessKeys.loadKeyFailed\"), \"error\"); return; }\n\n var html = '<div class=\"form-group\"><label class=\"form-label\">' + __t(\"accessKeys.col.keyId\") + '</label><code style=\"font-size:12px\">' + escapeHtml(data.accessKeyId) + '</code></div>';\n html += '<div class=\"form-group\"><label class=\"form-label\">' + __t(\"accessKeys.role\") + '</label><span class=\"badge badge-' + data.role + '\">' + __t(\"common.\" + data.role) + '</span></div>';\n html += '<div class=\"form-group\"><label class=\"form-label\">' + __t(\"accessKeys.remark\") + '</label><input type=\"text\" class=\"input\" id=\"ak-edit-remark\" value=\"' + escapeHtml(data.remark || \"\") + '\" maxlength=\"200\" /></div>';\n html += '<div class=\"form-group\"><label class=\"form-label\">' + __t(\"accessKeys.expiration\") + '</label><input type=\"datetime-local\" class=\"input\" id=\"ak-edit-expiry\" value=\"' + (data.expireAt ? data.expireAt.slice(0,16) : \"\") + '\" /> <label style=\"margin-top:4px;display:block;font-size:13px\"><input type=\"checkbox\" id=\"ak-edit-no-expiry\"' + (data.expireAt ? \"\" : \" checked\") + ' onchange=\"toggleAkEditExpiry()\" /> ' + __t(\"accessKeys.neverExpires\") + '</label></div>';\n\n openDialog(__t(\"accessKeys.editTitle\"), html, __t(\"common.save\"), async function() {\n var remark = document.getElementById(\"ak-edit-remark\").value;\n var noExpiry = document.getElementById(\"ak-edit-no-expiry\").checked;\n var expireAt = noExpiry ? null : (document.getElementById(\"ak-edit-expiry\").value ? new Date(document.getElementById(\"ak-edit-expiry\").value).toISOString() : undefined);\n\n var body = { remark: remark };\n if (expireAt !== undefined) body.expireAt = expireAt;\n\n var result = await apiRaw(\"PUT\", \"/.well-known/service/api/access-keys/\" + encodeURIComponent(accessKeyId), body);\n if (!result || result.error) {\n showToast(result ? result.error : __t(\"accessKeys.updateFailed\"), \"error\");\n return;\n }\n closeDialog();\n showToast(__t(\"accessKeys.keyUpdated\"), \"success\");\n loadAccessKeys(akPage);\n });\n}\n\nfunction toggleAkEditExpiry() {\n var noExpiry = document.getElementById(\"ak-edit-no-expiry\").checked;\n document.getElementById(\"ak-edit-expiry\").disabled = noExpiry;\n}\n\nfunction confirmDeleteAk(accessKeyId, label) {\n openDialog(__t(\"accessKeys.deleteTitle\"), '<p>' + __t(\"accessKeys.deleteMsg\", { label: escapeHtml(label) }) + '</p><p style=\"color:var(--error)\">' + __t(\"accessKeys.deleteWarning\") + '</p>', __t(\"common.delete\"), async function() {\n var result = await apiRaw(\"DELETE\", \"/.well-known/service/api/access-keys/\" + encodeURIComponent(accessKeyId));\n if (result && result.error) {\n showToast(result.error, \"error\");\n return;\n }\n closeDialog();\n showToast(__t(\"accessKeys.keyDeleted\"), \"success\");\n loadAccessKeys(akPage);\n });\n}\n\n// Direct API call (bypasses team handler's /team prefix)\nasync function apiRaw(method, path, body) {\n try {\n var opts = { method: method, headers: { \"Accept\": \"application/json\" } };\n if (body !== undefined) {\n opts.headers[\"Content-Type\"] = \"application/json\";\n opts.body = JSON.stringify(body);\n }\n var res = await fetch(path, opts);\n if (res.status === 204) return {};\n return await res.json();\n } catch(e) {\n return null;\n }\n}\n\nregisterTab(\"access-keys\", function() { loadAccessKeys(1); });\n";
7
7
  export {};
8
8
  //# sourceMappingURL=tab-access-keys.d.ts.map
package/dist/pages/admin/tab-access-keys.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tab-access-keys.d.ts","sourceRoot":"","sources":["../../../src/pages/admin/tab-access-keys.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,KAAK,GAAG,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,MAAM,CAAC;AAEpE,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,GAAG,GAAG,MAAM,CAoBhD;AAED,eAAO,MAAM,sBAAsB,m/jBAqSlC,CAAC"}
1
+ {"version":3,"file":"tab-access-keys.d.ts","sourceRoot":"","sources":["../../../src/pages/admin/tab-access-keys.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,KAAK,GAAG,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,MAAM,CAAC;AAEpE,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,GAAG,GAAG,MAAM,CAoBhD;AAED,eAAO,MAAM,sBAAsB,mlkBAqSlC,CAAC"}
package/dist/pages/admin/tab-access-keys.js CHANGED
@@ -85,10 +85,10 @@ function renderAccessKeys(keys, paging) {
85
85
 
86
86
  function openCreateAkDialog() {
87
87
  var callerRole = __caller.role;
88
- var roleOptions = '<option value="guest">Guest</option>';
89
- if (callerRole === "member" || callerRole === "admin" || callerRole === "owner") roleOptions += '<option value="member"' + (callerRole === "member" ? ' selected' : '') + '>Member</option>';
90
- if (callerRole === "admin" || callerRole === "owner") roleOptions += '<option value="admin"' + (callerRole === "admin" ? ' selected' : '') + '>Admin</option>';
91
- if (callerRole === "owner") roleOptions += '<option value="owner">Owner</option>';
88
+ var roleOptions = '<option value="guest">' + __t("common.guest") + '</option>';
89
+ if (callerRole === "member" || callerRole === "admin" || callerRole === "owner") roleOptions += '<option value="member"' + (callerRole === "member" ? ' selected' : '') + '>' + __t("common.member") + '</option>';
90
+ if (callerRole === "admin" || callerRole === "owner") roleOptions += '<option value="admin"' + (callerRole === "admin" ? ' selected' : '') + '>' + __t("common.admin") + '</option>';
91
+ if (callerRole === "owner") roleOptions += '<option value="owner">' + __t("common.owner") + '</option>';
92
92
 
93
93
  var expiryOptions = '<option value="">' + __t("accessKeys.expirations.never") + '</option><option value="7d">' + __t("accessKeys.expirations.days7") + '</option><option value="30d">' + __t("accessKeys.expirations.days30") + '</option><option value="90d">' + __t("accessKeys.expirations.days90") + '</option><option value="custom">' + __t("accessKeys.expirations.custom") + '</option>';
94
94
 
package/dist/pages/admin/tab-invitations.d.ts CHANGED
@@ -3,6 +3,6 @@
3
3
  */
4
4
  type TFn = (key: string, params?: Record<string, string>) => string;
5
5
  export declare function invitationsTabHtml(t: TFn): string;
6
- export declare const INVITATIONS_TAB_SCRIPT = "\nvar invitationsPage = 1;\nvar invitationsPageSize = 20;\n\n\nfunction updateRemarkCounter() {\n document.getElementById(\"remark-counter\").textContent = document.getElementById(\"invite-remark\").value.length;\n}\n\nasync function loadInvitations(page) {\n invitationsPage = page || 1;\n var qs = \"?page=\" + invitationsPage + \"&pageSize=\" + invitationsPageSize;\n document.getElementById(\"invitations-table-wrap\").innerHTML = skeletonTable(6, 4);\n document.getElementById(\"invitations-pagination\").innerHTML = \"\";\n var data = await api(\"GET\", \"/invitations\" + qs);\n if (!data.ok) {\n document.getElementById(\"invitations-table-wrap\").innerHTML = '<div class=\"empty-state\"><div class=\"empty-state-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 8v4m0 4h.01\"/></svg></div><div class=\"empty-state-title\">' + __t(\"invitations.loadFailed\") + '</div></div>';\n return;\n }\n renderInvitationsTable(data.invitations, data.paging);\n}\n\nfunction renderInvitationsTable(invitations, paging) {\n var wrap = document.getElementById(\"invitations-table-wrap\");\n if (!invitations || invitations.length === 0) {\n wrap.innerHTML = '<div class=\"empty-state\"><div class=\"empty-state-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"/></svg></div><div class=\"empty-state-title\">' + __t(\"invitations.noInvitations\") + '</div><div class=\"empty-state-desc\">' + __t(\"invitations.noInvitationsHint\") + '</div></div>';\n document.getElementById(\"invitations-pagination\").innerHTML = \"\";\n return;\n }\n\n var html = '<table class=\"table\"><thead><tr><th>' + __t(\"invitations.col.role\") + '</th><th class=\"col-hide-sm\">' + __t(\"invitations.col.remark\") + '</th><th>' + __t(\"invitations.col.uses\") + '</th><th>' + __t(\"invitations.col.expires\") + '</th><th class=\"col-hide-md\">' + __t(\"invitations.col.createdBy\") + '</th><th></th></tr></thead><tbody>';\n invitations.forEach(function(inv) {\n var roleBadge = '<span class=\"badge badge-' + inv.role + '\">' + __t(\"common.\" + inv.role) + '</span>';\n var remark = inv.remark ? escapeHtml(inv.remark.length > 30 ? inv.remark.slice(0, 30) + \"...\" : inv.remark) : '<span class=\"text-muted\">\u2014</span>';\n var uses = inv.useCount + \" / \" + inv.maxUses;\n if (inv.useCount >= inv.maxUses) uses += ' <span class=\"badge badge-blocked\">' + __t(\"invitations.closed\") + '</span>';\n var expired = new Date(inv.expireAt) < new Date();\n var expireText = expired ? '<span class=\"badge badge-expired\">expired</span>' : '<span class=\"cell-date\">' + escapeHtml(relativeTime(inv.expireAt)) + '</span>';\n var isActive = !expired && inv.status !== \"closed\" && inv.useCount < inv.maxUses;\n var inviter = inv.inviterName ? escapeHtml(inv.inviterName) : '<span class=\"text-muted\">\u2014</span>';\n\n var actions = '';\n if (isActive) {\n actions += '<button class=\"action-menu-item\" onclick=\"event.stopPropagation();copyToClipboard(\\'' + escapeHtml(inv.link) + '\\')\">' + __t(\"invitations.copyLink\") + '</button>';\n }\n var canDelete = __caller.role === \"owner\" || inv.inviterDid === __caller.did;\n if (canDelete) {\n if (actions) actions += '<div class=\"action-menu-sep\"></div>';\n actions += '<button class=\"action-menu-item danger\" onclick=\"event.stopPropagation();deleteInvitation(\\'' + escapeHtml(inv.id) + '\\')\">' + __t(\"common.delete\") + '</button>';\n }\n var actionMenu = actions ? '<td class=\"action-cell\"><button class=\"action-trigger\" onclick=\"event.stopPropagation();toggleActionMenu(this)\">\u22EF</button><div class=\"action-menu\">' + actions + '</div></td>' : '<td></td>';\n\n html += '<tr><td>' + roleBadge + '</td><td class=\"col-hide-sm\">' + remark + '</td><td>' + uses + '</td><td>' + expireText + '</td><td class=\"col-hide-md\">' + inviter + '</td>' + actionMenu + '</tr>';\n });\n html += '</tbody></table>';\n wrap.innerHTML = html;\n\n renderPagination(\"invitations-pagination\", paging, loadInvitations);\n}\n\nasync function createInvitation() {\n var btn = document.getElementById(\"create-invite-btn\");\n btn.disabled = true;\n\n var role = document.getElementById(\"invite-role\").value;\n var remark = document.getElementById(\"invite-remark\").value.trim();\n var expireHours = parseInt(document.getElementById(\"invite-expire\").value, 10);\n var maxUses = parseInt(document.getElementById(\"invite-max-uses\").value, 10) || 1;\n maxUses = Math.min(100, Math.max(1, maxUses));\n\n var data = await api(\"POST\", \"/invitations\", { role: role, remark: remark, expireHours: expireHours, maxUses: maxUses });\n btn.disabled = false;\n\n if (data.ok && data.invitation) {\n closeDialog(\"create-invitation-dialog\");\n copyToClipboard(data.invitation.link);\n showToast(__t(\"invitations.created\"), \"success\");\n // Reset form\n document.getElementById(\"invite-remark\").value = \"\";\n document.getElementById(\"invite-max-uses\").value = \"1\";\n updateRemarkCounter();\n loadInvitations(invitationsPage);\n }\n}\n\nasync function deleteInvitation(id) {\n var ok = await confirmDialog({ title: __t(\"invitations.deleteTitle\"), message: __t(\"invitations.deleteMsg\"), confirmLabel: __t(\"common.delete\"), danger: true });\n if (!ok) return;\n var data = await api(\"DELETE\", \"/invitations/\" + encodeURIComponent(id));\n if (data.ok) { showToast(__t(\"invitations.deleted\"), \"success\"); loadInvitations(invitationsPage); }\n}\n\n// Initialize role options based on caller role\nfunction initInviteRoleOptions() {\n var select = document.getElementById(\"invite-role\");\n if (__caller.role === \"owner\") {\n select.innerHTML = '<option value=\"guest\">Guest</option><option value=\"member\">Member</option><option value=\"admin\">Admin</option>';\n }\n}\n\nregisterTab(\"invitations\", function() {\n initInviteRoleOptions();\n loadInvitations(1);\n});\n";
6
+ export declare const INVITATIONS_TAB_SCRIPT = "\nvar invitationsPage = 1;\nvar invitationsPageSize = 20;\n\n\nfunction updateRemarkCounter() {\n document.getElementById(\"remark-counter\").textContent = document.getElementById(\"invite-remark\").value.length;\n}\n\nasync function loadInvitations(page) {\n invitationsPage = page || 1;\n var qs = \"?page=\" + invitationsPage + \"&pageSize=\" + invitationsPageSize;\n document.getElementById(\"invitations-table-wrap\").innerHTML = skeletonTable(6, 4);\n document.getElementById(\"invitations-pagination\").innerHTML = \"\";\n var data = await api(\"GET\", \"/invitations\" + qs);\n if (!data.ok) {\n document.getElementById(\"invitations-table-wrap\").innerHTML = '<div class=\"empty-state\"><div class=\"empty-state-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 8v4m0 4h.01\"/></svg></div><div class=\"empty-state-title\">' + __t(\"invitations.loadFailed\") + '</div></div>';\n return;\n }\n renderInvitationsTable(data.invitations, data.paging);\n}\n\nfunction renderInvitationsTable(invitations, paging) {\n var wrap = document.getElementById(\"invitations-table-wrap\");\n if (!invitations || invitations.length === 0) {\n wrap.innerHTML = '<div class=\"empty-state\"><div class=\"empty-state-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"/></svg></div><div class=\"empty-state-title\">' + __t(\"invitations.noInvitations\") + '</div><div class=\"empty-state-desc\">' + __t(\"invitations.noInvitationsHint\") + '</div></div>';\n document.getElementById(\"invitations-pagination\").innerHTML = \"\";\n return;\n }\n\n var html = '<table class=\"table\"><thead><tr><th>' + __t(\"invitations.col.role\") + '</th><th class=\"col-hide-sm\">' + __t(\"invitations.col.remark\") + '</th><th>' + __t(\"invitations.col.uses\") + '</th><th>' + __t(\"invitations.col.expires\") + '</th><th class=\"col-hide-md\">' + __t(\"invitations.col.createdBy\") + '</th><th></th></tr></thead><tbody>';\n invitations.forEach(function(inv) {\n var roleBadge = '<span class=\"badge badge-' + inv.role + '\">' + __t(\"common.\" + inv.role) + '</span>';\n var remark = inv.remark ? escapeHtml(inv.remark.length > 30 ? inv.remark.slice(0, 30) + \"...\" : inv.remark) : '<span class=\"text-muted\">\u2014</span>';\n var uses = inv.useCount + \" / \" + inv.maxUses;\n if (inv.useCount >= inv.maxUses) uses += ' <span class=\"badge badge-blocked\">' + __t(\"invitations.closed\") + '</span>';\n var expired = new Date(inv.expireAt) < new Date();\n var expireText = expired ? '<span class=\"badge badge-expired\">' + __t(\"common.expired\") + '</span>' : '<span class=\"cell-date\">' + escapeHtml(relativeTime(inv.expireAt)) + '</span>';\n var isActive = !expired && inv.status !== \"closed\" && inv.useCount < inv.maxUses;\n var inviter = inv.inviterName ? escapeHtml(inv.inviterName) : '<span class=\"text-muted\">\u2014</span>';\n\n var actions = '';\n if (isActive) {\n actions += '<button class=\"action-menu-item\" onclick=\"event.stopPropagation();copyToClipboard(\\'' + escapeHtml(inv.link) + '\\')\">' + __t(\"invitations.copyLink\") + '</button>';\n }\n var canDelete = __caller.role === \"owner\" || inv.inviterDid === __caller.did;\n if (canDelete) {\n if (actions) actions += '<div class=\"action-menu-sep\"></div>';\n actions += '<button class=\"action-menu-item danger\" onclick=\"event.stopPropagation();deleteInvitation(\\'' + escapeHtml(inv.id) + '\\')\">' + __t(\"common.delete\") + '</button>';\n }\n var actionMenu = actions ? '<td class=\"action-cell\"><button class=\"action-trigger\" onclick=\"event.stopPropagation();toggleActionMenu(this)\">\u22EF</button><div class=\"action-menu\">' + actions + '</div></td>' : '<td></td>';\n\n html += '<tr><td>' + roleBadge + '</td><td class=\"col-hide-sm\">' + remark + '</td><td>' + uses + '</td><td>' + expireText + '</td><td class=\"col-hide-md\">' + inviter + '</td>' + actionMenu + '</tr>';\n });\n html += '</tbody></table>';\n wrap.innerHTML = html;\n\n renderPagination(\"invitations-pagination\", paging, loadInvitations);\n}\n\nasync function createInvitation() {\n var btn = document.getElementById(\"create-invite-btn\");\n btn.disabled = true;\n\n var role = document.getElementById(\"invite-role\").value;\n var remark = document.getElementById(\"invite-remark\").value.trim();\n var expireHours = parseInt(document.getElementById(\"invite-expire\").value, 10);\n var maxUses = parseInt(document.getElementById(\"invite-max-uses\").value, 10) || 1;\n maxUses = Math.min(100, Math.max(1, maxUses));\n\n var data = await api(\"POST\", \"/invitations\", { role: role, remark: remark, expireHours: expireHours, maxUses: maxUses });\n btn.disabled = false;\n\n if (data.ok && data.invitation) {\n closeDialog(\"create-invitation-dialog\");\n copyToClipboard(data.invitation.link);\n showToast(__t(\"invitations.created\"), \"success\");\n // Reset form\n document.getElementById(\"invite-remark\").value = \"\";\n document.getElementById(\"invite-max-uses\").value = \"1\";\n updateRemarkCounter();\n loadInvitations(invitationsPage);\n }\n}\n\nasync function deleteInvitation(id) {\n var ok = await confirmDialog({ title: __t(\"invitations.deleteTitle\"), message: __t(\"invitations.deleteMsg\"), confirmLabel: __t(\"common.delete\"), danger: true });\n if (!ok) return;\n var data = await api(\"DELETE\", \"/invitations/\" + encodeURIComponent(id));\n if (data.ok) { showToast(__t(\"invitations.deleted\"), \"success\"); loadInvitations(invitationsPage); }\n}\n\n// Initialize role options based on caller role\nfunction initInviteRoleOptions() {\n var select = document.getElementById(\"invite-role\");\n if (__caller.role === \"owner\") {\n select.innerHTML = '<option value=\"guest\">' + __t(\"common.guest\") + '</option><option value=\"member\">' + __t(\"common.member\") + '</option><option value=\"admin\">' + __t(\"common.admin\") + '</option>';\n }\n}\n\nregisterTab(\"invitations\", function() {\n initInviteRoleOptions();\n loadInvitations(1);\n});\n";
7
7
  export {};
8
8
  //# sourceMappingURL=tab-invitations.d.ts.map
package/dist/pages/admin/tab-invitations.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tab-invitations.d.ts","sourceRoot":"","sources":["../../../src/pages/admin/tab-invitations.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,KAAK,GAAG,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,MAAM,CAAC;AAEpE,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,GAAG,GAAG,MAAM,CAmDjD;AAED,eAAO,MAAM,sBAAsB,ojMAwGlC,CAAC"}
1
+ {"version":3,"file":"tab-invitations.d.ts","sourceRoot":"","sources":["../../../src/pages/admin/tab-invitations.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,KAAK,GAAG,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,MAAM,CAAC;AAEpE,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,GAAG,GAAG,MAAM,CAmDjD;AAED,eAAO,MAAM,sBAAsB,opMAwGlC,CAAC"}