:root {
  color-scheme:dark; color:var(--ink); background:var(--canvas); font-size:14px; line-height:1.6; font-weight:300;
  --canvas:#1a1a19; --rail:#151514; --surface:#222220; --hover:#30302d; --accent:#deded7; --accent-hover:#f0f0eb; --accent-soft:#2b2b28; --ink:#e6e6e1; --muted:#a4a49b; --line:#353532; --input:#262624; --page-gutter:32px; --content-width:960px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --radius:12px;
}
* { box-sizing:border-box; }
body { margin:0; }
button,input,select,textarea { font:inherit; }
button { min-height:38px; border:1px solid transparent; border-radius:8px; padding:8px 14px; background:var(--accent); color:var(--canvas); cursor:pointer; font-weight:400; transition:background .15s,border-color .15s; }
button:hover { background:var(--accent-hover); }
button.secondary { color:var(--ink); border-color:var(--line); background:var(--surface); }
button.secondary:hover { background:var(--hover); border-color:#50504a; }
button:disabled { opacity:.45; cursor:not-allowed; }
:focus-visible { outline:2px solid #b5b5aa; outline-offset:3px; }
[hidden] { display:none !important; }
h1,h2,h3,h4,p { margin:0; }
h1,h2,h3,h4 { line-height:1.45; overflow-wrap:anywhere; }
h2 { font-size:26px; font-weight:450; letter-spacing:-.5px; }
h2:focus { outline:none; }
h3 { font-size:17px; font-weight:450; }
h4 { font-size:15px; }
p { overflow-wrap:anywhere; }
.muted { color:var(--muted); font-size:13px; }
.app-shell { display:grid; grid-template-columns:256px minmax(0,1fr); min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:16px; background:var(--rail); border-right:1px solid var(--line); padding:24px 12px 12px; min-height:0; }
.brand { display:flex; align-items:center; gap:var(--s2); padding:0 var(--s2); font-weight:550; font-size:24px; text-decoration:none; color:var(--ink); letter-spacing:-1px; }
.brand-icon { display:block; width:30px; height:30px; flex-shrink:0; }
.book-logo { display:block; width:100%; height:100%; }
.book-spine { stroke:#e8f3ff; stroke-width:1.2; fill:none; opacity:.8; }
.book-turn { transform-origin:32px 32px; animation:book-turn 2.4s cubic-bezier(.45,.05,.35,1) infinite; }
.book-turn-1 { animation-delay:.4s; } .book-turn-2 { animation-delay:.8s; }
@keyframes book-turn { 0% { transform:scaleX(1); opacity:0; } 8% { opacity:1; } 60% { transform:scaleX(-1); opacity:1; } 85% { transform:scaleX(-1); opacity:0; } 100% { transform:scaleX(1); opacity:0; } }
.workspace-name { display:flex; align-items:center; gap:var(--s2); padding:0 var(--s2); color:var(--muted); font-size:12px; }
.online-dot { width:6px; height:6px; background:#679778; border-radius:50%; }
#navigation { display:grid; gap:var(--s1); }
#navigation button { width:100%; text-align:left; border:1px solid transparent; background:transparent; box-shadow:none; color:var(--muted); padding:10px 12px; font-size:13px; font-weight:350; }
#navigation button:hover { background:var(--hover); color:var(--ink); }
#navigation button[aria-current=page] { background:var(--hover); color:var(--ink); font-weight:400; }
.sidebar-bottom { margin-top:auto; display:grid; gap:8px; padding-top:12px; border-top:1px solid var(--line); flex-shrink:0; }
.local-profile { display:flex; align-items:center; gap:var(--s2); padding:0 var(--s2); }
.local-profile strong { font-size:11px; }
.local-profile small { display:block; font-size:11px; color:var(--muted); }
.avatar { width:28px; height:28px; }
.local-note { padding:0 var(--s2); color:var(--muted); font-size:11px; }
#language-control { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); border-top:1px solid var(--line); padding:var(--s3) var(--s2) 0; }
#language-control label { font-size:12px; }
#language-control select { width:72px; min-height:36px; padding:4px 8px; }
.main-area { min-width:0; }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); min-height:64px; padding:12px var(--page-gutter); background:var(--canvas); border-bottom:1px solid var(--line); }
.breadcrumb { display:flex; align-items:center; gap:var(--s3); font-size:12px; color:var(--muted); }
.breadcrumb strong { color:var(--ink); font-weight:500; }
.workspace { min-height:calc(100vh - 64px); }
main { min-width:0; padding:32px var(--page-gutter); }
#screen { display:flex; flex-direction:column; align-items:stretch; gap:var(--s5); max-width:var(--content-width); margin:0 auto; }
#screen > #timer:empty { display:none; }
#screen > h2 + p.muted { margin-top:calc(-1 * var(--s3)); }
#screen > button { align-self:flex-start; }
#timer { font-variant-numeric:tabular-nums; color:var(--muted); }
footer { max-width:var(--content-width); margin:32px auto 0; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.surface,.ready-card,.set-card,.listening-question { min-width:0; padding:var(--s5); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.section-heading { display:flex; align-items:center; gap:var(--s3); }
.step-number { display:grid; place-items:center; width:28px; height:28px; flex-shrink:0; border-radius:50%; background:var(--accent-soft); color:var(--accent); font:600 13px var(--font-ui); }
.section-body { display:grid; gap:var(--s4); padding-top:var(--s4); }
.connection-settings { padding:0; }
.connection-body { display:grid; gap:var(--s4); padding:0 var(--s5) var(--s5); border-top:1px solid var(--line); padding-top:var(--s5); }
.connection-state { color:#a5cdb2; background:#22342a; padding:4px 10px; border-radius:6px; font-size:12px; white-space:nowrap; }
.connection-state.offline { color:var(--muted); background:var(--surface); }
.connection-url { font-family:'Roboto Mono',monospace; font-size:12px; }
.actions,.request-actions,.card-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); }
.request-panel { display:grid; gap:var(--s4); }
.request-panel .request-actions { justify-content:flex-start; }
.request-hint { max-width:64ch; }
.job-list { display:grid; gap:var(--s4); }
.job-card { display:grid; gap:var(--s3); }
.job-card .card-actions { justify-content:space-between; }
.job-card h4 { font-size:16px; }
.ready-card { width:100%; max-width:none; margin:0; padding:24px; display:grid; gap:var(--s5); }
.ready-topic { font-size:20px; }
.ready-card > h2 { margin-bottom:calc(-1 * var(--s3)); }
.ready-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4); margin:0; }
.metric { min-width:0; display:flex; flex-direction:column; gap:var(--s2); padding:var(--s4); background:var(--input); border-radius:8px; }
.metric dt { font-size:12px; color:var(--muted); }
.metric dd { margin:0; margin-top:auto; font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; }
.request-metrics { display:flex; flex-wrap:wrap; gap:var(--s2); }
.request-metrics span { padding:4px 10px; background:var(--input); border-radius:6px; font-size:12px; }
.ready-rules { margin:0; padding-left:22px; color:var(--muted); font-size:13px; }
.ready-rules li + li { margin-top:var(--s2); }
.ready-card .actions { padding-top:var(--s5); border-top:1px solid var(--line); }
label { display:block; color:var(--muted); font-size:13px; }
input:not([type=radio]),select,textarea { display:block; width:100%; min-width:0; min-height:38px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); }
.field { display:grid; align-content:start; gap:var(--s2); }
.setup-form { display:grid; gap:var(--s5); margin:0; padding:var(--s6); background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 3px 16px #30302e06; }
.form-section { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
.form-section > legend { margin-bottom:var(--s4); font-size:16px; font-weight:600; }
.connection-body > button { justify-self:start; }
.setup-form > button { justify-self:start; }
fieldset { border:0; padding:0; margin:0; min-width:0; }
legend { width:100%; margin-bottom:var(--s4); }
.english,.passage { font-size:18px; line-height:1.85; color:var(--ink); }
.passage { padding:var(--s5); border:1px solid var(--line); border-radius:8px; background:var(--surface); white-space:pre-wrap; }
.option { display:flex; align-items:baseline; gap:var(--s3); border:1px solid var(--line); border-radius:8px; padding:12px 16px; margin-top:var(--s3); background:var(--surface); cursor:pointer; }
.option:has(input:checked) { border-color:#a5a59b; background:var(--accent-soft); }
input[type=radio] { accent-color:var(--accent); flex-shrink:0; }
.option .english { font-size:16px; }
.listening-question legend { margin:0; }
.explanations { margin:0; padding-left:22px; }
.explanations li { padding:var(--s2) 0; }
.explanations p { margin-top:var(--s1); font-size:14px; }
.feedback,.notice { padding:var(--s4); background:var(--accent-soft); border:1px solid var(--line); border-radius:8px; color:var(--muted); }
.badge { display:inline-block; padding:4px 10px; border-radius:6px; background:var(--accent-soft); color:var(--accent); font-size:12px; white-space:nowrap; }
#error { max-width:var(--content-width); margin:0 auto var(--s5); padding:var(--s4); background:#352625; border:1px solid #80504b; border-radius:8px; color:#f1b9b1; }
.history { margin:0; padding-left:20px; font-size:13px; color:var(--muted); }
.history li + li { margin-top:var(--s4); }
.history button { margin-left:var(--s2); }
.filters { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--s4); }
.filters label { display:grid; gap:var(--s2); }
.set-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
.set-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2); }
.set-card h3 { font-size:18px; line-height:1.4; padding-right:calc(var(--s6) + var(--s2)); margin-bottom:var(--s1); }
.set-card p { font-size:13px; color:var(--muted); line-height:1.5; }
.set-card .set-parts { color:var(--ink); }
.set-card .latest-score { margin-top:var(--s2); padding:var(--s2) var(--s3); width:100%; border-radius:8px; background:var(--accent-soft); color:var(--ink); }
.set-card .card-actions { margin-top:auto; padding-top:var(--s4); width:100%; flex-wrap:nowrap; justify-content:space-between; }
.set-card .badge { white-space:normal; }
.set-card .badge.completed { background:#243126; color:#a9d3ae; }
.set-card .badge.deleting { background:#352625; color:#e8aaa3; }
.icon-button { position:absolute; top:var(--s4); right:var(--s4); display:grid; place-items:center; width:32px; height:32px; min-height:0; padding:0; border-radius:8px; }
.attempts { width:100%; border-collapse:collapse; font-size:13px; margin:0; }
.attempts th { text-align:left; color:var(--muted); font-weight:500; }
.attempts td,.attempts th { padding:12px 8px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
audio { display:block; max-width:100%; }
.fullscreen-loading { position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s4); padding:var(--s6); background:var(--canvas); text-align:center; }
.loading-mark { width:72px; height:72px; }
.fullscreen-loading h2 { max-width:44rem; }
.fullscreen-loading p { color:var(--muted); font-variant-numeric:tabular-nums; }
@media (max-width:1000px) { .app-shell { grid-template-columns:224px minmax(0,1fr); } :root { --page-gutter:24px; } .set-list { grid-template-columns:1fr; } }
@media (max-width:600px) {
  .app-shell { display:block; } .sidebar { position:static; height:auto; gap:var(--s4); padding:var(--s4); border-bottom:1px solid var(--line); border-right:0; }
  .brand { font-size:22px; padding:0; } .workspace-name,.local-note { display:none; }
  #navigation { display:flex; flex-wrap:wrap; gap:var(--s1); } #navigation button { width:auto; padding:8px 10px; font-size:12px; }
  .sidebar-bottom { border:0; padding:0; display:flex; justify-content:space-between; align-items:center; } .local-profile { padding:0; } .local-profile .avatar,.local-profile strong { display:none; }
  #language-control { border:0; padding:0; } #language-control label { display:none; }
  .masthead { min-height:52px; padding:12px 16px; gap:var(--s2); } .breadcrumb { gap:var(--s2); } .breadcrumb > span:first-child,.breadcrumb > span:nth-child(2) { display:none; }
  main { padding:24px 16px; } #screen { gap:var(--s5); } h2 { font-size:23px; }
  .surface,.set-card,.listening-question,.setup-form,.ready-card { padding:var(--s4); } .ready-card { margin:0; } .ready-metrics { gap:var(--s2); } .metric { padding:var(--s3); } .metric dd { font-size:19px; }
  .connection-settings { padding:0; } .connection-body { padding:var(--s4); }
  .form-section,.filters { grid-template-columns:1fr; } .field { grid-column:1/-1; } .request-panel .request-actions { align-items:stretch; } .request-actions > button { width:100%; }
  .attempts { font-size:11px; } .attempts th,.attempts td { padding:8px 4px; } .attempts button { font-size:11px; padding:6px 8px; }
  footer { margin-top:var(--s6); } .english,.passage { font-size:17px; } .passage { padding:var(--s4); }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } .book-turn { animation:none; opacity:0; } }

#listening-actions:empty { display: none; }

/* Claude desktop proportions: quiet rail, generous central workspace, compact controls. */
.masthead .breadcrumb { margin-right:auto; }
#sidebar-toggle { width:36px; min-height:36px; padding:0; border-color:transparent; background:transparent; font-size:18px; }
.sidebar-collapsed .app-shell { grid-template-columns:minmax(0,1fr); }
.sidebar-collapsed .sidebar { display:none; }

body[data-phase=setup] #screen > h2 { font-size:26px; font-weight:450; }

.setup-form { gap:28px; }
.form-section + .form-section { border-top:1px solid var(--line); padding-top:24px; }
.exam-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.exam-tabs button { padding:8px 14px; min-height:40px; font-size:13px; }
.exam-tabs button[aria-pressed=true] { background:var(--ink); color:var(--canvas); border-color:var(--ink); }
.exam-guide { display:grid; gap:20px; padding:28px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.exam-guide > h3 { font-size:28px; }
.exam-guide details { padding:20px; background:var(--input); border-radius:10px; }
.exam-guide summary { cursor:pointer; font-weight:600; }
.exam-guide details > * + * { margin-top:12px; }
.exam-guide a { color:var(--accent); overflow-wrap:anywhere; }
.exam-guide .english { font-size:16px; }
@media(max-width:600px) {
 body[data-phase=setup] #screen > h2 { font-size:28px; padding-top:0; }
 .exam-guide { padding:16px; gap:16px; }
 .exam-guide .attempts { font-size:12px; }
 .sidebar-collapsed .app-shell { display:block; }
}
#navigation button { min-height:34px; padding:6px 12px; font-size:14px; }

/* The supplied desktop template uses an independent dark settings surface. */

.settings-content { padding:8px 0 40px; min-width:0; display:flex; flex-direction:column; gap:0; overflow:auto; scrollbar-color:#4b4b45 transparent; }
.settings-content h2,.settings-content h3 { font:500 15px/1.5 var(--font-ui); letter-spacing:0; }
.settings-content > h2 { margin-bottom:24px; padding-right:32px; }
.settings-content > h3 { margin:48px 0 24px; }
.settings-content > p { margin-bottom:16px; }
.settings-content .muted { font-size:14px; line-height:1.6; color:var(--muted); }
.settings-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(100px,auto); gap:24px; align-items:center; min-height:56px; padding:12px 0; border-bottom:1px solid var(--line); }
.settings-row label { color:var(--ink); font-size:14px; font-weight:300; }
.settings-row .setting-value { text-align:right; }
.settings-avatar { display:block; width:40px; height:40px; justify-self:end; }
.settings-row select { width:auto; min-width:86px; justify-self:end; background:transparent; border:0; min-height:32px; padding:4px 12px; }
.settings-row .muted { margin-top:2px; }
.settings-row input { width:100%; min-width:0; max-width:240px; }
.connection-body pre { white-space:pre-wrap; overflow-wrap:anywhere; min-width:0; }
.connection-body section { min-width:0; display:grid; gap:var(--s3); }
.settings-content .settings-footnote { margin-top:18px; font-size:12px; }
.settings-content .settings-form { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; gap:24px; }
.settings-form .form-section { display:block; }
.settings-form .form-section legend { font-size:14px; color:var(--ink); margin:0; padding:12px 0; }
.settings-form .field { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,34%); align-items:center; gap:24px; padding:12px 0; border-bottom:1px solid var(--line); }
.settings-form .field label { color:var(--ink); font-size:14px; }
.settings-content input:not([type=radio]),.settings-content textarea { background:#262624; border-color:#40403b; min-height:36px; padding:7px 12px; }
.settings-form select { border:0; background:transparent; min-height:36px; padding:7px 8px; text-align:right; }
.settings-form select option { background:#262624; }
.settings-form input:disabled { opacity:.45; }
.settings-form .form-section + .form-section { border:0; padding:0; }
.settings-form .profile-hint { font-size:12px; line-height:1.7; }
.settings-content button:not(.secondary) { background:#ddddD5; color:#20201f; border-color:transparent; min-height:36px; padding:6px 14px; font-weight:500; }
.settings-content .connection-settings { border:0; background:transparent; }
.settings-content .connection-body { padding:0; border:0; }
.settings-saved { color:#9ec8a8; }
.settings-product { font-size:24px; font-weight:600; }
@media(max-width:700px) {
 .settings-content { padding:8px 0 24px; }
 .settings-form .field,.settings-row { grid-template-columns:1fr; gap:8px; }
 .settings-form select { text-align:left; }
 .settings-row .setting-value { text-align:left; }
 .settings-row select,.settings-avatar { justify-self:start; }
}
@media(max-width:480px) {
 .settings-row { grid-template-columns:minmax(0,1fr) auto; }
}

/* Shared detail layout: one overview, grouped actions, and a quiet management row. */
.set-overview { display:grid; gap:24px; }
.set-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:0; }
.set-metrics dt { color:var(--muted); font-size:12px; }
.set-metrics dd { margin:6px 0 0; font-size:18px; font-weight:400; }
.set-overview .notice { font-size:13px; }
.set-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:16px; }
button.danger { color:#e8aaa3; border-color:transparent; background:transparent; }
button.danger:hover { background:#352625; border-color:#80504b; }
.attempts-container { overflow:auto; }
#navigation,.brand,.workspace-name { flex-shrink:0; }
body { scrollbar-color:#4b4b45 var(--canvas); }
@media(max-width:600px) {
 .set-metrics { grid-template-columns:1fr; gap:16px; }
 .set-metrics > div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
 .set-metrics dd { margin:0; text-align:right; }
 .set-overview .actions { display:grid; grid-template-columns:1fr; }
 .set-toolbar button { flex:1; }
}

.leave-dialog { max-width:420px; padding:var(--s5); background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); }
.leave-dialog::backdrop { background:rgba(0,0,0,.55); }
.leave-dialog h2 { margin:0 0 var(--s3); font-size:18px; }
.leave-dialog .actions { justify-content:flex-end; margin-top:var(--s4); }

.library-search { display:grid; gap:var(--s2); margin-bottom:var(--s3); }

.library-tabs { display:grid; grid-template-columns:1fr 1fr; align-self:flex-start; width:min(100%,260px); gap:2px; padding:3px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.library-tabs button { min-height:30px; padding:4px 10px; width:100%; font-size:13px; border-radius:7px; border-color:transparent; background:transparent; color:var(--muted); }
.library-tabs button:hover { background:var(--hover); color:var(--ink); }
.library-tabs [role="tab"][aria-selected="true"] { background:var(--hover); color:var(--ink); border-color:var(--line); }
.library-tabs button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.part-chips { display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s5); }
.part-chips .chip { border-radius:999px; padding:4px 12px; }
.part-chips .chip[aria-pressed="true"] { background:var(--accent); color:#151514; border-color:var(--accent); }
.library-group { margin-bottom:var(--s6); }
.library-group h3 { display:flex; gap:var(--s2); align-items:baseline; margin:0 0 var(--s3); font-size:15px; }
.create-flow { display:grid; gap:var(--s5); }

.font-control { display:grid; gap:var(--s2); min-width:0; }
.font-preview { margin:0; padding:var(--s3); border:1px solid var(--line); border-radius:8px; background:var(--input); color:var(--ink); }
.settings-row.font-row { grid-template-columns:minmax(0,1fr) minmax(0,420px); align-items:start; }
.settings-row.font-row select { width:100%; justify-self:stretch; border:1px solid var(--line); background:var(--input); }
@media (max-width:700px) { .settings-row.font-row { grid-template-columns:minmax(0,1fr); gap:12px; } }
.connection-overview { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s3); }
.web-client-panel { display:grid; gap:var(--s3); padding-bottom:var(--s4); border-bottom:1px solid var(--line); }
.web-client-panel h3 { margin:0; }
.web-client-panel ol { margin:0; padding-left:var(--s5); display:grid; gap:var(--s2); }
.public-link-live, .web-client-tool { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; margin:0; }
#navigation .nav-divider { border:0; border-top:1px solid var(--line); margin:var(--s2) 0; width:100%; }

/* Exam room: the page is the exam, so the app chrome steps aside. */
body[data-focus=true] .sidebar, body[data-focus=true] .masthead, body[data-focus=true] footer { display:none; }
body[data-focus=true] .app-shell { display:block; }
.room-cancel { position:fixed; top:var(--s4); right:var(--s4); z-index:20; }
.room-question { margin-top:var(--s5); }
.room-upcoming { opacity:.45; }

.room-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s5); height:calc(100vh - 11rem); }
.room-pane { overflow:auto; min-height:0; padding-right:var(--s3); }
.room-tabs { display:none; gap:var(--s3); }
@media (max-width:900px) {
  .room-tabs { display:flex; }
  .room-split { grid-template-columns:minmax(0,1fr); }
  .room-split[data-tab=passage] .room-questions-pane, .room-split[data-tab=questions] .room-passages { display:none; }
}
.settings-row input[role=switch] { appearance:none; position:relative; justify-self:end; width:40px; height:24px; min-height:0; padding:0; border:1px solid var(--line); border-radius:999px; background:var(--input); cursor:pointer; transition:background .15s,border-color .15s; }
.settings-row input[role=switch]::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--muted); transition:transform .15s,background .15s; }
.settings-row input[role=switch]:checked { background:var(--accent); border-color:var(--accent); }
.settings-row input[role=switch]:checked::after { transform:translateX(16px); background:var(--canvas); }
.settings-row input[role=switch]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.web-client-panel { gap:var(--s4); }
.web-client-panel > .actions { margin:0; }
.settings-content .connection-body { padding-top:var(--s4); gap:var(--s5); }

.request-panel { gap:var(--s3); padding-top:var(--s2); }
.request-title { margin:0; font-size:15px; font-weight:500; color:var(--ink); }
.request-metrics { display:flex; flex-wrap:wrap; gap:var(--s2); }
.request-metrics span { padding:4px 12px; border-radius:999px; background:var(--accent-soft); color:var(--ink); font-size:13px; }
.request-panel > p { margin:0; color:var(--muted); }
.request-panel .request-actions { margin-top:var(--s2); }
.request-code { width:100%; margin-top:var(--s2); font:12px/1.7 'Roboto Mono',ui-monospace,monospace; background:var(--canvas); min-height:180px; resize:vertical; }