/* SAPA Mini App v6. Своя палитра (не Telegram'овская): у руководителя фон чёрный,
   и «прозрачные» свечения на нём не читались. Тема — по colorScheme Telegram.
   Акцент = цвет предмета курса; семантика (қызыл / шекара / норма) — отдельно. */
:root{
  --accent:#266e5a;
  --accent-ink:var(--accent);
  --bg:#eef1f0; --card:#ffffff; --card-2:#f4f6f5;
  --line:rgba(16,32,26,.08); --line-2:rgba(16,32,26,.15);
  --ink:#16221e; --ink-2:#3f4c47; --hint:#74827d;
  --red:#cf4a3f; --edge:#b7791b; --ok:#22865c; --wa:#1fa855;
  --red-bg:rgba(207,74,63,.12); --edge-bg:rgba(183,121,27,.14); --ok-bg:rgba(34,134,92,.12);
  --soft:rgba(16,32,26,.05); --soft-2:rgba(16,32,26,.1);
  --gold:#e3b23c; --silver:#a4afb8; --bronze:#c27a42;
  --shadow:0 1px 2px rgba(10,20,16,.05),0 10px 28px rgba(10,20,16,.08);
  --r:20px; --r2:13px;
  --font:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",system-ui,sans-serif;
  --display:"Montserrat",var(--font);
}
:root[data-theme="dark"]{
  --accent-ink:color-mix(in srgb,var(--accent) 60%,#fff);
  --bg:#0c100f; --card:#171d1b; --card-2:#1f2725;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --ink:#f1f4f2; --ink-2:#c5cdc9; --hint:#8b9994;
  --red:#ff6f63; --edge:#e8ad3f; --ok:#4fcf93;
  --red-bg:rgba(255,111,99,.15); --edge-bg:rgba(232,173,63,.15); --ok-bg:rgba(79,207,147,.14);
  --soft:rgba(255,255,255,.06); --soft-2:rgba(255,255,255,.11);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 12px 30px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.4;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;min-height:100%}
body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
button{font-family:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
/* ───── hero: цветная обложка предмета ───── */
.hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(155deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 72%,#000) 100%);border-radius:0 0 30px 30px;padding:14px 18px 54px;transition:background .5s}
.hero-art{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 88% 12%,rgba(255,255,255,.26),transparent 42%),
  radial-gradient(circle at 10% 100%,rgba(255,255,255,.12),transparent 38%)}
.hero-art::after{content:"SAPA";position:absolute;right:-6px;bottom:-22px;font:800 96px var(--display);letter-spacing:-.04em;color:rgba(255,255,255,.07);line-height:1}
.hero-in{position:relative;display:flex;flex-direction:column;gap:4px}
.hero .row{display:flex;align-items:center;justify-content:space-between}
.brand{font:800 13px var(--display);letter-spacing:.28em;color:rgba(255,255,255,.85)}
.at{font-size:12px;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.name{margin:10px 0 0;font:800 28px var(--display);letter-spacing:-.01em;line-height:1.1;text-wrap:balance}
.sub{font-size:14px;color:rgba(255,255,255,.86);font-variant-numeric:tabular-nums}
.viewas{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:10px;padding:6px 8px 6px 12px;border-radius:999px;background:rgba(0,0,0,.28);font-size:13px;backdrop-filter:blur(6px)}
.viewas b{font-weight:700}
.viewas button{border:none;background:rgba(255,255,255,.22);color:#fff;width:24px;height:24px;border-radius:50%;font-size:13px;line-height:1}
/* плитки, наезжающие на обложку */
main{padding:0 14px;display:flex;flex-direction:column;gap:14px;position:relative}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:-40px}
.stats .tile{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.tile{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r2);padding:11px 11px 10px;min-width:0}
.tile small{display:block;font:700 10.5px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--hint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile b{display:block;font:800 24px var(--display);font-variant-numeric:tabular-nums;margin-top:3px;line-height:1.1}
.tile b.red{color:var(--red)}.tile b.ok{color:var(--ok)}
.tile i{font-style:normal;font-size:12px;color:var(--hint)}
.state{color:var(--hint);text-align:center;padding:40px 16px}
.state.err{color:var(--red)}
.section-h{margin:6px 4px -6px;font:700 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--hint)}
/* ───── загрузка: настоящие шаги + плавный ход ───── */
.loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:78vh;padding:20px}
.loader .brandbig{font:800 15px var(--display);letter-spacing:.34em;color:var(--accent-ink)}
.ring{position:relative;width:168px;height:168px}
.ring svg{width:168px;height:168px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .bgc{stroke:var(--soft-2)}
.ring .fg{stroke:var(--accent-ink);stroke-dasharray:471;stroke-dashoffset:471;transition:stroke-dashoffset .12s linear;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--accent) 55%,transparent))}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 34px var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.ring b small{display:block;text-align:center;font:600 11px var(--font);color:var(--hint);letter-spacing:.06em;margin-top:2px}
.loader .step{font-size:15px;min-height:22px;color:var(--ink-2);text-align:center}
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;width:min(100%,360px)}
.steps div{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11px;color:var(--hint);text-align:center}
.steps i{display:block;width:100%;height:4px;border-radius:2px;background:var(--soft-2)}
.steps div.done{color:var(--ink-2)}.steps div.done i{background:var(--accent-ink)}
.steps div.now{color:var(--accent-ink)}.steps div.now i{background:linear-gradient(90deg,var(--accent-ink) 40%,var(--soft-2) 40%);background-size:200% 100%;animation:run 1.1s linear infinite}
@keyframes run{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.ring .fg{transition:none}.steps div.now i{animation:none;background:var(--accent-ink)}}
/* ───── карточка курса ───── */
.course{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;animation:in .3s ease-out both}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.course{animation:none}}
.band{padding:13px 16px;color:#fff;display:flex;align-items:baseline;justify-content:space-between;gap:6px 10px;flex-wrap:wrap;background:linear-gradient(115deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000))}
.band b{font:800 13px var(--display);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.band small{font-size:12px;opacity:.92;font-variant-numeric:tabular-nums}
.body{padding:4px 16px 14px;display:flex;flex-direction:column;gap:10px}
/* задания */
.task{display:grid;grid-template-columns:1fr auto;grid-template-areas:"nm val" "meta val" "g g";gap:4px 12px;padding:13px 0 12px;border-bottom:1px solid var(--line)}
.task:last-of-type{border-bottom:none}
.task .nm{grid-area:nm;font-weight:600;font-size:15px;line-height:1.25}
.task .meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.chip{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--soft);color:var(--hint);white-space:nowrap}
.chip.hot{background:var(--red-bg);color:var(--red);font-weight:600}
.chip.warm{background:var(--edge-bg);color:var(--edge);font-weight:600}
.task .val{grid-area:val;text-align:right;font-variant-numeric:tabular-nums;line-height:1;align-self:center}
.task .val b{font:800 26px var(--display);letter-spacing:-.02em}
.task .val small{display:block;font-size:12px;color:var(--hint);margin-top:5px}
.task.red .val b{color:var(--red)}.task.edge .val b{color:var(--edge)}.task.ok .val b{color:var(--ok)}
.gauge{grid-area:g;position:relative;height:6px;border-radius:3px;background:var(--soft-2);margin-top:8px}
.gauge i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--ok);min-width:6px}
.task.red .gauge i{background:var(--red)}.task.edge .gauge i{background:var(--edge)}
.gauge u{position:absolute;left:90%;top:-4px;bottom:-4px;width:2px;background:var(--ink);opacity:.4;border-radius:1px}
.sum{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:8px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:13.5px;font-weight:600;background:var(--soft);color:var(--ink)}
.pill.red{background:var(--red-bg);color:var(--red)}.pill.edge{background:var(--edge-bg);color:var(--edge)}.pill.ok{background:var(--ok-bg);color:var(--ok)}
.todo{background:color-mix(in srgb,var(--accent) 9%,var(--card-2));border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:var(--r2);padding:11px 13px;font-size:14px;display:flex;flex-direction:column;gap:8px}
.todo h4{margin:0;font:700 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.todo .t{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:baseline}
.todo .t b{font-weight:600}
.todo .t span{color:var(--hint);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:13px}
/* тапсырмағандар */
.mhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-top:8px}
.mhead b{font-size:15px}.mhead small{color:var(--hint);font-size:12px;white-space:nowrap}
.counts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
ol.names{margin:4px 0 0;padding:0;list-style:none;counter-reset:n}
ol.names li{counter-increment:n;display:flex;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
ol.names li::before{content:counter(n);font:700 12px var(--display);color:var(--hint);min-width:22px;text-align:right;font-variant-numeric:tabular-nums}
ol.names li:last-child{border-bottom:none}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:10px}
.actions button{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14.5px var(--font);padding:13px 8px;border:none;border-radius:var(--r2);background:var(--accent);color:#fff;box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 35%,transparent)}
.actions button.wa{background:var(--wa);box-shadow:0 8px 18px rgba(31,168,85,.3)}
.actions button:active{transform:scale(.98)}
.actions svg{width:18px;height:18px;fill:currentColor}
.note{font-size:12.5px;color:var(--hint);margin-top:6px}
/* ученики */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:8px}
.leaguebar{display:flex;height:8px;border-radius:4px;overflow:hidden;margin-top:6px;background:var(--soft-2)}
.leaguebar span{display:block;height:100%}
.leaguebar .g{background:var(--gold)}.leaguebar .s{background:var(--silver)}.leaguebar .b{background:var(--bronze)}
.lg{display:flex;gap:10px;font-size:12px;color:var(--hint);flex-wrap:wrap}
.lg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}
.field{display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r2);background:var(--card-2)}
.field svg{width:20px;height:20px;fill:var(--hint);flex:none}
.field input{flex:1;min-width:0;font:inherit;padding:12px 0;border:none;background:transparent;color:var(--ink)}
.field input::placeholder{color:var(--hint)}
.field input:focus-visible{outline:none}
.field:focus-within{border-color:var(--accent-ink)}
.stu{display:grid;grid-template-columns:26px 1fr auto auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.stu:last-child{border-bottom:none}
.stu .i{font:700 12px var(--display);color:var(--hint);text-align:right;font-variant-numeric:tabular-nums}
.stu .n{font:800 15px var(--display);font-variant-numeric:tabular-nums;min-width:36px;text-align:right}
.stu.risk{background:var(--red-bg);margin:0 -16px;padding:9px 16px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--bronze);vertical-align:middle}
.dot.g{background:var(--gold)}.dot.s{background:var(--silver)}
.warn{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--red);color:#fff;font-weight:700}
/* история */
.bars{display:flex;flex-direction:column;gap:10px;padding-top:10px}
.bar{display:grid;grid-template-columns:38px 1fr 46px;gap:10px;align-items:center;font-size:13px;font-variant-numeric:tabular-nums}
.bar .w{color:var(--hint);font-weight:600}
.bar .track{position:relative;height:24px;background:var(--soft);border-radius:8px}
.bar .mine{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,var(--card)),var(--accent));border-radius:8px}
.bar .course{position:absolute;top:-5px;bottom:-5px;width:3px;background:var(--edge);border-radius:2px}
.bar .v{text-align:right;font:800 15px var(--display)}
.legend{font-size:12px;color:var(--hint);display:flex;gap:12px;flex-wrap:wrap;padding-top:8px}
.legend i{display:inline-block;width:14px;height:8px;border-radius:3px;background:var(--accent);margin-right:5px;vertical-align:middle}
.legend i.c{width:3px;height:12px;background:var(--edge)}
/* ───── руководитель ───── */
.opencard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.opencard h3{margin:0;font:700 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--hint)}
.opencard .fake{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line-2);border-radius:var(--r2);background:var(--card-2);color:var(--hint);font-size:15px;width:100%;text-align:left}
.opencard .fake svg{width:20px;height:20px;fill:var(--hint)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{font:600 13px var(--font);padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--card-2);color:var(--ink)}
.grid{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 12px 10px;overflow-x:auto}
.grid h3{margin:0 0 8px;font:700 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--hint)}
.grid table{border-collapse:separate;border-spacing:4px;width:100%;table-layout:fixed;font-variant-numeric:tabular-nums}
.grid col.c0{width:54px}
.grid th{font:700 11px var(--display);color:var(--hint);text-align:center;padding:2px 0;letter-spacing:.06em}
.grid th:first-child{text-align:left}
.grid td{padding:0}
.grid td:first-child{font:700 12px var(--display);padding-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell{display:flex;flex-direction:column;align-items:center;justify-content:center;height:48px;border-radius:11px;color:#fff;font:800 15px var(--display);cursor:pointer;line-height:1;border:none;width:100%}
.cell small{font:600 10px var(--font);opacity:.92;margin-top:3px}
.cell.empty{background:var(--soft);color:var(--hint);cursor:default}
.cell.on{outline:2px solid var(--ink);outline-offset:1px}
.detail{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.detail .body{padding:6px 16px 12px}
.redrow{display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px;align-items:center}
.redrow:last-child{border-bottom:none}
.redrow small{display:block;color:var(--hint);font-size:12px}
.redrow b{font:800 15px var(--display);color:var(--red)}
/* ───── вкладки ───── */
.tabs{position:fixed;left:6px;right:6px;bottom:calc(10px + env(safe-area-inset-bottom));display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:saturate(1.5) blur(18px);-webkit-backdrop-filter:saturate(1.5) blur(18px);border:1px solid var(--line-2);border-radius:22px;padding:5px 3px;z-index:5;box-shadow:var(--shadow)}
.tabs button{font:600 9.5px var(--font);letter-spacing:-.02em;border:none;background:transparent;color:var(--hint);padding:7px 0 6px;border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.tabs button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tabs button svg{width:22px;height:22px;fill:currentColor}
.tabs button.on{color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 16%,transparent)}
/* ───── шторка выбора куратора ───── */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:8;backdrop-filter:blur(3px)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:9;background:var(--card);border-radius:24px 24px 0 0;padding:8px 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;max-height:82vh;box-shadow:0 -10px 40px rgba(0,0,0,.35);animation:up .25s ease-out}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
.sheet .handle{width:40px;height:4px;border-radius:2px;background:var(--soft-2);margin:0 auto 6px}
.sheet h3{margin:0;font:800 19px var(--display);letter-spacing:-.01em}
.sheet p{margin:0;font-size:13.5px;color:var(--hint)}
.sheet .field{background:var(--card-2)}
.recent:empty{display:none}
.sugg{overflow:auto;display:flex;flex-direction:column}
.sugg button{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;text-align:left;padding:11px 4px;border:none;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:inherit}
.sugg button:last-child{border-bottom:none}
.sugg b{font-weight:600}
.sugg small{display:block;color:var(--hint);font-size:12px}
.sugg svg{width:18px;height:18px;fill:var(--hint)}
.sugg .empty{padding:14px 4px;color:var(--hint);font-size:14px}
.toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(10px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;opacity:0;transition:.2s;pointer-events:none;max-width:88vw;text-align:center;z-index:10}
.toast.on{opacity:1;transform:translateX(-50%)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
[hidden]{display:none!important}