:root {
  color-scheme: light; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 14px;
  color: #1c2c44; background: #f6f8fb;
  --text: #1c2c44; --muted: #64748b; --line: #dce4ed; --blue: #2459d6; --teal: #116b6d; --sidebar-width: 248px;
}
* { box-sizing: border-box; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body { margin: 0; min-width: 320px; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .58; }
button, a, summary, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #3d6fdd; outline-offset: 3px; }
[hidden] { display: none !important; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 20; padding: 12px 18px; border-radius: 8px; color: #fff; background: #153c68; }
.skip-link:focus { top: 12px; }
.muted, .field-hint, .small-label { color: var(--muted); }
.mono, code, .timer { font-family: "Cascadia Code", Consolas, ui-monospace, monospace; }

.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 5; width: var(--sidebar-width); display: flex; flex-direction: column; padding: 30px 18px 18px; border-right: 1px solid #d4e1e5; background: linear-gradient(165deg, #d8f1ee 0%, #e9f1f1 55%, #edeff5 100%); overflow-y: auto; scrollbar-width: thin; }
.brand-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--text); text-decoration: none; }
.brand-mark { position: relative; display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; background: linear-gradient(145deg, #1b8184, #0d565f); color: #fff; font-size: 16px; letter-spacing: -1px; font-weight: 850; box-shadow: 0 8px 18px #135f6438, inset 0 1px #ffffff28; }
.brand-mark { overflow: hidden; padding: 0; }
.brand-logo { display: block; width: 100%; height: 100%; }
.brand-copy strong, .brand-copy small { display: block; white-space: nowrap; }
.brand-copy strong { color: #153b4a; font-size: 20px; font-weight: 850; letter-spacing: -.7px; line-height: 1.08; }
.brand-copy small { margin-top: 3px; font-size: 11px; color: #527477; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #4b5f78; }
.icon-button:hover { background: #edf3fa; color: var(--blue); }
.header-sidebar-toggle { width: 40px; height: 40px; }
.sidebar-heading { margin: 0 12px 12px; color: #5e7e80; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; white-space: nowrap; }
.tool-nav { display: flex; flex-direction: column; gap: 7px; }
.tool-tab { display: flex; align-items: center; gap: 12px; min-height: 48px; width: 100%; padding: 12px 14px; border: 0; border-radius: 8px; background: transparent; color: #354d60; text-align: left; font-size: 14px; font-weight: 550; white-space: nowrap; }
.tool-tab:hover { background: #ffffff70; }
.tool-tab.is-active { background: var(--teal); color: #fff; box-shadow: 0 3px 7px #0e5d6510; }
.nav-chevron { width: 14px; height: 14px; margin-left: auto; opacity: 0; }
.tool-tab.is-active .nav-chevron { opacity: .85; }
.admin-tab { margin-top: 13px; }
.quota-section { margin: 36px 9px 24px; }
.section-heading h2 { font-size: 10px; letter-spacing: 1px; color: #5e7e80; margin: 0 0 6px; font-weight: 700; }
.section-heading > span { font-size: 10px; line-height: 1.5; }
.quota-grid { display: grid; gap: 16px; margin-top: 19px; }
.quota-card { display: grid; grid-template-columns: 1fr auto; gap: 7px 8px; }
.quota-label { font-size: 12px; color: #4b6374; }
.quota-numbers { font-size: 12px; font-weight: 700; color: #2d485c; }
.quota-caption { grid-column: 1 / -1; font-size: 10px; color: #617c87; }
.quota-bar { grid-column: 1 / -1; width: 100%; height: 4px; border: 0; border-radius: 5px; overflow: hidden; appearance: none; background: #d2e2e5; }
.quota-bar::-webkit-progress-bar { border-radius: 5px; background: #d2e2e5; }
.quota-bar::-webkit-progress-value { border-radius: 5px; background: #388a8b; }
.quota-bar::-moz-progress-bar { border-radius: 5px; background: #388a8b; }
.quota-help { margin: 16px 0 0; font-size: 10px; line-height: 1.5; color: #647b87; }
.account-card { margin-top: auto; padding: 18px 9px 16px; border-top: 1px solid #cbdcde; }
.account-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border: 3px solid #fff; border-radius: 50%; background: #2c7380; color: #fff; font-size: 13px; font-weight: 700; }
.account-copy { min-width: 0; }
.account-copy h2 { margin: 0; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.account-copy p { margin: 4px 0 0; font-size: 10px; font-weight: 650; letter-spacing: .5px; color: #607487; }
.account-status { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.account-status .button { width: 100%; }
.badge { display: inline-block; padding: 5px 9px; border-radius: 6px; font-size: 10px; font-weight: 650; line-height: 1.4; }
.badge-neutral { background: #e4eaf0; color: #4a6276; }
.badge-ok { background: #d7ede4; color: #1b6447; }
.badge-warn { background: #fff0cc; color: #805819; }
.badge-error { background: #fbe1e4; color: #9d3043; }
.account-logout { display: inline-flex; align-items: center; min-height: 26px; padding: 5px 9px; border: 1px solid #cbd8df; border-radius: 6px; color: #5f7285; font-size: 10px; font-weight: 650; line-height: 1.4; text-decoration: none; }
.account-logout:hover { border-color: #9bb7bd; background: #f6fbfa; color: #2c6970; }

.main-content { margin-left: var(--sidebar-width); padding: 24px 42px 0; }
.shell { max-width: 1440px; margin: 0 auto; }
.page-header { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 12px 16px; margin-bottom: 18px; }
h1 { margin: 0; font-size: 30px; letter-spacing: -1px; line-height: 1.25; font-weight: 750; }
.header-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex-shrink: 0; max-width: 100%; }
.appearance-controls { display: flex; align-items: center; gap: 7px; }
.appearance-select, .appearance-button { min-height: 40px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font-size: 12px; }
.appearance-select { max-width: 135px; padding: 8px; }
.appearance-button { min-width: 60px; padding: 8px 12px; }
.appearance-button:hover { border-color: var(--blue); }
.connection-state { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: #65788d; }
.connection-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8d9dad; }
.connection-state.is-online { color: #346e58; }
.connection-state.is-online::before { background: #248a62; box-shadow: 0 0 0 4px #248a620c; }
.connection-state.is-error { color: #9d4050; }
.connection-state.is-error::before { background: #c25366; }
.alert { display: block; padding: 12px 16px; margin: 0 0 20px; border: 1px solid #f1d2d7; border-radius: 8px; background: #fff2f4; color: #9d3043; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.alert.is-success { border-color: #c7e7d8; background: #eef9f3; color: #226c4e; }
.tool-workspace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.workspace-card { min-width: 0; border: 1px solid #ccd7e5; border-radius: 11px; background: #fff; box-shadow: 0 2px 4px #183f6b05; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 24px; }
.settings-card .card-heading { min-height: 76px; padding-top: 14px; padding-bottom: 14px; }
.settings-card .field-hint { margin: 0 0 16px; }
.settings-card a.button { text-decoration: none; }
.settings-details { display: grid; grid-template-columns: minmax(85px, 1fr) minmax(0, 2fr); gap: 14px 18px; margin: 0; font-size: 13px; line-height: 1.6; }
.settings-details dt { color: var(--muted); }
.settings-details dd { margin: 0; overflow-wrap: anywhere; }
.settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-password-form { display: grid; gap: 10px; }
.settings-password-form .field-label { margin: 3px 0 0; }
.settings-password-form .form-footer { margin-top: 4px; }
.settings-password-form .form-footer .field-hint { flex: 1 1 180px; margin: 0; }
.input-card, .result-card { display: flex; flex-direction: column; min-height: max(700px, calc(100vh - 155px)); height: max(700px, calc(100vh - 155px)); max-height: max(700px, calc(100vh - 155px)); }
.result-card { overflow: hidden; }
.card-heading { display: flex; align-items: center; gap: 12px; min-height: 91px; margin: 0 22px; padding: 18px 0; border-bottom: 1px solid #e5ebf2; }
.card-heading h2, .card-heading h3 { font-size: 16px; line-height: 1.5; font-weight: 650; margin: 0; letter-spacing: -.25px; }
.card-heading p { margin: 4px 0 0; color: #708199; font-size: 11px; line-height: 1.6; }
.card-icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: #e8f5f4; color: #217c7e; }
.card-icon-success { color: #24885e; background: #edf7f0; }
.card-icon .icon { width: 21px; height: 21px; }
.card-body { padding: 22px; }
.input-body { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 13px; overflow: auto; }
.field-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.input-tools { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.ocr-button { min-height: 30px; padding: 5px 0 5px 8px; color: #267b80; font-weight: 650; }
.ocr-button:disabled { cursor: wait; opacity: .65; }
.field-label { display: block; margin: 0 0 9px; font-size: 12px; font-weight: 650; color: #31455e; }
.input-body > .field-label, .field-heading .field-label { margin: 0; }
.limit-note { color: #7b8ba0; font-size: 10px; }
.large-input, .text-input { width: 100%; min-width: 0; border: 1px solid #d3deeb; border-radius: 7px; background: #fff; color: var(--text); outline: none; }
.large-input { flex: 1; min-height: 300px; padding: 16px; resize: vertical; font-size: 12px; line-height: 1.9; }
#keys-input, #redeem-keys-input { resize: none; overflow: auto; white-space: pre; }
.large-input.is-masked:not(:placeholder-shown) { -webkit-text-security: disc; }
.large-input::placeholder { color: #8591a3; opacity: 1; }
.text-input { padding: 11px 12px; min-height: 44px; font-size: 13px; }
.text-input::placeholder { color: #8995a6; }
.large-input:focus, .text-input:focus { border-color: #668dd7; box-shadow: 0 0 0 3px #3066da10; }
.input-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 10px; line-height: 1.6; color: #77869b; }
.input-meta > :first-child { color: #42658f; font-weight: 550; }
.key-preview { margin-top: 10px; padding: 10px 12px; border: 1px solid #d7e4f4; border-radius: 7px; background: #f7faff; color: #426284; font-size: 11px; line-height: 1.6; }
.key-preview[hidden] { display: none; }
.key-preview.is-empty { color: #966b1a; background: #fffaf0; border-color: #ead9ad; }
.key-preview.is-over-limit { color: #8b4e2d; background: #fff7f2; border-color: #edc7b4; }
.key-preview-heading { font-weight: 650; }
.key-preview-list { display: grid; gap: 3px; margin: 7px 0 0; padding-left: 23px; color: #2d496e; }
.key-preview-item { overflow-wrap: anywhere; }
.key-preview-warning { margin-top: 8px; color: #af3850; font-size: 10px; }
.notice, .workspace-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid #d8e6fa; border-radius: 7px; background: #f4f8ff; color: #496791; font-size: 11px; line-height: 1.7; }
.notice .icon, .workspace-note .icon { width: 17px; height: 17px; margin-top: 1px; color: var(--blue); }
.action-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 18px 0; margin: 0 22px; border-top: 1px solid #e5ebf2; }
.action-buttons { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.operation-meta { display: flex; flex-direction: column; gap: 6px; }
.timer { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-variant-numeric: tabular-nums; color: #526b8e; }
.timer .icon { width: 14px; height: 14px; }
.action-quota { font-size: 10px; color: #7a8ba0; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 11px 17px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 650; line-height: 1.5; }
.button .icon { width: 16px; height: 16px; }
.button-primary { background: #2459d6; color: #fff; box-shadow: 0 3px 8px #2459d618; }
.button-primary:hover { background: #1948b7; }
.button-secondary { background: #fff; border-color: #d5e0ed; color: #385b86; }
.button-secondary:hover { background: #f2f6fc; }
.text-button { min-height: 44px; padding: 8px 0 8px 10px; margin-left: auto; border: 0; background: transparent; color: #69809d; font-size: 11px; white-space: nowrap; }
.text-button:hover { color: var(--blue); text-decoration: underline; }
.result-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.result-actions .text-button { margin-left: 0; }
.result-actions .text-button.is-success { color: #20815a; }
.result-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 22px 0; }
.result-filter-row .field-label { margin: 0; }
.result-filter-row .text-input { flex: 1 1 170px; width: auto; min-height: 38px; font-size: 12px; }
.mask-option { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; color: #60728b; font-size: 10px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.mask-option input { width: 14px; height: 14px; margin: 0; accent-color: var(--teal); }
.mask-option:focus-within { outline: 3px solid #3d6fdd; outline-offset: 3px; border-radius: 3px; }
.result-content { flex: 1 1 auto; min-width: 0; min-height: 0; margin: 20px 22px 22px; padding: 16px; border: 1px solid #e0e7f0; border-radius: 7px; font-size: 13px; line-height: 1.6; overflow: auto; overflow-wrap: anywhere; scrollbar-gutter: stable; }
.empty-state { display: grid; place-items: center; color: #78899e; font-size: 12px; text-align: center; }
.empty-state-inner { max-width: 350px; padding: 40px 12px; }
.empty-state-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 20px; border-radius: 50%; background: #f0f5fe; color: #537bd6; }
.empty-state-icon .icon { width: 26px; height: 26px; }
.empty-state h3 { margin: 0 0 9px; color: #354c6a; font-size: 15px; font-weight: 650; }
.empty-state p { margin: 0; color: #7b8ba0; font-size: 12px; line-height: 1.8; }
.empty-state-label { display: block; margin-top: 36px; color: #a1afc0; font-size: 8px; letter-spacing: 2px; }
.result-list { display: grid; gap: 6px; }
.result-summary { margin: 0 0 8px; padding: 8px 10px; border: 1px solid #d5e5f4; border-radius: 7px; background: #f3f8fd; color: #426284; font-size: 12px; font-weight: 650; }
.pending-results { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eadfca; }
.pending-results h3 { margin: 0 0 7px; color: #8b671f; font-size: 12px; font-weight: 650; }
.pending-results .result-row { border-color: #eadfca; background: #fffaf2; }
.result-row { padding: 10px 12px; border: 1px solid #dde6f1; border-radius: 7px; background: #f9fbfe; }
.result-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.result-title { font-size: 12px; color: #2d496e; overflow-wrap: anywhere; }
.result-row-top > :last-child { font-size: 11px; font-weight: 650; }
.key-result-text { margin: 4px 0 0; white-space: pre-wrap; color: #2d496e; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.result-status-line { font-family: Consolas, monospace; letter-spacing: 2px; line-height: 1; }
.result-meta { margin-top: 6px; font-size: 12px; color: #687c96; line-height: 1.45; overflow-wrap: anywhere; }
.result-details { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 4px 12px; margin: 10px 0 0; font-size: 12px; }
.result-details dt { color: #71839c; }
.result-details dd { margin: 0; color: #2d496e; overflow-wrap: anywhere; }
.status-ok { color: #20815a; }
.status-warn { color: #966b1a; }
.status-error { color: #af3850; }
.is-loading::before { content: ""; width: 22px; height: 22px; border: 2px solid #e0e8f5; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
.is-loading { align-content: center; gap: 16px; }
.is-busy .icon { animation: pulse 1s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .3; } }

.guide { border: 1px solid #d8e6fa; border-radius: 7px; background: #f5f8fe; color: #42638f; }
.guide summary { display: flex; align-items: center; gap: 9px; padding: 12px; font-size: 11px; cursor: pointer; list-style: none; }
.guide summary::-webkit-details-marker { display: none; }
.guide summary > .icon { width: 18px; height: 18px; }
.guide summary .guide-chevron { margin-left: auto; width: 13px; height: 13px; }
.guide[open] .guide-chevron { transform: rotate(90deg); }
.guide-content { padding: 0 14px 10px; font-size: 11px; line-height: 1.8; }
.guide-content p { margin: 0 0 8px; }
code { color: #2b538c; overflow-wrap: anywhere; }
.workspace-note { margin-top: 14px; padding: 12px 16px; }
.redeem-body { flex: 1; }
.field-hint { margin: 8px 0 0; font-size: 11px; line-height: 1.7; }
.privacy-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 26px; color: #76889d; font-size: 11px; line-height: 1.7; }
.privacy-note .icon { width: 17px; height: 17px; margin-top: 2px; color: #7e9d9a; }
.privacy-note p { margin: 0; }

.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.admin-toolbar h2 { margin: 0; font-size: 18px; }
.admin-toolbar p { margin: 6px 0 0; font-size: 12px; line-height: 1.7; }
.admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; padding-bottom: 1px; border-bottom: 1px solid #dbe5ef; }
.admin-view-tab { border: 0; border-bottom: 2px solid transparent; padding: 10px 13px; background: transparent; color: #647892; font-size: 12px; font-weight: 650; cursor: pointer; }
.admin-view-tab:hover { color: #1f5f82; }
.admin-view-tab.is-active { border-bottom-color: #247d80; color: #176f72; }
.admin-subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 18px 0; padding: 4px; border: 1px solid #dbe5ef; border-radius: 8px; background: #f7faff; }
.admin-subtab { min-height: 34px; padding: 7px 12px; border: 0; border-radius: 6px; background: transparent; color: #647892; font-size: 11px; font-weight: 650; cursor: pointer; }
.admin-subtab:hover { color: #1f5f82; background: #edf4fb; }
.admin-subtab.is-active { background: #247d80; color: #fff; }
.admin-view-panel[hidden] { display: none; }
.admin-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; }
.admin-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.list-card .card-heading, .form-card .card-heading { min-height: 66px; justify-content: space-between; }
.small-label { font-size: 10px; }
.admin-filter-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; padding: 14px 18px 0; }
.admin-filter-row .text-input { flex: 1 1 170px; min-height: 38px; padding: 8px 10px; font-size: 11px; }
.admin-filter-field { display: grid; flex: 1 1 210px; gap: 5px; color: #647892; font-size: 10px; }
.admin-filter-field .text-input { width: 100%; }
.admin-filter-status { flex: 0 1 170px; }
.admin-key-controls { align-items: flex-end; }
.admin-key-controls .admin-key-field, .admin-key-controls .admin-key-sort { flex: 0 1 190px; }
.admin-key-controls .admin-key-direction, .admin-key-controls .admin-key-note { flex: 0 1 145px; }
.admin-key-controls > .button { min-height: 38px; padding: 8px 11px; font-size: 11px; }
.check-filter { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 5px; color: #536b88; font-size: 11px; white-space: nowrap; }
.check-filter input { accent-color: #217c7e; }
.tiers-list { display: grid; gap: 8px; padding: 18px; }
.tiers-list.empty-state { min-height: 130px; }
.members-table-wrap { margin: 18px; max-height: 620px; overflow: auto; border: 1px solid #e0e7f0; border-radius: 7px; }
.members-table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; font-size: 12px; }
.members-table th { position: sticky; top: 0; z-index: 1; background: #f2f6fc; color: #536b88; font-size: 11px; font-weight: 650; }
.members-table th, .members-table td { padding: 11px 14px; border-bottom: 1px solid #e5ebf2; vertical-align: middle; }
.members-table tbody tr:last-child td { border-bottom: 0; }
.members-table tbody tr:hover { background: #f7faff; }
.members-table th:last-child, .members-table td:last-child { text-align: right; }
.members-table .admin-data-subtitle { display: block; }
.members-table .member-edit { min-height: 34px; padding: 6px 11px; font-size: 11px; }
.members-empty { margin: 0; padding: 32px 18px; text-align: center; color: #78899e; font-size: 12px; }
.members-empty.status-error { color: #af3850; }
.member-dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid #ccd7e5; border-radius: 11px; color: var(--text); background: #fff; box-shadow: 0 20px 70px #15345240; overflow-y: auto; }
.member-dialog::backdrop { background: #142b4a80; }
.member-dialog .card-heading { min-height: 66px; justify-content: space-between; }
.member-dialog .member-form > .text-input + .field-label { margin-top: 16px; }
.member-dialog .text-input[readonly] { background: #f4f7fb; color: #60728b; }
.member-dialog .form-footer { margin-top: 16px; }
.dialog-actions { display: flex; gap: 10px; margin-left: auto; }
.api-token-content > .field-hint { margin: 0 0 14px; }
.api-token-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.api-token-actions .button { min-height: 38px; padding: 8px 12px; }
.api-token-docs { display: grid; gap: 6px; margin: 20px 0; font-size: 12px; }
.api-token-docs dt { color: var(--muted); }
.api-token-docs dd { margin: 0 0 7px; overflow-wrap: anywhere; }
.api-token-endpoints { border-top: 1px solid var(--line); padding-top: 8px; font-size: 12px; }
.api-token-endpoints pre { margin: 8px 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.button-danger { background: #fff3f5; border-color: #edcbd2; color: #a0354c; }
.button-danger:hover { background: #fce4e9; }
.member-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; width: 100%; border: 1px solid #e0e7f0; border-radius: 7px; padding: 12px; background: #fafcff; color: var(--text); text-align: left; }
.member-row:hover { border-color: #8daedc; background: #f2f7ff; }
.member-email { font-size: 12px; font-weight: 550; overflow-wrap: anywhere; }
.member-details { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.member-tier { font-size: 10px; color: #6d809a; }
.tier-member-count { color: #536b88; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tier-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.tier-limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column: 1 / -1; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.tier-limit { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--muted); font-size: 10px; }
.tier-limit strong { color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.admin-data-card { min-height: 500px; }
.admin-data-list { display: grid; gap: 8px; max-height: 620px; overflow: auto; padding: 18px; }
.admin-data-list.empty-state { min-height: 170px; }
.admin-key-table-wrap { margin: 18px; max-height: 620px; overflow: auto; border: 1px solid #e0e7f0; border-radius: 7px; }
.admin-key-table { width: max-content; min-width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; }
.admin-key-table th { position: sticky; top: 0; z-index: 1; background: #f2f6fc; color: #536b88; font-size: 10px; font-weight: 650; white-space: nowrap; }
.admin-key-table th, .admin-key-table td { padding: 10px 12px; border-bottom: 1px solid #e5ebf2; vertical-align: top; }
.admin-key-table td { white-space: nowrap; color: #3f5772; }
.admin-key-table tbody tr:last-child td { border-bottom: 0; }
.admin-key-table tbody tr:hover { background: #f7faff; }
.admin-key-table td:first-child { min-width: 250px; color: #2d496e; font-weight: 550; }
.admin-key-table td:nth-child(2) { min-width: 160px; }
.admin-key-table td:nth-child(9) { min-width: 180px; }
.admin-key-table td:nth-child(10) { min-width: 170px; white-space: nowrap; }
.admin-key-table td:nth-child(11) { min-width: 150px; }
.admin-key-table .admin-key-actions { min-width: 135px; white-space: nowrap; text-align: right; }
.admin-key-table .admin-key-actions .button { min-height: 32px; padding: 6px 9px; font-size: 10px; }
.admin-key-table .admin-key-actions .button + .button { margin-left: 6px; }
.admin-key-empty td { padding: 34px 18px; text-align: center; color: #78899e; }
.admin-data-row { display: grid; grid-template-columns: minmax(220px, 1.35fr) minmax(100px, .55fr) minmax(150px, 1fr); gap: 12px; align-items: center; padding: 12px; border: 1px solid #e0e7f0; border-radius: 7px; background: #fafcff; }
.admin-data-row:hover { border-color: #8daedc; background: #f2f7ff; }
.admin-data-main { min-width: 0; }
.admin-data-title { color: #2d496e; font-size: 12px; overflow-wrap: anywhere; }
.admin-data-subtitle { margin-top: 4px; color: #7a8ba0; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.admin-data-status { font-size: 11px; font-weight: 650; }
.admin-data-meta { color: #6d809a; font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
.admin-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 18px 18px; color: #6d809a; font-size: 11px; }
.admin-pagination .button { min-height: 36px; padding: 8px 12px; font-size: 11px; }
.member-form { padding: 22px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.form-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #e5ebf2; }
.form-footer .field-hint { margin: 0; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 24px 0; color: #8a99ad; font-size: 10px; line-height: 1.7; }
.footer-divider { padding: 0 8px; color: #bdc8d5; }

body.sidebar-collapsed { --sidebar-width: 84px; }
.sidebar-collapsed .sidebar { padding-left: 12px; padding-right: 12px; }
.sidebar-collapsed .brand-row { flex-direction: column; margin-bottom: 22px; }
.sidebar-collapsed .brand-copy, .sidebar-collapsed .sidebar-heading, .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-chevron, .sidebar-collapsed .quota-section, .sidebar-collapsed .account-copy, .sidebar-collapsed .account-status { display: none; }
.sidebar-collapsed .tool-tab { justify-content: center; padding: 12px; }
.sidebar-collapsed .account-card { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
.sidebar-collapsed .account-main { justify-content: center; }
/* ponytail: the sidebar preference lasts for this page; persist it only if requested. */
@media (max-width: 1200px) { :root { --sidebar-width: 222px; } .sidebar { padding-left: 14px; padding-right: 14px; } .main-content { padding: 24px 26px 0; } .brand-copy strong { font-size: 18px; } .brand-mark { width: 48px; height: 48px; } .card-heading { margin: 0 18px; gap: 9px; } .card-heading h2 { font-size: 14px; } .card-icon { width: 34px; height: 34px; border-radius: 10px; } .card-body { padding: 20px 18px; } .action-footer { margin: 0 18px; } .result-content { margin: 18px; padding: 12px; } .tool-workspace { gap: 16px; } .text-button { font-size: 10px; } }
@media (max-width: 1000px) { .tool-workspace { grid-template-columns: 1fr; } .input-card, .result-card { min-height: 630px; height: 630px; max-height: 630px; } .result-content { min-height: 0; } .admin-layout { grid-template-columns: 1fr; } .header-actions { gap: 8px; } .connection-state { font-size: 10px; } .page-header { align-items: flex-start; } }
@media (max-width: 720px) {
  .settings-grid, .settings-fields { grid-template-columns: 1fr; }
  .settings-grid { gap: 16px; }
  :root, body.sidebar-collapsed { --sidebar-width: 0px; }
  .sidebar, .sidebar-collapsed .sidebar { position: relative; width: 100%; padding: 16px 18px 12px; border-right: 0; border-bottom: 1px solid #d4e1e5; overflow: visible; }
  .sidebar-collapsed .sidebar { display: none; }
  .brand-row, .sidebar-collapsed .brand-row { flex-direction: row; margin: 0 0 16px; }
  .brand-copy, .sidebar-collapsed .brand-copy { display: block; }
  .brand-mark { width: 44px; height: 44px; border-radius: 13px; font-size: 14px; }
  .sidebar-heading { display: none !important; }
  .quota-section, .sidebar-collapsed .quota-section { display: block; margin: 8px 0 12px; }
  .section-heading, .quota-help, .quota-caption { display: none; }
  .quota-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 0; }
  .quota-card { gap: 5px; grid-template-columns: 1fr; }
  .quota-label, .quota-numbers { font-size: 10px; }
  .tool-nav { flex-direction: row; gap: 6px; overflow-x: auto; padding: 3px 2px 7px; }
  .tool-tab, .sidebar-collapsed .tool-tab { justify-content: center; width: auto; flex: 1 0 auto; min-height: 44px; padding: 11px 13px; gap: 8px; font-size: 12px; }
  .nav-label, .sidebar-collapsed .nav-label { display: inline; }
  .nav-chevron { display: none; }
  .tool-tab > .icon { width: 17px; height: 17px; }
  .admin-tab { margin: 0; }
  .account-card, .sidebar-collapsed .account-card { margin: 0; padding: 10px 0 0; border-top: 1px solid #cbdcde; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .account-copy, .sidebar-collapsed .account-copy { display: block; }
  .account-main, .sidebar-collapsed .account-main { justify-content: flex-start; }
  .account-copy h2 { font-size: 11px; }
  .account-copy p { font-size: 9px; }
  .account-status, .sidebar-collapsed .account-status { display: flex; margin: 0; }
  .account-status .button { width: auto; }
  .avatar { width: 30px; height: 30px; border-width: 2px; font-size: 11px; }
  .main-content { margin-left: 0; padding: 24px 18px 0; }
  .admin-data-row { grid-template-columns: 1fr; gap: 8px; }
  .admin-key-table-wrap { margin: 18px 12px; }
  h1 { font-size: 26px; }
  .header-actions { justify-content: flex-start; }
  .connection-state { white-space: nowrap; font-size: 9px; }
  .connection-state::before { width: 5px; height: 5px; }
  .input-card, .result-card { min-height: 590px; height: 590px; max-height: 590px; }
  .card-heading { min-height: 82px; }
  .card-heading h2 { font-size: 14px; }
  .card-heading p { font-size: 10px; }
  .card-heading .text-button { white-space: normal; max-width: 65px; line-height: 1.7; }
  .large-input { min-height: 250px; }
  .result-content { min-height: 0; }
  .admin-toolbar { align-items: flex-start; flex-direction: column; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 3px; padding: 22px 0; }
}
@media (max-width: 390px) { .main-content { padding-left: 12px; padding-right: 12px; } .sidebar { padding-left: 12px; padding-right: 12px; } .header-actions .connection-state { max-width: 77px; white-space: normal; text-align: right; } .action-footer { gap: 10px; } .button { padding-left: 12px; padding-right: 12px; font-size: 11px; } .form-grid { grid-template-columns: 1fr; } .card-heading { gap: 8px; } .card-heading .card-icon { width: 30px; height: 30px; } .card-heading h2 { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

:root[data-theme="dark"] { color-scheme: dark; color: #e0e9f5; background: #101824; --text: #e0e9f5; --muted: #a8b7cb; --line: #35465e; --blue: #8ab4ff; --teal: #17666b; }
[data-theme="dark"] .sidebar { border-color: #33485b; background: linear-gradient(165deg, #162f35, #1a2636 75%); }
[data-theme="dark"] :is(.brand-copy strong, .brand-copy small, .header-sidebar-toggle, .sidebar-heading, .section-heading h2, .quota-label, .quota-numbers, .quota-caption, .quota-help, .account-copy p) { color: #e7f7fa; }
[data-theme="dark"] .tool-tab { color: #c9dbe8; }
[data-theme="dark"] .tool-tab:hover { background: #ffffff0d; }
[data-theme="dark"] .tool-tab.is-active { background: #17666b; color: #fff; }
[data-theme="dark"] .account-card { border-color: #354a59; }
[data-theme="dark"] .avatar { border-color: #284251; }
[data-theme="dark"] .quota-bar, [data-theme="dark"] .quota-bar::-webkit-progress-bar { background: #354858; }
[data-theme="dark"] :is(.icon-button, .appearance-select, .appearance-button, .workspace-card, .member-dialog, .large-input, .text-input, .button-secondary) { background: #192536; border-color: var(--line); color: var(--text); }
[data-theme="dark"] :is(.icon-button:hover, .button-secondary:hover, .appearance-button:hover) { background: #26374e; }
[data-theme="dark"] :is(.card-heading, .action-footer, .form-footer, .admin-tabs, .admin-subtabs, .members-table td, .members-table th, .members-table-wrap, .admin-key-table td, .admin-key-table th, .admin-key-table-wrap, .result-content) { border-color: #304158; }
[data-theme="dark"] :is(.connection-state, .card-heading p, .field-label, .limit-note, .input-meta, .action-quota, .timer, .text-button, .mask-option, .empty-state, .empty-state p, .result-meta, .result-details dt, .admin-view-tab, .admin-filter-field, .check-filter, .member-tier, .tier-member-count, .admin-data-subtitle, .admin-data-meta, .admin-pagination, .members-empty, .site-footer) { color: #a8b7cb; }
[data-theme="dark"] .admin-subtabs { background: #172438; }
[data-theme="dark"] .admin-subtab { color: #a8b7cb; }
[data-theme="dark"] .admin-subtab:hover { background: #26374e; color: #d9e8fb; }
[data-theme="dark"] .admin-subtab.is-active { background: #247d80; color: #fff; }
[data-theme="dark"] :is(.members-table th, .admin-key-table th, .privacy-note) { color: #a8b7cb; }
[data-theme="dark"] .large-input::placeholder, [data-theme="dark"] .text-input::placeholder { color: #8f9fb6; }
[data-theme="dark"] :is(.input-meta > :first-child, .key-preview-list, .result-title, .key-result-text, .result-details dd, .admin-data-title, .admin-key-table td, .empty-state h3, code) { color: #cadcf5; }
[data-theme="dark"] :is(.notice, .workspace-note, .guide, .key-preview, .result-summary) { background: #1b2b43; border-color: #385471; color: #b7d3f5; }
[data-theme="dark"] :is(.result-row, .member-row, .admin-data-row, .members-table th, .admin-key-table th, .empty-state-icon) { background: #1c2b3e; border-color: #354a64; }
[data-theme="dark"] :is(.member-row:hover, .admin-data-row:hover, .members-table tbody tr:hover, .admin-key-table tbody tr:hover, .member-dialog .text-input[readonly]) { background: #25354b; color: #c4d2e4; }
[data-theme="dark"] .card-icon { background: #173d42; color: #87d9d3; }
[data-theme="dark"] .card-icon-success { background: #173e32; color: #80d9ae; }
[data-theme="dark"] .badge-neutral { background: #33455b; color: #d2e1f3; }
[data-theme="dark"] .badge-ok { background: #204b3c; color: #a0e6bf; }
[data-theme="dark"] .badge-warn { background: #4c3b20; color: #f6d594; }
[data-theme="dark"] .badge-error { background: #522c39; color: #ffc0ce; }
[data-theme="dark"] :is(.status-ok, .connection-state.is-online, .result-actions .text-button.is-success) { color: #80d9ae; }
[data-theme="dark"] :is(.status-error, .members-empty.status-error, .connection-state.is-error) { color: #ffadb9; }
[data-theme="dark"] :is(.status-warn, .pending-results h3) { color: #f4d08d; }
[data-theme="dark"] :is(.pending-results .result-row, .key-preview.is-empty, .key-preview.is-over-limit) { background: #332e23; border-color: #645437; color: #f4d08d; }
[data-theme="dark"] .pending-results { border-color: #645437; }
[data-theme="dark"] :is(.alert, .button-danger) { background: #3d2531; border-color: #784354; color: #ffc0ce; }
[data-theme="dark"] .alert.is-success { background: #203d32; border-color: #3b7157; color: #a0e6bf; }
[data-theme="dark"] .button-danger:hover { background: #552d3b; }
[data-theme="dark"] .account-logout { border-color: #53677a; color: #c4d2e4; }
[data-theme="dark"] .account-logout:hover { background: #25354b; }
[data-theme="dark"] .admin-view-tab.is-active { color: #89dbd4; border-color: #89dbd4; }
[data-theme="dark"] .member-dialog::backdrop { background: #030a15b3; }