/* CPA user space: warm neutral surfaces and data-first cards. */
:root {
  color-scheme: light;
  --paper: #faf9f5; --sidebar: #f3f1eb; --card: #ffffff; --soft: #f5f4ef; --hover: #eeece5;
  --ink: #2d2a26; --muted: #6d6760; --faint: #756e65; --border: #e3e1db; --input-border: #d2cec5;
  --accent: #514c45; --accent-hover: #39352f; --on-accent: #ffffff;
  --good: #087952; --good-bg: #eaf5ef; --amber: #936c11; --amber-bg: #fbf2d8; --danger: #a33e32; --danger-bg: #fbeee9;
  --codex-ink: #5b50b5; --codex-bg: #f0edfc; --claude-ink: #9b5841; --claude-bg: #f8ece4; --gemini-ink: #3d649b; --gemini-bg: #eaf1fa;
  --shadow: 0 2px 3px -2px #332d2115, 0 12px 30px -20px #332d211f; --radius: 14px;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 14px; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased;
}
[data-theme='dark'] {
  color-scheme: dark;
  --paper: #151412; --sidebar: #1b1916; --card: #201e1a; --soft: #27241f; --hover: #302c26;
  --ink: #f6f4f1; --muted: #c0b9af; --faint: #a59e94; --border: #3c3730; --input-border: #565046;
  --accent: #e5dfd4; --accent-hover: #f6f2e9; --on-accent: #24211c;
  --good: #66d3ad; --good-bg: #19382d; --amber: #e7c16b; --amber-bg: #3c321b; --danger: #f0a296; --danger-bg: #3d2520;
  --codex-ink: #c5baff; --codex-bg: #312b45; --claude-ink: #e5b197; --claude-bg: #3b2b21; --gemini-ink: #a8c8ef; --gemini-bg: #243447;
  --shadow: 0 2px 3px -2px #0004, 0 12px 28px -20px #0008;
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
a, button, input, textarea { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button, .button-link {
  min-height: 42px; padding: 10px 16px; border: 1px solid var(--input-border); border-radius: 8px;
  background: var(--card); color: var(--ink); font-weight: 550; font-size: .9rem; text-decoration: none;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.35;
  transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
}
button:hover:not(:disabled), .button-link:hover { background: var(--soft); border-color: var(--faint); }
button:active:not(:disabled), .button-link:active { transform: translateY(1px); }
button:disabled { opacity: .48; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
button.quiet, button.link-button { background: transparent; border-color: transparent; }
button.link-button { padding: 8px 0; min-height: 36px; text-underline-offset: 4px; }
button.link-button:hover:not(:disabled) { background: transparent; text-decoration: underline; border-color: transparent; }
button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 32%, var(--border)); }
button.danger:hover:not(:disabled) { background: var(--danger-bg); }
:focus-visible { outline: 3px solid var(--gemini-ink); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: -100px; left: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Persistent shell */
.layout { display: grid; grid-template-columns: 226px minmax(0, 1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; padding: 28px 16px 18px; background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.brand { padding: 0 10px; display: flex; gap: 12px; align-items: center; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid var(--input-border); border-radius: 11px; background: var(--card); }
.brand-mark svg { width: 25px; height: 25px; stroke: var(--ink); stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.brand-name { font-size: 21px; font-weight: 700; letter-spacing: -.8px; line-height: 1.1; }
.brand-caption { display: block; font-size: .75rem; font-weight: 450; letter-spacing: .05em; color: var(--muted); margin-top: 6px; }
.workspace-tag { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .72rem; padding: 0 11px; margin: 27px 0 32px; }
.small-dot { width: 5px; height: 5px; background: var(--faint); border-radius: 50%; }
.nav-caption { font-size: .7rem; color: var(--faint); margin: 0 12px 12px; letter-spacing: .08em; }
nav { display: grid; gap: 7px; }
nav a { min-height: 46px; padding: 12px; display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: .93rem; text-decoration: none; border: 1px solid transparent; border-radius: 9px; }
nav a:hover { background: var(--hover); color: var(--ink); }
nav a[aria-current='page'] { background: var(--card); color: var(--ink); border-color: var(--border); font-weight: 600; box-shadow: 0 1px 2px #00000004; }
.nav-icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; flex-shrink: 0; }
.sidebar-note { margin-top: auto; padding: 32px 11px 22px; color: var(--muted); }
.note-label { color: var(--ink); font-size: .78rem; font-weight: 550; }
.sidebar-note p { font-size: .75rem; line-height: 1.8; margin: 8px 0 0; }
.sidebar-bottom { display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--border); padding: 18px 4px 0; }
.identity-avatar { flex: 0 0 31px; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--card); font-size: .76rem; font-weight: 600; }
.identity-copy { min-width: 0; flex: 1; display: grid; gap: 4px; }
#identity { font-size: .8rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 550; }
.identity-role { color: var(--faint); font-size: .66rem; }
.logout-button { padding: 7px; min-height: 36px; font-size: .74rem; color: var(--muted); }
.workspace { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 66px; padding: 0 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); background: var(--paper); }
.breadcrumb { display: flex; gap: 12px; align-items: center; color: var(--faint); font-size: .78rem; }
.breadcrumb strong { color: var(--ink); font-weight: 500; }
.topbar-actions { display: flex; align-items: center; gap: 17px; }
.portal-label { font: .64rem var(--mono); letter-spacing: .1em; color: var(--faint); }
.icon-button { width: 36px; min-height: 36px; padding: 8px; border-color: transparent; background: transparent; }
.icon-button svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.theme-sun { display: none; }
[data-theme='dark'] .theme-sun { display: block; }
[data-theme='dark'] .theme-moon { display: none; }
main { padding: 34px 38px 48px; max-width: 1440px; width: 100%; flex: 1; }
main:focus { outline: none; }
.workspace > footer { padding: 20px 38px; border-top: 1px solid var(--border); color: var(--faint); font-size: .66rem; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; line-height: 1.65; }
.workspace > footer > span:first-child { color: var(--muted); }
#contact { margin-left: auto; overflow-wrap: anywhere; }

/* Page hierarchy */
h1, h2, h3, p { margin: 0; }
h1 { font-size: 1.9rem; font-weight: 650; letter-spacing: -.045em; line-height: 1.3; margin: 8px 0 9px; }
h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.5; }
h3 { font-size: 1rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
p { line-height: 1.75; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }
.eyebrow { font-size: .67rem; color: var(--faint); letter-spacing: .1em; font-weight: 550; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 30px 0 24px; }
.page-heading p { font-size: .86rem; }
.page-heading > button { flex-shrink: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.section-heading h2 { margin-top: 6px; }
.section-heading h3 { margin-bottom: 6px; }
.section-caption, .readonly-label, .secure-label { color: var(--faint); font-size: .72rem; }
.summary-strip { border-bottom: 1px solid var(--border); padding: 0 0 25px; display: flex; gap: clamp(24px, 5vw, 70px); }
.summary-strip > div { display: flex; gap: 8px; align-items: baseline; }
.summary-label { color: var(--muted); font-size: .78rem; margin-right: 5px; }
.summary-strip strong { font: 500 1.4rem/1 var(--mono); color: var(--ink); letter-spacing: -.06em; }
.summary-unit { color: var(--faint); font-size: .67rem; }
.panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 25px; background: var(--card); box-shadow: var(--shadow); }
.notice { margin: 22px 38px 0; padding: 13px 17px; font-size: .85rem; line-height: 1.7; border: 1px solid color-mix(in srgb, var(--good) 25%, var(--border)); border-radius: 9px; background: var(--good-bg); color: var(--good); overflow-wrap: anywhere; }
.notice[data-error='true'] { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); background: var(--danger-bg); color: var(--danger); }
.empty { padding: 40px 28px; border: 1px dashed var(--input-border); border-radius: var(--radius); background: var(--soft); grid-column: 1 / -1; }
.empty h2 { font-size: 1.05rem; }
.empty p { color: var(--muted); font-size: .85rem; margin-top: 9px; max-width: 520px; }

/* Native CPA quota panel owns its heading/cards/timeline. Keep the user shell lean on this route. */
body[data-route='quotas'] .summary-strip { display: none; }
body[data-route='quotas'] main { max-width: none; }
body[data-route='quotas'] #quota-list { min-width: 0; }

body[data-route='logs'] .summary-strip { display: none; }
body[data-route='logs'] main { max-width: none; }
.request-log-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.request-log-field { display: grid; gap: 7px; flex: 1 1 150px; max-width: 260px; margin: 0; }
.request-log-label { font-size: .75rem; color: var(--muted); }
.request-log-filters select { width: 100%; min-height: 43px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--input); padding: 9px 12px; color: var(--ink); font: inherit; font-size: .82rem; }
.request-log-filters button { min-height: 43px; }
.request-log-note { margin: 16px 0; color: var(--muted); font-size: .76rem; line-height: 1.7; }
.request-log-state { border: 1px dashed var(--border); border-radius: 12px; padding: 32px 18px; display: flex; justify-content: center; gap: 16px; align-items: center; color: var(--muted); font-size: .85rem; }
.request-log-state[hidden] { display: none; }
.request-log-error { color: var(--danger); background: var(--danger-bg); }
.request-log-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 0 18px; }
.request-log-table { min-width: 850px; table-layout: fixed; }
.request-log-table th { padding: 15px 10px; }
.request-log-table td { vertical-align: top; padding: 17px 10px; line-height: 1.65; }
.request-log-table th:nth-child(1) { width: 16%; } .request-log-table th:nth-child(2) { width: 16%; } .request-log-table th:nth-child(3) { width: 17%; } .request-log-table th:nth-child(4) { width: 12%; } .request-log-table th:nth-child(5) { width: 10%; } .request-log-table th:nth-child(6) { width: 17%; } .request-log-table th:nth-child(7) { width: 12%; }
.rl-endpoint, .rl-http { display: block; color: var(--muted); font-size: .66rem; margin-top: 5px; }
.rl-model-name { font-weight: 600; } .rl-request-id { font-family: var(--mono); font-size: .68rem; overflow-wrap: anywhere; }
.rl-duration { font-family: var(--mono); white-space: nowrap; }
.rl-status { display: inline-flex; padding: 3px 7px; border-radius: 5px; font-size: .7rem; background: var(--soft); color: var(--muted); white-space: nowrap; }
.rl-status-success { color: var(--good); background: var(--good-bg); }
.rl-status-failure { color: var(--danger); background: var(--danger-bg); }
.rl-status-pending { color: var(--amber); background: var(--soft); }
.request-log-pager { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 14px; margin: 20px 0 0; }
.request-log-count { font-size: .8rem; color: var(--muted); }
@media (max-width: 640px) {
 .request-log-filters { padding: 14px; gap: 10px; }
 .request-log-field { flex-basis: calc(50% - 10px); max-width: none; min-width: 0; }
 .request-log-filters select, .request-log-filters input, .request-log-filters button { min-height: 44px; }
 .request-log-filters button { flex: 1 1 auto; }
 .request-log-table-wrap { padding: 0 16px; overflow: visible; }
 .request-log-table, .request-log-table tbody { display: block; min-width: 0; width: 100%; }
 .request-log-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 .request-log-table tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; padding: 20px 0; border-bottom: 1px solid var(--border); }
 .request-log-table tr:last-child { border-bottom: 0; }
 .request-log-table td { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; text-align: left; padding: 0; border: 0; }
 .request-log-table td::before { content: attr(data-label); color: var(--muted); font-size: .72rem; grid-column: 1; }
 .request-log-table td > * { grid-column: 2; }
 .request-log-table td > :nth-child(n+2) { grid-column: 2; }
 .request-log-pager { justify-content: space-between; margin-top: 18px; }
 .request-log-pager button { min-height: 44px; }
 .request-log-state { flex-wrap: wrap; padding: 26px 16px; }
}

