/* Вебкабінет педагога (bot/cabinet_server.py). Токени — продовження адмінки (bot/static/status.css) + акцент
   за ступенем (body[data-stage]: s — 5–11 синій, p — 1–4 зелений, d — дошкілля вохра), як у прототипі
   notes/Дослідження/вебкабінет-прототип/. Телефон — нижні вкладки; ≥ 900 px — список і матеріал поруч. */
:root{color-scheme:light;
  --bg:#F4F6FA; --surface:#FFFFFF; --surface-2:#EDF0F5; --fg:#111827; --muted:#545D6B; --faint:#5F6878;
  --border:#DEE3EB; --border-strong:#8C96A6;
  --s:#2457C5; --s-soft:#E9F0FC; --s-ink:#1A46A3;
  --p:#17703F; --p-soft:#E3F3EA; --p-ink:#115C33;
  --d:#A2510A; --d-soft:#FCEFDF; --d-ink:#7F3F06;
  --ok:#1E7A3C; --ok-soft:#E5F4EA; --bad:#B42318; --bad-soft:#FBEAE7; --run:#975606; --run-soft:#FDF1DF;
  --warn:#7E5300; --warn-soft:#FFF4D6;
  --on-accent:#FFFFFF; --paper:#FFFFFF; --show-bg:#0B0F17; --show-fg:#F3F5F8;
  --shadow:0 1px 2px rgba(17,24,39,.06),0 2px 8px rgba(17,24,39,.05);
  --sans:-apple-system,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r-s:8px; --r:12px; --r-l:16px; --dur:180ms; --ease:cubic-bezier(.2,.7,.2,1);
  --tabh:58px; --tap:44px;
}
@media (max-width:899px){:root{--tap:48px}}   /* телефон: 48 — Material 3 (Android), ≥ 44 — HIG (iOS) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --bg:#0E1420; --surface:#161D2B; --surface-2:#1C2535; --fg:#EEF2F7; --muted:#AEB8C6; --faint:#8E99AB;
  --border:#2A3446; --border-strong:#5A6880;
  --s:#7BA6F2; --s-soft:#1D2A44; --s-ink:#A9C3F5;
  --p:#5FC48E; --p-soft:#15301F; --p-ink:#8FDDB2;
  --d:#F0A65A; --d-soft:#35240F; --d-ink:#F6C48E;
  --ok:#5FC48E; --ok-soft:#15301F; --bad:#F28B82; --bad-soft:#3A1D1B; --run:#F0B45A; --run-soft:#33260F;
  --warn:#E8C25A; --warn-soft:#332A0F;
  --on-accent:#0E1420; --paper:#F4F4F1; --show-bg:#05080D; --shadow:0 1px 2px rgba(0,0,0,.3)}}
:root[data-theme="dark"]{color-scheme:dark;
  --bg:#0E1420; --surface:#161D2B; --surface-2:#1C2535; --fg:#EEF2F7; --muted:#AEB8C6; --faint:#8E99AB;
  --border:#2A3446; --border-strong:#5A6880;
  --s:#7BA6F2; --s-soft:#1D2A44; --s-ink:#A9C3F5;
  --p:#5FC48E; --p-soft:#15301F; --p-ink:#8FDDB2;
  --d:#F0A65A; --d-soft:#35240F; --d-ink:#F6C48E;
  --ok:#5FC48E; --ok-soft:#15301F; --bad:#F28B82; --bad-soft:#3A1D1B; --run:#F0B45A; --run-soft:#33260F;
  --warn:#E8C25A; --warn-soft:#332A0F;
  --on-accent:#0E1420; --paper:#F4F4F1; --show-bg:#05080D; --shadow:0 1px 2px rgba(0,0,0,.3)}
body[data-stage="s"]{--accent:var(--s);--accent-soft:var(--s-soft);--accent-ink:var(--s-ink)}
body[data-stage="p"]{--accent:var(--p);--accent-soft:var(--p-soft);--accent-ink:var(--p-ink)}
body[data-stage="d"]{--accent:var(--d);--accent-soft:var(--d-soft);--accent-ink:var(--d-ink)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.45 var(--sans);-webkit-font-smoothing:antialiased;
  min-height:100vh;min-height:100dvh}
button,input,select{font:inherit;color:inherit}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
svg{display:block}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
.skip{position:absolute;left:12px;top:-60px;background:var(--accent);color:var(--on-accent);padding:10px 14px;border-radius:var(--r-s);z-index:60;text-decoration:none}
.skip:focus{top:calc(8px + env(safe-area-inset-top))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- верхня панель ---- */
.bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 97%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--border);padding-top:env(safe-area-inset-top)}
.bar-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px;
  min-height:52px;padding:0 max(12px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));max-width:1400px;margin:0 auto}
