:root {
  color-scheme: dark;
  --page-bg: #111111;
  --page-surface: #191919;
  --page-border: rgba(255, 255, 255, .12);
  --page-text: #f2f2f2;
  --page-muted: #a1a1aa;
  --accent: #d9d9d9;
  --accent-strong: #f0f0f0;
  --page-glow: rgba(255, 255, 255, .045);
  --header-surface: rgba(17, 17, 17, .86);
  --settings-card-bg: rgba(27, 27, 27, .88);
  --settings-input-bg: rgba(10, 10, 10, .48);
  --settings-chip-bg: rgba(255, 255, 255, .06);
  --modal-shadow: rgba(0,0,0,.55);

  /* AI chat theme tokens retained from the extracted chat UI. */
  --ai-canvas: #111111;
  --ai-main: #111111;
  --ai-surface: #1a1a1a;
  --ai-surface-subtle: #171717;
  --ai-surface-muted: #242424;
  --ai-surface-hover: #2a2a2a;
  --ai-border: rgba(255, 255, 255, .14);
  --ai-border-subtle: rgba(255, 255, 255, .09);
  --ai-border-strong: rgba(255, 255, 255, .24);
  --ai-text: #f2f2f2;
  --ai-text-strong: #ffffff;
  --ai-text-secondary: #d4d4d4;
  --ai-text-muted: #a3a3a3;
  --ai-text-faint: #737373;
  --ai-accent: #d9d9d9;
  --ai-accent-strong: #f0f0f0;
  --ai-accent-bg: rgba(255, 255, 255, .10);
  --ai-accent-bg-soft: rgba(255, 255, 255, .06);
  --ai-accent-border: rgba(255, 255, 255, .28);
  --ai-on-accent: #111111;
  --ai-link: #e0e0e0;
  --ai-overlay: rgba(0, 0, 0, .78);
  --ai-shadow-subtle: rgba(0, 0, 0, .18);
  --ai-shadow: rgba(0, 0, 0, .34);
  --ai-shadow-strong: rgba(0, 0, 0, .58);
  --ai-code-bg: #0b0b0b;
  --ai-code-text: #e7e7e7;
  --ai-code-inline-bg: #252525;
  --ai-input-gradient-start: rgba(17, 17, 17, 0);
  --ai-info-bg: rgba(43, 105, 186, .18);
  --ai-info-border: rgba(112, 178, 255, .48);
  --ai-info-text: #9bc8ff;
  --ai-info-icon-bg: rgba(75, 145, 224, .28);
  --ai-success-bg: rgba(38, 126, 88, .18);
  --ai-success-border: rgba(91, 210, 151, .48);
  --ai-success-text: #9be7bc;
  --ai-success-icon-bg: rgba(67, 168, 117, .28);
  --ai-warning-bg: rgba(160, 113, 23, .20);
  --ai-warning-border: rgba(240, 190, 76, .48);
  --ai-warning-text: #f2c66d;
  --ai-warning-icon-bg: rgba(178, 137, 45, .28);
  --ai-danger-bg: rgba(164, 52, 57, .20);
  --ai-danger-border: rgba(255, 128, 122, .52);
  --ai-danger-text: #ffaaa4;
  --ai-danger-icon-bg: rgba(190, 66, 72, .30);
  --ai-danger-text-strong: #ffd2cf;
  --ai-drop-bg: rgba(255, 255, 255, .12);
  --ai-summary-bg: rgba(10, 10, 10, .58);
  --ai-summary-border: rgba(91, 210, 151, .56);
}

