:root {
    --ink: #172033;
    --muted: #6d7585;
    --line: #e7e8ef;
    --surface: #fff;
    --canvas: #f5f6fa;
    --primary: #5b4bdb;
    --primary-dark: #4338a5;
    --teal: #0f9f91;
    --danger: #d24d57;
    --shadow: 0 18px 45px rgba(31, 35, 52, .08);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    color: var(--ink);
    background: var(--canvas);
    font-family: "Manrope", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
}

button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
code { color: #4a4492; font-size: .84em; overflow-wrap: anywhere; }

.portal-shell {
    --primary-dark: color-mix(in srgb, var(--primary) 82%, #000);
    --primary-soft: color-mix(in srgb, var(--primary) 12%, #fff);
    --portal-sider: #17182a;
    --portal-sider-text: #fff;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 246px minmax(0, 1fr);
}

.portal-sider {
    position: fixed;
    inset: 0 auto 0 0;
    width: 246px;
    display: flex;
    flex-direction: column;
    padding: 24px 16px 18px;
    background: linear-gradient(160deg, var(--portal-sider), color-mix(in srgb, var(--portal-sider) 84%, var(--primary)));
    color: var(--portal-sider-text);
    overflow-y: auto;
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px 28px;
}

.brand-lockup > div:last-child { display: grid; gap: 2px; }
.brand-lockup strong { font-size: 16px; letter-spacing: .01em; }
.brand-lockup span { color: color-mix(in srgb, var(--portal-sider-text) 62%, transparent); font-size: 11px; }

.brand-mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff !important;
    font-weight: 800;
    box-shadow: 0 9px 24px color-mix(in srgb, var(--primary) 38%, transparent);
}

.brand-mark-image { width: 40px; height: 40px; display: block; object-fit: contain; border-radius: 12px; background: rgba(255,255,255,.94); }

.portal-menu { display: grid; gap: 5px; }

.menu-section {
    margin: 18px 12px 7px;
    color: color-mix(in srgb, var(--portal-sider-text) 48%, transparent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.portal-menu-item {
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 13px;
    border-radius: 10px;
    color: color-mix(in srgb, var(--portal-sider-text) 72%, transparent);
    font-size: 13px;
    font-weight: 600;
    transition: .18s ease;
}

.portal-menu-item:hover { color: var(--portal-sider-text); background: color-mix(in srgb, var(--portal-sider-text) 7%, transparent); }
.portal-menu-item.active { color: #fff; background: linear-gradient(100deg, var(--primary), var(--primary-dark)); box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 32%, transparent); }
.portal-menu-item .material-symbols-rounded { font-size: 20px; }

.sider-footer {
    margin-top: auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
}

.sider-footer > span { color: var(--teal); }
.sider-footer div { display: grid; gap: 3px; }
.sider-footer strong { font-size: 11px; }
.sider-footer a { color: color-mix(in srgb, var(--teal) 72%, var(--portal-sider-text)); font-size: 10px; }

.portal-main { grid-column: 2; min-width: 0; }

.portal-header {
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 34px;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(16px);
}

.context-label, .header-actions, .header-link { display: flex; align-items: center; }
.context-label { gap: 10px; }
.context-label div { display: grid; }
.context-label small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.context-label strong { font-size: 13px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #34b57a; box-shadow: 0 0 0 4px #e4f7ed; }
.header-actions { gap: 14px; }
.header-link { gap: 7px; font-size: 12px; font-weight: 600; }
.header-link .material-symbols-rounded { color: var(--primary); font-size: 21px; }
.portal-language-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid #dfe1ea; border-radius: 9px; background: #f7f7fb; }
.portal-language-switch a { min-width: 30px; padding: 4px 7px; border-radius: 6px; color: #707789; font-size: 11px; font-weight: 700; text-align: center; }
.portal-language-switch a:hover { color: var(--primary); }
.portal-language-switch a.active { background: #fff; color: var(--primary); box-shadow: 0 1px 4px rgb(30 32 45 / 10%); }

.portal-content {
    width: min(1460px, calc(100% - 64px));
    margin: 0 auto;
    padding: 42px 0 64px;
}

.page-heading { margin-bottom: 28px; }
.page-heading.split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-heading h1 { margin: 3px 0 7px; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.035em; }
.page-heading > p:last-child, .page-heading > div > p:last-child { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.65; }
.eyebrow { margin: 0; color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow.light { color: #c5c0ff; }
.muted { color: var(--muted); }

.primary-button, .ghost-button {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    border: 0;
}

.danger-button {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border: 1px solid #f1cdd2;
    border-radius: 9px;
    background: #fff5f6;
    color: var(--danger);
    font-size: 12px;
    font-weight: 700;
}
.danger-button:hover { background: #ffeaed; border-color: #e9aeb6; }
.button-link { width: max-content; }
.text-link { color: var(--primary); font-size: 10px; font-weight: 700; }
.text-link:hover { text-decoration: underline; }

.primary-button { background: var(--primary); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 23%, transparent); }
.primary-button:hover { background: var(--primary-dark); color: #fff; }
.ghost-button { border: 1px solid #dfe1ea; background: #fff; color: #4a5160; }
.ghost-button:hover { border-color: #bfc3d2; }
.ghost-button.danger { color: var(--danger); }
.primary-button .material-symbols-rounded, .ghost-button .material-symbols-rounded { font-size: 18px; }
.full { width: 100%; }
button:disabled { opacity: .55; cursor: not-allowed; }

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.metric-card {
    min-height: 150px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(35,38,58,.045);
}

.metric-card div { display: grid; }
.metric-card strong { font-size: 27px; letter-spacing: -.04em; }
.metric-card div span { color: var(--muted); font-size: 11px; font-weight: 600; }
.metric-card small { grid-column: 1 / -1; color: #878d9b; font-size: 10px; }
.metric-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; }
.metric-icon.violet { background: var(--primary-soft); color: var(--primary); }
.metric-icon.teal { background: #e4f8f5; color: var(--teal); }
.metric-icon.purple { background: var(--primary-soft); color: var(--primary); }
.metric-icon.green { background: #e4f8f5; color: var(--teal); }
.metric-icon.blue { background: #e7f1ff; color: #3478c8; }
.metric-icon.amber { background: #fff3dd; color: #b97b17; }

.dashboard-grid, .account-grid, .two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.surface {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: 0 12px 34px rgba(35,38,58,.045);
}

.surface-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid #eff0f4;
}

.surface-header h2, .detail-title h2, .settings-header h2 { margin: 3px 0 0; font-size: 17px; letter-spacing: -.015em; }
.detail-list { margin: 0; padding: 8px 22px 18px; }
.detail-list div { display: grid; grid-template-columns: 130px 1fr; padding: 13px 0; border-bottom: 1px solid #f0f1f5; }
.detail-list div:last-child { border-bottom: 0; }
.detail-list dt { color: var(--muted); font-size: 11px; }
.detail-list dd { margin: 0; text-align: right; font-size: 12px; font-weight: 600; }

.action-surface > a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    padding: 16px 22px;
    border-bottom: 1px solid #f0f1f5;
}
.action-surface > a:hover { background: #fafaff; }
.action-surface > a > span:first-child { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #f0eeff; color: var(--primary); }
.action-surface > a div { display: grid; gap: 3px; }
.action-surface > a strong { font-size: 12px; }
.action-surface > a small { color: var(--muted); font-size: 10px; }

.status-pill, .count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
}
.status-pill { min-height: 23px; padding: 0 9px; }
.status-pill.good { background: #e5f8ee; color: #198451; }
.status-pill.bad { background: #ffeaed; color: #be3b49; }
.status-pill.warn { background: #fff3dd; color: #9d6813; }
.status-pill.neutral { background: #eef0f5; color: #656b79; }
.count-badge { min-width: 27px; height: 27px; padding: 0 8px; background: #efedff; color: var(--primary); }

.message {
    margin: -8px 0 20px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.5;
}
.message.success { background: #eaf8f1; color: #19784d; border: 1px solid #cfeede; }
.message.error { background: #fff0f2; color: #ab3340; border: 1px solid #f4d4d8; }
.message.warning { background: #fff7e7; color: #8a5a10; border: 1px solid #f2dfb5; }
.loading-panel, .empty-copy { color: var(--muted); font-size: 12px; }
.loading-panel { padding: 80px; text-align: center; border: 1px dashed #d9dbe5; border-radius: 15px; background: #fff; }
.padded { padding: 22px; }

.oidc-client-manager { overflow: hidden; }
.oidc-client-header { align-items: center; }
.oidc-client-header > div:first-child { display: grid; gap: 4px; }
.oidc-client-header h2 { margin: 0; }
.oidc-client-header p:last-child { max-width: 680px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.oidc-header-actions { display: flex; align-items: center; gap: 10px; }
.oidc-message { margin: 16px 20px 0; }
.oidc-empty { min-height: 360px; }
.oidc-empty .primary-button { margin-top: 16px; }
.oidc-client-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 20px; }
.oidc-client-card { min-width: 0; display: grid; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.oidc-client-card:hover { border-color: #cbc7eb; box-shadow: 0 10px 28px rgba(48,42,94,.08); }
.oidc-client-card.disabled { background: #fafafa; opacity: .78; }
.oidc-client-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.oidc-client-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
.oidc-client-identity > div { min-width: 0; display: grid; gap: 2px; }
.oidc-client-identity h3 { overflow: hidden; margin: 0; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.oidc-client-identity code { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.oidc-client-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg, var(--primary), #8577ee); color: #fff; font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.oidc-client-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.oidc-client-tags > span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 999px; background: #f2f1f8; color: #595d6b; font-size: 8px; font-weight: 750; }
.oidc-client-tags .material-symbols-rounded { font-size: 13px; }
.oidc-client-details { display: grid; gap: 13px; margin: 0; }
.oidc-client-details > div { min-width: 0; display: grid; gap: 6px; }
.oidc-client-details dt { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.oidc-client-details dd { min-width: 0; display: grid; gap: 5px; margin: 0; }
.oidc-client-details dd > code { overflow: hidden; display: block; padding: 7px 8px; border-radius: 7px; background: #f8f8fb; color: #454a58; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.oidc-scope-list { display: flex !important; flex-direction: row; flex-wrap: wrap; }
.oidc-scope-list span { padding: 4px 7px; border-radius: 6px; background: #efedff; color: var(--primary); font-size: 8px; font-weight: 750; }
.oidc-client-actions { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 13px; border-top: 1px solid var(--line); }
.oidc-client-actions button { min-height: 34px; padding: 0 10px; font-size: 9px; }
.oidc-client-actions .material-symbols-rounded { font-size: 15px; }
.oidc-editor-modal { width: min(760px, 100%); }
.oidc-editor-body { display: grid; gap: 18px; padding: 22px; }
.oidc-editor-body .form-grid { margin: 0; }
.oidc-editor-body .form-field small { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.oidc-uri-input { min-height: 70px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9px; line-height: 1.55; }
.readonly-field { min-height: 39px; display: flex; align-items: center; padding: 0 12px; border: 1px solid #e2e3ea; border-radius: 8px; background: #f7f7fa; color: #525764; font-size: 10px; }
.compact-toggle { min-height: 39px; margin: 0; border: 1px solid #e2e3ea; border-radius: 8px; }
.oidc-scope-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; }
.oidc-scope-options label { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #e1e2e9; border-radius: 8px; background: #fff; font-size: 9px; font-weight: 700; }
.oidc-scope-options label.checked-required { background: #f5f3ff; color: var(--primary); }
.oidc-scope-options label small { display: inline; margin: 0 0 0 3px; color: inherit; font-size: 7px; }
.oidc-security-note { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid #dcd8ff; border-radius: 10px; background: #f7f5ff; color: #4c4386; }
.oidc-security-note > span { font-size: 20px; }
.oidc-security-note strong { display: block; font-size: 10px; }
.oidc-security-note p { margin: 3px 0 0; font-size: 8px; line-height: 1.55; }
.oidc-confirm-modal { width: min(520px, 100%); }
.oidc-secret-modal { width: min(620px, 100%); }
.oidc-secret-value { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.oidc-secret-value > code { min-width: 0; overflow-wrap: anywhere; padding: 12px; border: 1px solid #d9d5ff; border-radius: 9px; background: #f7f5ff; color: #392d92; font-size: 10px; line-height: 1.55; user-select: all; }

.workbench {
    min-height: 650px;
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--shadow);
}
.list-pane { border-right: 1px solid var(--line); background: #fbfbfd; }
.pane-tools { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid var(--line); }
.search-box { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #e0e1e8; border-radius: 9px; background: #fff; }
.search-box span { color: #989dac; font-size: 18px; }
.search-box input { width: 100%; height: 35px; border: 0; outline: 0; background: transparent; font-size: 11px; }
.record-list { max-height: 680px; overflow-y: auto; padding: 8px; }
.record-item {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 13px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-align: left;
}
.record-item:hover { background: #f2f1fa; }
.record-item.selected { background: #edebff; box-shadow: inset 3px 0 var(--primary); }
.record-main { min-width: 0; display: grid; gap: 2px; }
.record-main strong { font-size: 12px; }
.record-main small, .record-main > span { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, #ddd9ff, #eeecff); color: var(--primary); font-size: 12px; font-weight: 800; }
.avatar.large { width: 54px; height: 54px; border-radius: 15px; font-size: 18px; }
.avatar.xlarge { width: 72px; height: 72px; border-radius: 20px; font-size: 25px; }
.detail-pane { padding: 27px; }
.detail-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.empty-state { min-height: 500px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); }
.empty-state > span { color: #bbb8df; font-size: 52px; }
.empty-state h2, .empty-state h1 { margin: 12px 0 5px; color: var(--ink); }
.empty-state p { max-width: 390px; margin: 0; font-size: 11px; line-height: 1.65; }
.empty-state.standalone { min-height: 70vh; }
.empty-state.standalone .primary-button { margin-top: 20px; }
.profile-banner, .account-hero {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 17px;
    border-radius: 13px;
    background: linear-gradient(120deg, #f5f3ff, #fafaff);
}
.profile-banner { margin-bottom: 22px; }
.profile-banner div { display: grid; gap: 2px; }
.profile-banner div span { color: var(--muted); font-size: 10px; }
.profile-banner code { margin-left: auto; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid.compact, .inline-create { padding: 22px; }
.form-field, .stack-form label { display: grid; gap: 7px; color: #525968; font-size: 10px; font-weight: 700; }
.form-field.wide { grid-column: 1 / -1; }
.form-field > small { color: var(--muted); font-size: 8px; font-weight: 500; }
.form-field textarea { min-height: 95px; resize: vertical; }
.ant-input { min-height: 39px !important; border-radius: 8px !important; border-color: #dedfe8 !important; font-size: 11px !important; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 10px; padding-top: 4px; }
.check-summary { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; padding: 13px; border-radius: 10px; background: #f7f7fa; }
.check-summary > span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; }
.check-summary .material-symbols-rounded { color: var(--primary); font-size: 16px; }

.heading-actions { display: flex; align-items: center; gap: 12px; }
.save-meta { color: var(--muted); font-size: 9px; }
.settings-layout {
    min-height: 650px;
    display: grid;
    grid-template-columns: 205px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--shadow);
}
.settings-nav { display: flex; flex-direction: column; gap: 4px; padding: 16px 10px; border-right: 1px solid var(--line); background: #fafafd; }
.settings-nav button { display: flex; align-items: center; gap: 10px; min-height: 41px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: #697080; font-size: 11px; font-weight: 600; text-align: left; }
.settings-nav button:hover { background: #f0eff7; }
.settings-nav button.active { background: #eceaff; color: var(--primary); }
.settings-nav .material-symbols-rounded { font-size: 18px; }
.settings-content { padding: 30px; }
.settings-header { margin-bottom: 27px; padding-bottom: 20px; border-bottom: 1px solid #eff0f4; }
.settings-header > div > p:last-child { max-width: 680px; margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.settings-band + .settings-band { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.settings-band h3 { margin: 0 0 18px; font-size: 12px; }
.ai-test-panel { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px; border: 1px solid #dcd8f2; border-radius: 13px; background: linear-gradient(145deg, #faf9ff, #fff); }
.ai-test-panel > div { display: grid; gap: 6px; min-width: 0; }
.ai-test-panel strong { font-size: 12px; }
.ai-test-panel small { color: var(--muted); font-size: 9px; line-height: 1.55; overflow-wrap: anywhere; }
.ai-test-panel .status-pill { width: fit-content; }
.ai-test-panel > button { flex: 0 0 auto; }
.bootstrap-admin-panel { display: grid; gap: 18px; }
.bootstrap-admin-status { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 16px; border: 1px solid #dedbef; border-radius: 13px; background: linear-gradient(145deg, #faf9ff, #fff); }
.bootstrap-admin-status > .material-symbols-rounded { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: #ece9ff; color: var(--primary); }
.bootstrap-admin-status > div { display: grid; gap: 3px; }
.bootstrap-admin-status strong { font-size: 12px; }
.bootstrap-admin-status small, .bootstrap-admin-help { color: var(--muted); font-size: 9px; line-height: 1.6; }
.bootstrap-admin-help { margin: 0; }
.bootstrap-admin-help code, .bootstrap-admin-panel .message code { overflow-wrap: anywhere; }
.administrator-settings-panel { display: grid; gap: 16px; }
.administrator-settings-note { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #dcd8f2; border-radius: 12px; background: #faf9ff; }
.administrator-settings-note > .material-symbols-rounded { color: var(--primary); }
.administrator-settings-note > div { display: grid; gap: 3px; }
.administrator-settings-note strong { font-size: 11px; }
.administrator-settings-note small { color: var(--muted); font-size: 9px; line-height: 1.55; }
.administrator-search { max-width: 420px; }
.administrator-list { display: grid; gap: 9px; }
.administrator-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto minmax(110px, auto); align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #e2e3eb; border-radius: 12px; background: #fff; }
.administrator-row-copy { display: grid; gap: 2px; min-width: 0; }
.administrator-row-copy strong { font-size: 11px; }
.administrator-row-copy small { color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; }
.administrator-row > button { justify-content: center; }
.toggle-field { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 13px; border: 1px solid #e2e3eb; border-radius: 10px; }
.toggle-field > span { display: grid; gap: 2px; }
.toggle-field strong { font-size: 10px; }
.toggle-field small { color: var(--muted); font-size: 8px; }
.toggle-field input { width: 35px; height: 19px; accent-color: var(--primary); }
.toggle-field.disabled { background: #f7f7fa; color: #8a8f9c; }
.toggle-field.disabled input { cursor: not-allowed; }

.account-hero { position: relative; margin-bottom: 18px; padding: 26px; border: 1px solid #e3e0fa; background: linear-gradient(120deg, #eeebff, #fff 68%); }
.account-hero > div { display: grid; gap: 3px; }
.account-hero h2 { margin: 0; font-size: 22px; }
.account-hero p { margin: 0; color: var(--muted); font-size: 11px; }
.account-hero > code { margin-left: auto; align-self: flex-start; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.account-grid { margin-bottom: 18px; }
.stack-form { display: grid; gap: 15px; }
.stack-form label > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stack-form label > small { color: var(--muted); font-size: 9px; font-weight: 500; line-height: 1.5; }
.entitlement-surface { margin-top: 18px; }
.account-metrics .metric-card { min-height: 125px; }
.account-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
.account-actions .action-surface > a { border-bottom: 0; }
.account-activity-preview { margin-top: 18px; }
.activity-list { display: grid; }
.activity-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 22px; border-top: 1px solid #f0f1f5; }
.activity-row:first-child { border-top: 0; }
.activity-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #f0eeff; color: var(--primary); }
.activity-icon .material-symbols-rounded { font-size: 18px; }
.activity-row > div { min-width: 0; display: grid; gap: 3px; }
.activity-row strong { font-size: 11px; }
.activity-row small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.profile-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 18px; }
.profile-aside { position: sticky; top: 24px; display: grid; justify-items: center; gap: 8px; padding: 28px 22px; text-align: center; }
.profile-aside h2 { margin: 8px 0 0; font-size: 18px; }
.profile-aside p { margin: 0; color: var(--muted); font-size: 10px; }
.profile-aside > small { margin-top: 8px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.profile-aside > small.profile-updated { margin-top: 4px; }
.profile-aside a { color: var(--primary); font-weight: 700; }
.profile-completion { width: 100%; display: grid; gap: 8px; margin: 15px 0 4px; }
.profile-completion > span { display: flex; align-items: baseline; justify-content: space-between; color: var(--muted); font-size: 9px; }
.profile-completion strong { color: var(--ink); font-size: 14px; }
.profile-completion > div { height: 7px; overflow: hidden; border-radius: 999px; background: #ececf2; }
.profile-completion i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #8274f5); }
.profile-sections { display: grid; gap: 18px; }
.profile-bio { line-height: 1.6; }
.section-edit-button { min-height: 34px; padding-inline: 12px; }
.profile-value-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 6px 22px 18px; }
.profile-value { min-width: 0; display: grid; align-content: start; gap: 5px; padding: 14px 0; border-bottom: 1px solid #f0f1f5; }
.profile-value.wide { grid-column: 1 / -1; }
.profile-value dt { color: var(--muted); font-size: 9px; font-weight: 700; }
.profile-value dd { min-height: 18px; margin: 0; color: var(--ink); font-size: 12px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.profile-value dd.empty { color: #a0a5b1; font-weight: 500; }
.profile-value dd.multiline { white-space: pre-wrap; }
.profile-value small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.profile-edit-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }

.security-scoreboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.security-status-card { display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.security-status-card > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; }
.security-status-card.good > span { background: #e5f8ee; color: #198451; }
.security-status-card.warn > span { background: #fff3dd; color: #9d6813; }
.security-status-card > div { display: grid; gap: 3px; }
.security-status-card strong { font-size: 11px; }
.security-status-card small { color: var(--muted); font-size: 9px; }
.recovery-contact-list { display: grid; gap: 0; }
.recovery-contact-item { display: grid; gap: 10px; padding: 17px 0; border-bottom: 1px solid #f0f1f5; }
.recovery-contact-item:first-child { padding-top: 4px; }
.recovery-contact-item > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.recovery-contact-item > header > div { display: flex; align-items: center; gap: 8px; }
.recovery-contact-item > header > div > span { color: var(--muted); font-size: 9px; font-weight: 700; }
.recovery-contact-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.recovery-contact-value { min-height: 20px; color: var(--ink); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.recovery-contact-value.empty { color: #a0a5b1; font-weight: 500; }
.recovery-contact-item > small, .recovery-contact-note { color: var(--muted); font-size: 8px; line-height: 1.5; }
.recovery-contact-edit { display: grid; gap: 11px; }
.recovery-contact-edit label { display: grid; gap: 7px; }
.recovery-contact-edit label > span { color: #525968; font-size: 9px; font-weight: 700; }
.recovery-contact-actions { display: flex; justify-content: flex-end; gap: 8px; }
.contact-verification-panel { display: grid; gap: 12px; padding: 14px; border: 1px solid #d9d5ff; border-radius: 12px; background: #f7f6ff; }
.contact-verification-panel > div:first-child { display: flex; align-items: center; gap: 9px; color: #3d2f9f; }
.contact-verification-panel > div:first-child p { margin: 0; font-size: 9px; font-weight: 700; }
.contact-verification-panel label { display: grid; gap: 7px; color: #525968; font-size: 9px; font-weight: 700; }
.recovery-contact-note { padding-top: 14px; }
.password-security-section { border-top: 1px solid var(--line); }
.password-action-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.password-action-panel > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #efecff; color: var(--primary); }
.password-action-panel > div { display: grid; gap: 4px; }
.password-action-panel strong { font-size: 11px; }
.password-action-panel small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.authenticator-surface { margin-top: 0; }
.authenticator-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.authenticator-grid > section { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.authenticator-grid > section + section { padding-left: 28px; border-left: 1px solid var(--line); }
.authenticator-grid h3 { margin: 0; font-size: 13px; }
.authenticator-grid p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.authenticator-grid label { width: 100%; display: grid; gap: 7px; color: #525968; font-size: 10px; font-weight: 700; }
.authenticator-grid > section > small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.bound-device { width: 100%; display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid #cfeede; border-radius: 11px; background: #f1fbf6; }
.bound-device > span { color: #198451; }
.bound-device div { display: grid; gap: 2px; }
.bound-device strong { font-size: 11px; }
.bound-device small { color: var(--muted); font-size: 9px; }
.authenticator-setup { width: 100%; display: grid; gap: 13px; }
.secret-key { display: grid; gap: 7px; padding: 13px; border-radius: 10px; background: #f6f5fc; }
.secret-key span { color: var(--muted); font-size: 9px; }
.secret-key code { font-size: 12px; font-weight: 800; letter-spacing: .07em; word-break: break-all; }
.code-input { letter-spacing: .18em; font-size: 14px !important; font-variant-numeric: tabular-nums; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sensitive-verification { display: grid; gap: 12px; padding: 14px; border: 1px solid #d9d5ff; border-radius: 12px; background: #f7f6ff; }
.sensitive-verification-heading { display: flex; align-items: flex-start; gap: 10px; color: #3d2f9f; }
.sensitive-verification-heading > div { display: grid; gap: 3px; }
.sensitive-verification-heading small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.sensitive-verification .ghost-button { justify-self: start; }
.verification-feedback { color: var(--muted); }
.message.compact { margin: 0; padding: 10px 12px; }
.security-modal-backdrop { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 24px; overflow-y: auto; background: rgba(20,19,39,.58); backdrop-filter: blur(5px); }
.security-confirmation-modal { width: min(560px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; border: 1px solid rgba(255,255,255,.58); border-radius: 18px; background: #fff; box-shadow: 0 28px 80px rgba(20,19,39,.28); }
.security-confirmation-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 26px 20px; border-bottom: 1px solid var(--line); }
.security-confirmation-header h2 { margin: 5px 0 7px; font-size: 18px; }
.security-confirmation-header p:last-child { max-width: 450px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.security-confirmation-header .icon-button { flex: 0 0 auto; }
.security-confirmation-body { padding: 22px 26px 24px; }
.security-password-fields { display: grid; gap: 12px; margin: 0; padding: 0 0 18px; border: 0; border-bottom: 1px solid var(--line); }
.security-password-fields legend { padding: 0; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.security-password-fields label { display: grid; gap: 7px; }
.security-confirmation-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 4px; }
.security-confirmation-actions button { min-width: 110px; }
.user-agent-cell { max-width: 360px; color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.audit-filter-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 12px; }
.audit-filter-bar .search-box { flex: 1; }

.authorization-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: 20px 22px; }
.authorization-summary > div { display: flex; align-items: center; gap: 13px; }
.authorization-summary > div > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #efecff; color: var(--primary); }
.authorization-summary > div > div { display: grid; }
.authorization-summary strong { font-size: 24px; }
.authorization-summary small { color: var(--muted); font-size: 9px; }
.authorization-summary p { max-width: 620px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; text-align: right; }
.authorization-list { display: grid; gap: 14px; }
.authorization-card { display: grid; grid-template-columns: auto minmax(0, 1fr) 190px; align-items: center; gap: 18px; padding: 20px; }
.authorization-app-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(135deg, #ddd9ff, #f1efff); color: var(--primary); font-size: 18px; font-weight: 800; }
.authorization-main { min-width: 0; display: grid; gap: 14px; }
.authorization-main header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.authorization-main h2 { margin: 0 0 3px; font-size: 15px; }
.authorization-scopes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.authorization-scopes > span { margin-right: 4px; color: var(--muted); font-size: 9px; }
.authorization-scopes code { padding: 4px 7px; border-radius: 6px; background: #f2f1f8; font-size: 8px; }
.authorization-main dl { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; }
.authorization-main dl div { display: grid; gap: 2px; }
.authorization-main dt { color: var(--muted); font-size: 8px; }
.authorization-main dd { margin: 0; font-size: 10px; font-weight: 700; }
.authorization-actions { display: flex; justify-content: flex-end; }
.revoke-confirm { display: grid; gap: 6px; padding: 12px; border: 1px solid #f1cdd2; border-radius: 10px; background: #fff8f8; }
.revoke-confirm strong { color: var(--danger); font-size: 10px; }
.revoke-confirm small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.revoke-confirm > div { display: flex; gap: 6px; }
.revoke-confirm button { min-height: 32px; padding-inline: 10px; font-size: 9px; }
.empty-authorization { display: grid; justify-items: center; padding: 70px 24px; text-align: center; }
.empty-authorization > span { color: #bbb8df; font-size: 48px; }
.empty-authorization h2 { margin: 13px 0 6px; font-size: 17px; }
.empty-authorization p { max-width: 460px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.agent-create-panel { margin-bottom: 22px; padding: 22px; }
.compound-input { display: flex; align-items: center; gap: 8px; }
.compound-input .ant-input { flex: 1; }
.agent-scope-section { margin-top: 22px; }
.agent-scope-section h3 { margin: 0 0 10px; font-size: 12px; }
.scope-choice-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.scope-choice-grid label, .scope-choice-list label { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 12px; cursor: pointer; }
.scope-choice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scope-choice-list label > span:nth-of-type(1) { display: grid; flex: 1; gap: 4px; }
.scope-choice-list small { color: var(--muted); }
.agent-token-once { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 2fr) auto; align-items: center; gap: 16px; }
.agent-token-once > div { display: grid; gap: 4px; }
.agent-token-once code { overflow-wrap: anywhere; user-select: all; }
.agent-binding-card { display: grid; grid-template-columns: auto minmax(0, 1fr) 160px; align-items: center; gap: 18px; padding: 20px; }
.agent-actions { display: grid; gap: 8px; }
.agent-approval-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 20px; }
.agent-approval-summary, .agent-approval-form { padding: 22px; }
.agent-approval-summary > header { display: flex; align-items: center; gap: 14px; }
.agent-approval-summary > header h2 { margin: 3px 0; }
.agent-approval-summary > header code { overflow-wrap: anywhere; }
.agent-approval-summary dl { display: grid; gap: 0; margin: 22px 0 0; }
.agent-approval-summary dl div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.agent-approval-summary dd { display: grid; gap: 5px; margin: 0; overflow-wrap: anywhere; }
.agent-approval-summary dt { color: var(--muted); }
.agent-approval-form { display: grid; align-content: start; gap: 16px; }
.agent-approval-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.agent-revoke-choice { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #fecaca; border-radius: 12px; background: #fff7f7; padding: 12px; }
.agent-revoke-choice span { display: grid; gap: 3px; }
.agent-revoke-choice small { color: var(--muted); }
.agent-challenge-history { margin-top: 22px; overflow: hidden; }

.segmented { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.segmented button { min-height: 31px; padding: 0 13px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 700; }
.segmented button.active { background: #eceaff; color: var(--primary); }
.data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.data-table th { padding: 11px 18px; background: #fafafd; color: #7c8290; font-size: 8px; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.data-table td { padding: 13px 18px; border-top: 1px solid #eff0f4; vertical-align: middle; }
.data-table td strong, .data-table td small { display: block; }
.data-table td small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.compact-table { max-height: 350px; overflow-y: auto; }
.inline-create { border-top: 1px solid var(--line); background: #fcfcfe; }

.security-workspace { align-items: start; }
.security-workspace .authenticator-grid { grid-template-columns: 1fr; gap: 0; }
.security-workspace .authenticator-grid > section + section { padding: 24px 0 0; border-top: 1px solid var(--line); border-left: 0; }
.timeline { padding: 8px 22px 20px; }
.timeline-item { display: grid; grid-template-columns: auto 1fr; gap: 13px; padding: 15px 0; border-bottom: 1px solid #eff0f4; }
.timeline-item:last-child { border-bottom: 0; }
.timeline-dot { width: 9px; height: 9px; margin-top: 4px; border: 2px solid #b7afff; border-radius: 50%; background: #fff; }
.timeline-dot.danger { border-color: #ed8994; }
.timeline-item div { display: grid; gap: 3px; }
.timeline-item strong { font-size: 11px; }
.timeline-item p { margin: 0; color: #596071; font-size: 9px; }
.timeline-item small { color: #979ca8; font-size: 8px; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 32px; background: radial-gradient(circle at 15% 15%, #ece9ff, transparent 32%), #f5f6fa; }
.login-card { --login-primary: #5b4bdb; --login-accent: #14b8a6; --login-surface: #211d42; --login-text: #fff; width: min(960px, 100%); min-height: 600px; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 30px 90px rgba(27,28,48,.14); }
.login-visual { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 42px; background: linear-gradient(145deg, var(--login-surface), var(--login-primary)); color: var(--login-text); }
.login-visual::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(145deg, rgba(10,8,30,.08), rgba(10,8,30,.42)); content: ""; }
.login-background-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.login-visual-top, .branding-preview-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand span, .login-brand-image { width: 38px; height: 38px; border-radius: 11px; }
.login-brand span { display: grid; place-items: center; background: var(--login-primary); color: #fff; font-weight: 800; }
.login-brand-image { display: block; object-fit: contain; background: rgba(255,255,255,.94); }
.login-brand strong { color: inherit; }
.login-language-switch, .branding-language-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(10,8,30,.18); backdrop-filter: blur(8px); }
.login-language-switch a, .branding-language-switch button { min-width: 30px; height: 25px; display: grid; place-items: center; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: inherit; font-size: 8px; font-weight: 700; opacity: .68; }
.login-language-switch a:hover, .branding-language-switch button:hover { opacity: 1; }
.login-language-switch a.active, .branding-language-switch button.active { background: rgba(255,255,255,.94); color: #26213f; opacity: 1; box-shadow: 0 3px 10px rgba(10,8,30,.14); }
.login-message h1 { margin: 10px 0 14px; color: var(--login-text); font-size: clamp(32px, 4vw, 48px); line-height: 1.15; letter-spacing: -.045em; white-space: pre-line; }
.login-message > p:last-child { max-width: 390px; margin-bottom: 0; color: inherit; font-size: 12px; line-height: 1.75; opacity: .78; }
.login-visual .eyebrow.light { color: var(--login-accent); }
.login-proof { display: flex; justify-content: space-between; gap: 16px; color: inherit; font-size: 9px; opacity: .62; }
.login-form-panel { display: flex; flex-direction: column; justify-content: center; gap: 30px; padding: 54px; }
.login-form-panel .eyebrow { color: var(--login-primary); }
.login-form-panel h2 { margin: 5px 0; font-size: 26px; letter-spacing: -.035em; }
.login-form-panel p { margin-bottom: 0; font-size: 10px; }
.login-method-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 10px; background: #f2f1f7; }
.login-method-tabs a { display: grid; min-height: 34px; place-items: center; padding: 7px 10px; border-radius: 7px; color: #777587; font-size: 9px; font-weight: 700; text-align: center; }
.login-method-tabs a:hover { color: var(--login-primary); }
.login-method-tabs a.active { background: #fff; color: var(--login-primary); box-shadow: 0 3px 12px rgba(39,35,70,.10); }
.phone-login-fieldset { display: grid; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.phone-login-fieldset legend { margin-bottom: 7px; color: #3e4050; font-size: 9px; font-weight: 700; }
.phone-login-inputs { display: grid; grid-template-columns: minmax(112px, .42fr) minmax(0, 1fr); gap: 10px; }
.phone-login-inputs label { min-width: 0; }
.phone-login-inputs input { width: 100%; }
.phone-login-fieldset > small { color: var(--muted); font-size: 8px; line-height: 1.5; }
.login-card .primary-button { background: var(--login-primary); }
.login-card .primary-button:hover { filter: brightness(.9); }
.login-support { display: inline-flex; align-items: center; gap: 7px; width: fit-content; color: var(--muted); font-size: 10px; }
.login-support:hover { color: var(--login-primary); }
.login-support .material-symbols-rounded { font-size: 17px; }
.login-secondary-link { align-self: center; color: var(--login-primary); font-size: 10px; font-weight: 700; }
.registration-policy-note { padding: 10px 12px; border-radius: 8px; background: #f5f3ff; color: #6258a8; text-align: center; line-height: 1.5; }

.registration-card { width: min(1080px, 100%); min-height: 640px; grid-template-columns: .92fr 1.08fr; }
.registration-panel { display: flex; flex-direction: column; justify-content: center; padding: 46px 52px; }
.registration-card .registration-intro .eyebrow { color: var(--login-primary); }
.registration-card .secondary-button { color: var(--login-primary); }
.registration-intro { margin-bottom: 26px; }
.registration-intro h1, .registration-empty h1 { margin: 5px 0 9px; font-size: 28px; letter-spacing: -.035em; }
.registration-intro > p:last-child, .registration-empty p { color: var(--muted); font-size: 10px; line-height: 1.65; }
.registration-form { grid-template-columns: 1fr 1fr; }
.registration-form label:nth-of-type(3), .registration-form label:nth-of-type(4), .registration-form label:nth-of-type(5), .registration-form button, .registration-expiry { grid-column: 1 / -1; }
.registration-expiry { color: var(--muted); text-align: center; }
.registration-empty { display: grid; justify-items: center; padding: 45px 0 30px; text-align: center; }
.registration-empty > .material-symbols-rounded { color: var(--login-accent); font-size: 52px; }
.invitation-code-form { width: min(360px, 100%); display: grid; gap: 10px; margin-top: 18px; text-align: left; }
.invitation-code-form label { color: var(--ink); font-size: 9px; font-weight: 700; }
.invitation-code-form input { text-align: center; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.invitation-divider { margin: 14px 0 10px; color: var(--muted); font-size: 9px; }

.branding-preview { --login-primary: #5b4bdb; --login-accent: #14b8a6; --login-surface: #211d42; --login-text: #fff; position: relative; isolation: isolate; min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; margin-bottom: 28px; padding: 28px; border-radius: 16px; background: linear-gradient(145deg, var(--login-surface), var(--login-primary)); color: var(--login-text); box-shadow: 0 14px 32px rgba(33,29,66,.16); }
.branding-preview::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(145deg, rgba(10,8,30,.08), rgba(10,8,30,.42)); content: ""; }
.branding-preview-background { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.branding-preview-brand { display: flex; align-items: center; gap: 11px; }
.branding-preview-brand span, .branding-preview-brand img { width: 36px; height: 36px; border-radius: 10px; }
.branding-preview-brand span { display: grid; place-items: center; background: var(--login-primary); color: #fff; font-size: 11px; font-weight: 800; }
.branding-preview-brand img { object-fit: contain; background: rgba(255,255,255,.94); }
.branding-preview-brand strong { color: inherit; font-size: 13px; }
.branding-preview-copy small { color: var(--login-accent); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.branding-preview-copy h3 { max-width: 580px; margin: 8px 0 10px; color: inherit; font-size: clamp(25px, 4vw, 40px); line-height: 1.13; white-space: pre-line; }
.branding-preview-copy p { max-width: 560px; margin: 0; color: inherit; font-size: 11px; line-height: 1.7; opacity: .78; }
.branding-preview-proof { display: flex; justify-content: space-between; gap: 16px; font-size: 8px; opacity: .62; }

.brand-palette-picker { grid-column: 1 / -1; display: grid; gap: 12px; padding: 16px; border: 1px solid #e2e3eb; border-radius: 12px; background: #fafafd; }
.brand-palette-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.brand-palette-heading > div { display: grid; gap: 3px; }
.brand-palette-heading strong { color: var(--ink); font-size: 10px; }
.brand-palette-heading small { color: var(--muted); font-size: 8px; font-weight: 500; }
.brand-palette-status { padding: 4px 8px; border-radius: 999px; background: #eceaff; color: var(--primary); font-size: 8px; font-weight: 700; white-space: nowrap; }
.brand-palette-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.brand-palette-card { position: relative; min-width: 0; display: grid; gap: 9px; padding: 9px; border: 1px solid #e0e1e9; border-radius: 10px; background: #fff; color: var(--ink); text-align: left; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.brand-palette-card:hover { border-color: #bdb8ec; transform: translateY(-1px); }
.brand-palette-card.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(91,75,219,.12); }
.brand-palette-card:focus-visible { outline: 2px solid rgba(91,75,219,.32); outline-offset: 2px; }
.brand-palette-swatches { height: 30px; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid rgba(23,32,51,.1); border-radius: 7px; }
.brand-palette-swatches i { display: block; }
.brand-palette-copy { min-width: 0; display: grid; gap: 2px; }
.brand-palette-copy strong { font-size: 9px; }
.brand-palette-copy small { overflow: hidden; color: var(--muted); font-size: 7px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.brand-palette-check { position: absolute; top: 13px; right: 13px; padding: 2px; border-radius: 50%; background: #fff; color: var(--primary); font-size: 16px; box-shadow: 0 2px 7px rgba(23,32,51,.2); }

.logo-editor { display: grid; gap: 14px; }
.logo-editor-current { min-height: 82px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px; border: 1px solid #e2e3eb; border-radius: 11px; background: #fafafd; }
.logo-editor-thumbnail { width: 54px; height: 54px; display: grid; place-items: center; overflow: hidden; border: 1px solid #dedfe8; border-radius: 13px; background: #fff; }
.logo-editor-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.logo-editor-thumbnail.background { width: 64px; height: 76px; }
.logo-editor-thumbnail.background img { object-fit: cover; }
.logo-editor-thumbnail span { color: #a2a5b1; font-size: 25px; }
.logo-editor-current > div:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.logo-editor-current strong, .logo-crop-header strong { color: var(--ink); font-size: 11px; }
.logo-editor-current small, .logo-crop-header small { color: var(--muted); font-size: 9px; font-weight: 500; }
.logo-file-button { cursor: pointer; }
.logo-file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.logo-file-button:focus-within { outline: 2px solid rgba(91,75,219,.28); outline-offset: 2px; }
.logo-crop-panel { padding: 18px; border: 1px solid #dcd9f6; border-radius: 13px; background: linear-gradient(145deg, #faf9ff, #fff); box-shadow: 0 12px 28px rgba(46,38,112,.08); }
.logo-crop-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.logo-crop-header > div { display: grid; gap: 3px; }
.logo-icon-button { width: 31px; height: 31px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.logo-icon-button:hover { background: #efedf9; color: var(--ink); }
.logo-icon-button span { font-size: 19px; }
.logo-crop-workspace { display: grid; grid-template-columns: minmax(220px, 320px) minmax(210px, 1fr); gap: 22px; align-items: center; }
.logo-crop-canvas-wrap { width: min(100%, 320px); aspect-ratio: 1; padding: 10px; border-radius: 17px; background: #17182a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.logo-crop-canvas-wrap canvas { width: 100%; height: 100%; display: block; border-radius: 10px; background-image: linear-gradient(45deg, #ececf1 25%, transparent 25%), linear-gradient(-45deg, #ececf1 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ececf1 75%), linear-gradient(-45deg, transparent 75%, #ececf1 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; }
.logo-crop-controls { display: grid; gap: 14px; }
.logo-crop-controls label { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 10px; }
.logo-crop-controls label span { color: #525968; font-size: 9px; }
.logo-crop-controls input { width: 100%; accent-color: var(--primary); }
.logo-crop-controls p { margin: 2px 0 0; color: var(--muted); font-size: 8px; font-weight: 500; line-height: 1.6; }
.logo-crop-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 17px; padding-top: 16px; border-top: 1px solid #eceaf7; }
.logo-editor-error { margin-top: 14px; padding: 10px 12px; border: 1px solid #f4d4d8; border-radius: 9px; background: #fff0f2; color: #ab3340; font-size: 9px; }

#blazor-error-ui { display: none; position: fixed; inset: auto 20px 20px; z-index: 1000; padding: 14px 18px; border-radius: 10px; background: #fff0f2; color: #9d2f3c; box-shadow: var(--shadow); font-size: 11px; }
#blazor-error-ui .dismiss { float: right; margin-left: 16px; cursor: pointer; }

@media (max-width: 1050px) {
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .two-column { grid-template-columns: 1fr; }
    .brand-palette-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .account-actions { grid-template-columns: 1fr; }
    .security-scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .authorization-card { grid-template-columns: auto minmax(0, 1fr); }
    .agent-binding-card, .agent-approval-grid { grid-template-columns: 1fr; }
    .agent-token-once { grid-template-columns: 1fr; }
    .scope-choice-list { grid-template-columns: 1fr; }
    .authorization-actions { grid-column: 2; justify-content: flex-start; }
    .administrator-row { grid-template-columns: auto minmax(0, 1fr) auto auto; }
    .administrator-row > button { grid-column: 2 / -1; justify-self: end; }
}

@media (max-width: 820px) {
    .portal-shell { grid-template-columns: 76px minmax(0, 1fr); }
    .portal-sider { width: 76px; padding-inline: 10px; }
    .brand-lockup { padding-inline: 8px; }
    .brand-lockup > div:last-child, .portal-menu-item:not(.active)::after, .portal-menu-item { font-size: 0; }
    .portal-menu-item { justify-content: center; padding: 0; }
    .menu-section, .sider-footer { display: none; }
    .portal-main { grid-column: 2; }
    .portal-content { width: min(100% - 28px, 1460px); }
    .workbench { grid-template-columns: 280px minmax(0, 1fr); }
    .profile-layout { grid-template-columns: 1fr; }
    .profile-aside { position: static; }
    .settings-layout { grid-template-columns: 70px minmax(0, 1fr); }
    .settings-nav button { justify-content: center; padding: 0; font-size: 0; }
    .oidc-client-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .portal-header { padding: 0 16px; }
    .context-label div, .header-link { display: none; }
    .portal-content { padding-top: 26px; }
    .page-heading.split { align-items: flex-start; flex-direction: column; }
    .metric-grid, .dashboard-grid, .account-grid, .form-grid, .profile-value-grid { grid-template-columns: 1fr; }
    .profile-value.wide { grid-column: auto; }
    .workbench { display: block; }
    .list-pane { border-right: 0; border-bottom: 1px solid var(--line); }
    .record-list { max-height: 300px; }
    .settings-layout { display: block; }
    .settings-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .settings-nav button { min-width: 46px; }
    .settings-content, .detail-pane { padding: 20px; }
    .ai-test-panel { align-items: stretch; flex-direction: column; }
    .ai-test-panel > button { justify-content: center; }
    .login-shell { padding: 14px; }
    .login-card { grid-template-columns: 1fr; }
    .login-visual { min-height: 320px; padding: 28px; }
    .login-proof { display: none; }
    .login-form-panel { padding: 34px 26px; }
    .registration-card { grid-template-columns: 1fr; }
    .registration-panel { padding: 34px 26px; }
    .registration-form { grid-template-columns: 1fr; }
    .registration-form label { grid-column: 1; }
    .phone-login-inputs { grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
    .account-hero { align-items: flex-start; flex-wrap: wrap; }
    .account-hero > code { width: 100%; margin-left: 0; }
    .security-scoreboard, .authenticator-grid { grid-template-columns: 1fr; }
    .recovery-contact-item > header { align-items: flex-start; }
    .recovery-contact-header-actions { flex-wrap: wrap; }
    .recovery-contact-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .password-action-panel { grid-template-columns: auto minmax(0, 1fr); }
    .password-action-panel > button { grid-column: 1 / -1; width: 100%; }
    .authenticator-grid > section + section { padding: 24px 0 0; border-top: 1px solid var(--line); border-left: 0; }
    .authorization-summary { align-items: flex-start; flex-direction: column; }
    .authorization-summary p { text-align: left; }
    .authorization-card { grid-template-columns: 1fr; }
    .authorization-actions { grid-column: auto; }
    .logo-editor-current { grid-template-columns: auto minmax(0, 1fr); }
    .logo-file-button { grid-column: 1 / -1; width: 100%; }
    .logo-crop-workspace { grid-template-columns: 1fr; }
    .logo-crop-canvas-wrap { margin: 0 auto; }
    .brand-palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .administrator-row { grid-template-columns: auto minmax(0, 1fr); }
    .administrator-row .status-pill { grid-column: 2; width: fit-content; }
    .administrator-row > button { grid-column: 1 / -1; width: 100%; }
    .security-modal-backdrop { align-items: end; padding: 12px; }
    .security-confirmation-modal { max-height: calc(100vh - 24px); border-radius: 16px; }
    .security-confirmation-header, .security-confirmation-body { padding-inline: 20px; }
    .security-confirmation-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .oidc-client-header { align-items: flex-start; flex-direction: column; }
    .oidc-header-actions { width: 100%; justify-content: space-between; }
    .oidc-client-grid { padding: 14px; }
    .oidc-client-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .oidc-client-actions button { width: 100%; }
    .oidc-secret-value { grid-template-columns: 1fr; }
}