/* Authentication */
.auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(350px, 430px); align-items: center; gap: clamp(30px, 5vw, 90px); max-width: 1040px; min-height: calc(100dvh - 240px); padding: 26px 0; }
.auth-intro { padding-bottom: 12px; }
.auth-intro h2 { font-size: clamp(2rem, 3.1vw, 3.05rem); line-height: 1.4; letter-spacing: -.065em; margin: 21px 0 19px; font-weight: 650; }
.auth-intro > p { color: var(--muted); font-size: .97rem; line-height: 1.95; }
.auth-guide { display: grid; gap: 22px; margin: 35px 0 32px; }
.auth-guide > div { display: flex; gap: 15px; align-items: baseline; }
.auth-guide > div > span { color: var(--faint); font: .7rem var(--mono); }
.auth-guide p { font-size: .78rem; color: var(--muted); }
.auth-guide strong { display: block; color: var(--ink); font-size: .87rem; font-weight: 550; margin-bottom: 3px; }
.auth-footnote { font-size: .68rem; color: var(--faint); line-height: 1.7; }
.auth-panel { padding: 32px; border-radius: 17px; }
.form-kicker { font-size: .74rem; color: var(--faint); }
.auth-panel h1 { font-size: 1.65rem; margin: 11px 0 9px; }
.auth-description { font-size: .83rem; margin-bottom: 25px; }
form { display: grid; gap: 17px; }
.field { display: grid; gap: 8px; min-width: 0; }
label { display: block; color: var(--ink); font-size: .8rem; font-weight: 550; }
input, select, textarea { background: var(--card); color: var(--ink); border: 1px solid var(--input-border); width: 100%; padding: 12px 13px; min-height: 45px; border-radius: 8px; }
input::placeholder, textarea::placeholder { color: var(--faint); font-size: .83rem; }
input:hover { border-color: var(--faint); }
textarea { resize: vertical; line-height: 1.7; }
.auth-panel .primary { width: 100%; min-height: 45px; margin-top: 1px; }
#auth-hint { font-size: .72rem; line-height: 1.7; }
.auth-switch-row { margin-top: 24px; padding-top: 19px; border-top: 1px solid var(--border); text-align: center; }
.auth-switch-row button { font-size: .8rem; }
body[data-session='signedOut'] .nav-caption { display: none; }