:root[data-ai-theme="light"] {
  color-scheme: light;
  --page-bg: #f7f7f7;
  --page-surface: #ffffff;
  --page-border: rgba(17, 24, 39, .14);
  --page-text: #202124;
  --page-muted: #6b7280;
  --accent: #374151;
  --accent-strong: #111827;
  --page-glow: #ededed;
  --header-surface: rgba(255,255,255,.9);
  --settings-card-bg: rgba(255,255,255,.92);
  --settings-input-bg: rgba(243,244,246,.88);
  --settings-chip-bg: rgba(243,244,246,.76);
  --modal-shadow: rgba(15,23,42,.18);
  --ai-canvas: #f7f7f7;
  --ai-main: #ffffff;
  --ai-surface: #ffffff;
  --ai-surface-subtle: #f8f8f8;
  --ai-surface-muted: #ececec;
  --ai-surface-hover: #e4e4e4;
  --ai-border: rgba(17, 24, 39, .16);
  --ai-border-subtle: rgba(17, 24, 39, .10);
  --ai-border-strong: rgba(17, 24, 39, .26);
  --ai-text: #202124;
  --ai-text-strong: #111827;
  --ai-text-secondary: #374151;
  --ai-text-muted: #6b7280;
  --ai-text-faint: #9ca3af;
  --ai-accent: #374151;
  --ai-accent-strong: #111827;
  --ai-accent-bg: rgba(17, 24, 39, .08);
  --ai-accent-bg-soft: rgba(17, 24, 39, .045);
  --ai-accent-border: rgba(17, 24, 39, .28);
  --ai-on-accent: #ffffff;
  --ai-link: #374151;
  --ai-overlay: rgba(15, 23, 42, .46);
  --ai-shadow-subtle: rgba(15, 23, 42, .08);
  --ai-shadow: rgba(15, 23, 42, .16);
  --ai-shadow-strong: rgba(15, 23, 42, .30);
  --ai-code-bg: #f0f0f0;
  --ai-code-text: #1e293b;
  --ai-code-inline-bg: #e5e5e5;
  --ai-input-gradient-start: rgba(255, 255, 255, 0);
  --ai-info-bg: rgba(59, 130, 246, .10);
  --ai-info-border: rgba(37, 99, 235, .34);
  --ai-info-text: #1d4ed8;
  --ai-info-icon-bg: rgba(59, 130, 246, .16);
  --ai-success-bg: rgba(22, 163, 74, .10);
  --ai-success-border: rgba(22, 163, 74, .34);
  --ai-success-text: #166534;
  --ai-success-icon-bg: rgba(22, 163, 74, .14);
  --ai-warning-bg: rgba(202, 138, 4, .12);
  --ai-warning-border: rgba(202, 138, 4, .36);
  --ai-warning-text: #92400e;
  --ai-warning-icon-bg: rgba(202, 138, 4, .16);
  --ai-danger-bg: rgba(220, 38, 38, .10);
  --ai-danger-border: rgba(220, 38, 38, .36);
  --ai-danger-text: #b91c1c;
  --ai-danger-icon-bg: rgba(220, 38, 38, .14);
  --ai-danger-text-strong: #991b1b;
  --ai-drop-bg: rgba(17, 24, 39, .10);
  --ai-summary-bg: rgba(239, 246, 255, .86);
  --ai-summary-border: rgba(22, 163, 74, .42);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--page-text); background: radial-gradient(circle at 20% 0%, var(--page-glow) 0, transparent 34rem), var(--page-bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea, select { font: inherit; }
html { scrollbar-color: rgba(255, 255, 255, .24) transparent; scrollbar-width: thin; }
html[data-ai-theme="light"] { scrollbar-color: rgba(17, 24, 39, .25) transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .24) transparent; }
*:hover { scrollbar-color: rgba(255, 255, 255, .38) transparent; }
html[data-ai-theme="light"] * { scrollbar-color: rgba(17, 24, 39, .25) transparent; }
html[data-ai-theme="light"] *:hover { scrollbar-color: rgba(17, 24, 39, .38) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; background-color: rgba(255, 255, 255, .22); }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .38); }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
html[data-ai-theme="light"] *::-webkit-scrollbar-thumb { background-color: rgba(17, 24, 39, .22); }
html[data-ai-theme="light"] *::-webkit-scrollbar-thumb:hover { background-color: rgba(17, 24, 39, .38); }
button { min-height: 38px; border: 1px solid var(--ai-accent-strong); border-radius: 8px; padding: 8px 14px; background: var(--ai-accent-strong); color: var(--ai-on-accent); font-weight: 800; cursor: pointer; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease; }
button:hover { border-color: var(--ai-accent); background: var(--ai-accent); }
button:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--ai-accent-bg); }
button:active { transform: translateY(1px); }
button.secondary { border-color: var(--ai-border); background: var(--ai-surface-muted); color: var(--ai-text-secondary); }
button.secondary:hover { border-color: var(--ai-accent-border); background: var(--ai-surface-hover); color: var(--ai-text); }
.app-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; width:100%; margin:0; padding:30px 28px 18px; }
.eyebrow { margin:0 0 6px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.18em; }
h1 { margin:0; font-size:clamp(24px, 3vw, 36px); letter-spacing:-.04em; }
.subtitle { margin:8px 0 0; color:var(--page-muted); font-size:14px; }
.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.header-status { display:flex; align-items:center; gap:8px; padding:9px 12px; color:var(--page-muted); border:1px solid var(--page-border); border-radius:999px; background:var(--header-surface); white-space:nowrap; font-size:13px; }
.header-action, .header-logout { min-height:36px; border:1px solid var(--page-border); border-radius:9px; padding:0 12px; background:var(--header-surface); color:var(--page-muted); font-size:13px; font-weight:700; cursor:pointer; }
.header-action:hover, .header-logout:hover { border-color:var(--accent); color:var(--page-text); }
.status-dot { width:8px; height:8px; border-radius:50%; background:#5ee7a0; box-shadow:0 0 12px rgba(94,231,160,.8); }
.status-dot.error { background:#ff8b8b; box-shadow:0 0 12px rgba(255,139,139,.8); }
.app-main { width:100%; margin:0; padding:0 28px 28px; }
.ai-chat-shell { color:var(--page-text); }
.ai-chat-layout { min-height:calc(100vh - 170px); border-radius:16px; }
.settings-modal { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px; }
.settings-modal.hidden { display:none; }
.settings-modal-backdrop { position:absolute; inset:0; background:var(--ai-overlay); backdrop-filter:blur(8px); }
.settings-modal-card { position:relative; display:grid; width:min(920px, 100%); max-height:min(88dvh, 860px); grid-template-rows:auto auto minmax(0, 1fr) auto; overflow:hidden; border:1px solid var(--page-border); border-radius:18px; background:var(--page-surface); box-shadow:0 28px 90px var(--modal-shadow); }
.settings-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:24px 26px 18px; border-bottom:1px solid var(--page-border); }
.settings-modal-head h2 { margin:0; font-size:clamp(20px, 3vw, 28px); letter-spacing:-.03em; }
.settings-modal-subtitle { max-width:620px; margin:8px 0 0; color:var(--page-muted); font-size:13px; line-height:1.6; }
.settings-status { min-height:20px; padding:12px 26px 0; color:var(--page-muted); font-size:13px; }
.settings-status.success { color:var(--ai-success-text); }
.settings-status.error { color:var(--ai-danger-text); }
.settings-provider-list { display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; overflow:auto; padding:14px 26px 20px; }
.settings-provider-list-toolbar { display:flex; grid-column:1 / -1; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:2px 0 4px; }
.settings-provider-list-toolbar > div { display:grid; gap:3px; min-width:0; }
.settings-provider-list-toolbar strong { color:var(--ai-text); font-size:13px; }
.settings-provider-list-toolbar span { color:var(--page-muted); font-size:11px; }
.settings-provider-list-toolbar button { flex:none; min-height:34px; padding:6px 10px; font-size:12px; }
.settings-provider-draft { border-color:var(--ai-accent-border); background:var(--ai-accent-bg-soft); }
.settings-provider-env-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.settings-provider-draft-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:2px; }
.settings-provider-card { display:grid; gap:14px; align-content:start; min-width:0; padding:16px; border:1px solid var(--page-border); border-radius:14px; background:var(--settings-card-bg); transition:border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.settings-provider-card.is-editing { border-color:var(--ai-accent-border); box-shadow:0 10px 28px color-mix(in srgb, var(--modal-shadow) 70%, transparent); background:color-mix(in srgb, var(--settings-card-bg) 88%, var(--ai-accent-bg-soft)); }
.settings-provider-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.settings-provider-summary { min-width:0; }
.settings-provider-title-line { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.settings-provider-kind { padding:3px 6px; border:1px solid var(--page-border); border-radius:999px; color:var(--page-muted); font-size:10px; font-weight:800; }
.settings-provider-head-actions { display:flex; align-items:center; flex:none; gap:8px; }
.settings-provider-edit-button { min-height:32px; padding:6px 10px; font-size:12px; }
.settings-provider-head h3 { margin:0; font-size:15px; }
.settings-provider-head p { overflow:hidden; margin:5px 0 0; color:var(--page-muted); font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.settings-provider-head .settings-model-chips { margin-top:9px; }
.settings-provider-editor { display:none; gap:14px; padding-top:2px; border-top:1px solid var(--page-border); }
.settings-provider-card.is-editing .settings-provider-editor, .settings-provider-draft .settings-provider-editor { display:grid; }
.settings-provider-editor-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.settings-provider-edit-actions { display:flex; justify-content:flex-end; }
.settings-env-summary { align-content:start; }
.settings-env-summary em, .settings-field em { color:var(--page-muted); font-size:10px; font-style:normal; font-weight:600; }
.settings-env-pills { display:flex; flex-wrap:wrap; gap:6px; min-height:38px; align-items:center; }
.settings-env-pills code { max-width:100%; overflow:hidden; border:1px solid var(--page-border); border-radius:8px; padding:8px 9px; color:var(--page-muted); background:var(--settings-chip-bg); font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.settings-key-status { flex:none; padding:5px 8px; border-radius:999px; font-size:11px; font-weight:800; }
.settings-key-status.ready { color:var(--ai-success-text); background:var(--ai-success-bg); }
.settings-key-status.missing { color:var(--ai-warning-text); background:var(--ai-warning-bg); }
.settings-provider-controls { display:flex; flex-wrap:wrap; gap:10px; }
.settings-provider-probe { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.settings-probe-button { min-height:32px; padding:6px 10px; font-size:12px; }
.settings-probe-status { color:var(--page-muted); font-size:12px; }
.settings-probe-status.ok { color:var(--ai-success-text); }
.settings-probe-status.pending { color:var(--ai-info-text); }
.settings-probe-status.missing_key,
.settings-probe-status.proxy_missing,
.settings-probe-status.rate_limited,
.settings-probe-status.unsupported { color:var(--ai-warning-text); }
.settings-probe-status.auth_error,
.settings-probe-status.connection_error,
.settings-probe-status.timeout,
.settings-probe-status.upstream_error,
.settings-probe-status.error { color:var(--ai-danger-text); }
.settings-toggle { display:flex; align-items:center; gap:7px; color:var(--ai-text-secondary); font-size:12px; font-weight:700; }
.settings-toggle input { accent-color:var(--ai-accent-strong); }
.settings-field { display:grid; gap:6px; }
.settings-field > span, .settings-field-label { color:var(--ai-text-secondary); font-size:12px; font-weight:800; }
.settings-field input { width:100%; min-height:38px; border:1px solid var(--page-border); border-radius:8px; padding:8px 10px; background:var(--settings-input-bg); color:var(--page-text); font-size:12px; }
.settings-field input:focus { outline:2px solid var(--accent-border, rgba(255,255,255,.28)); outline-offset:1px; }
.settings-field small { color:var(--page-muted); font-size:11px; line-height:1.4; }
.settings-models { display:grid; gap:7px; }
.settings-models-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.settings-models-heading button { min-height:32px; padding:6px 10px; font-size:12px; }
.settings-model-chips { display:flex; flex-wrap:wrap; gap:6px; }
.settings-model-chip { max-width:100%; overflow:hidden; border:1px solid var(--page-border); border-radius:999px; padding:5px 8px; color:var(--ai-text-secondary); background:var(--settings-chip-bg); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.settings-muted, .settings-loading, .settings-empty { color:var(--page-muted); font-size:13px; }
.settings-modal-actions { display:flex; justify-content:flex-end; gap:10px; padding:16px 26px 22px; border-top:1px solid var(--page-border); }
.settings-modal-actions button { min-height:40px; padding:0 16px; }
body.settings-modal-open { overflow:hidden; }
@media (max-width: 760px) { .app-header { padding:22px 16px 12px; } .app-main { padding:0 12px 16px; } .header-status { font-size:0; padding:10px; } .header-status .status-dot { margin:0; } }
@media (max-width: 720px) { .settings-modal { align-items:end; padding:0; } .settings-modal-card { max-height:92dvh; border-radius:18px 18px 0 0; } .settings-modal-head { padding:20px 16px 14px; } .settings-status { padding-left:16px; padding-right:16px; } .settings-provider-list { grid-template-columns:1fr; padding:12px 16px 16px; } .settings-modal-actions { padding:12px 16px calc(16px + env(safe-area-inset-bottom)); } .settings-modal-actions button { flex:1; } .header-action, .header-logout { padding:0 9px; } }

/* Editable model IDs remain separate from display labels and server-side keys. */
.settings-provider-head > div, .settings-model-row, .settings-model-row .settings-field { min-width:0; }
.settings-models > p { margin:0; font-size:12px; line-height:1.6; }
.settings-model-rows { display:grid; gap:10px; max-height:280px; overflow-y:auto; padding:3px; }
.settings-model-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:8px; align-items:end; }
.settings-model-row > button { min-height:38px; padding:6px 8px; font-size:12px; }
.settings-models > button { justify-self:start; }
@media (max-width: 480px) {
  .settings-provider-list-toolbar { align-items:flex-start; flex-direction:column; }
  .settings-provider-list-toolbar button { width:100%; }
  .settings-provider-env-grid { grid-template-columns:1fr; }
  .settings-provider-draft-actions { justify-content:stretch; }
  .settings-provider-draft-actions button { width:100%; }
  .settings-model-row { grid-template-columns:minmax(0,1fr) auto; }
  .settings-model-row .settings-field:first-child { grid-column:1 / -1; }
}

.settings-modal-head > .header-action { flex-shrink:0; white-space:nowrap; }

/* Mainstream chat workspace shell: conversation-first, full-height, and low chrome. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid var(--page-border);
  background: color-mix(in srgb, var(--header-surface) 92%, transparent);
  backdrop-filter: blur(16px);
}

.app-header-leading,
.app-brand,
.app-header-conversation,
.header-actions {
  min-width: 0;
}

.app-header-leading,
.app-brand,
.app-header-conversation {
  display: flex;
  align-items: center;
}

.app-header-leading { gap: 10px; }
.app-brand { gap: 9px; }
.app-brand h1 { font-size: 18px; letter-spacing: -.035em; }
.app-brand-mark { color: var(--accent); font-size: 20px; line-height: 1; }
.app-header-icon {
  display: inline-grid;
  width: 34px;
  min-height: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--page-muted);
}
.app-header-icon:hover { border-color: var(--page-border); background: var(--page-surface); color: var(--page-text); }
.app-header-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.app-header-conversation { justify-content: center; gap: 10px; overflow: hidden; }
.app-header-eyebrow { color: var(--page-muted); font-size: 11px; font-weight: 700; }
.app-header-conversation strong { overflow: hidden; max-width: min(52vw, 560px); color: var(--page-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { gap: 6px; }
.header-status { padding: 7px 9px; border: 0; background: transparent; font-size: 11px; }
.header-action, .header-logout { min-height: 32px; border-color: transparent; background: transparent; padding: 0 9px; font-size: 12px; }
.header-action:hover, .header-logout:hover { border-color: var(--page-border); background: var(--page-surface); }
.app-main { height: calc(100dvh - 64px); padding: 0; }
.app-main > .view { height: 100%; }

@media (max-width: 760px) {
  .app-header { grid-template-columns: auto minmax(0, 1fr) auto; height: 56px; gap: 8px; padding: 0 10px; }
  .app-brand h1 { font-size: 16px; }
  .app-brand-mark { font-size: 17px; }
  .app-header-conversation { display: grid; justify-items: center; gap: 0; }
  .app-header-eyebrow { font-size: 9px; }
  .app-header-conversation strong { max-width: 42vw; font-size: 12px; }
  .header-status { display: none; }
  .header-action, .header-logout { padding: 0 7px; font-size: 11px; }
  .app-main { height: calc(100dvh - 56px); }
}

/* Standalone settings page. */
.header-action { text-decoration: none; }
.settings-page-body { min-height: 100dvh; }
.settings-page-header { position: sticky; top: 0; }
.settings-back-button { display: inline-grid; width: 36px; min-height: 36px; place-items: center; border: 1px solid transparent; border-radius: 10px; color: var(--page-muted); text-decoration: none; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease; }
.settings-back-button:hover { border-color: var(--page-border); background: var(--page-surface); color: var(--page-text); }
.settings-back-button:active { transform: translateX(-2px); }
.settings-back-button:focus-visible { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.settings-back-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.settings-page-main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 48px 0 64px; }
.settings-page-intro { max-width: 720px; margin-bottom: 24px; }
.settings-page-intro h2 { margin: 0; color: var(--page-text); font-size: clamp(28px, 4vw, 42px); letter-spacing: -.045em; }
.settings-page-intro p:not(.eyebrow) { margin: 12px 0 0; color: var(--page-muted); font-size: 14px; line-height: 1.7; }
.settings-page-status { min-height: 24px; padding: 0 0 10px; }
.settings-section-label { display: block; margin-bottom: 6px; color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.settings-runtime-card, .settings-page-section { border: 1px solid var(--page-border); border-radius: 16px; background: var(--settings-card-bg); box-shadow: 0 14px 44px var(--modal-shadow); }
.settings-runtime-card { display: grid; gap: 22px; margin-bottom: 20px; padding: 24px; }
.settings-runtime-head, .settings-page-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.settings-runtime-head h3, .settings-page-section-head h3 { margin: 0; color: var(--page-text); font-size: 18px; }
.settings-runtime-head p { max-width: 680px; margin: 7px 0 0; color: var(--page-muted); font-size: 13px; line-height: 1.6; }
.settings-runtime-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.settings-runtime-form .settings-field input { min-height: 44px; border-radius: 10px; }
.settings-runtime-actions { display: flex; gap: 8px; }
.settings-runtime-actions button { min-height: 44px; white-space: nowrap; }
.settings-page-section { overflow: hidden; }
.settings-page-section-head { align-items: center; padding: 22px 24px 18px; border-bottom: 1px solid var(--page-border); }
.settings-page-section-head h3 { font-size: 16px; }
.settings-page-section-head button { min-height: 36px; }
.settings-provider-list-page { grid-template-columns: minmax(0, 1fr); padding: 20px 24px 24px; background: transparent; }
.settings-provider-list-page .settings-provider-list-toolbar { margin-bottom: 2px; }
.settings-page-footer { display: flex; justify-content: space-between; gap: 16px; padding: 20px 4px 0; color: var(--page-muted); font-size: 12px; }
.settings-page-footer a { color: var(--ai-link); font-weight: 800; text-decoration: none; }
.settings-page-footer a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .settings-page-main { width: min(100% - 24px, 720px); padding: 32px 0 48px; }
  .settings-runtime-card { padding: 18px; }
  .settings-runtime-form { grid-template-columns: 1fr; }
  .settings-runtime-actions button { flex: 1; }
  .settings-page-section-head { padding: 18px 16px 14px; }
  .settings-provider-list-page { grid-template-columns: 1fr; padding: 14px 16px 18px; }
  .settings-page-footer { flex-direction: column; }
}

.settings-page-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px 20px; border-top: 1px solid var(--page-border); }
@media (max-width: 760px) { .settings-page-actions { padding: 14px 16px 18px; } .settings-page-actions button { flex: 1; } }
/* Settings navigation and general preferences. */
.ai-chat-sidebar-settings { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ai-text-muted); font-size: 11px; font-weight: 700; text-decoration: none; }
.ai-chat-sidebar-settings:hover { color: var(--ai-text); }
.ai-chat-sidebar-settings svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.settings-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; gap: 32px; }
.settings-nav { position: sticky; top: 96px; display: grid; gap: 4px; padding: 6px; border: 1px solid var(--page-border); border-radius: 14px; background: color-mix(in srgb, var(--settings-card-bg) 80%, transparent); }
.settings-nav-title { padding: 8px 10px 6px; color: var(--page-muted); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.settings-nav a { display: flex; align-items: center; min-height: 38px; padding: 0 10px; border-radius: 9px; color: var(--page-muted); font-size: 13px; font-weight: 700; text-decoration: none; }
.settings-nav a:hover { background: var(--page-surface); color: var(--page-text); }
.settings-nav a.active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--page-text); }
.settings-page-content { min-width: 0; }
.settings-general-section { margin-bottom: 16px; }
.settings-general-card-body { padding: 4px 24px 8px; }
.settings-preference-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding: 16px 0; }
.settings-preference-row + .settings-preference-row { border-top: 1px solid var(--page-border); }
.settings-preference-row strong { color: var(--page-text); font-size: 14px; }
.settings-preference-row p { margin: 6px 0 0; color: var(--page-muted); font-size: 12px; line-height: 1.6; }
.settings-preference-toggle { cursor: pointer; }
.settings-preference-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.settings-choice-group { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-choice { min-width: 72px; }
.settings-choice[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--page-text); }
.settings-link-row { min-height: 92px; }
.settings-inline-link { flex: 0 0 auto; color: var(--ai-link); font-size: 13px; font-weight: 800; text-decoration: none; }
.settings-inline-link:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .settings-layout { grid-template-columns: 1fr; gap: 18px; }
  .settings-nav { position: static; display: flex; gap: 4px; overflow-x: auto; padding: 4px; }
  .settings-nav-title { display: none; }
  .settings-nav a { flex: 1 0 auto; justify-content: center; min-height: 36px; white-space: nowrap; }
  .settings-general-card-body { padding: 2px 16px 6px; }
  .settings-preference-row { align-items: flex-start; gap: 14px; }
  .settings-choice-group { justify-content: flex-end; }
}