:root {
    color-scheme: light;
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-accent: #eefaf7;
    --border: #e3e9f1;
    --border-strong: #d4dde8;
    --text: #172033;
    --text-soft: #5f6c80;
    --text-faint: #8b96a8;
    --primary: #0b8f7d;
    --primary-strong: #087466;
    --primary-soft: #e4f7f2;
    --blue: #2e6cf6;
    --purple: #7657da;
    --orange: #f29b38;
    --red: #e55765;
    --cyan: #1f9dbc;
    --green: #22a879;
    --sidebar: #112534;
    --sidebar-soft: #183446;
    --shadow: 0 14px 34px rgba(30, 52, 74, .08);
    --radius: 16px;
    --radius-small: 10px;
    font-family: Inter, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-width: 1180px; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .58; }

.app-shell { display: grid; grid-template-columns: 242px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 24px 18px; color: #eaf2f6; background: linear-gradient(180deg, #102635 0%, #0d202e 100%); box-shadow: 8px 0 30px rgba(6, 24, 36, .12); z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 26px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; font-size: 22px; font-weight: 800; background: linear-gradient(135deg, #20c5a6, #0b8f7d); box-shadow: 0 8px 20px rgba(17, 181, 151, .28); }
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-copy strong { font-size: 16px; letter-spacing: .2px; }
.brand-copy small { color: #8fa9b8; font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; }
.main-nav { display: flex; flex-direction: column; gap: 7px; }
.main-nav a { position: relative; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px; border-radius: 12px; color: #a9bdc9; font-size: 14px; font-weight: 600; transition: .18s ease; }
.main-nav a:hover { color: #fff; background: rgba(255,255,255,.055); }
.main-nav a.active { color: #fff; background: linear-gradient(90deg, rgba(27, 188, 159, .28), rgba(27, 188, 159, .09)); box-shadow: inset 3px 0 0 #22c7a7; }
.nav-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; font-size: 16px; color: #78a8a2; background: rgba(255,255,255,.06); }
.main-nav a.active .nav-icon { color: #dffbf5; background: rgba(34,199,167,.2); }
.sidebar-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.server-state { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.045); }
.server-state > div { display: flex; flex-direction: column; gap: 2px; }
.server-state strong { font-size: 12px; }
.server-state small { color: #8fa9b8; font-size: 11px; }
.status-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #24c78f; box-shadow: 0 0 0 5px rgba(36,199,143,.13); }

.workspace { min-width: 0; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.9); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 10; }
.topbar-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 1.45px; color: var(--primary); }
.topbar-title { margin-top: 4px; font-size: 17px; font-weight: 750; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.account-chip { display: flex; align-items: center; gap: 10px; min-width: 188px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.account-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--primary), #22b7a1); font-weight: 800; }
.account-chip > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.account-chip strong { font-size: 12px; }
.account-chip small { font-size: 10px; color: var(--text-faint); }
.content { padding: 28px 30px 46px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.page-kicker, .panel-kicker { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.35px; color: var(--primary); }
.page-head h1 { margin: 5px 0 6px; font-size: 28px; line-height: 1.2; letter-spacing: -.5px; }
.page-head p { margin: 0; color: var(--text-soft); font-size: 13px; }
.page-actions { display: flex; align-items: center; gap: 10px; }

.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 750; transition: .18s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button-primary { color: #fff; background: linear-gradient(135deg, #0b927f, #087467); box-shadow: 0 8px 18px rgba(11,143,125,.18); }
.button-secondary { color: #344156; border-color: var(--border-strong); background: var(--surface); }
.button-soft { color: var(--primary-strong); border-color: #cdebe5; background: var(--primary-soft); }
.button-ghost { color: var(--text-soft); background: transparent; }
.button-danger-soft { color: #c93f4e; border-color: #f2cbd0; background: #fff0f2; }
.button-block { width: 100%; }
.button-large { min-height: 48px; border-radius: 12px; font-size: 13px; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 11px; color: var(--text-soft); background: var(--surface); font-size: 18px; }
.icon-button.subtle { width: 32px; height: 32px; background: var(--surface-soft); }
.table-action { padding: 6px 10px; border: 0; border-radius: 8px; color: var(--primary-strong); background: var(--primary-soft); font-size: 11px; font-weight: 750; }
.table-action.danger { color: #c53f4c; background: #fff0f2; }
.text-link { color: var(--primary); font-size: 12px; font-weight: 750; }

.month-input, .text-input, .select-input { min-height: 38px; border: 1px solid var(--border-strong); border-radius: 10px; outline: none; color: var(--text); background: var(--surface); transition: .16s ease; }
.month-input { padding: 0 12px; }
.text-input { width: 100%; padding: 0 12px; }
.select-input { min-width: 170px; padding: 0 34px 0 12px; }
.select-input.full { width: 100%; min-width: 0; }
.compact-select { min-width: 128px; }
.month-input:focus, .text-input:focus, .select-input:focus { border-color: #5ac0b0; box-shadow: 0 0 0 3px rgba(11,143,125,.1); }
.text-input:disabled { color: var(--text-faint); background: #f1f4f8; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group label { font-size: 11px; font-weight: 750; color: #445168; }
.form-group small { color: var(--text-faint); font-size: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.span-2 { grid-column: span 2; }
.section-label { padding-top: 5px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.toggle-row { flex-direction: row; align-items: center; justify-content: space-between; padding: 11px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); }
.toggle-row > div { display: flex; flex-direction: column; gap: 3px; }
.switch { position: relative; display: inline-flex; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: #cdd5df; transition: .2s; }
.switch span::before { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.15); transition: .2s; }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::before { transform: translateX(18px); }

.stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.stat-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card { min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 108px; padding: 17px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 7px 20px rgba(34,54,75,.045); }
.stat-icon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-weight: 850; }
.stat-blue { color: #2761dd; background: #eaf0ff; }
.stat-green { color: #138b62; background: #e5f7ef; }
.stat-purple { color: #6b4ec8; background: #f0ebff; }
.stat-orange { color: #c87820; background: #fff1df; }
.stat-red { color: #c94755; background: #ffeaed; }
.stat-cyan { color: #187f99; background: #e6f6fa; }
.stat-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.stat-copy > span { color: var(--text-soft); font-size: 10px; font-weight: 750; }
.stat-copy strong { overflow: hidden; text-overflow: ellipsis; font-size: 21px; line-height: 1.1; }
.stat-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-faint); font-size: 9.5px; }

.status-banner { display: flex; align-items: center; gap: 14px; padding: 14px 17px; margin-bottom: 17px; border: 1px solid; border-radius: 14px; }
.status-banner-success { border-color: #c7eadf; background: #ecf9f5; }
.status-banner-warning { border-color: #f2dfb9; background: #fff8e9; }
.status-banner-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: var(--primary); font-weight: 900; }
.status-banner-warning .status-banner-icon { background: #db9136; }
.status-banner > div:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.status-banner strong { font-size: 12px; }
.status-banner span { color: var(--text-soft); font-size: 10px; }
.status-banner-meta { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, .75fr); gap: 16px; }
.system-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.panel { min-width: 0; padding: 19px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel-wide { grid-row: span 2; }
.system-grid .panel-wide { grid-row: auto; grid-column: span 2; }
.panel-table { padding: 0; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.panel-head h2 { margin: 4px 0 0; font-size: 16px; }
.table-card-head { padding: 18px 19px 0; }
.module-list { display: flex; flex-direction: column; gap: 15px; }
.module-row { display: grid; grid-template-columns: 145px minmax(150px,1fr) 48px; align-items: center; gap: 12px; }
.module-label { display: flex; flex-direction: column; gap: 2px; }
.module-label strong { font-size: 11px; }
.module-label span, .module-ratio { color: var(--text-faint); font-size: 9px; }
.module-ratio { text-align: right; }
.progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: #edf1f6; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #13a78f, #42c8b2); }
.progress-track.small { height: 5px; }
.detail-list { display: flex; flex-direction: column; margin: 0 0 16px; }
.detail-list > div { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid #edf1f5; }
.detail-list dt { color: var(--text-faint); font-size: 10px; }
.detail-list dd { margin: 0; text-align: right; color: #344156; font-size: 10px; font-weight: 650; }
.detail-list .detail-multiline dd { text-align: left; line-height: 1.6; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-actions { display: flex; flex-direction: column; gap: 9px; }
.quick-actions a { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); transition: .18s; }
.quick-actions a:hover { border-color: #bfe5dd; background: var(--primary-soft); transform: translateX(2px); }
.quick-actions a > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--primary); background: #fff; }
.quick-actions a > div { display: flex; flex-direction: column; gap: 2px; }
.quick-actions strong { font-size: 10.5px; }
.quick-actions small { color: var(--text-faint); font-size: 9px; }
.quick-actions b { color: var(--text-faint); }

.filter-bar { display: flex; align-items: center; gap: 10px; padding: 12px; margin-bottom: 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.compact-filter { justify-content: flex-start; }
.search-box { flex: 1; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: #fff; }
.search-box span { color: var(--text-faint); font-size: 18px; }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; }
.result-summary { display: flex; align-items: center; gap: 24px; margin: 0 2px 11px; color: var(--text-soft); font-size: 10px; }
.result-summary strong { color: var(--text); }
.inline-summary { margin: 0; }
.table-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.table-scroll { width: 100%; overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.data-table th { height: 42px; padding: 0 13px; text-align: left; white-space: nowrap; color: var(--text-faint); background: #f7f9fc; border-bottom: 1px solid var(--border); font-size: 9px; text-transform: uppercase; letter-spacing: .35px; }
.data-table td { padding: 12px 13px; vertical-align: middle; border-bottom: 1px solid #edf1f5; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fbfcfe; }
.data-table .row-selected { background: #f0faf7; }
.api-table { min-width: 1050px; }
.billing-table { min-width: 1100px; }
.method-stack { display: flex; flex-wrap: wrap; gap: 4px; }
.method-badge, .module-badge, .auth-badge, .role-badge, .plan-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 9px; font-weight: 850; }
.method-badge { min-width: 45px; padding: 5px 7px; }
.method-get { color: #2163d5; background: #eaf1ff; }
.method-post { color: #16835f; background: #e6f7f0; }
.method-put, .method-patch { color: #b6731f; background: #fff2df; }
.method-delete { color: #c74653; background: #ffebee; }
.method-any { color: #667085; background: #eef1f5; }
.module-badge { padding: 5px 8px; color: #5f4bb1; background: #f0ecff; }
.auth-badge { padding: 5px 8px; }
.auth-anonymous { color: #667085; background: #eef1f5; }
.auth-admin { color: #b63f4c; background: #ffebee; }
.auth-user { color: #176c9a; background: #e9f5fb; }
.auth-policy { color: #a36b1c; background: #fff2df; }
.auth-default { color: #4d5a6e; background: #eef2f6; }
.policy-text { display: block; margin-top: 5px; color: var(--text-faint); }
.route-code, .path-code, .key-prefix { display: inline-block; max-width: 510px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 7px; border-radius: 7px; color: #29405a; background: #f1f5f9; font-family: Consolas, monospace; font-size: 9.5px; }
.path-code { max-width: 420px; }
.action-cell, .quota-cell { display: flex; flex-direction: column; gap: 3px; }
.action-cell strong, .quota-cell span { font-size: 10.5px; }
.action-cell span, .quota-cell small { color: var(--text-faint); font-size: 9px; }
.user-cell { display: flex; align-items: center; gap: 10px; }
.user-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: var(--primary-strong); background: var(--primary-soft); font-weight: 800; }
.user-cell > div { display: flex; flex-direction: column; gap: 2px; }
.user-cell span:last-child { color: var(--text-faint); font-size: 9px; }
.tag-line { display: flex; align-items: center; gap: 5px; }
.role-badge, .plan-badge { padding: 5px 7px; }
.role-admin { color: #b63f4c; background: #ffebee; }
.role-user { color: #176c9a; background: #e9f5fb; }
.plan-badge { color: #5f4bb1; background: #f0ecff; }
.count-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 8px; color: var(--text-soft); background: #f0f3f7; font-size: 9px; font-weight: 750; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.status-success { color: #127957; background: #e3f6ee; }
.status-warning { color: #a76b19; background: #fff1d9; }
.status-danger { color: #bf3c49; background: #ffe8eb; }
.status-muted { color: #697386; background: #edf0f4; }
.quota-progress { min-width: 155px; display: grid; grid-template-columns: 42px minmax(85px,1fr); gap: 5px 8px; align-items: center; }
.quota-progress > div:nth-child(odd) { display: flex; justify-content: space-between; color: var(--text-faint); font-size: 8px; }
.quota-progress strong { color: var(--text-soft); }

.split-layout { display: grid; grid-template-columns: minmax(0,1fr) 350px; gap: 16px; align-items: start; }
.split-layout .panel-table .panel-head { padding: 18px 18px 0; }
.editor-panel { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 17px; }
.password-reset { display: grid; gap: 9px; padding-top: 16px; border-top: 1px solid var(--border); }
.password-reset > div { display: flex; flex-direction: column; gap: 3px; }
.password-reset strong { font-size: 11px; }
.password-reset small { color: var(--text-faint); font-size: 9px; }
.key-create-panel { margin-bottom: 15px; }
.identity-search-actions { min-width: 520px; }
.identity-search { min-width: 270px; }
.identity-stat-grid { margin-bottom: 16px; }
.identity-architecture { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(480px, 1.5fr) minmax(260px, .8fr); gap: 18px; align-items: center; margin-bottom: 16px; padding: 20px; border: 1px solid #cfe7df; border-radius: var(--radius); background: linear-gradient(135deg, #f3fbf8, #f8fbff); }
.identity-architecture-copy h2 { margin: 5px 0 7px; font-size: 17px; }
.identity-architecture-copy p { margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.65; }
.identity-flow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.identity-flow span { padding: 9px 11px; border: 1px solid #d9e7e3; border-radius: 10px; color: #245448; background: #fff; font-size: 9.5px; font-weight: 750; }
.identity-flow b { color: var(--primary); }
.database-chip { display: flex; flex-direction: column; gap: 4px; padding: 13px; border-radius: 11px; color: #dff8f1; background: #173f46; }
.database-chip strong { font-size: 10.5px; }
.database-chip small { overflow: hidden; text-overflow: ellipsis; color: #9fc3c4; font-size: 8.5px; white-space: nowrap; }
.identity-link-panel { margin-bottom: 16px; }
.identity-link-form { display: grid; grid-template-columns: .75fr 1fr 1.25fr auto; gap: 12px; align-items: end; }
.identity-table { min-width: 1180px; }
.identity-source-list, .grant-list { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.identity-source-badge { display: inline-flex; flex-direction: column; gap: 2px; min-width: 160px; padding: 7px 9px; border-radius: 9px; }
.identity-source-badge b { font-size: 9px; }
.identity-source-badge small { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.identity-source-badge.portal { color: #245c96; background: #eaf3ff; }
.identity-source-badge.agent { color: #176b53; background: #e7f7f1; }
.grant-list span { padding: 4px 7px; border-radius: 7px; color: #4c596b; background: #f0f3f7; font-size: 8.5px; }
.grant-list small { color: var(--text-faint); font-size: 8.5px; }
.key-create-form { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(230px, 1fr) auto; gap: 13px; align-items: end; }
.align-end { align-self: end; }
.secret-card { margin-bottom: 15px; padding: 17px; border: 1px solid #f0d6a7; border-radius: var(--radius); background: #fff9ec; }
.secret-head { display: flex; align-items: center; justify-content: space-between; }
.secret-head h2 { margin: 4px 0 0; font-size: 16px; }
.secret-card p { margin: 9px 0 12px; color: #745d35; font-size: 10px; }
.secret-value { display: flex; align-items: center; gap: 10px; }
.secret-value code { flex: 1; overflow: auto; padding: 12px; border: 1px dashed #ddc28e; border-radius: 10px; color: #5b4727; background: #fff; font-family: Consolas, monospace; font-size: 10px; }

.alert { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; margin-bottom: 15px; border: 1px solid; border-radius: 12px; font-size: 10.5px; line-height: 1.55; }
.alert.compact { padding: 10px 12px; }
.alert-icon { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #fff; font-size: 11px; font-weight: 900; }
.alert-error { color: #8b2e38; border-color: #f0cbd0; background: #fff0f2; }
.alert-error .alert-icon { background: var(--red); }
.alert-success { color: #176a50; border-color: #c9e8de; background: #ebf8f4; }
.alert-success .alert-icon { background: var(--green); }
.alert-info { color: #315c78; border-color: #cee3ef; background: #eff8fc; }
.alert-info .alert-icon { background: var(--cyan); }
.state-panel { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 180px; margin-bottom: 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: rgba(255,255,255,.5); }
.state-panel > div:last-child { display: flex; flex-direction: column; gap: 3px; }
.state-panel strong { font-size: 12px; }
.state-panel span { color: var(--text-faint); font-size: 10px; }
.loading-ring, .button-spinner { border-radius: 50%; border: 2px solid rgba(11,143,125,.18); border-top-color: var(--primary); animation: spin .8s linear infinite; }
.loading-ring { width: 30px; height: 30px; }
.button-spinner { width: 15px; height: 15px; border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 22px; color: var(--primary); background: var(--primary-soft); font-size: 22px; font-weight: 900; }
.empty-state h1 { margin: 18px 0 6px; font-size: 22px; }
.empty-state p { margin: 0 0 18px; color: var(--text-soft); }

.login-shell { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 38px; background: radial-gradient(circle at 15% 20%, #193f4e 0, #102a39 34%, #0c202d 100%); }
.login-grid { position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent); }
.login-orb { position: absolute; border-radius: 50%; filter: blur(4px); opacity: .35; }
.login-orb-one { width: 390px; height: 390px; left: -120px; top: -90px; background: #16b49c; }
.login-orb-two { width: 440px; height: 440px; right: -160px; bottom: -160px; background: #3568c5; }
.login-card { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; width: min(970px, 92vw); min-height: 560px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 25px; background: rgba(255,255,255,.96); box-shadow: 0 35px 90px rgba(0,0,0,.28); }
.login-intro { display: flex; flex-direction: column; padding: 48px; color: #eef8fb; background: linear-gradient(145deg, rgba(17,64,76,.98), rgba(10,42,54,.98)); }
.login-logo { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; background: linear-gradient(135deg, #22c4a7, #0b8f7d); font-size: 25px; font-weight: 900; box-shadow: 0 12px 25px rgba(15,183,154,.25); }
.login-tag { color: #5fddc8; font-size: 10px; font-weight: 850; letter-spacing: 2px; }
.login-intro h1 { max-width: 390px; margin: 12px 0 12px; font-size: 34px; line-height: 1.25; }
.login-intro > p { max-width: 410px; margin: 0; color: #a9c0cb; font-size: 12px; line-height: 1.75; }
.login-feature-list { display: flex; flex-direction: column; gap: 13px; margin-top: auto; }
.login-feature-list > div { display: grid; grid-template-columns: 34px 120px minmax(0,1fr); align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.045); }
.login-feature-list span { color: #59d7c2; font-size: 9px; font-weight: 850; }
.login-feature-list strong { font-size: 11px; }
.login-feature-list small { color: #91aab6; font-size: 9px; }
.login-form-panel { display: flex; flex-direction: column; justify-content: center; padding: 52px 50px; }
.login-form-head { margin-bottom: 23px; }
.login-form-head h2 { margin: 16px 0 7px; font-size: 24px; }
.login-form-head p { margin: 0; color: var(--text-soft); font-size: 11px; }
.login-form-panel .form-group { margin-bottom: 15px; }
.login-form-panel .text-input { min-height: 46px; border-radius: 12px; }
.login-api-hint { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; color: var(--text-faint); font-size: 9px; }
.login-api-hint .status-dot { width: 7px; height: 7px; box-shadow: none; }

@media (max-width: 1320px) {
    .stat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .stat-grid-four { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

.identity-stat-grid-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.identity-source-badge.legacy { background: #fff7e8; border-color: #f1d7a6; color: #8a5b0a; }
@media (max-width: 1280px) { .identity-stat-grid-five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .identity-stat-grid-five { grid-template-columns: 1fr; } }


/* Step 10.31 - API Client 与 Scope */
.client-layout { grid-template-columns: minmax(0, 1fr) 410px; }
.client-name-cell { display: flex; flex-direction: column; gap: 5px; min-width: 220px; }
.client-name-cell code, .readonly-client-id code { color: #0a6d61; font-size: 11px; word-break: break-all; }
.client-name-cell small { color: var(--text-muted); font-size: 11px; }
.scope-line { display: flex; flex-wrap: wrap; gap: 5px; max-width: 360px; }
.scope-chip { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border: 1px solid #cdebe5; border-radius: 999px; color: #087467; background: #effbf8; font-size: 10px; font-weight: 700; }
.scope-chip.muted { color: var(--text-muted); border-color: var(--border); background: var(--surface-soft); }
.scope-selector { display: grid; gap: 8px; max-height: 330px; overflow: auto; padding-right: 3px; }
.scope-option { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); transition: .16s ease; }
.scope-option:hover { border-color: #acdcd3; background: #f4fbf9; }
.scope-option.selected { border-color: #73cbbb; background: #ecfaf6; box-shadow: inset 3px 0 0 #16a58d; }
.scope-option input { margin-top: 3px; }
.scope-option span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.scope-option strong { color: var(--text); font-family: Consolas, monospace; font-size: 11px; }
.scope-option small { color: var(--text-muted); font-size: 10px; line-height: 1.5; }
.scope-option em { align-self: center; padding: 2px 6px; border-radius: 999px; color: #087467; background: rgba(22,165,141,.11); font-size: 9px; font-style: normal; font-weight: 750; white-space: nowrap; }
.readonly-client-id { display: flex; flex-direction: column; gap: 5px; margin: 0 0 15px; padding: 11px 12px; border: 1px dashed #b9dcd6; border-radius: 10px; background: #f4fbf9; }
.readonly-client-id small { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.secret-banner { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding: 16px 18px; border: 1px solid #f1ce86; border-radius: 14px; background: linear-gradient(135deg, #fffaf0, #fff5d9); box-shadow: 0 8px 24px rgba(160,112,16,.08); }
.secret-banner > div { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.secret-banner code { display: block; max-width: 100%; padding: 10px 12px; border-radius: 9px; color: #7a4f00; background: rgba(255,255,255,.72); font-size: 12px; word-break: break-all; user-select: all; }
.secret-banner small { color: #8b6b2d; font-size: 11px; }
.integration-guide { margin-top: 16px; padding: 0 18px 18px; }
.flow-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.flow-grid > div { position: relative; display: flex; flex-direction: column; gap: 7px; min-height: 125px; padding: 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }
.flow-grid > div > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; background: #0b927f; font-size: 12px; font-weight: 800; }
.flow-grid strong { font-size: 13px; }
.flow-grid small { color: var(--text-muted); font-size: 11px; line-height: 1.65; }
@media (max-width: 1280px) { .client-layout { grid-template-columns: 1fr; } .flow-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px) { .flow-grid { grid-template-columns: 1fr; } }

/* Step 10.32 - 真实 Usage、套餐价格与月度账单 */
.button-small { min-height: 30px; padding: 0 10px; border-radius: 8px; font-size: 10px; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 150px; }
.muted-text { color: var(--text-faint); font-size: 10px; }
.compact-empty { min-height: 150px; gap: 7px; padding: 24px; color: var(--text-soft); }
.compact-empty strong { color: var(--text); font-size: 13px; }
.compact-empty span { font-size: 10.5px; }
.billing-table { min-width: 920px; }
.coverage-cell { display: flex; flex-direction: column; gap: 7px; min-width: 116px; }
.coverage-cell strong { font-size: 12px; }
.progress-track.small { width: 110px; height: 6px; }
.progress-track.small span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #20b99d, #0b8f7d); }
.status-neutral { color: #657286; border-color: #dfe5ec; background: #f3f6f9; }
.status-info { color: #286787; border-color: #cce1ec; background: #edf7fb; }
.admin-split-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 18px; align-items: start; margin-bottom: 18px; }
.pricing-grid .table-card { min-width: 0; margin-bottom: 0; }
.editor-card { position: sticky; top: 98px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.editor-card .panel-head { margin-bottom: 16px; }
.editor-card .form-grid { margin-bottom: 16px; }
.editor-card label { display: flex; flex-direction: column; gap: 7px; color: #445168; font-size: 10px; font-weight: 750; }
.editor-card input:not([type="checkbox"]) { width: 100%; min-height: 38px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 10px; outline: none; color: var(--text); background: var(--surface); }
.editor-card input:not([type="checkbox"]):focus { border-color: #5ac0b0; box-shadow: 0 0 0 3px rgba(11,143,125,.1); }
.editor-card input:disabled { color: var(--text-faint); background: #f1f4f8; }
.form-span-two { grid-column: span 2; }
.switch-line { flex-direction: row !important; align-items: center; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.switch-line input { width: 16px; height: 16px; accent-color: var(--primary); }
.table-card { margin-bottom: 18px; }
@media (max-width: 1380px) { .admin-split-grid { grid-template-columns: 1fr; } .editor-card { position: static; } }

/* Step 10.33: Cookie BFF 登录与安全状态 */
.logout-form {
    display: inline-flex;
    margin: 0;
}

.logout-form .icon-button {
    cursor: pointer;
}

.login-form {
    display: grid;
    gap: 18px;
}

.dev-credential-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid rgba(16, 185, 129, .22);
    border-radius: 12px;
    background: rgba(16, 185, 129, .07);
    color: #56706d;
    font-size: 12px;
}

.dev-credential-hint strong {
    color: #087f6f;
    font-size: 12px;
    letter-spacing: .01em;
}

/* Step 10.34 runtime configuration */
.configuration-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.runtime-ai-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}

.runtime-ai-panel {
    min-width: 0;
}

.panel-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.provider-stack {
    display: grid;
    gap: 14px;
}

.provider-card {
    border: 1px solid var(--line, #dce6ed);
    border-radius: 14px;
    padding: 16px;
    background: #fbfdfe;
}

.provider-card-active {
    border-color: #46c7b4;
    box-shadow: 0 0 0 3px rgba(22, 172, 148, .08);
}

.provider-card-head,
.provider-title-line,
.provider-secret-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.provider-card-head > div:first-child {
    min-width: 0;
}

.provider-card-head > div:first-child > span,
.provider-secret-line span {
    color: #738394;
    font-size: 12px;
}

.provider-title-line {
    justify-content: flex-start;
    margin-bottom: 5px;
}

.provider-secret-line {
    margin-top: 12px;
    padding: 9px 11px;
    border-radius: 10px;
    background: #f1f6f8;
}

.provider-secret-line code,
.setting-key,
.secret-current {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
}

.model-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.model-chip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid #e1e9ee;
    border-radius: 12px;
    background: #fff;
}

.model-chip-active {
    border-color: #31b89f;
    background: #f0fbf8;
}

.model-chip-main {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.model-chip-main strong,
.model-chip-main span,
.model-chip-main small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.model-chip-main span,
.model-chip-main small {
    color: #718191;
    font-size: 11px;
    margin-top: 3px;
}

.runtime-editor,
.configuration-editor {
    position: sticky;
    top: 84px;
}

.form-grid-one {
    grid-template-columns: minmax(0, 1fr) !important;
}

.configuration-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
}

.configuration-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 180px;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #eef2f5;
    border-bottom: 1px solid #eef2f5;
}

.configuration-toolbar input,
.configuration-toolbar select {
    width: 100%;
}

.action-cell small {
    color: #8b98a5;
    margin-top: 4px;
    line-height: 1.4;
}

.setting-key {
    padding: 9px 10px;
    border-radius: 9px;
    background: #eef4f6;
    color: #31515e;
    overflow-wrap: anywhere;
}

.editor-description {
    color: #6f7f8d;
    font-size: 13px;
    line-height: 1.6;
}

.secret-current,
.inline-warning {
    padding: 10px 12px;
    border-radius: 10px;
    background: #f4f7f9;
    color: #526774;
}

.inline-warning {
    margin: 12px 0;
    background: #fff7e8;
    color: #8a641c;
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 1180px) {
    .configuration-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .runtime-ai-grid,
    .configuration-grid {
        grid-template-columns: 1fr;
    }

    .runtime-editor,
    .configuration-editor {
        position: static;
    }
}

.strategy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.strategy-grid > div {
    padding: 15px;
    border: 1px solid #e2eaf0;
    border-radius: 12px;
    background: #f9fbfc;
}

.strategy-grid strong,
.strategy-grid span {
    display: block;
}

.strategy-grid span {
    margin-top: 7px;
    color: #6f7f8d;
    font-size: 12px;
    line-height: 1.65;
}

@media (max-width: 900px) {
    .strategy-grid {
        grid-template-columns: 1fr;
    }
}


.result-card {
    padding: 14px;
    border: 1px solid #dfe8ef;
    border-radius: 12px;
    background: #f8fbfd;
}

.result-card p {
    margin: 10px 0 0;
    color: #405565;
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
}

.file-import-panel {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) minmax(180px, 1fr) 150px minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding: 16px 18px;
    border-bottom: 1px solid #e8eef2;
    background: #f8fbfc;
}

.file-import-panel > div {
    display: grid;
    gap: 4px;
}

.file-import-panel strong {
    color: #153744;
}

.file-import-panel span {
    color: #6f7f8d;
    font-size: 12px;
    line-height: 1.5;
}

.file-import-panel input,
.file-import-panel input[type="file"] {
    min-width: 0;
    width: 100%;
}

.retrieval-summary {
    display: grid;
    gap: 4px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid #d8e7e2;
    border-radius: 12px;
    background: #f1faf7;
}

.retrieval-summary strong {
    color: #0a8f78;
}

.retrieval-summary span,
.retrieval-summary small {
    color: #58706c;
    line-height: 1.5;
}

.inline-field {
    display: inline-grid;
    grid-template-columns: auto 72px;
    gap: 8px;
    align-items: center;
}

.inline-field span {
    color: #6f7f8d;
    font-size: 12px;
}

.inline-field input {
    width: 72px;
}

@media (max-width: 1500px) {
    .file-import-panel {
        grid-template-columns: 1fr 1fr;
    }
}

.document-version-panel {
    margin: 0 18px 18px;
    padding: 14px;
    border: 1px solid #e0e9ee;
    border-radius: 14px;
    background: #f8fbfc;
}

.document-version-panel .panel-head {
    margin-bottom: 8px;
}

.document-version-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #e5edf1;
}

.document-version-row:first-of-type {
    border-top: 0;
}

.document-version-row > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.document-version-row strong {
    color: #153744;
}

.document-version-row span {
    color: #71818e;
    font-size: 12px;
}

/* Step 10.38.1 - RAG retrieval diagnostics */
.rag-diagnostic-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .75fr);
    gap: 18px;
    align-items: start;
}

.query-plan-card {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line, #dfe7ee);
    border-radius: 14px;
    background: #f7fafc;
}

.query-plan-card > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.query-plan-card span {
    color: var(--muted, #6b7a89);
    font-size: 12px;
}

.query-plan-card code {
    white-space: pre-wrap;
    word-break: break-word;
    color: #123047;
}

.query-plan-wide { grid-column: 1 / -1; }

.rag-hit-list {
    margin-top: 16px;
    display: grid;
    gap: 12px;
}

.rag-hit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.rag-feedback-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.alias-list {
    display: grid;
    gap: 8px;
    max-height: 310px;
    overflow: auto;
    margin-bottom: 16px;
}

.alias-row {
    width: 100%;
    border: 1px solid var(--line, #dfe7ee);
    border-radius: 12px;
    background: #fff;
    padding: 10px 12px;
    text-align: left;
    display: grid;
    gap: 3px;
    cursor: pointer;
}

.alias-row:hover,
.alias-row.is-active {
    border-color: #20a38a;
    box-shadow: 0 0 0 2px rgba(32, 163, 138, .08);
}

.alias-row span,
.alias-row small {
    color: var(--muted, #6b7a89);
    overflow-wrap: anywhere;
}

.compact-form { margin-top: 4px; }

@media (max-width: 1180px) {
    .rag-diagnostic-grid { grid-template-columns: 1fr; }
}

/* Step 10.39 - RAG document governance */
.quality-score {
    display: inline-flex;
    min-width: 38px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-weight: 800;
    font-size: 12px;
    border: 1px solid transparent;
}

.quality-good { color: #087b69; background: #e5f8f3; border-color: #bfeadd; }
.quality-pass { color: #9a6800; background: #fff7df; border-color: #f2dfaa; }
.quality-poor { color: #bd3a48; background: #ffebee; border-color: #f3c8ce; }

.rag-quality-panel {
    margin: 0 18px 18px;
    padding: 16px;
    border: 1px solid #dce6ed;
    border-radius: 14px;
    background: #f8fbfd;
}

.rag-quality-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rag-quality-head > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.rag-quality-head span { color: #657784; font-size: 12px; }
.rag-quality-head strong { font-size: 20px; }
.rag-quality-meta { margin-top: 8px; color: #738593; font-size: 12px; }
.rag-quality-empty { margin-top: 12px; color: #16826f; font-size: 13px; }
.rag-quality-issues { display: grid; gap: 8px; margin-top: 12px; }

.rag-quality-issue {
    display: grid;
    grid-template-columns: minmax(130px, auto) 1fr;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #e2e9ee;
    font-size: 12px;
}

.rag-quality-issue.error { border-color: #efc5ca; background: #fff4f5; }
.rag-quality-issue.warning { border-color: #eeddaa; background: #fffaf0; }
.rag-quality-issue.info { border-color: #c9e2ed; background: #f2f9fc; }
.rag-quality-issue strong { color: #415461; }
.rag-quality-issue span { color: #627480; }

.rag-workflow-comment { display: grid; gap: 6px; margin-top: 14px; }
.rag-workflow-comment > span { color: #5d707d; font-size: 12px; font-weight: 700; }
.rag-workflow-actions { flex-wrap: wrap; justify-content: flex-start; }

.rag-workflow-history {
    margin: 0 18px 18px;
    padding: 14px 16px;
    border: 1px solid #dce6ed;
    border-radius: 14px;
    background: #fff;
}

.rag-workflow-history .panel-head { margin-bottom: 8px; }
.rag-workflow-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.7fr);
    gap: 14px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid #edf1f4;
}

.rag-workflow-row:first-of-type { border-top: 0; }
.rag-workflow-row > div { display: grid; gap: 4px; }
.rag-workflow-row strong { color: #233744; font-size: 13px; }
.rag-workflow-row span,
.rag-workflow-row small { color: #748592; font-size: 12px; }