.bar h1{grid-column:2;font-size:20px;font-weight:700;letter-spacing:-.015em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back{grid-column:1;display:inline-flex;align-items:center;gap:2px;min-height:var(--tap);padding:0 8px 0 0;border:0;background:none;
  color:var(--accent-ink);cursor:pointer;font-size:16px;white-space:nowrap}
.back svg{width:24px;height:24px}
.back:not([hidden])+h1{font-size:17px;font-weight:650}
.icon-btn{grid-column:4;width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;background:none;border-radius:var(--r);color:var(--muted);cursor:pointer}
.icon-btn svg{width:22px;height:22px}
.icon-btn:hover{background:var(--surface-2);color:var(--fg)}
.tabs-top{display:none}

/* ---- нижні вкладки (телефон) ---- */
.tabs-bottom{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--surface);
  border-top:1px solid var(--border);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.tabs-bottom a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--tabh);
  color:var(--muted);text-decoration:none;font-size:12px;font-weight:600;text-align:center;line-height:1.15;padding:0 2px}
.tabs-bottom a svg{width:26px;height:26px}
.tabs-bottom a[aria-current="page"]{color:var(--accent-ink)}
.tabs-bottom .badge{position:absolute;top:6px;left:calc(50% + 6px)}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--run);color:var(--on-accent);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}

main:focus,main:focus-visible{outline:none}
main{padding:12px max(16px,env(safe-area-inset-right)) calc(var(--tabh) + 24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));max-width:1400px;margin:0 auto}
.loading,.empty,.err{color:var(--muted);text-align:center;padding:48px 16px;margin:0}
.empty h2,.err h2{color:var(--fg);font-size:18px;margin:0 0 6px}
.err h2{color:var(--bad)}
.handoff .btn-row{flex-direction:column;align-items:stretch;max-width:320px;margin:20px auto 0}   /* кнопка «Кабінет» → браузер */

/* ---- пошук і фільтри ---- */
.search{position:relative;margin:4px 0 10px}
.search input{width:100%;min-height:var(--tap);border:1px solid var(--border-strong);background:var(--surface);border-radius:var(--r);padding:10px 12px 10px 40px;font-size:16px}
.search input::placeholder{color:var(--faint)}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--faint);pointer-events:none}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 10px;margin:0 -16px;scroll-padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:var(--tap);min-width:var(--tap);padding:0 14px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);
  color:var(--fg);font-size:15px;font-weight:550;cursor:pointer;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chips-l{flex:none;align-self:center;font-size:14px;font-weight:600;color:var(--muted);margin-right:2px}
.count{color:var(--muted);font-size:14px;margin:0 0 8px}

/* ---- картки бібліотеки ---- */
.list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:start;padding:12px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--shadow);text-decoration:none;color:inherit;min-height:var(--tap);
  transition:border-color var(--dur) var(--ease)}