/* Credential and quota cards */
.quota-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.provider-heading { display: flex; align-items: center; gap: 11px; min-width: 0; }
.provider-mark { width: 39px; height: 39px; display: grid; place-items: center; flex-shrink: 0; border-radius: 11px; font: 600 1.05rem var(--mono); color: var(--muted); background: var(--soft); }
.provider-mark[data-tone='codex'], .provider-badge[data-tone='codex'] { color: var(--codex-ink); background: var(--codex-bg); }
.provider-mark[data-tone='claude'], .provider-badge[data-tone='claude'] { color: var(--claude-ink); background: var(--claude-bg); }
.provider-mark[data-tone='gemini'], .provider-badge[data-tone='gemini'] { color: var(--gemini-ink); background: var(--gemini-bg); }
.provider-badge { padding: 4px 9px; border-radius: 6px; display: inline-flex; color: var(--muted); background: var(--soft); font-size: .72rem; font-weight: 550; }
.quota-card { padding: 0; overflow: hidden; }
.quota-card-main { padding: 22px 23px 20px; }
.quota-head { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.quota-title { min-width: 0; }
.quota-title h3 { font-size: .95rem; }
.quota-title .provider-badge { margin-top: 6px; font-size: .66rem; padding: 3px 7px; }
.status-badge { display: inline-flex; gap: 6px; align-items: center; font-size: .68rem; white-space: nowrap; color: var(--muted); background: var(--soft); border: 1px solid var(--border); border-radius: 999px; padding: 4px 8px; line-height: 1.4; }
.status-badge::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.status-badge[data-status='ready'], .status-badge[data-status='active'] { color: var(--good); background: var(--good-bg); border-color: transparent; }
.status-badge[data-status='error'] { color: var(--danger); background: var(--danger-bg); border-color: transparent; }
.quota-overview { display: flex; align-items: baseline; gap: 9px; margin: 24px 0 3px; }
.quota-value { font: 500 2.3rem/1 var(--mono); letter-spacing: -.09em; }
.quota-overview > span { font-size: .72rem; color: var(--faint); }
.quota-card[data-tone='low'] .quota-value { color: var(--danger); }
.quota-note { font-size: .7rem; color: var(--faint); line-height: 1.6; margin-top: 10px; }
.quota-windows { display: grid; gap: 17px; padding: 18px 0 4px; }
.window-line { display: flex; justify-content: space-between; gap: 15px; font-size: .79rem; margin-bottom: 8px; }
.window-line > strong { font: 550 .85rem var(--mono); }
progress { width: 100%; display: block; height: 6px; border: none; border-radius: 6px; overflow: hidden; appearance: none; accent-color: var(--good); }
progress::-webkit-progress-bar { background: var(--soft); border-radius: 6px; }
progress::-webkit-progress-value { background: var(--good); border-radius: 6px; }
progress::-moz-progress-bar { background: var(--good); border-radius: 6px; }
.quota-window[data-tone='low'] progress::-webkit-progress-value { background: var(--danger); }
.quota-window[data-tone='low'] progress::-moz-progress-bar { background: var(--danger); }
.quota-window[data-tone='medium'] progress::-webkit-progress-value { background: var(--amber); }
.quota-window[data-tone='medium'] progress::-moz-progress-bar { background: var(--amber); }
.reset-time { color: var(--faint); font-size: .67rem; line-height: 1.7; margin-top: 7px; }
.quota-hint { color: var(--muted); font-size: .75rem; padding: 12px 0 0; overflow-wrap: anywhere; }
.quota-footer { padding: 15px 23px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--soft) 42%, var(--card)); }
.quota-meta { font-size: .65rem; color: var(--faint); line-height: 1.6; margin-bottom: 12px; }
.quota-actions { display: flex; gap: 9px; }
.quota-actions button { flex: 1; min-height: 37px; padding: 8px 10px; font-size: .76rem; }