.card:hover{border-color:var(--border-strong)}
.card[aria-current="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.thumb{width:64px;aspect-ratio:210/297;border-radius:6px;background:var(--paper);border:1px solid var(--border);overflow:hidden;display:grid;place-items:center;color:var(--faint);font-size:12px;font-weight:700}
.thumb.empty{background:var(--surface-2);border-style:dashed}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.c-top{display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline;font-size:14px;color:var(--muted);min-width:0}
.c-top>span{white-space:nowrap}.c-top>span:last-child{margin-left:auto}      /* довгий тип не обрізаємо — дата переходить у новий рядок */
.c-type{color:var(--accent-ink);font-weight:700}
.c-topic{font-size:17px;font-weight:650;line-height:1.3;margin:2px 0 6px;overflow-wrap:anywhere}
.c-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:2px 8px;border-radius:999px;font-size:13px;font-weight:600;background:var(--surface-2);color:var(--muted)}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.run{background:var(--run-soft);color:var(--run)}
.pill.acc{background:var(--accent-soft);color:var(--accent-ink)}

/* ---- матеріал ---- */
.mat-head{margin:4px 0 14px}
.mat-head .c-topic{font-size:22px;margin:4px 0 8px}
.mat-head.has-thumb{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start}
.mat-head.has-thumb .c-top>span:last-child{margin-left:0;flex-basis:100%}      /* поруч із мініатюрою дата — окремим рядком зліва */
.mat-thumb{position:relative;width:72px;aspect-ratio:210/297;padding:0;border:1px solid var(--border-strong);border-radius:8px;background:var(--paper);overflow:hidden;cursor:pointer;margin-top:4px}
.mat-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.mat-thumb-ic{position:absolute;right:4px;bottom:4px;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--accent);color:var(--on-accent)}
.mat-thumb-ic svg{width:16px;height:16px}
.section{margin:18px 0 0}
.section h2{font-size:15px;font-weight:700;color:var(--muted);margin:0 0 8px;letter-spacing:.01em}
.files{display:grid;gap:8px}
.file{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:8px 8px 8px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
.file b{display:block;font-weight:650;overflow-wrap:anywhere}
.file small{color:var(--muted);font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);min-width:var(--tap);padding:0 14px;border-radius:var(--r);border:1px solid var(--border-strong);
  background:var(--surface);color:var(--fg);font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn[aria-pressed="true"],.btn[aria-expanded="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.07)}
.btn svg{width:20px;height:20px}
.ic{width:16px;height:16px;flex:none}
.pill .ic{width:14px;height:14px}
.file b .ic{display:inline-block;vertical-align:-2px;margin-right:6px;color:var(--muted)}
h2.lbl{display:flex;align-items:center;gap:6px}
.ver-wait{display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;background:var(--warn)}
.view[aria-busy="true"]{opacity:.55;transition:opacity var(--dur) var(--ease)}      /* перехід між вкладками: старий вміст притінено */
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn-row.grow>.btn{flex:1 1 auto}      /* дії з матеріалом: рівні кнопки без «хвоста» в другому рядку */
@media (min-width:900px){.btn-row.grow>.btn{flex:0 0 auto}}
.versions{display:flex;flex-wrap:wrap;gap:8px}
.versions a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);padding:0 14px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--fg);text-decoration:none;font-weight:600;font-size:15px}
.versions a[aria-current="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.pages{display:grid;gap:12px;margin-top:4px}
.page{margin:0;background:var(--paper);border:1px solid var(--border);border-radius:var(--r-s);overflow:hidden;box-shadow:var(--shadow)}
.page img{display:block;width:100%;height:auto;aspect-ratio:210/297}
.page figcaption{font-size:13px;color:#545D6B;background:#FFFFFF;padding:4px 10px;border-top:1px solid #DEE3EB}
.quiz{width:100%;height:70vh;border:1px solid var(--border);border-radius:var(--r);background:#fff}
.note{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;color:var(--muted)}
.note b{color:var(--fg)}

/* ---- етапи («Що в роботі») ---- */
.steps{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.steps li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:center;font-size:15px;color:var(--muted)}
.steps .dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border-strong);justify-self:center}
.steps li.ok{color:var(--fg)} .steps li.ok .dot{background:var(--ok);border-color:var(--ok)}
.steps li.run{color:var(--fg);font-weight:650} .steps li.run .dot{border-color:var(--run);background:var(--run-soft);box-shadow:0 0 0 3px var(--run-soft)}
.qcard{padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--shadow)}
.qcard .hint{margin:2px 0 4px;font-size:14px}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px;color:var(--muted)}
.timeline time{font-variant-numeric:tabular-nums;color:var(--fg);margin-right:6px}
.h-sec{font-size:15px;font-weight:700;color:var(--muted);margin:18px 0 8px}
.h-sec:first-child{margin-top:4px}