/* Endpoint and one-time keys */
.access-section { margin-top: 36px; border-top: 1px solid var(--border); padding-top: 29px; }
.access-section > .section-heading { margin-bottom: 19px; }
.endpoint-panel { margin-bottom: 18px; }
.endpoint-description { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.endpoint-description p { margin-top: 4px; font-size: .76rem; }
.endpoint-badge { font: 500 .72rem var(--mono); border: 1px solid var(--input-border); background: var(--soft); border-radius: 7px; width: 38px; height: 36px; display: grid; place-items: center; flex-shrink: 0; }
.readonly-label { margin-left: auto; flex-shrink: 0; }
.copy-line { display: flex; align-items: stretch; border: 1px solid var(--border); background: var(--soft); border-radius: 8px; overflow: hidden; }
.copy-line code { padding: 13px 15px; flex: 1; min-width: 0; overflow-wrap: anywhere; font: .86rem/1.8 var(--mono); }
.copy-line button { border-width: 0 0 0 1px; border-color: var(--border); border-radius: 0; flex-shrink: 0; padding: 10px 18px; background: transparent; font-size: .78rem; }
.inline-form { display: flex; align-items: flex-end; gap: 12px; padding: 20px 0 22px; margin: 20px 0 0; border-top: 1px solid var(--border); }
.inline-form > .field { flex: 1; max-width: 360px; }
.inline-form > button { min-height: 45px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: .8rem; }
th { color: var(--faint); font-size: .7rem; font-weight: 450; padding: 13px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 16px 12px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
td:first-child, th:first-child { padding-left: 0; }
td:last-child, th:last-child { text-align: right; padding-right: 0; }
tbody tr:last-child td { border-bottom: 0; }
td strong { font-size: .82rem; font-weight: 550; }
.key-prefix { margin-top: 6px; color: var(--faint); font: .72rem var(--mono); }
td button { font-size: .73rem; padding: 7px 12px; min-height: 33px; }
.key-panel .empty { margin: 0; padding: 23px; border-style: solid; box-shadow: none; }
.key-panel .empty h2 { font-size: .9rem; }
.key-panel .empty p { font-size: .76rem; }

/* Focused modal layer */
dialog { width: min(500px, calc(100vw - 36px)); padding: 29px; color: var(--ink); background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 100px #0003; max-height: calc(100dvh - 40px); overflow-y: auto; }
dialog::backdrop { background: #17151280; }
.dialog-kicker { display: block; font-size: .69rem; letter-spacing: .08em; color: var(--faint); margin-bottom: 11px; }
dialog h2 { font-size: 1.35rem; margin-bottom: 12px; }
dialog p { font-size: .86rem; color: var(--muted); }
dialog label { margin: 23px 0 9px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 25px; }
#new-key { font: .85rem/1.8 var(--mono); word-break: break-all; }

@media (min-width: 1550px) { .quota-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1120px) {
  .layout { grid-template-columns: 200px minmax(0, 1fr); }
  main { padding: 28px; } .topbar { padding: 0 28px; }
  .summary-strip { gap: 26px; } .summary-strip > div { flex-wrap: wrap; gap: 7px; } .summary-label { width: 100%; }
  .auth-layout { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 24px; padding: 15px 0; min-height: 0; }
  .auth-intro h2 { font-size: 2.2rem; } .auth-intro > p, .auth-guide, .auth-footnote { display: none; }
  .auth-intro { padding-bottom: 0; } .auth-intro h2 { margin: 12px 0 0; } .auth-intro h2 br { display: none; }
  .workspace > footer { padding: 18px 28px; }
}
@media (max-width: 890px) {
  .quota-grid { grid-template-columns: minmax(0, 1fr); }
  .quota-card-main { padding: 23px; } .quota-actions button { min-height: 40px; }
  .section-caption, .secure-label { display: none; } .sidebar { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 640px) {
  .layout { display: block; }
  .sidebar { position: relative; height: auto; padding: 18px 20px 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .brand { padding: 0; width: max-content; gap: 9px; } .brand-mark { width: 34px; height: 34px; border-radius: 9px; }
  .brand-mark svg { width: 23px; height: 23px; } .brand-name { font-size: 19px; } .brand-caption { margin-top: 5px; font-size: .66rem; }
  .workspace-tag, .nav-caption, .sidebar-note { display: none; }
  nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 20px 0 14px; } nav:empty { margin: 0; }
  nav a { justify-content: center; min-height: 44px; padding: 10px; font-size: .84rem; }
  .sidebar-bottom { position: absolute; right: 15px; top: 14px; padding: 0; border: none; max-width: 46%; gap: 4px; }
  .sidebar-bottom .identity-avatar, .identity-role { display: none; } .identity-copy { text-align: right; }
  #identity { font-size: .74rem; max-width: 115px; } .logout-button { min-height: 44px; padding: 7px; }
  .topbar { height: 53px; padding: 0 20px; } .breadcrumb { font-size: .72rem; gap: 9px; } .portal-label { display: none; }
  .icon-button { width: 44px; min-height: 44px; }
  main { padding: 22px 20px 32px; } .workspace > footer { padding: 18px 20px; gap: 8px; } .workspace > footer > span:nth-child(2) { width: 100%; order: 3; }
  #contact { margin-left: 0; max-width: 100%; } h1 { font-size: 1.7rem; }
  .summary-strip { gap: 0; justify-content: space-between; padding-bottom: 21px; } .summary-strip > div { display: block; }
  .summary-label { display: block; font-size: .67rem; margin-bottom: 10px; } .summary-strip strong { font-size: 1.35rem; margin-right: 5px; } .summary-unit { font-size: .61rem; }
  .page-heading { display: block; margin-top: 26px; } .page-heading > button { margin-top: 17px; } .page-heading p { font-size: .82rem; }
  .panel { padding: 20px; } .auth-layout { padding: 7px 0 15px; gap: 24px; } .auth-intro .eyebrow { font-size: .64rem; }
  .auth-intro h2 { font-size: 1.9rem; line-height: 1.4; max-width: none; } .auth-intro h2 br { display: initial; } .auth-panel { padding: 24px 22px; }
  .auth-panel h1 { font-size: 1.5rem; } .auth-description { font-size: .78rem; } .auth-switch-row { margin-top: 19px; padding-top: 15px; } .auth-switch-row button { min-height: 44px; }
  .quota-card { padding: 0; } .quota-card-main { padding: 21px 20px; } .quota-title h3 { font-size: .92rem; } .quota-head .status-badge { font-size: .62rem; padding: 4px 6px; }
  .quota-value { font-size: 2.2rem; } .quota-footer { padding: 14px 20px 18px; } .quota-actions button { min-height: 44px; }
  .endpoint-description { gap: 10px; } .endpoint-description p { font-size: .73rem; } .readonly-label { display: none; }
  .copy-line { flex-wrap: wrap; } .copy-line code { flex-basis: 100%; font-size: .76rem; padding: 12px; } .copy-line button { width: 100%; min-height: 44px; border-width: 1px 0 0; }
  .inline-form { flex-wrap: wrap; gap: 12px; } .inline-form .field { width: 100%; flex: auto; max-width: none; } .inline-form > button { width: 100%; }
  .key-panel table, .key-panel tbody { display: block; }
  .key-panel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .key-panel tr { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 20px 0; border-top: 1px solid var(--border); }
  .key-panel td { padding: 0; border: 0; font-size: .75rem; } .key-panel td:first-child { grid-column: 1 / -1; }
  .key-panel td:nth-child(2) { align-self: center; } .key-panel td:nth-child(3) { color: var(--faint); text-align: right; font-size: .69rem; align-self: center; }
  .key-panel td:last-child { grid-column: 1 / -1; justify-self: stretch; } .key-panel td:last-child button { width: 100%; min-height: 44px; }
  button, .button-link { min-height: 44px; } .notice { margin: 18px 20px 0; }
  dialog { padding: 25px 22px; } .dialog-actions { flex-wrap: wrap; } .dialog-actions button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  :root { --border: #9a948a; --faint: #655e54; }
  [data-theme='dark'] { --border: #80776b; --faint: #d2c8ba; }
}