/* ---- показ на весь екран (дошка, проєктор) ---- */
.show{position:fixed;inset:0;z-index:50;background:var(--show-bg);color:var(--show-fg);display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.show-top,.show-nav{display:flex;align-items:center;gap:12px;padding:8px 12px}
.show-nav{justify-content:center}
.show-t{flex:1;min-width:0;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.show-n{color:#C9D0DB}
.show-t,.show-n{font-size:clamp(17px,1.6vw,24px)}      /* дошка: підпис і лічильник видно з парт */
.show-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:48px;padding:0 18px;border-radius:var(--r);border:1px solid #3B4759;background:#161D2B;color:var(--show-fg);font-size:17px;font-weight:650;cursor:pointer}
.show-btn:hover{background:#1C2535}
.show-btn[disabled]{opacity:.45;cursor:default}
.show-stage{position:relative;min-height:0;overflow:hidden;cursor:pointer}
.show-stage img{position:absolute;inset:0 12px;margin:auto;max-width:calc(100% - 24px);max-height:100%;object-fit:contain;background:#fff;border-radius:4px}
.show-btn .ic{width:20px;height:20px}
@media (max-width:599px){#show-fit{display:none}}      /* телефон книжково: аркуш і так на всю ширину */
.show-btn[aria-pressed="true"]{border-color:#7FA6FF}
.show.fit-w .show-stage{overflow-y:auto;overscroll-behavior:contain}
.show.fit-w .show-stage img{position:static;display:block;margin:0 auto 12px;width:min(calc(100% - 24px),1400px);max-width:none;max-height:none;height:auto}
.show-stage iframe{position:absolute;inset:0 12px;width:calc(100% - 24px);height:100%;border:0;background:#fff;border-radius:4px}

/* ---- форми: новий матеріал, налаштування, дії з матеріалом ---- */
.form{display:grid;gap:18px;max-width:780px}
.fs{border:0;margin:0;padding:0;min-width:0}
.fs>legend,.lbl{display:block;font-size:15px;font-weight:700;color:var(--fg);margin:0 0 8px;padding:0}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;display:inline-flex}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt span{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);justify-content:center;padding:0 14px;border-radius:999px;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--fg);font-size:15px;font-weight:550;white-space:nowrap}
.opt input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.opt input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.opt.mine span{border:2px solid var(--accent);font-weight:700}
.opt.mine input:checked+span{border-color:var(--accent)}
.fs.invalid .opt span{border-color:var(--bad)}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 14px}
.fld{min-width:0}
.fld>label,.fld>.lbl{display:block;font-size:14px;font-weight:600;color:var(--muted);margin:0 0 4px}
.fld>label.lbl.big{font-size:15px;font-weight:700;color:var(--fg);margin:0 0 8px}
.inp{width:100%;min-height:var(--tap);border:1px solid var(--border-strong);background:var(--surface);color:var(--fg);border-radius:var(--r);padding:10px 12px;font-size:16px}
textarea.inp{min-height:92px;resize:vertical;line-height:1.4;font:inherit}
.inp::placeholder{color:var(--faint)}
.inp[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.hint{font-size:13px;color:var(--muted);margin:4px 0 0}
.f-err{color:var(--bad);font-size:14px;font-weight:600;margin:4px 0 0}
.params{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l)}
.params>summary{position:relative;padding-right:44px!important;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:var(--tap);padding:10px 14px;cursor:pointer;list-style:none;font-weight:700}
.params>summary::-webkit-details-marker{display:none}
.params>summary::after{content:"";position:absolute;right:18px;top:20px;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform var(--dur) var(--ease)}
.params[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.params>summary small{font-weight:500;color:var(--muted);font-size:14px;flex-basis:100%}
.params>.grid2{padding:4px 14px 16px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
@media (max-width:599px){.params>.grid2{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}      /* телефон: числа й короткі списки — по два */
  #order .submit-row{position:sticky;bottom:calc(var(--tabh) + env(safe-area-inset-bottom));z-index:5;background:var(--bg);padding:10px 0;margin-bottom:-10px}}
.full{grid-column:1/-1}
@media (max-width:599px){.fld.wide{grid-column:1/-1}}
.lbl.sm{font-size:14px;color:var(--muted);font-weight:600;margin-bottom:6px}
.lbl.inl{margin:0;align-self:center}
.hint.inl{font-weight:500;font-size:14px}
.hint.lead{margin:0 0 8px} .hint.m0{margin:0}
.section.first{margin-top:0}
#f-topic{min-height:72px}
.submit-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn[disabled]{opacity:.55;cursor:default}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--border-strong))}
.btn.ghost{border-color:transparent;background:none;color:var(--accent-ink)}
.banner{background:var(--warn-soft);color:var(--warn);border-radius:var(--r);padding:10px 14px;font-weight:600;font-size:15px}
.panel{margin-top:10px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
.panel .lbl{font-size:15px}
.btn-row>.panel{flex-basis:100%;margin-top:0}
.ask{border-color:var(--warn);background:var(--warn-soft)}
.ask p{margin:0 0 8px;color:var(--fg)}
.section .ask h2.lbl{color:var(--fg);font-size:16px}
.panel .hint{margin-top:8px}
.habits{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.habits li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 6px 6px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabh) + 14px + env(safe-area-inset-bottom));z-index:40;
  width:max-content;max-width:min(560px,calc(100vw - 32px));background:var(--fg);color:var(--bg);padding:12px 16px;border-radius:var(--r);
  box-shadow:0 4px 18px rgba(0,0,0,.22);font-weight:600;font-size:15px}

/* ---- планшет і ноутбук ---- */
@media (min-width:900px){
  .tabs-bottom{display:none!important}
  main{padding-bottom:32px}
  .bar-in{grid-template-columns:auto minmax(0,1fr) auto auto}
  .tabs-top{grid-column:3;display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:3px}
  .tabs-top{padding:2px!important}
  .tabs-top a{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 14px;border-radius:9px;color:var(--muted);text-decoration:none;font-weight:600;font-size:15px}
  .tabs-top a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 -2px 0 var(--accent)}
  .back{display:none!important}
  .split{display:grid;grid-template-columns:minmax(320px,400px) minmax(0,1fr);gap:20px;align-items:start}
  .split>.pane-list{position:sticky;top:76px;max-height:calc(100vh - 92px);overflow:auto;padding:2px 4px 8px 2px}
  .pane-detail{min-width:0}
  .pages{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
  .q-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;align-items:start}
  .pane-list .chips{flex-wrap:wrap;overflow:visible;margin:0;padding:2px 0 10px;-webkit-mask-image:none;mask-image:none}
  .toast{bottom:24px}
}
@media (max-width:899px){ .split>.pane-detail:empty{display:none} .q-grid{display:grid;gap:10px} }
@media (min-width:600px) and (max-width:899px){ .list{grid-template-columns:repeat(2,minmax(0,1fr))} }      /* планшет книжково: дві колонки карток */
@media (max-width:389px){.tabs-bottom a{font-size:11px;letter-spacing:-.01em}}
@media (max-width:479px){.file{grid-template-columns:minmax(0,1fr) auto}.file>span{grid-column:1/-1}.file .btn:first-of-type{justify-self:stretch}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}