/*
 * base.css — конкатенація 39 колишніх інлайн-блоків <style> з public/index.html,
 * у точному порядку документа, через символ переносу рядка. П'ять текстових
 * фрагментів, що виглядають як <style>…</style> всередині рядкових літералів
 * JS (constant QUIZ_CSS, сертифікат-генератор, три міні-ігри), НЕ є блоками —
 * вони лишились у своїх <script>-блоках недоторканими.
 * Порядок тут не змінювався навмисно: правила накладаються одне на одне
 * (каскад), тож переставляння блоків місцями змінює, яке правило переможе,
 * і ламає вигляд сторінки без жодної помилки в консолі. Не сортувати,
 * не дедуплікувати, не переносити правила між блоками.
 *
 * 13.09.2026 звідси виїхали всі 552 блоки з #admin-root — у
 * public/team/css/team.css, який підключає ЛИШЕ /team і ЛИШЕ після цього
 * файлу. Учень качав 66 КБ правил кабінету, яких ніколи не побачить, а
 * переробку дизайну адмінки від нього відділяла тільки огорожа #admin-root
 * у селекторі. Тепер відділяє межа файлу. Змінні, скидання й @keyframes
 * лишилися тут навмисно: на них спирається і кабінет теж.
 *
 * Нове правило для кабінету пиши в team.css. Межа між двома файлами
 * проходить по тому, ХТО це бачить, а не по формі селектора: сюди —
 * видиме учневі плюс спільна основа, туди — видиме лише кабінету, з
 * #admin-root у селекторі чи без нього. Кабінетне правило, дописане СЮДИ,
 * знову поїде в телефон кожного учня — і мовчки, бо жодна перевірка в
 * проєкті цього не ловить.
 *
 * ЩО ТУТ ЛИШИЛОСЯ КАБІНЕТНОГО. Перенесення 13.09 брало тільки селектори з
 * #admin-root, тож кабінетні вузли, які живуть поза ним, воно не побачило:
 * 148 блоків верхнього рівня, ~17,9 КБ, які учень досі качає задарма.
 *
 *   .ag-*            воротар входу команди     team/index.html:178
 *   #imp-ov, .i-*    майстер імпорту питань    team/js/import.js
 *   #ops-ov, .o-*    бек-офіс керування        team/js/ops.js, access.js,
 *                                              pay.js, tests.js
 *   #pin-ov, .p-*    PIN-оверлей               team/js/ops.js:632
 *   .hwa-*           редактор і аналітика      team/js/editors.js,
 *                                              team/js/methodist.js
 *   .fx-*            редактор формул           team/js/editors.js
 *   #rt-bar, .rt-*   панель форматування       team/js/editors.js:25
 *   .pay-*           оплати                    team/js/pay.js
 *   .modal.lms-prev  прев'ю «як бачить учень»  team/js/preview.js
 *
 * Жодне з цих імен не трапляється точним збігом токенів у public/index.html,
 * public/shared/*.js і public/student/**. Перенести їх у team.css можна й
 * треба, але ОКРЕМОЮ задачею з власним доказом: критерій «є #admin-root у
 * селекторі» там уже не працює, доводити доведеться, що вузол не виникає
 * на / ніколи, а це інший клас доведення. Найважчий випадок у переліку —
 * .modal.lms-prev: він уточнює .modal, спільний клас учня й кабінету.
 */

:root{
  /* --- базова палітра: 3 кольори + похідні. Змінюється у Налаштуваннях --- */
  --c1:#0E86D4;--c1-rgb:14,134,212;--c1-dd:#09588C;--c1-d:#0C71B2;--c1-l:#1F9EF0;--c1-ll:#45AEF3;
  --c1-mid:#C0E0F4;--c1-pale:#A3D1EF;--c1-tint:#E2F0FA;--c1-wash:#F1F8FC;
  --c1-aaL:#0B6EAE;--c1-btn:#0C74B7;--c1-btn-d:#0B66A1;
  --c1-txt:var(--c1-aaL);--c1-ow:var(--c1-aaL);
  --c2:#FFCE45;--c2-rgb:255,206,69;--c2-l:#FFD766;--c2-tint:#FFFAEC;
  --c3:#FF6B6B;--c3-rgb:255,107,107;--c3-l:#FF8686;--c3-tint:#FFF0F0;
  --glow-warm:#FFF4D6;--glow-cool:#C5E2F5;--glow-bot:#D4E9F7;--base-1:#FFFCF4;--base-2:#F1F8FC;
  --violet:var(--c1);--violet-d:var(--c1-d);--violet-l:var(--c1-tint);
  --bg1:var(--c2-tint);--bg2:var(--c1-wash);--bg3:var(--c1-tint);
  --ink:#2A2A3C;--muted:#65657E;--line:#EEEEF4;
  --green:#37D9A0;--green-bg:#E3F9F0;--orange:var(--c3);--orange-bg:var(--c3-tint);
  --blue:var(--c1-d);--blue-bg:var(--c1-tint);--pink:#FF7B9C;--yellow:var(--c2);--red:#FF6B6B;
  --card:#FFFFFF;--surface:#FFFFFF;--radius:20px;--shadow:0 12px 30px rgba(10,80,130,.09);--shadow-s:0 6px 18px rgba(10,80,130,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Nunito',system-ui,sans-serif;color:var(--ink);
  background:linear-gradient(120deg,var(--bg1),var(--bg2) 45%,var(--bg3));min-height:100vh;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Baloo 2','Nunito',sans-serif;margin:0}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select{font-family:inherit}
.hidden{display:none!important}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#D8E2F7;border-radius:20px}

#app{display:flex;min-height:100vh}
.sidebar{width:236px;flex:0 0 236px;background:var(--card);padding:20px 18px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  position:sticky;top:0;height:100vh;border-right:1px solid var(--line)}
.logo{font-family:'Baloo 2';font-weight:800;font-size:26px;color:var(--c1-txt);padding:6px 10px 14px;letter-spacing:-.5px}
.logo span{color:var(--orange)}
.nav-item{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:14px;color:var(--ink);font-weight:700;font-size:15.5px;transition:.15s;width:100%;text-align:left}
.nav-item .ic{font-size:20px;width:24px;text-align:center}
.nav-item{position:relative}
.nav-due{margin-left:auto;background:var(--c3);color:#fff;font-size:11px;font-weight:900;line-height:1;
  padding:4px 7px;border-radius:99px;min-width:20px;text-align:center;flex:0 0 auto}
@media(min-width:901px){
  html[data-nav="auto"] .sidebar .nav-due{position:absolute;top:5px;right:9px;margin:0;padding:3px 5px;font-size:9.5px;min-width:0;transition:.18s}html[data-nav="auto"] .sidebar:focus-within .nav-due{position:static;margin-left:auto;padding:4px 7px;font-size:11px;min-width:20px}@media (hover:hover) and (pointer:fine){html[data-nav="auto"] .sidebar:hover .nav-due{position:static;margin-left:auto;padding:4px 7px;font-size:11px;min-width:20px}}}@media (hover:hover) and (pointer:fine){.nav-item:hover{background:var(--c1-wash)}}.nav-item.active{background:var(--violet-l);color:var(--c1-txt)}
.nav-sep{height:1px;background:var(--line);margin:7px 6px 6px;flex:0 0 auto}
.settings-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;margin-bottom:18px;padding:16px 20px;transition:.15s}@media (hover:hover) and (pointer:fine){.settings-row:hover{transform:translateY(-2px)}}
.settings-row .ic{font-size:26px;flex:0 0 auto}
.settings-row .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.settings-row .tx b{font-size:16.5px}
.settings-row .tx .muted{font-weight:600;font-size:12.5px}
.settings-row .ch{font-size:24px;color:var(--muted);flex:0 0 auto;line-height:1}
@media(max-width:600px){.settings-row .tx .muted{display:none}}
/* ---- курс: етапи й модулі ---- */
.ph-card{border-radius:20px;padding:16px 18px;color:#fff;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden}
.ph-card.past{filter:grayscale(.55);opacity:.62}
.ph-card .ph-t{font-weight:900;font-size:17px;color:#fff;line-height:1.15}
.ph-card .ph-s{font-weight:700;font-size:12.5px;opacity:.92}
.ph-card .ph-d{font-weight:700;font-size:12px;opacity:.85;margin-top:2px}
.ph-now{position:absolute;top:12px;right:14px;background:rgba(255,255,255,.92);color:#22293D;font-weight:900;font-size:10.5px;padding:3px 9px;border-radius:20px;letter-spacing:.03em}
.mod-card{border:1px solid var(--line);border-radius:20px;padding:14px 16px;background:var(--card);display:flex;flex-direction:column;gap:10px}
.mod-card.now{border:2px solid var(--c1);box-shadow:0 8px 24px rgba(var(--c1-rgb),.16)}
.mod-card.done{opacity:.72}
.mod-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mod-num{width:34px;height:34px;border-radius:12px;background:var(--c1-tint);color:var(--c1-txt);font-weight:900;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:15px}
.mod-card.now .mod-num{background:var(--c1);color:#fff}
.les-row{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
.les-dot{width:100%;height:32px;padding:0;border-radius:10px;border:1.5px solid var(--line);background:transparent;font-weight:800;font-size:12.5px;color:var(--muted);transition:.15s;flex:0 0 auto}@media (hover:hover) and (pointer:fine){.les-dot:not(.ok):hover{border-color:var(--c1-txt);color:var(--c1-txt)}}
/* Зарахований кружечок не натискний (22.09.2026, §7.2 ТЗ хмарного злиття:
   позначка «заняття пройдено» ставиться раз і не знімається). Тому в нього
   немає ні підсвітки під курсором вище, ні курсора-пальця. */
.les-dot.ok{background:var(--green);border-color:var(--green);color:#fff;cursor:default}
.les-dot.bonus{border-color:#FFC93C;border-style:dashed;color:#C98A00}
.les-dot.bonus.ok{background:linear-gradient(180deg,#FFE59A,#FFC93C);border-style:solid;color:#5A3A00}
.bonus-note{display:flex;align-items:center;gap:9px;background:linear-gradient(120deg,#FFF9EA,#FFE8BE);border:1px solid #FFC93C;color:#5A3A00;border-radius:14px;padding:9px 12px;font-weight:800;font-size:12.5px}
html[data-theme="dark"] .bonus-note{background:linear-gradient(120deg,#3A2E12,#4E3C14);color:#FFE59A}
/* ---- полювання на M&M: цукерки ----
   Цукерку малює CSS, а не емодзі: емодзі одноколірне, а драже має бути
   випадкового кольору при кожній появі. Колір приходить змінною --cd;
   НАБІР КОЛЬОРІВ ЛЕЖИТЬ ОДНИМ МІСЦЕМ — `HUNT.colors` у student/app.js,
   міняти треба там. Тут описано лише, як цукерка виглядає. */
.candy,.candy-burst,.cd-em{border-radius:50%;background:
  radial-gradient(circle at 34% 27%,rgba(255,255,255,.95) 0 7%,rgba(255,255,255,.5) 16%,rgba(255,255,255,0) 42%),
  radial-gradient(circle at 50% 104%,rgba(0,0,0,.4) 0 26%,rgba(0,0,0,0) 66%),
  var(--cd,#E8453C)}
.candy{position:absolute;z-index:6;width:22px;height:22px;border:0;padding:0;cursor:pointer;opacity:.86;filter:drop-shadow(0 2px 4px rgba(0,0,0,.22));animation:cdIn .45s ease both, cdFloat 3.2s ease-in-out 0.5s infinite}@media (hover:hover) and (pointer:fine){.candy:hover{opacity:1;transform:scale(1.35)}}
/* Таємна цукерка має впізнаватися з одного погляду, тому відрізняється не
   відтінком, а чотирма ознаками разом: більша, золота, зі зірочкою, світиться. */
.candy.rare{width:28px;height:28px;opacity:1;--cd:#FFC93C;animation:cdIn .45s ease both, cdGlow 1.4s ease-in-out infinite}
.candy.rare::after{content:"★";position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:rgba(255,255,255,.95);text-shadow:0 1px 2px rgba(0,0,0,.35)}
@keyframes cdIn{from{opacity:0;transform:scale(.2) rotate(-40deg)}to{opacity:.86;transform:none}}
@keyframes cdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes cdGlow{0%,100%{filter:drop-shadow(0 0 3px #FFC93C)}50%{filter:drop-shadow(0 0 12px #FFD84D) drop-shadow(0 0 20px #FF9500)}}
/* Та сама цукерка поза грою: дрібна в чипі шапки (.cd-em), середня на картці
   гри (.cd-mid) і велика на екрані полювання (.cd-big). Літеру «m» ставимо
   лише на двох більших — на 13-22 px вона перетворилась би на пляму. */
.cd-em{display:inline-block;width:13px;height:13px;vertical-align:-2px;flex:0 0 auto}
.cd-em.cd-mid,.cd-em.cd-big{display:grid;place-items:center;vertical-align:middle;color:rgba(255,255,255,.93);font-weight:800;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.cd-em.cd-mid{width:34px;height:34px;font-size:15px}
.cd-em.cd-big{width:46px;height:46px;font-size:20px}
.hunt-mile{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.hunt-mile.got{border-color:var(--green);background:linear-gradient(120deg,rgba(55,217,160,.12),transparent)}
.hunt-mile .mi{font-size:26px;flex:0 0 auto}
.hunt-mile .mt{flex:1;min-width:0}
.hunt-mile .mt b{font-size:15px}
.candy-burst{position:fixed;pointer-events:none;z-index:9999;width:26px;height:26px;animation:cdBurst .9s ease-out forwards}
@keyframes cdBurst{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.6) translateY(-60px)}}
.mascot{margin-top:auto;font-size:46px;text-align:center;padding-top:10px;flex:0 0 auto}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:24px 34px 6px}
.page-title{font-size:28px;font-weight:800}
.spacer{flex:1}
.stat-chips{display:flex;align-items:center;gap:10px;background:#fff;border-radius:40px;padding:8px 14px;box-shadow:var(--shadow-s)}
.chip{display:flex;align-items:center;gap:6px;font-weight:800;font-size:15px}.chip .em{font-size:17px}
.chip.coins{color:#E9A100}.chip.hearts{color:var(--red)}.chip.exp{color:#F2B705}.chip.streak{color:var(--orange)}
.chip.tip{cursor:default}
/* Частина 4 етапу F: чип страйку — справжня <button> (CLAUDE.md, «Клавіатура»); вигляд — як у решти чипів:
   колір і розмір дають .chip / .chip.streak, мобільні правила .chip лишаються чинними (тут font не скидаємо). */
button.chip{background:none;border:0;padding:0;margin:0;font-family:inherit;line-height:inherit;color:inherit}
button.chip.streak{cursor:pointer}
.avatar{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#FFDFAE,#FFB36B);display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;box-shadow:var(--shadow-s);position:relative;user-select:none}
.dropdown{position:fixed;right:34px;top:84px;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:8px;min-width:236px;z-index:60}
.dropdown button{display:flex;gap:10px;align-items:center;width:100%;padding:12px 14px;border-radius:10px;font-weight:700;font-size:15px;color:var(--ink)}@media (hover:hover) and (pointer:fine){.dropdown button:hover{background:var(--c1-wash)}}.dropdown .sep{height:1px;background:var(--line);margin:6px 4px}
.content{padding:16px 34px 90px;flex:1}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.card-plain{border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.grid{display:grid;gap:20px}
.btn{background:var(--violet);color:#fff;font-weight:800;font-size:15px;padding:13px 22px;border-radius:40px;transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:8px}@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--violet-d);transform:translateY(-1px)}}.btn:active{transform:translateY(1px)}
.btn.sm{padding:9px 16px;font-size:13.5px}.btn.ghost{background:var(--violet-l);color:var(--c1-txt)}@media (hover:hover) and (pointer:fine){.btn.ghost:hover{background:#DBE7FF}}
.btn.soft{background:#fff;color:var(--c1-ow);border:2px solid var(--violet-l)}.btn.wide{width:100%}
.btn.green{background:var(--green)}@media (hover:hover) and (pointer:fine){.btn.green:hover{background:#25c48d}}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.badge{display:inline-flex;align-items:center;padding:5px 12px;border-radius:30px;font-size:12.5px;font-weight:800}
.badge.green{background:var(--green-bg);color:#0E7A59}.badge.violet{background:var(--violet-l);color:var(--c1-txt)}
.badge.orange{background:var(--orange-bg);color:#9E560A}.badge.blue{background:var(--blue-bg);color:#215FB4}.badge.gray{background:#F1F1F6;color:#62627A}
.progress{height:10px;background:#EDEDF3;border-radius:20px;overflow:hidden}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,#37D9A0,#28c48d);border-radius:20px;transition:width .5s}
.progress.xp>i{background:linear-gradient(90deg,var(--c2),var(--c3))}
.muted{color:var(--muted)}.section-title{font-size:22px;font-weight:800;margin:6px 0 14px}
.row{display:flex;align-items:center;gap:12px}
.tabs{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%;background:#fff;border-radius:24px;padding:5px;gap:4px;box-shadow:var(--shadow-s)}
.tab{padding:9px 18px;border-radius:30px;font-weight:800;font-size:14px;color:var(--muted);white-space:nowrap}.tab.active{background:var(--c1-btn);color:#fff}
.chiptab{padding:9px 18px;border-radius:12px;font-weight:800;font-size:14px;background:#fff;color:var(--ink);box-shadow:var(--shadow-s)}.chiptab.active{background:var(--c1-btn);color:#fff}
.avatar-sm{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:18px;background:var(--c1-tint)}
a.link{color:var(--c1-txt);font-weight:800;cursor:pointer;text-decoration:none}

/* skill tree */
.tree{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0 30px}
.snode{width:88px;height:88px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:32px;color:#fff;cursor:pointer;transition:.12s;position:relative;box-shadow:0 8px 0 rgba(0,0,0,.10),inset 0 -6px 0 rgba(0,0,0,.12)}@media (hover:hover) and (pointer:fine){.snode:hover{filter:brightness(1.05)}}.snode:active{transform:translateY(3px);box-shadow:0 5px 0 rgba(0,0,0,.10),inset 0 -6px 0 rgba(0,0,0,.12)}
.snode.lock{background:#CBD0DA!important;cursor:not-allowed;box-shadow:0 8px 0 rgba(0,0,0,.06),inset 0 -6px 0 rgba(0,0,0,.08)}
.snode .crowns{position:absolute;top:-18px;font-size:12px;background:#fff;color:#F2B705;border-radius:20px;padding:1px 7px;box-shadow:var(--shadow-s);white-space:nowrap}
.snode-label{font-weight:800;font-size:13px;color:var(--ink);margin-top:4px;text-align:center;max-width:150px}
.snode-sub{font-size:11.5px;color:var(--muted);font-weight:700}

/* rings */
/* частина 4 етапу F: --q — бліда частина «чекає зв'язку» (досвід із черги); --q ≤ --p — смуги немає */
.ring{--p:0;--q:0;--c:var(--green);--cq:rgba(55,217,160,.32);width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--c) calc(var(--p)*1%), var(--cq) 0 calc(var(--q)*1%), #ECEBF3 0);position:relative}
.ring::after{content:'';position:absolute;inset:7px;background:#fff;border-radius:50%}
.ring b{position:relative;z-index:1;font-size:15px}

.stat-tile{background:#fff;border-radius:18px;padding:16px 18px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-s)}
.stat-tile .big{font-size:24px;font-weight:900;font-family:'Baloo 2'}
.subj-card{border-radius:20px;padding:22px;color:#fff;position:relative;overflow:hidden;cursor:pointer;transition:.15s}@media (hover:hover) and (pointer:fine){.subj-card:hover{transform:translateY(-3px)}}
.subj-card .em{position:absolute;right:14px;bottom:8px;font-size:60px;opacity:.85}
.pill-row{display:flex;gap:10px;flex-wrap:wrap}
.shop-item{background:#fff;border-radius:18px;padding:18px;text-align:center;box-shadow:var(--shadow-s);transition:.15s}@media (hover:hover) and (pointer:fine){.shop-item:hover{transform:translateY(-3px)}}.shop-item .art{font-size:52px}
.empty{text-align:center;color:var(--muted);padding:44px 10px}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(20,35,70,.45);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal{background:#fff;border-radius:24px;box-shadow:var(--shadow);width:100%;max-width:560px;padding:30px;max-height:92vh;overflow:auto;animation:pop .18s ease;position:relative}
.modal.wide{max-width:760px}
/* прев'ю «Як бачить учень» (team/js/preview.js) — власна ширина, не .modal.wide:
   той лишається 760px для решти модалок кабінету, а рамці учнівського
   застосунку цього замало (лишає ~половину екрана порожньою). */
.modal.lms-prev{max-width:min(1400px,calc(100vw - 48px))}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.modal-x{position:absolute;top:16px;right:16px;font-size:17px;color:var(--muted);z-index:5;width:32px;height:32px;border-radius:50%;background:#f4f3fa;display:flex;align-items:center;justify-content:center}@media (hover:hover) and (pointer:fine){.modal-x:hover{background:#e9e7f4}}

/* quiz */
.answer{display:flex;align-items:center;gap:12px;padding:16px 18px;border:2px solid var(--line);border-radius:16px;font-weight:700;font-size:16px;cursor:pointer;transition:.12s;background:#fff;text-align:left;width:100%}@media (hover:hover) and (pointer:fine){.answer:hover{border-color:#C9DAFF;background:#F5F8FF}}.answer.correct{border-color:var(--green);background:var(--green-bg)}
.answer.wrong{border-color:var(--red);background:#ffeaea}.answer.dim{opacity:.5}
.explain{background:var(--c1-wash);border:1px solid rgba(var(--c1-rgb),.28);border-radius:10px;padding:12px 14px;font-weight:600;font-size:14px;margin-top:14px}
.elink{display:inline-block;margin-top:9px;padding:0;font-size:12px;font-weight:800;text-decoration:underline;opacity:.6;cursor:pointer;color:var(--muted)}@media (hover:hover) and (pointer:fine){.elink:hover{opacity:.95}}
.explain.ok{background:var(--green-bg);border-color:var(--green)}.explain.no{background:#fff0f0;border-color:var(--red)}

#toasts{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:10px;align-items:center}
.toast{background:#2A2A3C;color:#fff;padding:13px 22px;border-radius:40px;font-weight:800;font-size:15px;box-shadow:var(--shadow);animation:pop .2s ease}
.toast.good{background:#12A97A}.toast.bad{background:#E24C4C}

/* onboarding */
.ob-opt{border:2px solid var(--line);border-radius:16px;padding:16px;font-weight:800;cursor:pointer;transition:.12s;display:flex;align-items:center;gap:12px;background:#fff}@media (hover:hover) and (pointer:fine){.ob-opt:hover{border-color:#C9DAFF}}.ob-opt.sel{border-color:var(--c1-txt);background:var(--violet-l)}
.ob-dots{display:flex;gap:6px;justify-content:center;margin-top:16px}.ob-dots i{width:8px;height:8px;border-radius:50%;background:#ddd}.ob-dots i.on{background:var(--violet);width:22px;border-radius:20px}

/* mobile bottom nav */
.mobilenav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:50;padding:6px 4px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
.mobilenav button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:800;color:var(--muted);padding:6px 8px;flex:1}
.mobilenav button.active{color:var(--c1-txt)}.mobilenav button .ic{font-size:20px}

/* confetti + levelup */
.confetti{position:fixed;top:-10px;width:10px;height:14px;z-index:300;pointer-events:none;border-radius:2px}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.9}}


/* ---- ліве меню: згорнута смуга з емодзі, розгортається при наведенні ---- */
.logo>.lg-mini,.logo>.lg-full{color:var(--c1-txt)}
.logo>.lg-mini{display:none}
.nav-pin{display:none}
@media(min-width:901px){
  /* режим "авто": вузька смуга з емодзі, розгортається при наведенні */
  html[data-nav="auto"] #app>.main{margin-left:76px;transition:margin-left .22s cubic-bezier(.4,0,.2,1)}
  html[data-nav="auto"] .sidebar{position:fixed;left:0;top:0;width:76px;flex:0 0 76px;height:100vh;z-index:58;padding:26px 14px;
    transition:width .22s cubic-bezier(.4,0,.2,1),box-shadow .22s ease;will-change:width}html[data-nav="auto"] .sidebar:focus-within{width:246px;box-shadow:14px 0 44px rgba(30,60,130,.14)}@media (hover:hover) and (pointer:fine){html[data-nav="auto"] .sidebar:hover{width:246px;box-shadow:14px 0 44px rgba(30,60,130,.14)}}
  html[data-nav="auto"] .sidebar .lb,html[data-nav="auto"] .sidebar .lg-full{opacity:0;transform:translateX(-8px);pointer-events:none;white-space:nowrap;
    transition:opacity .15s ease,transform .2s ease}html[data-nav="auto"] .sidebar:focus-within .lb,html[data-nav="auto"] .sidebar:focus-within .lg-full{opacity:1;transform:none;pointer-events:auto}@media (hover:hover) and (pointer:fine){html[data-nav="auto"] .sidebar:hover .lb,html[data-nav="auto"] .sidebar:hover .lg-full{opacity:1;transform:none;pointer-events:auto}}
  html[data-nav="auto"] .logo{position:relative}
  html[data-nav="auto"] .logo>.lg-mini{display:block;position:absolute;left:0;top:6px;width:48px;text-align:center;opacity:1;transition:opacity .14s ease}html[data-nav="auto"] .sidebar:focus-within .lg-mini{opacity:0}@media (hover:hover) and (pointer:fine){html[data-nav="auto"] .sidebar:hover .lg-mini{opacity:0}}
  html[data-nav="auto"] .nav-item{padding:13px 12px;gap:12px}
  html[data-nav="auto"] .nav-item .ic{flex:0 0 24px}
  /* розгорнуте меню перекриває контент -> потрібен щільний фон */
  html[data-nav="auto"] #app .sidebar{background:rgba(255,255,255,.99)!important}
  html[data-theme="dark"][data-nav="auto"] #app .sidebar{background:rgba(var(--dside),.99)!important}
  /* після кліку меню завжди згортається, доки курсор не піде з нього */html[data-nav="auto"].navlock .sidebar:focus-within{width:76px;box-shadow:none}@media (hover:hover) and (pointer:fine){html[data-nav="auto"].navlock .sidebar:hover{width:76px;box-shadow:none}}html[data-nav="auto"].navlock .sidebar:focus-within .lb,html[data-nav="auto"].navlock .sidebar:focus-within .lg-full{opacity:0;transform:translateX(-8px);pointer-events:none}@media (hover:hover) and (pointer:fine){html[data-nav="auto"].navlock .sidebar:hover .lb,html[data-nav="auto"].navlock .sidebar:hover .lg-full{opacity:0;transform:translateX(-8px);pointer-events:none}}html[data-nav="auto"].navlock .sidebar:focus-within .lg-mini{opacity:1}@media (hover:hover) and (pointer:fine){html[data-nav="auto"].navlock .sidebar:hover .lg-mini{opacity:1}}html[data-nav="auto"].navlock .sidebar:focus-within .nav-due{position:absolute;top:5px;right:9px;margin:0;padding:3px 5px;font-size:9.5px;min-width:0}@media (hover:hover) and (pointer:fine){html[data-nav="auto"].navlock .sidebar:hover .nav-due{position:absolute;top:5px;right:9px;margin:0;padding:3px 5px;font-size:9.5px;min-width:0}}
  /* режим "класичний" = меню, яке було раніше: 236px, завжди відкрите, у потоці */
  .nav-pin{display:block;position:absolute;top:15px;right:10px;font-size:16px;font-weight:900;opacity:.4;padding:2px 7px;border-radius:9px;line-height:1.25}@media (hover:hover) and (pointer:fine){.nav-pin:hover{opacity:1;background:var(--c1-wash)}}}

/* ---- iOS Safari: без авто-збільшення шрифту й без горизонтального зсуву ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
#app>.main{min-width:0;max-width:100%}
.main>.content,.main>.topbar{min-width:0}
.topbar>.stat-chips{min-width:0}
.topbar>.avatar{flex:0 0 auto}
@media(max-width:1240px){
  .content>.grid[style*="330px"],.content>.grid[style*="320px"],.content>.grid[style*="300px"]{grid-template-columns:1fr!important}}
@media(max-width:900px){
  .sidebar{display:none}.mobilenav{display:flex}
  .shop-hero-row{grid-template-columns:1fr!important}
  .topbar{padding:14px 16px 4px;flex-wrap:wrap;gap:8px}.content{padding:10px 16px 96px}.page-title{font-size:22px}
  .grid[style*="1fr 1fr"]{grid-template-columns:1fr!important}
  .grid[style*="repeat(3"]{grid-template-columns:1fr 1fr!important}}
@media(max-width:600px){
  .page-title{flex:1 1 100%;font-size:20px}
  .stat-chips{padding:6px 10px;gap:9px}.chip{font-size:13px}.chip .em{font-size:15px}
  .avatar{width:44px;height:44px;font-size:22px;flex:0 0 44px}
  /* рядок статистики: не розпирає екран, а скролиться всередині себе */
  .topbar>.spacer{display:none}
  .topbar>.stat-chips{flex:1 1 0;min-width:0;max-width:100%;justify-content:flex-start;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
  .topbar>.stat-chips::-webkit-scrollbar{display:none}
  .stat-chips>.chip{flex:0 0 auto;white-space:nowrap}}
@media(max-width:430px){
  /* iPhone: усі 5 чипів мають поміститись у рядок без обрізання */
  .topbar>.stat-chips{padding:6px 9px;gap:6px}
  .stat-chips .chip{font-size:12.5px}.stat-chips .chip .em{font-size:14px}}
/* ---- mobile-first polish (phones) ---- */
@media(max-width:768px){
  .topbar{position:sticky;top:0;z-index:40;background:rgba(250,240,244,.92);backdrop-filter:blur(10px);padding:12px 16px 8px}
  .content{padding:8px 16px 96px}
  .card{padding:16px}
  .section-title{font-size:19px}
  .btn,.btn.wide{min-height:48px}
  .chiptab{padding:10px 16px}
  .answer{padding:16px;font-size:15.5px;min-height:56px}
  .snode{width:78px;height:78px;font-size:30px}
  /* bottom-sheet modals for a native app feel */
  .overlay{align-items:flex-end;padding:0}
  .modal,.modal.wide{max-width:100%;width:100%;border-radius:24px 24px 0 0;max-height:92vh;padding:24px 18px calc(20px + env(safe-area-inset-bottom))}
  .modal-x{top:14px;right:14px}
  .ob-opt{padding:16px;min-height:56px}
  /* онбординг — не bottom-sheet, а повноекранна картка по центру */
  .overlay.ob-overlay{align-items:center;padding:12px;overflow-y:auto}
  .modal.ob-modal{width:100%;border-radius:24px;max-height:none;padding:26px 18px calc(24px + env(safe-area-inset-bottom))}
  .mobilenav button{padding:8px 6px}}

:root{--radius:26px}
body{font-family:-apple-system,"SF Pro Display","SF Pro Text",system-ui,"Nunito",sans-serif;
 background:radial-gradient(1100px 620px at 8% -12%,var(--glow-warm) 0%,transparent 60%),radial-gradient(1000px 720px at 112% 6%,var(--glow-cool) 0%,transparent 55%),radial-gradient(900px 900px at 50% 118%,var(--glow-bot) 0%,transparent 60%),linear-gradient(160deg,var(--base-1),var(--base-2));background-attachment:fixed;}
h1,h2,h3,h4{font-family:-apple-system,"SF Pro Display",system-ui,sans-serif;letter-spacing:-.02em}
.card,.stat-chips,.dropdown,.modal,.stat-tile,.shop-item,.sidebar,.rf-bal,.rf-stat,.rf-can .c,.rf-share,.rf-fr,.gm-card,.hwf-card,.hwf-side{background:rgba(255,255,255,.55)!important;-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);border:1px solid rgba(255,255,255,.65);box-shadow:0 14px 40px rgba(30,60,130,.12)!important;}
.card{border-radius:26px}.sidebar{border-right:1px solid rgba(255,255,255,.5)}
.topbar{position:sticky;top:0;z-index:40;-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);background:rgba(255,255,255,.28)}
.mobilenav{background:rgba(255,255,255,.62)!important;-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);border-top:1px solid rgba(255,255,255,.6)}
.btn{background:linear-gradient(180deg,var(--c1-btn),var(--c1-btn-d));box-shadow:0 10px 22px rgba(var(--c1-rgb),.32);border-radius:30px}
.btn.green{background:linear-gradient(180deg,#54e2b0,#2fce93);box-shadow:0 10px 22px rgba(55,217,160,.32)}
.btn.soft{background:rgba(255,255,255,.6);border:1px solid rgba(var(--c1-rgb),.25)}
.answer{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);border-radius:18px}
.answer.correct{background:rgba(55,217,160,.22);border-color:rgba(55,217,160,.7)}
.answer.wrong{background:rgba(255,107,107,.18);border-color:rgba(255,107,107,.6)}
.snode{box-shadow:0 12px 26px rgba(30,60,130,.22),inset 0 -3px 0 rgba(0,0,0,.06)}
.overlay{background:rgba(20,35,70,.28)}.modal{border-radius:28px}.progress{background:rgba(90,120,170,.15)}


.chat-fab{display:none;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(180deg,var(--c1-l),var(--c1));box-shadow:0 12px 26px rgba(var(--c1-rgb),.42);font-size:30px;z-index:55;border:none;cursor:pointer}
.chat-panel{position:fixed;z-index:120;display:flex;flex-direction:column;overflow:hidden;right:22px;bottom:22px;width:372px;height:544px;max-height:82vh;border-radius:22px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);border:1px solid rgba(255,255,255,.6);box-shadow:0 24px 60px rgba(30,60,130,.28);animation:pop .18s ease}
.chat-head{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line)}
.chat-head .fx{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;background:linear-gradient(135deg,#FFDFAE,#FFB36B)}
.chat-x{margin-left:auto;width:30px;height:30px;border-radius:50%;background:#f4f3fa;color:var(--muted);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer}
.chat-msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:84%;padding:10px 13px;border-radius:16px;font-weight:600;font-size:14px;line-height:1.45}
.chat-msg.ai{align-self:flex-start;background:rgba(var(--c1-rgb),.12);border-bottom-left-radius:5px}
.chat-msg.me{align-self:flex-end;background:var(--violet);color:#fff;border-bottom-right-radius:5px}
.chat-sugg{display:flex;flex-wrap:wrap;gap:6px;max-height:76px;overflow-y:auto;padding:8px 12px;border-top:1px solid var(--line)}
.chat-sugg button{white-space:nowrap;padding:7px 11px;border-radius:20px;background:var(--violet-l);color:var(--c1-txt);font-weight:800;font-size:12px;border:none;cursor:pointer;transition:filter .15s}
.chat-sugg button:hover{filter:brightness(.95)}
.chat-sugg button:focus-visible{outline:2px solid var(--c1);outline-offset:2px}
.chat-input{display:flex;gap:8px;padding:11px 12px;border-top:1px solid var(--line)}
.chat-input input{flex:1;padding:11px 14px;border:1.5px solid var(--line);border-radius:22px;background:rgba(255,255,255,.85);font-size:14px;color:var(--ink)}
.chat-input input:focus{outline:none;border-color:var(--c1-pale)}
.chat-input .snd{width:44px;height:44px;flex:none;border-radius:50%;background:var(--violet);color:#fff;font-size:16px;border:none;cursor:pointer}
html[data-theme="dark"] .chat-panel{background:rgba(var(--dcard),.9)!important;border:1px solid rgba(255,255,255,.09)}
html[data-theme="dark"] .chat-msg.ai{background:rgba(var(--c1-rgb),.24)}
html[data-theme="dark"] .chat-input input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .chat-x{background:rgba(255,255,255,.1);color:#C8D4E8}
@media(max-width:900px){
  .chat-fab{display:flex;position:fixed;right:16px;bottom:82px}
  .chat-panel{right:0;left:0;bottom:0;width:100%;height:86vh;max-height:86vh;border-radius:24px 24px 0 0}
}


html[data-theme="dark"]{
 /* базовий скін «Ніч». Інші скіни (DARKS) перевизначають ці змінні через <style id="dark-skin">. */
 --dg1:#16151f;--dg2:#100f18;--dhue:255,123,156;
 --dcard:38,36,54;--dsurf:32,40,58;--dtop:20,19,28;--dnav:24,22,34;--dside:32,30,46;
 --dring:#221f31;--dov:5,4,12;--dbub:#1E2430;--dink:#ECEBF5;--dmuted:#A3AFC6;
 --ink:var(--dink);--muted:var(--dmuted);--line:rgba(255,255,255,.12);--surface:rgba(var(--dsurf),.72);}
html[data-theme="dark"] body{color:var(--dink);
 background:radial-gradient(1100px 620px at 8% -12%,rgba(var(--c1-rgb),.22) 0,transparent 60%),radial-gradient(1000px 720px at 112% 6%,rgba(var(--c1-rgb),.18) 0,transparent 55%),radial-gradient(900px 900px at 50% 118%,rgba(var(--dhue),.14) 0,rgba(var(--dhue),0) 60%),linear-gradient(160deg,var(--dg1),var(--dg2));background-attachment:fixed;}
html[data-theme="dark"] .card,html[data-theme="dark"] .stat-chips,html[data-theme="dark"] .dropdown,html[data-theme="dark"] .modal,html[data-theme="dark"] .stat-tile,html[data-theme="dark"] .shop-item,html[data-theme="dark"] .sidebar,html[data-theme="dark"] .rf-bal,html[data-theme="dark"] .rf-stat,html[data-theme="dark"] .rf-can .c,html[data-theme="dark"] .rf-share,html[data-theme="dark"] .rf-fr,html[data-theme="dark"] .gm-card,html[data-theme="dark"] .hwf-card,html[data-theme="dark"] .hwf-side{background:rgba(var(--dcard),.62)!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 14px 40px rgba(0,0,0,.35)!important}
html[data-theme="dark"] .sidebar{border-right:1px solid rgba(255,255,255,.08)!important}
html[data-theme="dark"] .qshowcard{background:linear-gradient(120deg,#080C24,#170E3E 52%,#340816)!important;color:#F4EAD6!important;border:1px solid rgba(245,197,66,.45)!important}
html[data-theme="dark"] .qshowcard>div>div:first-child{color:#FFD87A!important}
html[data-theme="dark"] .topbar{background:rgba(var(--dtop),.55)}
html[data-theme="dark"] .mobilenav{background:rgba(var(--dnav),.78)!important;border-top:1px solid rgba(255,255,255,.08)}@media (hover:hover) and (pointer:fine){html[data-theme="dark"] .nav-item:hover{background:rgba(255,255,255,.06)}}
html[data-theme="dark"] .nav-item.active{background:rgba(var(--c1-rgb),.24);color:var(--c1-mid)}
html[data-theme="dark"] .logo{color:var(--c1-pale)}
html[data-theme="dark"] .answer{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);color:var(--ink)}@media (hover:hover) and (pointer:fine){html[data-theme="dark"] .answer:hover{background:rgba(255,255,255,.09);border-color:rgba(var(--c1-rgb),.5)}}
html[data-theme="dark"] .answer.correct{background:rgba(55,217,160,.18);border-color:rgba(55,217,160,.6)}
html[data-theme="dark"] .answer.wrong{background:rgba(255,107,107,.16);border-color:rgba(255,107,107,.6)}
html[data-theme="dark"] .answer.dim{opacity:.4}
html[data-theme="dark"] .btn.soft{background:rgba(255,255,255,.08);color:var(--c1-mid);border:1px solid rgba(255,255,255,.14)}
html[data-theme="dark"] .tabs,html[data-theme="dark"] .chiptab{background:rgba(var(--dcard),.7);border:1px solid rgba(255,255,255,.08)}
html[data-theme="dark"] .chiptab{color:var(--ink)}
select.chiptab{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 10px center;background-size:11px 8px;padding-right:30px;cursor:pointer;font-family:inherit;border:0}
select.chiptab option{background:#fff;color:#1E2233}
html[data-theme="dark"] select.chiptab{color:#ECEBF5;-webkit-text-fill-color:#ECEBF5;background-color:rgba(var(--dcard),.7);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23A3AFC6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 10px center;background-size:11px 8px;padding-right:30px;cursor:pointer;font-family:inherit;border:1px solid rgba(255,255,255,.08)}
html[data-theme="dark"] select.chiptab option{background:#262436;color:#ECEBF5}
html[data-theme="dark"] .progress{background:rgba(255,255,255,.12)}
html[data-theme="dark"] .ring{background:conic-gradient(var(--c) calc(var(--p)*1%), var(--cq) 0 calc(var(--q)*1%), rgba(255,255,255,.14) 0)}
html[data-theme="dark"] .ring::after{background:var(--dring)}
html[data-theme="dark"] .explain{background:rgba(var(--c1-rgb),.16);border-color:var(--violet);color:var(--ink)}
html[data-theme="dark"] .explain.ok{background:rgba(55,217,160,.16)}
html[data-theme="dark"] .explain.no{background:rgba(255,107,107,.14)}
html[data-theme="dark"] .modal-x{background:rgba(255,255,255,.10);color:#C8D4E8}
html[data-theme="dark"] .sched-item.active{background:rgba(var(--c1-rgb),.20)}
html[data-theme="dark"] .task{border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .badge.gray{background:rgba(255,255,255,.10);color:#C6D3E8}
html[data-theme="dark"] .avatar-sm{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .ob-opt{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
html[data-theme="dark"] .ob-opt.sel{background:rgba(var(--c1-rgb),.24);border-color:var(--violet)}
html[data-theme="dark"] .overlay{background:rgba(var(--dov),.55)}
/* ===== Лавка Бажань ===== */
.gl-hero{position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;min-height:214px;padding:24px 26px}
.gl-txt{position:relative;z-index:2;max-width:62%}
.gl-txt h2{font-family:'Baloo 2','Nunito',sans-serif;font-size:28px;margin:0 0 6px;line-height:1.15}
.gl-txt p{margin:0;font-size:14px;opacity:.92;line-height:1.5}
.gl-art{position:absolute;right:26px;bottom:-10px;font-size:132px;line-height:1;z-index:1;opacity:.95;filter:drop-shadow(0 12px 24px rgba(0,0,0,.35))}
.gl-dots{gap:7px;margin-top:16px}
.gl-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.42);cursor:pointer;transition:.15s}
.gl-dots span.on{background:#fff;width:24px;border-radius:6px}
.gl-next{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:24px;line-height:1;z-index:3;display:flex;align-items:center;justify-content:center}@media (hover:hover) and (pointer:fine){.gl-next:hover{background:rgba(255,255,255,.34)}}
.gticket{background:linear-gradient(180deg,#FFEADD,#FFD8C2);color:#4A2C1A;border-radius:20px;padding:20px 22px;text-align:center;box-shadow:var(--shadow-s);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.gt-em{font-size:40px;line-height:1}
.gticket h3{margin:6px 0 0;font-size:16px;font-weight:900;line-height:1.3}
.gt-cut{border-top:2px dashed rgba(74,44,26,.3);margin:14px -22px}
.gt-l{margin:0;font-size:13.5px;line-height:1.5}
.gt-s{margin:8px 0 0;font-size:12px;opacity:.7;font-weight:800}
.gfilters{gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px}
.gsel{display:flex;flex-direction:column;gap:5px;min-width:184px}
.gsel>span{font-size:12px;font-weight:800;color:var(--muted)}
.gsel select,.gsel input{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:11px 13px;font:inherit;font-weight:700;font-size:14px;color:var(--ink);min-height:46px;width:100%}
.gsel.wide{min-width:0;width:100%;margin-bottom:4px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(228px,100%),1fr));gap:18px}
.gcard{position:relative;background:var(--card);border-radius:18px;box-shadow:var(--shadow-s);overflow:hidden;cursor:pointer;transition:.15s;padding-bottom:14px;display:flex;flex-direction:column}@media (hover:hover) and (pointer:fine){.gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}}
.gcard:focus-visible{outline:3px solid var(--violet)}
.gcard-art{position:relative;aspect-ratio:16/10;background:#0D0D14;overflow:hidden}
.gart{width:100%;height:100%;display:block}
.gcard-buy{background:var(--violet);color:#fff;font-weight:800;font-size:13px;text-align:center;padding:9px 6px}
.gcard-buy.off{background:#6E7488}
.gcard-nm{padding:11px 14px 0;font-weight:800;font-size:14.5px;line-height:1.3}
.gcard-cat{padding:3px 14px 0;color:var(--muted);font-size:12.5px}
/* сторінка сертифіката */
.gbig{flex:1 1 auto;min-width:0;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-s);background:#0D0D14}
.gart.big{aspect-ratio:16/10;height:auto}
.gthumbs{display:flex;flex-direction:column;gap:10px;flex:0 0 100px;width:100px}
.gth{background:var(--card);border-radius:12px;box-shadow:var(--shadow-s);padding:9px;display:flex;align-items:center;justify-content:center;min-height:74px;flex:1 1 0}
.gth-tv{width:100%}
.gth-tv .gth-scr{border:2px solid #3A3A52;border-radius:5px;overflow:hidden}
.gth-leg{width:36%;height:5px;background:#3A3A52;border-radius:2px;margin:4px auto 0}
.gth-ph{width:36px;border:2px solid #3A3A52;border-radius:8px;padding:2px;overflow:hidden;background:#3A3A52}
.gth-ph.two{margin-left:-12px;transform:rotate(7deg)}
.gth-ph .gth-scr{border-radius:5px;overflow:hidden}
.gth-card{width:100%;border-radius:7px;overflow:hidden}
.gth-art{width:100%;height:100%;display:block}
.gdesc{margin:18px 0 0;line-height:1.65;font-size:14.5px}
.gbuy{position:sticky;top:16px}
.gqty{justify-content:space-between;margin:16px 0;font-weight:800;font-size:14.5px}
.qbtn{width:40px;height:40px;border-radius:13px;border:2px solid var(--violet-l);background:var(--card);color:var(--c1-txt);font-size:21px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;transition:.15s}@media (hover:hover) and (pointer:fine){.qbtn:hover:not([disabled]){background:var(--violet-l)}}
.qbtn[disabled]{opacity:.4;cursor:not-allowed}
.qval{min-width:52px;text-align:center;font-weight:900;font-size:17px;border:2px solid var(--line);border-radius:13px;padding:8px 0}
.gterms{display:flex;gap:10px;align-items:flex-start;margin:14px 0 16px;font-size:13.5px;line-height:1.45;cursor:pointer}
.gterms input{width:20px;height:20px;flex:0 0 20px;margin-top:1px;accent-color:var(--c1-txt)}
.gterms a{color:var(--c1-txt);text-decoration:underline;font-weight:800}
.gwarn{font-size:12.5px;margin:10px 0 0;text-align:center;line-height:1.45}
/* сертифікати */
.gcerts{padding:6px 22px}
.gcert{display:flex;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.gcert:last-child{border-bottom:0}
.gcert.used{opacity:.55}
.gcert .ic{font-size:30px;flex:0 0 56px;width:56px;text-align:center}
.gcert .mini{flex:0 0 56px;width:56px;border-radius:8px;overflow:hidden;display:block;background:#0D0D14}
.gart.mini{width:56px;height:36px}
.gcert .tx{flex:1 1 230px;min-width:0;display:flex;flex-direction:column;gap:3px}
.gcert .tx b{font-size:15px}
.gcert .tx i{font-style:normal;font-size:12.5px;color:var(--muted)}
.gcode{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;letter-spacing:1px;font-size:13.5px;background:var(--c1-wash);color:var(--ink);border-radius:8px;padding:5px 9px;display:inline-block;width:fit-content;margin-top:4px}
.gcert .ops{display:flex;gap:8px;flex-wrap:wrap}
.btn.xs{padding:7px 13px;font-size:12px;border-radius:30px}
.gsucc-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:20px;font-weight:800;letter-spacing:2px;background:var(--c1-wash);border:2px dashed var(--violet-l);border-radius:14px;padding:15px 10px;margin-top:8px;color:var(--ink);word-break:break-all}
@media(max-width:900px){
  .gpage{grid-template-columns:1fr!important}
  .gbuy{position:static}
  .gl-txt{max-width:100%}
  .gl-art{font-size:96px;opacity:.32;right:8px}
  .ggrid{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:12px}
  .gcard-nm{font-size:13.5px}
  .gsel{min-width:150px;flex:1 1 150px}
  .gcert .ops{width:100%}
  .gcert .ops .btn{flex:1 1 auto}}
html[data-theme="dark"] .gcard,html[data-theme="dark"] .gth,html[data-theme="dark"] .gsel select,html[data-theme="dark"] .gsel input,html[data-theme="dark"] .qbtn,html[data-theme="dark"] .qval{background:rgba(var(--dcard),.62);border-color:rgba(255,255,255,.12);color:var(--dink)}
html[data-theme="dark"] .gsel select,html[data-theme="dark"] .gsel input{color-scheme:dark;-webkit-text-fill-color:var(--dink)}
html[data-theme="dark"] .gsel select option{background:#1B1B27;color:var(--dink)}
html[data-theme="dark"] .gcode,html[data-theme="dark"] .gsucc-code{background:rgba(255,255,255,.07)}
html[data-theme="dark"] .gticket{background:linear-gradient(180deg,#4A3126,#3A2620);color:#FFE2CE}
html[data-theme="dark"] .gt-cut{border-top-color:rgba(255,226,206,.25)}

/* ===== Розумне повторення (SRS) ===== */
.sr-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.sr-tile{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:14px 10px;text-align:center;transition:.15s}
.sr-tile b{display:block;font-size:27px;line-height:1.1;font-family:'Baloo 2';color:var(--ink)}
.sr-tile span{display:block;font-size:11.5px;font-weight:800;color:var(--muted);margin-top:3px;letter-spacing:.2px}
.sr-tile .em{font-size:17px;line-height:1}
.sr-tile.hot{border-color:var(--c1-txt);background:var(--violet-l)}
.sr-tile.hot b{color:var(--c1-txt)}
.sr-row{display:flex;align-items:center;gap:11px;padding:9px 2px}
.sr-bar{flex:1;height:11px;border-radius:99px;background:var(--line);overflow:hidden;min-width:60px}
.sr-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--c3),var(--c2) 55%,var(--green));transition:width .5s}
.sr-pc{font-weight:900;font-size:13px;width:42px;text-align:right;color:var(--ink)}
.sr-note{font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.5}
@media(max-width:640px){.sr-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Результат тесту ===== */
.qr-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 4px}
.qr-t{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:11px 6px;text-align:center}
.qr-t b{display:block;font-size:21px;font-family:'Baloo 2';line-height:1.15;color:var(--ink)}
.qr-t span{display:block;font-size:10.5px;font-weight:800;color:var(--muted);margin-top:2px}
.qr-nav{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:12px 0 2px}
.qr-n{width:34px;height:34px;border-radius:11px;border:2.5px solid transparent;font-weight:900;font-size:14px;cursor:pointer;
  color:#fff;background:#9AA3B2;font-family:'Nunito';transition:.13s;padding:0}
.qr-n.ok{background:var(--green)}
.qr-n.no{background:var(--red)}@media (hover:hover) and (pointer:fine){.qr-n:hover{transform:translateY(-2px)}}
.qr-n.on{border-color:var(--ink);transform:translateY(-3px)}
.qr-q{font-size:16px;font-weight:800;line-height:1.45;margin:4px 0 2px;color:var(--ink)}
.qr-opt{padding:9px 12px;border-radius:12px;border:1.5px solid var(--line);font-weight:700;font-size:14px;margin-top:7px;
  background:var(--card);display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.qr-opt .mk{margin-left:auto;font-weight:900;flex:0 0 auto}
.qr-opt.ok{border-color:var(--green);background:var(--green-bg);color:var(--ink)}
.qr-opt.no{border-color:var(--red);background:var(--orange-bg)}
.qr-opt.dim{opacity:.5}
.qr-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.qr-chip{border:1.5px solid var(--line);background:var(--card);border-radius:99px;padding:8px 14px;font-weight:800;font-size:13px;
  cursor:pointer;font-family:'Nunito';color:var(--ink);transition:.13s}@media (hover:hover) and (pointer:fine){.qr-chip:hover{border-color:var(--c1-txt)}}
.qr-chip.on{border-color:var(--c1-txt);background:var(--violet);color:#fff}
.qr-next{font-size:12px;font-weight:800;color:var(--muted);text-align:center;margin-top:10px}
/* ── компактний екран результату: усе важливе видно без прокрутки ── */
.modal.qr-res{max-width:940px}
.qr-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-right:40px}
.qr-hero .em{font-size:38px;line-height:1;flex:none}
.qr-hero .tx{min-width:0;flex:1 1 190px}
.qr-hero h2{font-size:23px;margin:0;line-height:1.15}
.qr-hero .sub{font-weight:700;font-size:12.5px;color:var(--muted);margin:2px 0 0}
.qr-hero .qr-top{margin:0;flex:1 1 400px;gap:8px}
.qr-hero .qr-t{padding:8px 6px;border-radius:14px}
.qr-hero .qr-t b{font-size:19px}
.qr-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0 0}
.qr-bar .qr-nav{margin:0;justify-content:flex-start}
.qr-mood{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.qr-bar .qr-chip{padding:6px 11px;font-size:12.5px}
.qr-hint{text-align:left;font-size:11.5px;font-weight:800;margin:7px 0 0;color:var(--muted)}
.qr-hint .qr-next{display:inline;margin:0;font-size:inherit;color:inherit;text-align:inherit}
.qr-res-w #qr-detail{margin-top:8px}
@media(max-width:900px){
 .qr-hero{display:block;text-align:center;padding-right:0}
 .qr-hero .em{font-size:44px}
 .qr-hero .qr-top{margin-top:12px}
 .qr-bar{justify-content:center}
 .qr-bar .qr-nav{justify-content:center;width:100%}
 .qr-mood{justify-content:center;width:100%}
 .qr-hint{text-align:center}}
/* ── липкий низ модалки: кнопки дій завжди видно, без прокрутки ── */
.modal.has-foot{padding-bottom:0}
.mfoot{position:sticky;bottom:0;z-index:7;display:flex;gap:10px;flex-wrap:wrap;align-items:center;
 margin:16px -30px 0;padding:14px 30px calc(16px + env(safe-area-inset-bottom,0px));
 background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
 border-top:1px solid var(--line);box-shadow:0 -12px 26px rgba(20,35,70,.10)}
.mfoot .btn{flex:1 1 150px;min-width:0}
html[data-theme="dark"] .mfoot{background:rgba(var(--dcard),.95);border-top:1px solid rgba(255,255,255,.10);box-shadow:0 -12px 26px rgba(0,0,0,.40)}
@media(max-width:768px){
 .mfoot{margin:14px -18px 0;padding:12px 18px calc(14px + env(safe-area-inset-bottom))}
 .mfoot .btn{flex:1 1 138px;font-size:15px;padding:14px 12px}}
html[data-theme="dark"] .qr-opt.ok{background:rgba(55,217,160,.14)}
html[data-theme="dark"] .qr-opt.no{background:rgba(255,107,107,.14)}
html[data-theme="dark"] .sr-tile,html[data-theme="dark"] .qr-t,html[data-theme="dark"] .qr-opt,html[data-theme="dark"] .qr-chip{background:rgba(255,255,255,.04)}
/* ===== patch22: план на день (вхідну діагностику з її .dg-* прибрано 29.09.2026) ===== */
.pl-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.pl-list{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin-top:13px}
.pl-it{display:flex;gap:11px;align-items:center;min-width:0;overflow:hidden;border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--card);transition:.13s}@media (hover:hover) and (pointer:fine){.pl-it:hover{border-color:var(--c1-txt);transform:translateY(-1px)}}
.pl-it.done{opacity:.62;border-style:dashed}
.pl-it.done .pl-t{text-decoration:line-through}
.pl-ic{width:36px;height:36px;border-radius:11px;background:var(--c1-tint);display:flex;align-items:center;justify-content:center;font-size:19px;flex:0 0 auto}
.pl-t{font-weight:800;font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-s{font-weight:700;font-size:11.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-go{border:0;border-radius:99px;background:var(--c1);color:#fff;font-weight:900;font-size:12.5px;padding:8px 14px;
  cursor:pointer;font-family:'Nunito';flex:0 0 auto;transition:.13s}@media (hover:hover) and (pointer:fine){.pl-go:hover{background:var(--c1-d)}}
.pl-ok{width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:900;font-size:14px;flex:0 0 auto}
.pl-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:10px}
.pl-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--c1),var(--c2));transition:.4s}
.pl-all{margin-top:11px;text-align:center;font-weight:800;font-size:13px;color:var(--green)}
html[data-theme="dark"] .pl-it{background:rgba(255,255,255,.04)}
@media(max-width:430px){.pl-it{gap:9px;padding:9px 10px}.pl-ic{width:32px;height:32px;font-size:17px;border-radius:10px}
  .pl-go{padding:8px 11px;font-size:12px}.pl-t{font-size:13.5px}}
/* ---- страйк і заморозки (patch23) ---- */
.frz-b{display:inline-flex;align-items:center;gap:1px;margin-left:5px;padding:0 5px;border-radius:99px;
  font-size:10.5px;font-weight:900;background:rgba(90,170,255,.22);color:#2b7fd4}
html[data-theme="dark"] .frz-b{background:rgba(120,190,255,.2);color:#8fc9ff}
.frz-hero{border-radius:18px;padding:18px 16px;text-align:center;color:#fff;
  background:linear-gradient(135deg,var(--c1),var(--c1-d));margin-bottom:14px}
.frz-stat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.frz-stat>div{border:1.5px solid var(--line);border-radius:14px;padding:10px 6px;text-align:center;background:var(--card)}
.frz-stat b{display:block;font-size:19px;line-height:1.15}
.frz-stat span{display:block;font-size:9.5px;font-weight:900;color:var(--muted);letter-spacing:.4px;margin-top:2px}
.frz-body{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:13px 14px 14px;margin-top:10px}
.frz-cal{display:grid;grid-template-columns:repeat(14,1fr);gap:4px}
.frz-d{width:100%;aspect-ratio:1;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;border:1.5px solid var(--line);background:var(--card);color:var(--muted)}
.frz-d.ok{background:var(--green-bg);border-color:transparent;color:var(--green)}
.frz-d.ice{background:rgba(90,170,255,.16);border-color:transparent}
.frz-d.today{box-shadow:0 0 0 2px var(--c1)}
html[data-theme="dark"] .frz-stat>div,html[data-theme="dark"] .frz-d{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .frz-body{background:rgba(255,255,255,.05)}
/* ---- сходинки підказок (patch23) ---- */
.hint-row{margin-top:13px;display:flex;justify-content:center}
.hint-btn{background:var(--c1-wash);color:var(--c1-txt);border:1.5px dashed var(--c1-l);border-radius:99px;
  padding:9px 17px;font-weight:900;font-size:13px;font-family:'Nunito';cursor:pointer;transition:.13s}@media (hover:hover) and (pointer:fine){.hint-btn:hover{background:var(--c1-pale)}}
.hint-btn i{font-style:normal;font-weight:800;font-size:11px;opacity:.72;margin-left:4px}
.hint-done{color:var(--muted);font-weight:800;font-size:12px;text-align:center}
.hint-box{margin-top:12px;border-radius:14px;padding:12px 14px;border:1px solid rgba(var(--c1-rgb),.28);
  background:var(--c1-wash);font-size:13.5px;line-height:1.55;font-weight:600}
.hint-box b{display:block;font-size:12.5px;margin-bottom:4px;color:var(--c1-txt)}
.hint-box.two{border-left-color:var(--orange);background:var(--orange-bg)}
.hint-box.two b{color:var(--orange)}
html[data-theme="dark"] .hint-box{background:#1b2333;background:color-mix(in srgb, var(--surface) 88%, #fff 12%)}
html[data-theme="dark"] .hint-box b{color:var(--c1-l)}
html[data-theme="dark"] .hint-box.two{background:#2a2115;background:color-mix(in srgb, var(--surface) 82%, var(--orange) 18%)}
html[data-theme="dark"] .hint-btn{background:rgba(255,255,255,.06);color:var(--c1-l)}
.answer.cut{opacity:.28;text-decoration:line-through;pointer-events:none}
@media(max-width:430px){.frz-cal{gap:3px}.frz-d{font-size:11px;border-radius:7px}.frz-body{padding:11px 10px 12px}}
.crs-back{background:none;border:0;color:var(--muted);font-weight:900;font-size:13px;cursor:pointer;padding:4px 0;margin-bottom:8px}@media (hover:hover) and (pointer:fine){.crs-back:hover{color:var(--c1-txt)}}
.crs-hero{background:linear-gradient(120deg,var(--c1-d),var(--c1-ll));color:#fff;border-radius:22px;padding:18px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.crs-sec{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 11px}
.crs-sec h3{font-size:19px;margin:0}
.les-list{display:flex;flex-direction:column;gap:9px}
.les-item{display:flex;gap:12px;align-items:center;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:11px 14px;flex-wrap:wrap;transition:.15s}@media (hover:hover) and (pointer:fine){.les-item:hover{border-color:var(--c1-l)}}
.les-item.lock{opacity:.6}
.les-n{width:34px;height:34px;border-radius:11px;background:var(--c1-wash);color:var(--c1-txt);font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}
.les-item.done .les-n{background:var(--green-bg);color:var(--green)}
.les-tt{flex:1;min-width:145px}
.les-tt b{font-size:14.5px;line-height:1.25;display:block}
.les-tt span{font-size:11.5px;font-weight:800;color:var(--muted)}
.les-act{display:flex;gap:7px;flex-wrap:wrap}
/* ---- треки курсу (patch28) ---- */
.trk-list{display:flex;flex-direction:column;gap:12px}
.trk{border:1.5px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden}
.trk.open{border-color:var(--c1-l)}
.trk-h{width:100%;display:flex;align-items:center;gap:12px;background:none;border:0;padding:13px 15px;cursor:pointer;text-align:left;color:inherit;font-family:inherit}@media (hover:hover) and (pointer:fine){.trk-h:hover .trk-n b{color:var(--c1-txt)}}
.trk-ar{font-size:13px;color:var(--muted);flex:none;width:14px}
.trk-n{flex:1;min-width:110px;display:flex;flex-direction:column;gap:6px}
.trk-n b{font-size:15.5px;transition:.15s}
.trk-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;display:block;width:100%;max-width:340px}
.trk-bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--c1),var(--c2));transition:.3s}
.trk-p{font-weight:900;font-size:12.5px;color:var(--muted);flex:none}
.trk-body{padding:0 13px 13px}
.trk-f{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.trk-fb{border:1.5px solid var(--line);background:none;color:var(--muted);font-weight:800;font-size:12px;padding:5px 11px;border-radius:99px;cursor:pointer;font-family:inherit}
.trk-fb.on{background:var(--c1);border-color:var(--c1-txt);color:#fff}
.trk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(258px,100%),1fr));gap:11px;align-items:stretch}
.les-card{border:1.5px solid var(--line);border-radius:16px;padding:12px 13px;background:var(--card);display:flex;flex-direction:column;gap:7px;transition:.15s}@media (hover:hover) and (pointer:fine){.les-card:hover{border-color:var(--c1-l)}}
.les-card.lock{opacity:.62}
.les-card.done{border-color:var(--green)}
.les-card.cur{background:linear-gradient(135deg,var(--c1-d),var(--c1-ll));border-color:transparent;color:#fff}
.les-card.cur .les-h,.les-card.cur .les-tp,.les-card.cur .les-exp{color:#fff}
.les-card.cur .les-tp{opacity:.92}
.les-hd{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.les-vic{font-size:18px;line-height:1}
.les-tag{font-size:10.5px;font-weight:900;letter-spacing:.3px;padding:3px 8px;border-radius:99px;background:var(--c1-wash);color:var(--c1-txt)}
.les-tag.t-theory{background:rgba(120,90,255,.14);color:#6b4bd6}
.les-tag.t-practice{background:var(--green-bg);color:var(--green)}
.les-tag.t-bonus{background:rgba(255,180,40,.2);color:#a8700a}
.les-tag.t-live{background:rgba(255,255,255,.24);color:#fff}
.les-exp{margin-left:auto;font-size:11.5px;font-weight:900;color:var(--c2)}
.les-h{font-size:15px;margin:0;line-height:1.2}
.les-ok{color:var(--green)}
.les-tp{margin:0;font-size:12px;font-weight:700;color:var(--muted);line-height:1.35}
.les-ind{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.les-ind .ind{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:800;color:var(--muted);opacity:.5}
.les-ind .ind.on{opacity:1;color:var(--green)}
.les-ind .ind.hw{opacity:1}
.hw-sq{width:13px;height:13px;border-radius:4px;background:var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-style:normal;color:#fff;margin-left:3px;flex:none}
.hw-sq.ok{background:var(--green)}
.les-bt{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:3px}
.les-dt{font-size:11.5px;font-weight:800;color:var(--muted)}
.les-dt.hot{color:var(--orange)}
.les-av{display:flex;align-items:center;flex-wrap:wrap}
.les-av .av{width:25px;height:25px;border-radius:99px;background:rgba(255,255,255,.22);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-style:normal;margin-right:-9px;border:2px solid rgba(255,255,255,.55)}
.les-av b{margin-left:16px;font-size:12px;font-weight:900}
.les-cd{margin-left:9px;font-size:12px;font-weight:900;background:rgba(255,255,255,.2);padding:3px 9px;border-radius:99px;white-space:nowrap}
.les-card.cur .btn.ghost{background:rgba(255,255,255,.18);color:#fff;border-color:transparent}@media (hover:hover) and (pointer:fine){.les-card.cur .btn.ghost:hover{background:rgba(255,255,255,.3)}}
.les-card .btn[disabled]{opacity:.5;cursor:not-allowed}
.cat-lock.open{filter:none}
html[data-theme="dark"] .trk,html[data-theme="dark"] .les-card{background:var(--surface)}
html[data-theme="dark"] .les-card.cur{background:linear-gradient(135deg,var(--c1-d),var(--c1-ll))}
html[data-theme="dark"] .hw-sq{background:rgba(255,255,255,.14)}
html[data-theme="dark"] .hw-sq.ok{background:var(--green)}
@media(max-width:560px){.trk-grid{grid-template-columns:1fr}.trk-h{padding:12px 12px}.trk-body{padding:0 11px 12px}}
.hw-q{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:15px 16px;margin-bottom:12px}
.hw-q>b{display:block;font-size:15px;line-height:1.4;margin-bottom:11px}
.hw-a{display:flex;gap:9px;align-items:flex-start;border:1.5px solid var(--line);border-radius:13px;padding:9px 12px;margin-bottom:7px;cursor:pointer;font-weight:700;font-size:13.5px;background:var(--surface);transition:.14s;line-height:1.4}@media (hover:hover) and (pointer:fine){.hw-a:hover{border-color:var(--c1-txt)}}
.hw-a.on{border-color:var(--c1-txt);background:var(--c1-wash);color:var(--c1-txt)}
.hw-a.ok{border-color:var(--green);background:var(--green-bg)}
.hw-a.no{border-color:var(--red);background:var(--orange-bg)}
.hw-a i{font-style:normal;font-weight:900;flex:none;width:19px;opacity:.75}
.hw-num{font-size:10.5px;font-weight:900;color:var(--muted);letter-spacing:.5px;margin-bottom:6px}
.hw-exp{margin-top:9px;border:1px solid rgba(var(--c1-rgb),.28);background:var(--c1-wash);border-radius:12px;padding:10px 12px;font-weight:700;font-size:12.5px;line-height:1.5}
.hw-bar{position:sticky;bottom:12px;background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:12px 14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px;box-shadow:0 10px 30px rgba(30,60,130,.14)}
.hw-bar .progress{height:9px}
.hw-t{display:inline-flex;gap:5px;align-items:center;font-size:10.5px;font-weight:900;letter-spacing:.3px;color:var(--c1-txt);background:var(--c1-wash);border-radius:999px;padding:3px 9px;margin:0 0 8px}
.hw-hint{font-size:12.5px;font-weight:800;color:var(--muted);margin:0 0 10px;line-height:1.45}
.hw-opts{border:1.5px dashed var(--line);border-radius:14px;padding:9px 11px;margin-bottom:10px}
.hw-o{display:flex;gap:9px;align-items:flex-start;font-weight:700;font-size:13px;line-height:1.45;padding:4px 0}
.hw-o i{font-style:normal;font-weight:900;flex:none;width:19px;opacity:.75}
.hw-mrow{display:flex;gap:9px;align-items:center;border:1.5px solid var(--line);border-radius:13px;padding:8px 11px;margin-bottom:7px;background:var(--surface);flex-wrap:wrap}
.hw-mrow.ok{border-color:var(--green);background:var(--green-bg)}
.hw-mrow.no{border-color:var(--red);background:var(--orange-bg)}
.hw-mn{flex:none;width:22px;height:22px;border-radius:8px;background:var(--c1);color:#fff;font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center}
.hw-mt{flex:1;min-width:120px;font-weight:700;font-size:13.5px;line-height:1.4}
.hw-sel{flex:none;-webkit-appearance:none;appearance:none;border:1.5px solid var(--line);border-radius:10px;padding:6px 26px 6px 11px;font-weight:900;font-size:13px;background-color:var(--card);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 9px center;color:var(--ink);cursor:pointer;font-family:inherit;min-width:64px}
.hw-sc{font-size:11.5px;font-weight:900;color:var(--muted);margin-left:auto;white-space:nowrap}
.hw-my{font-size:10.5px;font-weight:900;opacity:.7}
.hw-in{display:block;width:100%;border:1.5px solid var(--line);border-radius:13px;padding:11px 13px;font-weight:800;font-size:15px;background:var(--surface);color:var(--ink);font-family:inherit;box-sizing:border-box;margin-top:10px;margin-bottom:8px}
.hw-in:focus{outline:none;border-color:var(--c1-txt)}
.hw-in.ok{border-color:var(--green);background:var(--green-bg)}
.hw-in.no{border-color:var(--red);background:var(--orange-bg)}
html[data-theme="dark"] .hw-mrow{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .hw-in{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .hw-sel{background-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .hw-a{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .hw-exp{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .les-item{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .cat-card{background:var(--surface)}
html[data-theme="dark"] .cat-card.mine{background:linear-gradient(180deg,rgba(var(--c1-rgb),.20),var(--surface))}
html[data-theme="dark"] .cat-tab{background:var(--surface)}
html[data-theme="dark"] .hw-q{background:var(--surface)}
html[data-theme="dark"] .hw-bar{background:var(--surface);backdrop-filter:blur(14px)}
html[data-theme="dark"] .crs-note{background:rgba(255,180,60,.13)}
@media(max-width:560px){.les-act{width:100%}.les-act .btn{flex:1}.hw-bar{padding:11px 12px}}
.crs-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.crs-cta .btn{width:100%;padding:9px 8px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-card .crs-top{padding-right:26px}
.crs-note{display:flex;gap:9px;align-items:flex-start;background:var(--orange-bg);border:1.5px solid var(--orange);border-radius:15px;padding:11px 13px;font-weight:800;font-size:12.5px;line-height:1.5;margin-bottom:15px}
.crs-cta.one{grid-template-columns:1fr}
@media(max-width:900px){.hw-bar{bottom:84px}}
.lead-lbl{font-weight:800;font-size:12.5px;color:var(--muted);margin:12px 0 5px}
.lead-inp{width:100%;padding:13px 15px;border:2px solid var(--line);border-radius:14px;font-weight:700;font-size:15px;font-family:inherit;background:var(--card);color:var(--ink);outline:none;transition:.12s}
.lead-inp:focus{border-color:var(--c1-txt)}
html[data-theme="dark"] .lead-inp{background:rgba(255,255,255,.05)}
.lead-ok{display:flex;gap:8px;align-items:center;padding:9px 12px;border-radius:12px;background:var(--green-bg);color:var(--green);font-weight:800;font-size:12.5px;margin-top:10px}

/* ---------- СТОРІНКА ЗАНЯТТЯ: сцена, панелі, матеріали ---------- */
/* player */
.v-wrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
.v-wrap>*{min-width:0}
.v-stage{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#101322;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.v-stage .bgl{position:absolute;inset:0;background:linear-gradient(135deg,var(--vc),#101322 78%);opacity:.95}
.v-stage .orb{position:absolute;border-radius:50%;filter:blur(30px);opacity:.5;background:#fff}
.v-stage:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.35));z-index:1;pointer-events:none}
.v-stage .cap{position:relative;z-index:2;padding:26px 30px;color:#fff;text-align:center;max-width:82%;max-height:100%;overflow:hidden}
.v-stage .cap .kk{font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.8;margin-bottom:8px}
.v-stage .cap .tt{font-size:20px;font-weight:800;line-height:1.4;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.v-stage .big{position:absolute;z-index:3;width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.95);color:#111;display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:.15s}@media (hover:hover) and (pointer:fine){.v-stage .big:hover{transform:scale(1.07)}}
.v-stage .big.hide{opacity:0;pointer-events:none}
.v-stage.has-media .bgl,.v-stage.has-media .orb,.v-stage.has-media .cap{display:none}
.v-stage.has-media:after{display:none}
.v-panel{border-radius:18px;background:var(--card);border:1.5px solid var(--line);overflow:hidden;margin-bottom:14px}
.v-phead{display:flex;align-items:center;gap:8px;padding:12px 14px;font-weight:900;font-size:14px;cursor:pointer;user-select:none}
.v-phead .ar{margin-left:auto;color:var(--muted);font-size:12px;transition:.2s}
.v-pbody{padding:0 10px 10px}
.v-chap{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:12px;cursor:pointer;font-size:13px;font-weight:700}@media (hover:hover) and (pointer:fine){.v-chap:hover{background:var(--c1-wash)}}
.v-chap.on{background:var(--c1-tint)}
.v-chap .tm{flex:none;font-weight:900;font-size:11.5px;color:var(--c1-txt);background:var(--c1-wash);border-radius:7px;padding:2px 6px;font-variant-numeric:tabular-nums}
.v-mat{display:flex;flex-wrap:wrap;gap:8px}
.v-mat button{display:flex;align-items:center;gap:6px;padding:9px 13px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-weight:800;font-size:13px;cursor:pointer}@media (hover:hover) and (pointer:fine){.v-mat button:hover{border-color:var(--c1-txt);color:var(--c1-txt)}}
.v-crumbs{font-size:12.5px;font-weight:800;color:var(--muted);margin-bottom:10px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.v-crumbs a{color:var(--c1-txt);cursor:pointer}

@media(max-width:640px){
  .v-stage .cap{padding:12px 14px;max-width:94%}
  .v-stage .cap .tt{font-size:14px;line-height:1.35;-webkit-line-clamp:4}
  .v-stage .cap .kk{font-size:10px;margin-bottom:4px}
  .v-stage .big{width:56px;height:56px;font-size:20px}}
@media(max-width:980px){
.v-wrap{grid-template-columns:minmax(0,1fr)}}
/* iOS Safari: any control under 16px makes the page zoom on focus. */
@media (max-width:900px) and (hover:none){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,textarea{font-size:16px!important}}
/* Touch targets: nothing tappable should be under ~40px on a phone. */
@media (max-width:900px) and (hover:none){
  .crs-back{padding:12px 2px;font-size:14px}
  .trk-fb{padding:9px 14px;font-size:13px}
  .v-crumbs{font-size:13px;gap:8px}
  .v-crumbs a{display:inline-block;padding:7px 0}
  .sch .jn{padding:10px 12px;font-size:12.5px}
  .jn{min-height:38px;min-width:38px;padding:8px 12px}
  a.link{display:inline-block;padding:7px 0}
  .sun::before{content:"";position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px}}

/* ---------- КВЕСТИ ДНЯ ---------- */
.qst{display:flex;gap:11px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.qst:last-child{border-bottom:none}
.qst .ic{width:38px;height:38px;border-radius:12px;background:var(--c1-wash);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.qst .bd{flex:1;min-width:0}
.qst .tt{font-weight:800;font-size:13.5px;line-height:1.25}
.qst .pr{display:flex;align-items:center;gap:7px;margin-top:5px}
.qst .pr .tr{flex:1;height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.qst .pr .tr i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--c1),var(--c1-d))}
.qst .pr .nn{font-size:11.5px;font-weight:900;color:var(--muted);font-variant-numeric:tabular-nums}
.qst.ok .pr .tr i{background:linear-gradient(90deg,#3ED598,var(--green))}
.qst .rw{flex:none;font-weight:900;font-size:12.5px;color:#7A5A00;background:#FFF6DA;border-radius:10px;padding:5px 9px;white-space:nowrap}
.qst .cl{flex:none;border:none;cursor:pointer;font-weight:900;font-size:12px;color:#5A3A00;background:linear-gradient(180deg,#FFE59A,#FFC93C);box-shadow:0 3px 0 #E3A400;border-radius:10px;padding:7px 10px;white-space:nowrap}
.qst .cl:active{transform:translateY(2px);box-shadow:0 1px 0 #E3A400}
.qst .dn{flex:none;font-weight:900;font-size:15px;color:#0E7A59}
/* ---------- ЛІГИ ---------- */
.lg-med{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:4px 0 14px}
.lg-m{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:23px;background:var(--c1-wash);border:2px solid var(--line);opacity:.8;position:relative;flex:none}
.lg-m.past{opacity:1;border-color:var(--c1-txt)}
.lg-m.cur{width:86px;height:86px;font-size:42px;opacity:1;border:none;box-shadow:0 10px 26px rgba(242,183,5,.34);background:radial-gradient(circle at 50% 32%,#FFF6D0,#FFD75E)}
.lg-m.lock{opacity:.45;font-size:19px}
.lg-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;margin-bottom:6px}
.lg-row .rk{width:30px;text-align:center;font-weight:900;flex:none}
.lg-row .av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--c1-wash);flex:none}
.lg-row.t1 .av{box-shadow:0 0 0 3px #F2B705}
.lg-row.t2 .av{box-shadow:0 0 0 3px #B9C2CF}
.lg-row.t3 .av{box-shadow:0 0 0 3px #CD7F32}
.lg-row.me{border:2px solid var(--c1-d);background:var(--c1-wash)}
.lg-div{display:flex;align-items:center;gap:8px;margin:10px 2px;font-weight:900;font-size:12px}
.lg-div i{flex:1;height:2px;border-radius:2px;background:currentColor;opacity:.35;font-style:normal}
/* ---------- МОЇ ЗАВДАННЯ ---------- */
.tk{display:flex;gap:11px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tk:last-child{border-bottom:none}
.tk .dot{width:10px;height:10px;border-radius:50%;flex:none}
.tk .bd{flex:1;min-width:160px}
.tk .tt{font-weight:800;font-size:14.5px;line-height:1.3}
.tk .mt{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.tchip{font-size:11px;font-weight:800;padding:3px 8px;border-radius:8px;background:var(--c1-wash);color:var(--c1-txt)}
.tchip.gray{background:#F1F1F6;color:#5C5C70}
.tchip.gold{background:#FFF6DA;color:#7A5A00}
.tchip.red{background:#FFEDEC;color:#B02328}
.tchip.green{background:var(--green-bg);color:#0E7A59}
.tabs-line{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:4px;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
.tk-card{min-width:0;overflow:hidden}
.grid>*{min-width:0}
.tabs-line button{flex:none;border:1.5px solid var(--line);background:var(--card);color:var(--muted);font-weight:800;font-size:13px;padding:7px 13px;border-radius:11px;cursor:pointer}
.tabs-line button.on{background:var(--c1-d);color:#fff;border-color:transparent}
/* ---------- дерево: пунктирний шлях ---------- */
.tree{position:relative}
.tree:before{content:'';position:absolute;top:20px;bottom:40px;left:50%;width:0;border-left:3px dashed var(--line);transform:translateX(-1.5px);z-index:0}
.tree>div{position:relative;z-index:1}
.snode.mast{box-shadow:0 0 0 4px #F2B705,0 10px 24px rgba(242,183,5,.30)}
html[data-theme="dark"] .tchip.gray{background:rgba(255,255,255,.10);color:#C6D3E8}
html[data-theme="dark"] .tchip.gold,html[data-theme="dark"] .qst .rw{background:rgba(242,183,5,.16);color:#F2C94C}
html[data-theme="dark"] .tchip.red{background:rgba(229,72,77,.16)}
/* ---------- БАЗА ЗНАНЬ (пастельні картки з Figma) ---------- */
.kb-card{border-radius:22px;padding:18px;transition:.15s;border:1.5px solid transparent;min-width:0;position:relative;overflow:hidden}@media (hover:hover) and (pointer:fine){.kb-card:hover{transform:translateY(-3px);border-color:var(--kc)}}
.kb-card .kb-top{display:flex;gap:12px;align-items:center}
.kb-card .kb-ic{width:52px;height:52px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;flex:none;box-shadow:0 4px 12px rgba(0,0,0,.07)}
.kb-card .kb-t{font-size:19px;line-height:1.2;color:var(--kc)}
.kb-card .kb-s{font-size:12.5px;font-weight:800;color:var(--muted);margin-top:3px}
.kb-card .kb-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.kb-card .kb-p{border:none;cursor:pointer;background:#fff;color:var(--kc);color:color-mix(in srgb,var(--kc) 56%,#10121A);font-weight:800;font-size:12px;padding:7px 11px;border-radius:11px;box-shadow:0 2px 8px rgba(0,0,0,.06);white-space:nowrap}@media (hover:hover) and (pointer:fine){.kb-card .kb-p:hover{background:var(--kc);color:#fff}}
.kb-card .kb-pr{display:flex;align-items:center;gap:9px;margin-top:13px}
.kb-card .kb-pr .progress{flex:1;background:rgba(255,255,255,.65)}
.kb-card .kb-pr .progress i{background:var(--kc)}
.kb-card .kb-pr b{font-size:12px;font-weight:900;color:var(--kc);white-space:nowrap;font-variant-numeric:tabular-nums}
html[data-theme="dark"] .kb-card .kb-ic,html[data-theme="dark"] .kb-card .kb-p{background:rgba(255,255,255,.10);color:#EAF2FF;box-shadow:none}
html[data-theme="dark"] .kb-card .kb-pr .progress{background:rgba(255,255,255,.12)}
/* ---------- ПІДПИСКИ (ідеї з Figma) ---------- */
.pay-box{margin-top:12px;padding:11px 13px;border-radius:14px;background:var(--c1-wash);border:1px solid var(--line)}
.save-box{display:flex;gap:14px;flex-wrap:wrap;align-items:center;background:linear-gradient(120deg,#F2B705,#FFD75E);color:#4A3400;margin:4px 0 16px}
.save-box div[style*="color:#fff"]{color:#4A3400!important}
html[data-theme="dark"] .pay-box{background:rgba(255,255,255,.06)}
/* ---------- ЖИВЕ ЗАНЯТТЯ + РОЗКЛАД (ідеї з Figma) ---------- */
.live-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-radius:20px;padding:14px 18px;background:linear-gradient(120deg,#E23A4C,#FF7A59);color:#fff;box-shadow:0 10px 26px rgba(226,58,76,.26);min-width:0}
.live-strip .lv-dot{width:12px;height:12px;border-radius:50%;background:#fff;flex:none;box-shadow:0 0 0 0 rgba(255,255,255,.75);animation:lvpulse 1.6s infinite}
@keyframes lvpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 12px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.live-strip .lv-t{font-weight:900;font-size:17px;color:#fff}
.live-strip .lv-s{opacity:.94;font-weight:700;font-size:13px;margin-top:2px}
.live-strip .lv-av{display:flex;align-items:center;flex:none}
.live-strip .lv-av i{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.24);border:2px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;font-size:14px;font-style:normal;margin-left:-9px}
.live-strip .lv-av i:first-child{margin-left:0}
.live-strip .lv-av b{font-weight:900;font-size:12.5px;margin-left:7px;white-space:nowrap}
/* Однокласники в смужці (01.10.2026): копія фото з Google і кружечок із літерами */
.live-strip .lv-av i.lv-ph{overflow:hidden}
.live-strip .lv-av i.lv-ph img{width:100%;height:100%;object-fit:cover;display:block}
.live-strip .lv-av i.lv-lt{font-size:11.5px;font-weight:900;color:#fff;letter-spacing:.2px}
.sch-card{min-width:0;overflow:hidden}
.sch-h{font-size:11.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:6px 0 4px}
.sch{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);min-width:0}
.sch:last-child{border-bottom:none}
.sch .tm{font-weight:900;font-size:12.5px;width:42px;flex:none;font-variant-numeric:tabular-nums;color:var(--muted)}
.sch .br{width:4px;align-self:stretch;border-radius:99px;flex:none;min-height:34px}
.sch .bd{flex:1;min-width:0}
.sch .tt{font-weight:800;font-size:13.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sch .ss{font-size:11.5px;font-weight:700;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sch .jn{flex:none;border:none;cursor:pointer;font-weight:900;font-size:11.5px;padding:6px 10px;border-radius:10px;background:var(--red);color:#fff;white-space:nowrap}
.sch .jn.soft{background:var(--c1-wash);color:var(--c1-txt)}
.sch.live{background:rgba(226,58,76,.07);border-radius:12px;padding:9px 8px}
.sch.past{opacity:.5}
.sch-empty{font-weight:700;font-size:13px;color:var(--muted);padding:8px 0}
/* ---------- ДОСЯГНЕННЯ (плитки у стилі Figma) ---------- */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:11px}
.ach{border:1.5px solid var(--line);border-radius:16px;padding:13px 11px;text-align:center;background:var(--card);min-width:0;position:relative;overflow:hidden}
.ach .art{font-size:34px;line-height:1.1;filter:grayscale(1);opacity:.5}
.ach .tt{font-weight:900;font-size:13px;margin-top:6px;line-height:1.2}
.ach .ds{font-size:11px;font-weight:700;color:var(--muted);margin-top:3px;line-height:1.3}
.ach .pr{display:flex;align-items:center;gap:6px;margin-top:9px}
.ach .pr .progress{flex:1;height:6px}
.ach .pr span{font-size:10.5px;font-weight:900;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ach.on{border-color:#F2B705;background:linear-gradient(180deg,#FFFBEE,#FFF3CE)}
.ach.on .art{filter:none;opacity:1;text-shadow:0 4px 12px rgba(242,183,5,.45)}
.ach.on .tt{color:#8A6200}
.ach.on .ds{color:#A8813A}
.ach .got{margin-top:9px;font-size:11px;font-weight:900;color:#0E7A59}
.badge.gold-b{background:#FFF6DA;color:#7A5A00}
html[data-theme="dark"] .ach.on{background:rgba(242,183,5,.13);border-color:rgba(242,183,5,.55)}
html[data-theme="dark"] .ach.on .tt{color:#F2C94C}
html[data-theme="dark"] .ach.on .ds{color:#D8C79A}
html[data-theme="dark"] .badge.gold-b{background:rgba(242,183,5,.16);color:#F2C94C}
/* ---------- КАЛЕНДАР (ідея з Figma) ---------- */
.cal-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.cal-nav{width:34px;height:34px;flex:none;border-radius:11px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;font-size:19px;font-weight:900;color:var(--c1-txt);line-height:1}@media (hover:hover) and (pointer:fine){.cal-nav:hover{background:var(--c1-wash);border-color:var(--c1-txt)}}
.cal-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;align-items:start}
.cal-col{min-width:0;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:9px 8px 10px;display:flex;flex-direction:column;gap:7px}
.cal-col.today{border-color:var(--c1-txt);box-shadow:0 6px 18px rgba(0,0,0,.06)}
.cal-dh{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;padding:1px 2px 6px;border-bottom:1px solid var(--line)}
.cal-dh b{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.cal-dh span{font-size:17px;font-weight:900}
.cal-dh i{font-style:normal;font-size:10px;font-weight:900;color:var(--c1-txt);background:var(--c1-wash);border-radius:6px;padding:2px 5px}
.cal-col.today .cal-dh b,.cal-col.today .cal-dh span{color:var(--c1-txt)}
.cal-it{border-radius:12px;padding:8px 9px;cursor:pointer;border:1px solid color-mix(in srgb,var(--cc) 34%,transparent);background:color-mix(in srgb,var(--cc) 7%,transparent);min-width:0;transition:.15s}@media (hover:hover) and (pointer:fine){.cal-it:hover{border-color:var(--cc);border-left-color:var(--cc);transform:translateY(-1px)}}
/* картка заняття — справжня кнопка (CLAUDE.md, «Клавіатура»): скидання UA-вигляду кнопки, щоб картка лишилась такою, якою була, коли була div */
button.cal-it{display:block;width:100%;margin:0;font:inherit;color:inherit;text-align:inherit}
.cal-it .tmr{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0}
.cal-it .tmr b{font-size:11px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.cal-it .tt{font-size:12.5px;font-weight:900;line-height:1.25;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-it .ss{font-size:10.5px;font-weight:800;color:var(--cc);color:color-mix(in srgb,var(--cc) 56%,#10121A);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-it .ss.thin{font-weight:700;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;line-height:1.25;margin-top:2px}
.cal-ok{flex:none;font-size:11px;font-weight:900;color:#0E7A59}
.cal-it.past{opacity:.55}
.cal-it.live{border-color:var(--red);background:rgba(226,58,76,.1)!important}
.cal-live{flex:none;font-size:9px;font-weight:900;color:#fff;background:var(--red);border-radius:6px;padding:2px 5px;white-space:nowrap}
.cal-none{display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 2px;font-size:20px;opacity:.5}
.cal-none span{font-size:10.5px;font-weight:800;color:var(--muted)}
@media(max-width:1100px){.cal-week{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.cal-week{grid-template-columns:1fr}.cal-col{padding:10px 11px 12px}.cal-it .tt{font-size:13px}.cal-it .ss{font-size:11.5px}}
/* ---------- КАТАЛОГ КУРСІВ (ідея з Figma) ---------- */
.cat-grid{grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));gap:14px}
.cat-card{background:var(--card);border:1.5px solid color-mix(in srgb,var(--cc) 32%,var(--line));border-radius:20px;padding:15px 16px 16px;min-width:0;transition:.16s}@media (hover:hover) and (pointer:fine){.cat-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.08)}}
.cat-card.mine{background:linear-gradient(180deg,var(--c1-wash),transparent)}
.cat-chip{font-size:11px;font-weight:900;border-radius:8px;padding:3px 8px;white-space:nowrap}
.cat-chip.gray{background:var(--line);color:var(--muted)}
.cat-lock{font-size:16px;opacity:.6}
.cat-t{font-size:19px;line-height:1.2;margin:2px 0 5px}
.cat-d{font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.45;margin:0}
.cat-m{font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap}
.cat-pr{display:flex;align-items:center;gap:9px;margin-top:8px}
.cat-pr .progress{flex:1;height:8px}
.cat-pr b{font-size:12px;white-space:nowrap}
.cat-tab{border:1.5px solid var(--line);background:var(--card);border-radius:11px;padding:6px 12px;font-weight:900;font-size:12.5px;cursor:pointer;color:var(--muted);white-space:nowrap}@media (hover:hover) and (pointer:fine){.cat-tab:hover{border-color:var(--c1-txt);color:var(--c1-txt)}}
.cat-tab.on{background:var(--c1-btn);border-color:var(--c1-txt);color:#fff}
/* ---------- КАТАЛОГ: замок у куті ---------- */
.cat-card{position:relative}
.cat-card .cat-lock{position:absolute;top:12px;right:13px;font-size:16px;opacity:.5}
/* ---------- ЗВИВИСТА СТЕЖКА (Figma «Game») ---------- */
.lpath{position:relative;display:flex;flex-direction:column;align-items:center;padding:14px 0 26px;overflow:hidden}
.lpath .pnode-w{position:relative;z-index:1;text-align:center;transform:translateX(calc(var(--o) * 1px));transition:transform .2s}
.lpath .pdots{display:flex;flex-direction:column;align-items:center;gap:7px;margin:7px 0}
.lpath .pdots i{display:block;border-radius:50%;background:var(--line);transform:translateX(calc(var(--o) * 1px))}
.lpath .pstars{font-size:11px;letter-spacing:1px;margin-top:5px;line-height:1}
.lpath .snode-label{margin-top:3px}
.snode.cur{animation:pnpulse 1.9s infinite}
@keyframes pnpulse{0%{box-shadow:0 8px 0 rgba(0,0,0,.10),inset 0 -6px 0 rgba(0,0,0,.12),0 0 0 0 var(--c1-wash)}60%{box-shadow:0 8px 0 rgba(0,0,0,.10),inset 0 -6px 0 rgba(0,0,0,.12),0 0 0 16px rgba(0,0,0,0)}100%{box-shadow:0 8px 0 rgba(0,0,0,.10),inset 0 -6px 0 rgba(0,0,0,.12),0 0 0 0 rgba(0,0,0,0)}}
.pbub{position:absolute;left:50%;top:-30px;transform:translateX(-50%);background:#fff;border:2px solid var(--c1);color:var(--c1-txt);font-weight:900;font-size:11px;letter-spacing:.04em;padding:4px 11px;border-radius:11px;white-space:nowrap;box-shadow:var(--shadow-s);animation:pbjump 1.6s infinite;z-index:3}
.pbub:after{content:'';position:absolute;left:50%;bottom:-7px;margin-left:-5px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--c1)}
@keyframes pbjump{0%,100%{top:-30px}50%{top:-36px}}
.pchest{width:74px;height:74px;margin:0 auto;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:32px;cursor:pointer;background:#EDF0F5;border:2px dashed var(--line);transition:.15s}
.pchest.ready{background:linear-gradient(180deg,#FFE59A,#FFC93C);border:2px solid #E3A400;box-shadow:0 7px 0 #E3A400;animation:pcsh 2.2s infinite}
.pchest.open{background:linear-gradient(180deg,#FFF6DA,#FFE9A8);border:2px solid #F2B705;box-shadow:none}
.pchest:active{transform:translateY(3px)}
@keyframes pcsh{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-7deg)}94%{transform:rotate(7deg)}97%{transform:rotate(-4deg)}}
.pfin{margin-top:18px;font-weight:900;font-size:15px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px}
.pfin span{font-size:12.5px;font-weight:800;color:var(--c1-txt);background:var(--c1-wash);padding:3px 10px;border-radius:20px}
@media(min-width:1150px){
  .lpath .pnode-w{transform:translateX(calc(var(--o) * 1.45px))}
  .lpath .pdots i{transform:translateX(calc(var(--o) * 1.45px))}}
@media(max-width:760px){
  .lpath .pnode-w{transform:translateX(calc(var(--o) * .52px))}
  .lpath .pdots i{transform:translateX(calc(var(--o) * .52px))}}
html[data-theme="dark"] .pchest{background:rgba(255,255,255,.07)}
html[data-theme="dark"] .pbub{background:var(--dbub)}

.cal-it .cal-ln{font-size:11px;opacity:.85}

/* ---- Аудит A11y/UX: фокус, рух, теми, тач ---- */
:root{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
:where(a,button,select,input,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--c1);outline-offset:2px;border-radius:8px}
html[data-theme="dark"]{--c1-txt:var(--c1-mid)}
html[data-theme="dark"] .btn.ghost{background:rgba(var(--c1-rgb),.20);color:var(--c1-mid);border:1px solid rgba(var(--c1-rgb),.42)}
html[data-theme="dark"] .les-card.cur .btn.ghost{background:rgba(255,255,255,.18);color:#fff;border-color:transparent}
html[data-theme="dark"] :where(a,button,select,input,textarea,summary,[tabindex]):focus-visible{
  outline-color:#8FB4FF}
.skiplink{position:fixed;left:12px;top:-60px;z-index:9999;background:var(--c1);color:#fff;
  font-weight:800;padding:11px 18px;border-radius:12px;text-decoration:none;transition:top .18s ease}
.skiplink:focus{top:12px}
button,a,.gcard,.snode,[role="button"],[onclick]{touch-action:manipulation}
.overlay{overscroll-behavior:contain}
.modal{overscroll-behavior:contain}
#toasts{pointer-events:none}
.num,.chip b,.rk,.gcode,.gsucc-code{font-variant-numeric:tabular-nums}
/* ---- Critique 2026-08: touch/press states, motion budget, measure ---- */
.a-btn:active,.o-btn:active,.i-btn:active,.tab:active,.nav-item:active,.ob-opt:active,
.kb-p:active,.answer:active,.chip:active,.shop-item:active,.qr-chip:active,
.crs-back:active,.v-btn:active,.pl-go:active,.o-tab:active,.gcard:active,.tchip:active{
  transform:scale(.97);transition-duration:.09s}
.pbub{animation-iteration-count:3}
.pchest.ready{animation-iteration-count:4}
.candy.rare{animation-iteration-count:1,6}
.tabs-line{scrollbar-width:none;-ms-overflow-style:none}
.tabs-line::-webkit-scrollbar{display:none;width:0;height:0}
@media (max-width:560px){.tabs-line{flex-wrap:wrap;overflow-x:visible}}
@media (min-width:980px){
  .content p:not([style*="text-align"]),.content li{max-width:74ch}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.26s!important;animation-iteration-count:1!important;
    transition-duration:.14s!important;scroll-behavior:auto!important}
  .candy,.qz-mdec .sun,.mascot,.gl-art,.pchest{animation:none!important}}
/* ---- Аудит 2: тач-цілі, скіп-лінк ---- */
.skiplink{background:var(--c1-btn);min-height:44px;display:inline-flex;align-items:center}
.chip.tip,.chip.streak{min-height:24px}
.gl-dots span{position:relative}
.gl-dots span::after{content:"";position:absolute;left:-8px;right:-8px;top:-9px;bottom:-9px}
.gl-next{min-width:44px;min-height:44px}
.cal-nav{min-width:40px;min-height:40px}
.kb-p,.cat-tab,.btn.sm,.tab,.chiptab{min-height:36px}
.qbtn{min-width:38px;min-height:38px}
.nav-pin{min-width:32px;min-height:32px}

/* ---- Аудит 3: темна тема — світлі підкладки та бейджі ---- */
html[data-theme="dark"]{--card:rgba(var(--dcard),.62)}
html[data-theme="dark"] .cal-col{background:rgba(var(--dcard),.55);border-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .qz-wcard{background:rgba(var(--dcard),.62);border-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .badge.blue{color:var(--c1-mid)}
html[data-theme="dark"] .badge.green{background:rgba(55,217,160,.18);color:color-mix(in srgb,var(--green) 34%,#FFFFFF)}
html[data-theme="dark"] .badge.orange{background:rgba(var(--c3-rgb),.20);color:color-mix(in srgb,var(--c3) 30%,#FFFFFF)}
html[data-theme="dark"] .badge.gray{background:rgba(255,255,255,.10);color:#C7CDDD}
html[data-theme="dark"] .cal-it .tmr b,html[data-theme="dark"] .cal-it .ss.thin{color:#C8D2E6}
html[data-theme="dark"] .cal-it .ss{color:color-mix(in srgb,var(--cc) 32%,#FFFFFF)}
html[data-theme="dark"] .cal-it.past{opacity:.72}@media (hover:hover) and (pointer:fine){html[data-theme="dark"] .btn.ghost:hover{background:rgba(var(--c1-rgb),.30)}}
html[data-theme="dark"] .gcode,html[data-theme="dark"] .gsucc-code{color:var(--dink)}
html[data-theme="dark"] .cal-col.today{box-shadow:0 6px 18px rgba(0,0,0,.35)}
/* ---- Аудит 4: нижня мобільна навігація — без backdrop-filter скло не розмиває, тому робимо панель непрозорою ---- */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .mobilenav{background:#FFFFFF!important}
  html[data-theme="dark"] .mobilenav{background:rgb(var(--dnav))!important}}
/* ---- Аудит 4: підвищений контраст (Windows High Contrast / iOS Increase Contrast) ---- */
@media (prefers-contrast: more){
  :root{--muted:#4A4A62;--line:#D6D6E2}
  html[data-theme="dark"]{--muted:#CBD5E6;--line:#403C5C}
  .badge{border:1px solid currentColor}
  .btn.soft,.btn.ghost{border:1px solid currentColor}
  :where(a,button,select,input,textarea,summary,[tabindex]):focus-visible{outline-width:4px}}

/* ================= РЕФЕРАЛЬНА ПРОГРАМА ================= */
.rf-wrap{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:18px;align-items:start}
.rf-col{display:grid;gap:18px;min-width:0}
.rf-rail{display:grid;gap:14px;position:sticky;top:14px}
.rf-hero{border-radius:var(--radius);padding:26px 26px 24px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(125deg,var(--c1-dd),var(--c1-l))}
.rf-hero:after{content:"";position:absolute;right:-70px;top:-90px;width:290px;height:290px;border-radius:50%;
  background:rgba(255,255,255,.10);pointer-events:none}
.rf-hero:before{content:"";position:absolute;right:60px;bottom:-120px;width:210px;height:210px;border-radius:50%;
  background:rgba(255,255,255,.07);pointer-events:none}
.rf-hero h1{font-size:30px;line-height:1.14;margin:0;color:#fff;letter-spacing:-.4px}
.rf-hero p{margin:9px 0 0;font-weight:700;font-size:15px;line-height:1.5;color:rgba(255,255,255,.94);max-width:44ch}
.rf-hero p b{color:#fff;background:rgba(255,255,255,.18);border-radius:8px;padding:1px 7px;margin:0 1px;white-space:nowrap}
.rf-hero .rf-act{position:relative;z-index:1;margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rf-hero .btn.on-w{background:#fff;color:var(--c1-ow);box-shadow:0 8px 20px rgba(0,0,0,.16)}
.rf-hero .btn.on-w:hover{background:#fff}
.rf-hero .btn.ghost-w{background:rgba(255,255,255,.14);color:#fff;border:2px solid rgba(255,255,255,.55);box-shadow:none}
.rf-hero .btn.ghost-w:hover{background:rgba(255,255,255,.24)}
.rf-mine{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:13px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34);color:#fff;border-radius:999px;padding:7px 13px}

.rf-bal{background:var(--card);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-s);
  display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.rf-bal .b1{min-width:150px}
.rf-bal .lbl{font-weight:800;font-size:13px;color:var(--muted)}
.rf-bal .sum{font-weight:900;font-size:40px;line-height:1.05;letter-spacing:-1px;color:var(--ink);font-variant-numeric:tabular-nums}
.rf-bal .b2{flex:1;min-width:170px}
.rf-bal .b2 .t{font-weight:800;font-size:14px;color:var(--ink)}
.rf-bal .b2 .n{font-weight:800;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45}
.rf-bal .b3{flex:none}

.rf-stat{background:var(--card);border-radius:16px;padding:15px 16px;box-shadow:var(--shadow-s)}
.rf-stat b{display:block;font-size:22px;font-weight:900;color:var(--c1-txt);letter-spacing:-.4px}
.rf-stat i{display:block;font-style:normal;font-weight:700;font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45}

.rf-can{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rf-can .c{background:var(--card);border-radius:18px;padding:18px 16px 18px;text-align:center;cursor:pointer;
  box-shadow:var(--shadow-s);border:2px solid transparent;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.rf-can .c:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--c1-pale)}
.rf-can .c svg{width:100%;max-width:132px;height:104px;display:block;margin:0 auto 12px}
.rf-can .c .t{font-weight:900;font-size:14.5px;line-height:1.35;color:var(--ink)}
.rf-can .c .s{font-weight:700;font-size:12px;color:var(--muted);margin-top:6px;line-height:1.45}

.rf-share{background:var(--card);border-radius:var(--radius);padding:26px 24px 24px;text-align:center;
  box-shadow:var(--shadow-s)}
.rf-share h2{font-size:24px;margin:0 0 8px;letter-spacing:-.3px}
.rf-share .rule{font-weight:700;font-size:14px;color:var(--muted);line-height:1.55;margin:0 auto;max-width:56ch}
.rf-share .rule b{color:var(--c1-txt)}
.rf-linkrow{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:18px;flex-wrap:wrap}
.rf-linkrow input{flex:1;min-width:0;max-width:330px;border:1.5px solid var(--line);background:var(--c1-wash);
  border-radius:12px;padding:11px 14px;font:inherit;font-weight:800;font-size:13.5px;color:var(--ink);
  text-overflow:ellipsis;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.rf-soc{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.rf-soc button{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:transparent;
  border-radius:999px;padding:7px 14px;font:inherit;font-weight:800;font-size:12.5px;color:var(--ink);cursor:pointer;
  transition:border-color .15s ease,background .15s ease}
.rf-soc button:hover{border-color:var(--c1-pale);background:var(--c1-wash)}

.rf-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rf-steps .s{background:var(--c1-wash);border-radius:16px;padding:15px 16px}
.rf-steps .s .n{width:26px;height:26px;border-radius:50%;background:var(--c1-btn);color:#fff;font-weight:900;
  font-size:13px;display:grid;place-items:center;margin-bottom:9px}
.rf-steps .s b{display:block;font-size:14px;font-weight:900;color:var(--ink)}
.rf-steps .s i{display:block;font-style:normal;font-weight:700;font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45}

.rf-fr{background:var(--card);border-radius:var(--radius);padding:6px 8px 8px;box-shadow:var(--shadow-s);overflow:hidden}
.rf-fr .hd{display:flex;align-items:center;gap:10px;padding:12px 12px 10px;font-weight:800;font-size:12px;color:var(--muted)}
.rf-fr .hd .g{flex:1;min-width:0}
.rf-fr .hd .e{flex:none;text-align:right;width:96px}
.rf-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px}
.rf-row+.rf-row{border-top:1px solid var(--line)}
.rf-row:hover{background:var(--c1-wash)}
.rf-row .av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  background:var(--c1-tint)}
.rf-row .nm{flex:1;min-width:0;font-weight:800;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rf-row .nm i{display:block;font-style:normal;font-weight:700;font-size:11.5px;color:var(--muted);margin-top:2px}
.rf-row .er{flex:none;width:96px;text-align:right;font-weight:900;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.rf-row .er.wait{color:var(--muted);font-weight:800}
.rf-fr .hd .stt,.rf-row .stt{flex:none;width:150px}
.rf-row .stt .badge{white-space:nowrap}
.rf-empty{text-align:center;padding:30px 18px}
.rf-empty .em{font-size:44px;line-height:1}
.rf-empty b{display:block;font-size:16px;margin:10px 0 5px;color:var(--ink)}
.rf-empty p{margin:0 auto;font-weight:700;font-size:13px;color:var(--muted);max-width:44ch;line-height:1.55}

.rf-ops{display:grid;gap:2px}
.rf-op{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px}
.rf-op+.rf-op{border-top:1px solid var(--line)}
.rf-op .ic{flex:none;font-size:18px}
.rf-op .tx{flex:1;min-width:0;font-weight:800;font-size:13.5px;color:var(--ink)}
.rf-op .tx i{display:block;font-style:normal;font-weight:700;font-size:11.5px;color:var(--muted);margin-top:2px}
.rf-op .su{flex:none;font-weight:900;font-size:13.5px;font-variant-numeric:tabular-nums}
.rf-op .su.plus{color:#1E9E6A}
.rf-op .su.minus{color:var(--muted)}

.rf-note{font-weight:700;font-size:12px;color:var(--muted);line-height:1.5}
.rf-lnk{border:0;background:none;padding:0;font:inherit;font-weight:800;color:var(--c1-txt);text-decoration:underline;cursor:pointer}
.rf-amt{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.rf-amt button{border:1.5px solid var(--line);background:transparent;border-radius:10px;padding:7px 12px;font:inherit;
  font-weight:800;font-size:13px;color:var(--ink);cursor:pointer}
.rf-amt button.on{border-color:var(--c1);background:var(--c1-wash);color:var(--c1-txt)}
.rf-gift{border-radius:14px;background:linear-gradient(120deg,#FFF3D0,#FFE39A);padding:14px 16px;display:flex;gap:12px;align-items:center}
.rf-gift .em{font-size:26px;flex:none}
.rf-gift b{display:block;font-size:14.5px;color:#5A4200}
.rf-gift i{display:block;font-style:normal;font-weight:700;font-size:12.5px;color:#7A5B00;margin-top:3px;line-height:1.45}

html[data-theme="dark"] .rf-linkrow input{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .rf-steps .s{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .rf-row:hover{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .rf-gift{background:linear-gradient(120deg,#4A3A10,#5C4714)}
html[data-theme="dark"] .rf-gift b{color:#FFE9AE}
html[data-theme="dark"] .rf-gift i{color:#E6CE8E}
html[data-theme="dark"] .rf-can .c svg .pw{fill:#2A2A3C}

@media(max-width:1100px){.rf-wrap{grid-template-columns:1fr}.rf-rail{grid-template-columns:1fr 1fr;display:grid;position:static}}
@media(max-width:760px){
  .rf-hero{padding:22px 18px}
  .rf-hero h1{font-size:24px}
  .rf-hero p{font-size:14px}
  .rf-can{grid-template-columns:1fr;gap:12px}
  .rf-can .c{display:grid;grid-template-columns:74px minmax(0,1fr);grid-template-areas:"a t" "a s";
    column-gap:14px;align-content:center;text-align:left;padding:14px}
  .rf-can .c svg{grid-area:a;width:74px;max-width:74px;height:64px;margin:0;align-self:center}
  .rf-can .c .t{grid-area:t;align-self:end;margin:0}
  .rf-can .c .s{grid-area:s;align-self:start;margin:3px 0 0}
  .rf-steps{grid-template-columns:1fr}
  .rf-rail{grid-template-columns:1fr}
  .rf-bal{padding:18px}
  .rf-bal .sum{font-size:34px}
  .rf-bal .b3{width:100%}
  .rf-bal .b3 .btn{width:100%}
  .rf-share{padding:20px 16px}
  .rf-share h2{font-size:20px}
  .rf-linkrow input{max-width:none;width:100%}
  .rf-linkrow .btn{width:100%}
  .rf-fr .hd{display:none}
  .rf-row{flex-wrap:wrap;row-gap:8px;padding:12px 10px;align-items:flex-start}
  .rf-row+.rf-row{margin-top:2px}
  .rf-row .av{margin-top:1px}
  .rf-row .nm{flex:1 1 auto}
  .rf-row .er{order:3;flex:none;width:auto;min-width:72px}
  .rf-row .stt{order:4;flex:1 0 100%;width:auto;margin-left:46px}
}
@media(prefers-reduced-motion:reduce){.rf-can .c{transition:none}.rf-can .c:hover{transform:none}}


/* --- Лис: кнопки-дії в повідомленнях --- */
.chat-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chat-acts button{font:800 12px/1.2 inherit;color:var(--c1-txt);background:var(--c1-tint);border:1px solid var(--c1-l);border-radius:12px;padding:7px 11px;cursor:pointer;transition:background .15s,transform .15s}
.chat-acts button:hover{background:var(--c1-wash);transform:translateY(-1px)}
.chat-acts button:active{transform:translateY(0)}
.chat-acts button:focus-visible{outline:2px solid var(--c1);outline-offset:2px}
.chat-msg.ai b{color:var(--ink)}
html[data-theme="dark"] .chat-acts button{color:#dfe9ff;background:rgba(var(--c1-rgb),.18);border-color:rgba(var(--c1-rgb),.38)}
html[data-theme="dark"] .chat-acts button:hover{background:rgba(var(--c1-rgb),.28)}
html[data-theme="dark"] .chat-msg.ai b{color:#eef2ff}
@media (prefers-reduced-motion:reduce){.chat-acts button{transition:none}.chat-acts button:hover{transform:none}}


.gm-seg{margin:0 0 16px}
.gm-hero{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.gm-hero .em{font-size:32px;line-height:1;flex:none}
.gm-hero h3{margin:0 0 4px;font-size:18px}
.gm-hero p{margin:0;font-size:13.5px;line-height:1.55}
.gm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.gm-card{position:relative;border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:10px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-s);overflow:hidden}
.gm-card .gm-em{font-size:34px;line-height:1}
.gm-card h4{margin:0;font-size:16.5px;letter-spacing:-.01em}
.gm-card .gm-d{margin:0;font-size:13px;line-height:1.5;color:var(--muted);font-weight:600;flex:1}
.gm-tag{align-self:flex-start;background:var(--c1-tint);color:var(--c1-txt);border-radius:20px;
  padding:4px 11px;font-size:11.5px;font-weight:800;line-height:1.3}
.gm-rec{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--muted);
  font-variant-numeric:tabular-nums;min-height:18px}
.gm-rec b{color:var(--c1-txt)}
.gm-new{position:absolute;top:14px;right:14px;background:var(--c2);color:#5A3A00;border-radius:20px;
  padding:3px 9px;font-size:10.5px;font-weight:900;letter-spacing:.4px;text-transform:uppercase}
.gm-card .btn{width:100%;justify-content:center}
html[data-theme="dark"] .gm-tag{background:rgba(var(--c1-rgb),.24);color:#CFE4F8}
html[data-theme="dark"] .gm-new{background:var(--c2);color:#3A2500}
@media(max-width:520px){ .gm-grid{grid-template-columns:1fr} .gm-card{padding:16px} }


/* ===== Повна сторінка тесту / домашки (HWF) ===== */
.hwf{max-width:1180px;margin:0 auto}
.hwf-hero{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:18px 20px;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--c1-d),var(--c1));color:#fff;box-shadow:var(--shadow);margin-bottom:14px}
.hwf-hero .em{font-size:32px;line-height:1}
.hwf-htitle{font-weight:900;font-size:19px;letter-spacing:-.01em}
.hwf-hsub{opacity:.93;font-weight:700;font-size:13px;margin-top:2px}
.hwf-prog{margin:0 0 16px}
.hwf-prow{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.hwf-prow .mut{margin-left:auto;text-align:right}
.hwf-pn{font-weight:900;font-size:13px;color:var(--ink)}
.hwf-pn b{color:var(--c1-txt)}
.hwf-pbar{position:relative;height:12px;border-radius:99px;background:var(--c1-wash);overflow:visible}
.hwf-pbar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--c1),var(--c1-l));transition:width .28s ease}
.hwf-pstar{position:absolute;top:50%;right:-4px;transform:translateY(-50%);font-size:15px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
.hwf-grid{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:16px;align-items:start}
.hwf-side{position:sticky;top:74px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-s);padding:14px}
.hwf-timer{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;padding:10px 12px;
  background:var(--c1-wash);color:var(--c1-txt);font-weight:900;font-variant-numeric:tabular-nums;font-size:20px;letter-spacing:.02em}
.hwf-timer.warn{background:var(--orange-bg);color:var(--orange)}
.hwf-timer.hot{background:var(--red-bg,rgba(255,107,107,.14));color:var(--red)}
.hwf-timer .lb{font-size:11px;font-weight:800;opacity:.75;letter-spacing:.02em}
.hwf-sbtns{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.hwf-sbtns .btn{width:100%;justify-content:center}
.hwf-nt{font-weight:900;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.hwf-nums{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.hwf-n{height:36px;border-radius:12px;border:2px solid transparent;background:var(--bg2);color:var(--ink);
  font-weight:900;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease,background .16s ease,border-color .16s ease;padding:0}
.hwf-n:hover{transform:translateY(-1px)}
.hwf-n.seen{background:var(--c1-wash);color:var(--c1-txt)}
.hwf-n.ans{background:var(--c1-pale);color:var(--c1-txt)}
.hwf-n.ok{background:var(--green-bg);color:var(--green)}
.hwf-n.no{background:var(--orange-bg);color:var(--red)}
.hwf-n.warn{box-shadow:0 0 0 3px rgba(255,107,107,.28)}
.hwf-n.cur{border-color:var(--c1);color:var(--c1-txt)}
.hwf-lg{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:10px}
.hwf-lg span{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;color:var(--muted)}
.hwf-lg i{width:11px;height:11px;border-radius:4px;display:block}
.hwf-card{border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-s);padding:18px 20px;margin-bottom:14px}
.hwf-qh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.hwf-qn{font-weight:900;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.hwf-pts{font-weight:900;font-size:12.5px;padding:4px 10px;border-radius:99px;background:var(--bg2);color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.hwf-pts.ok{background:var(--green-bg);color:var(--green)}
.hwf-pts.no{background:var(--orange-bg);color:var(--red)}
.hwf-tag{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:11.5px;color:var(--c1-txt);
  background:var(--c1-wash);border-radius:99px;padding:3px 9px;margin-bottom:8px}
.hwf-q{font-weight:400;font-size:16px;line-height:1.55;color:var(--ink);margin:0 0 4px}
.hwf-q b,.hwf-q strong{font-weight:800}
.hw-qt{font-weight:400;font-size:15.5px;line-height:1.55;color:var(--ink);margin:0 0 8px}
.hw-qt b,.hw-qt strong{font-weight:800}
.hwf-help{font-size:12.5px;font-weight:700;color:var(--muted);margin:6px 0 12px}
.hwf-a{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:15px;background:var(--bg2);
  margin-top:8px;cursor:pointer;border:2px solid transparent;transition:background .15s ease,border-color .15s ease,transform .12s ease}
.hwf-a:hover{transform:translateX(2px)}
.hwf-a>i{flex:0 0 26px;height:26px;border-radius:9px;background:var(--card);display:flex;align-items:center;justify-content:center;
  font-style:normal;font-weight:900;font-size:12.5px;color:var(--muted)}
.hwf-a>span{flex:1;font-weight:700;font-size:14.5px;line-height:1.45;color:var(--ink);min-width:0}
.hwf-a.on{background:var(--c1-wash);border-color:var(--c1)}
.hwf-a.on>i{background:var(--c1-btn);color:#fff}
.hwf-a.ok{background:var(--green-bg);border-color:var(--green)}
.hwf-a.ok>i{background:var(--green);color:#fff}
.hwf-a.no{background:var(--orange-bg);border-color:var(--red)}
.hwf-a.no>i{background:var(--red);color:#fff}
.hwf-a.lock{cursor:default}
.hwf-a.lock:hover{transform:none}
.hwf-sc{font-weight:800;font-size:12px;color:var(--muted);margin-top:8px}
.hwf-in{width:100%;max-width:230px;margin-top:10px;padding:11px 13px;border-radius:14px;border:2px solid var(--line);background:var(--card);
  color:var(--ink);font-weight:800;font-size:15px;outline:none;transition:border-color .15s ease}
.hwf-in:focus{border-color:var(--c1)}
.hwf-in.ok{border-color:var(--green);background:var(--green-bg)}
.hwf-in.no{border-color:var(--red);background:var(--orange-bg)}
.hwf-two{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}
.hwf-two>div{flex:1;min-width:150px}
.hwf-two label{display:block;font-weight:900;font-size:11.5px;color:var(--muted);margin-bottom:5px}
/* відповідність: два стовпці на десктопі */
.hwf-m{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:12px;margin-top:10px}
.hwf-mc{border-radius:16px;background:var(--bg2);padding:10px}
.hwf-mh{font-weight:900;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:2px 0 8px}
.hwf-mrow{display:flex;gap:8px;align-items:center;padding:7px 8px;border-radius:12px;background:var(--card);margin-bottom:6px}
.hwf-mrow:last-child{margin-bottom:0}
.hwf-mn{flex:0 0 24px;height:24px;border-radius:8px;background:var(--c1-wash);color:var(--c1-txt);display:flex;
  align-items:center;justify-content:center;font-weight:900;font-size:12px}
.hwf-mt{flex:1;font-weight:700;font-size:13.5px;color:var(--ink);line-height:1.4;min-width:0}
.hwf-sel{flex:0 0 62px;padding:6px 6px;border-radius:10px;border:2px solid var(--line);background:var(--card);
  color:var(--ink);font-weight:900;font-size:13px;outline:none}
.hwf-sel:focus{border-color:var(--c1)}
.hwf-mrow.ok{background:var(--green-bg)}
.hwf-mrow.no{background:var(--orange-bg)}
.hwf-o{display:flex;gap:8px;align-items:flex-start;padding:7px 8px;border-radius:12px;background:var(--card);margin-bottom:6px}
.hwf-o:last-child{margin-bottom:0}
.hwf-o>i{flex:0 0 24px;height:24px;border-radius:8px;background:var(--c2);color:var(--ink);display:flex;
  align-items:center;justify-content:center;font-style:normal;font-weight:900;font-size:12px}
.hwf-o>span{flex:1;font-weight:700;font-size:13.5px;color:var(--ink);line-height:1.4;min-width:0}
/* дії під питанням */
.hwf-acts{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.hwf-acts .btn{min-width:132px;justify-content:center}
/* підказки */
.hwf-hz{margin-top:14px}
.hwf-hbtn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;border-radius:14px;padding:8px 13px;
  border:1px solid var(--line);background:transparent;color:var(--muted);font-weight:800;font-size:12.5px;
  transition:color .15s ease,border-color .15s ease}
.hwf-hbtn:hover{color:var(--ink);border-color:var(--muted)}
.hwf-hbtn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.hwf-hbtn i{font-style:normal;font-weight:800;font-size:12px;opacity:.75}
.hwf-hbox{border-radius:16px;background:var(--c2-bg,rgba(255,206,69,.16));padding:12px 14px;margin:9px 0 14px;
  font-weight:400;font-size:14px;line-height:1.55;color:var(--ink);animation:hwfPop .3s ease}
.hwf-hbox b,.hwf-hbox strong{font-weight:800}
.hwf-hbox b{display:block;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
@keyframes hwfPop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.hwf-coin{position:fixed;z-index:9999;font-weight:900;font-size:17px;color:var(--c3);pointer-events:none;
  animation:hwfFly 1s cubic-bezier(.2,.7,.3,1) forwards;text-shadow:0 2px 8px rgba(0,0,0,.16)}
@keyframes hwfFly{0%{opacity:0;transform:translateY(6px) scale(.85)}18%{opacity:1;transform:translateY(-4px) scale(1.12)}
  100%{opacity:0;transform:translateY(-52px) scale(.95)}}
/* опитування учня */
.hwf-sv{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.hwf-svl{font-weight:800;font-size:12px;color:var(--muted);margin-right:2px}
.hwf-chip{border:1.5px solid var(--line);background:var(--card);color:var(--muted);border-radius:99px;padding:7px 13px;
  font-weight:800;font-size:12.5px;cursor:pointer;transition:transform .12s ease,background .15s ease,color .15s ease,border-color .15s ease}
.hwf-chip:hover{transform:translateY(-1px)}
.hwf-chip.on{background:var(--c1-btn);border-color:var(--c1-btn);color:#fff}
/* формули, зображення, фігури */
.hwf-tex{font-family:"KaTeX_Main","Cambria Math","Times New Roman",Georgia,serif;font-style:italic;font-size:1.04em;white-space:nowrap}
.hwf-tex sub,.hwf-tex sup{font-style:normal;font-size:.7em}
.hwf-fig{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;
  margin:0 .12em;color:var(--ink);font-style:normal;line-height:1}
.hwf-lnk{color:var(--c1-txt);text-decoration:underline;text-underline-offset:2px}
.hwa-tb .hwf-fig{width:15px;height:15px;vertical-align:-.15em;color:currentColor}
.hwf-img{display:block;max-width:100%;max-height:300px;border-radius:14px;margin:10px 0;cursor:zoom-in;
  box-shadow:var(--shadow-s);background:var(--bg2)}
.hwf-a .hwf-img,.hwf-o .hwf-img{max-height:130px;margin:6px 0 2px}
.hwf-lb{position:fixed;inset:0;z-index:9998;background:rgba(12,16,32,.86);display:flex;align-items:center;
  justify-content:center;padding:24px;cursor:zoom-out;animation:hwfFade .18s ease}
@keyframes hwfFade{from{opacity:0}to{opacity:1}}
.hwf-lb img{max-width:100%;max-height:100%;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.hwf-lb .x{position:absolute;top:16px;right:18px;width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;font-size:18px;font-weight:900}
/* діалоги */
.hwf-dlg h3{margin:0 0 8px;font-size:19px;font-weight:900;color:var(--ink)}
.hwf-dlg p{margin:0 0 4px;font-weight:700;font-size:14px;line-height:1.5;color:var(--muted)}
.hwf-dlg .row{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.hwf-dlg .row .btn{flex:1;min-width:126px;justify-content:center}
.hwf-mis{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.hwf-mis span{min-width:30px;height:30px;padding:0 8px;border-radius:10px;background:var(--orange-bg);color:var(--red);
  font-weight:900;font-size:12.5px;display:flex;align-items:center;justify-content:center}
/* темна тема */
html[data-theme="dark"] .hwf-n{background:rgba(255,255,255,.07);color:var(--dink)}
html[data-theme="dark"] .hwf-n.seen,html[data-theme="dark"] .hwf-n.ans{background:rgba(var(--c1-rgb),.24);color:#CFE9FF}
html[data-theme="dark"] .hwf-n.ok{background:rgba(55,217,160,.2);color:#7BEFC7}
html[data-theme="dark"] .hwf-n.no{background:rgba(255,107,107,.2);color:#FFA8A8}
html[data-theme="dark"] .hwf-a,html[data-theme="dark"] .hwf-mc{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .hwf-a>span,html[data-theme="dark"] .hwf-mt,html[data-theme="dark"] .hwf-o>span,
html[data-theme="dark"] .hwf-q,html[data-theme="dark"] .hwf-hbox{color:var(--dink)}
html[data-theme="dark"] .hwf-a>i,html[data-theme="dark"] .hwf-mrow,html[data-theme="dark"] .hwf-o,
html[data-theme="dark"] .hwf-in,html[data-theme="dark"] .hwf-sel,html[data-theme="dark"] .hwf-chip{background:rgba(255,255,255,.09);color:var(--dink);border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .hwf-a.on>i{background:var(--c1-btn);color:#fff}
html[data-theme="dark"] .hwf-a.ok>i{background:var(--green);color:#08221A}
html[data-theme="dark"] .hwf-a.no>i{background:var(--red);color:#2A0D0D}
html[data-theme="dark"] .hwf-a.on{background:rgba(var(--c1-rgb),.2)}
html[data-theme="dark"] .hwf-a.ok,html[data-theme="dark"] .hwf-mrow.ok{background:rgba(55,217,160,.16)}
html[data-theme="dark"] .hwf-a.no,html[data-theme="dark"] .hwf-mrow.no{background:rgba(255,107,107,.16)}
html[data-theme="dark"] .hwf-pts{background:rgba(255,255,255,.09);color:var(--dmuted,#A9B0C6)}
html[data-theme="dark"] .hwf-timer{background:rgba(var(--c1-rgb),.22);color:#CFE9FF}
html[data-theme="dark"] .hwf-hbox{background:rgba(255,206,69,.15)}
html[data-theme="dark"] .hwf-o>i{background:var(--c2);color:#2A2A3C}
html[data-theme="dark"] .hwf-dlg h3{color:var(--dink)}
/* планшет / телефон */
@media(max-width:900px){
  .hwf-grid{grid-template-columns:1fr}
  .hwf-side{position:static;order:-1;display:grid;grid-template-columns:1fr;gap:0}
  .hwf-nums{grid-template-columns:repeat(auto-fill,minmax(38px,1fr))}
  .hwf-m{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hwf-card{padding:15px 15px}
  .hwf-hero{padding:15px 16px}
  .hwf-q{font-size:15.5px}
  .hwf-acts .btn{flex:1;min-width:0}
  .hwf-in{max-width:100%}
}

/* --- доповнення --- */
.hwf-col{min-width:0}
.mut{color:var(--muted);font-weight:700}
.hwf-imgw{margin:10px 0}
.hwf-exp{margin:12px 0 0;padding:11px 13px;border-radius:14px;background:var(--c1-wash);border:1px solid var(--c1-pale);font-size:14px;font-weight:650;line-height:1.55;color:var(--ink)}
.hwf-done{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:13px;color:var(--green);padding:0 4px}
.hwf-poor{font-size:12px;font-weight:700;color:var(--muted);margin-top:6px}
.hwf-tw{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.hwf-tw>span{font-size:12.5px;font-weight:800;color:var(--muted)}
.hwf-rv{padding:9px 12px;border-radius:12px;margin:0 0 7px;font-weight:700;font-size:14px;border:1px solid var(--line);background:var(--surface)}
.hwf-rv.ok{border-color:var(--green);background:var(--green-bg)}
.hwf-rv.no{border-color:var(--red);background:var(--orange-bg)}
.hwf-lgd{width:12px;height:12px;border-radius:5px;display:inline-block;border:1px solid var(--line);background:var(--surface);flex:none}
.hwf-lgd.cur{border:2px solid var(--c1);background:transparent}
.hwf-lgd.seen{background:var(--c1-wash);border-color:var(--c1-pale)}
.hwf-lgd.ok{background:var(--green);border-color:var(--green)}
.hwf-lgd.no{background:var(--red);border-color:var(--red)}
.hwf-n.part{background:var(--c2);border-color:var(--c2);color:var(--ink)}
.hwf-lbx{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:17px;cursor:pointer}
.hwf-sum{margin:0 0 14px}
.hwf-sum h3{margin:0 0 10px;font-size:16px}
.hwf-sumr{display:flex;flex-wrap:wrap;gap:10px 18px;font-weight:700;font-size:13.5px;color:var(--ink)}
.hwf-sumr b{font-weight:900}
html[data-theme="dark"] .hwf-rv{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .hwf-exp{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
@media(max-width:560px){ .hwf-two{flex-direction:column} }

/* --- полірування Full-сторінки --- */
.hwf-a{width:100%;text-align:left}
.hwf-two{justify-content:flex-start}
.hwf-two>div{flex:0 1 240px;min-width:150px}
@media(max-width:900px){
  .hwf-side{grid-template-columns:minmax(0,128px) minmax(0,1fr);align-items:stretch;gap:9px 10px}
  .hwf-timer{margin:0}
  .hwf-sbtns{margin:0;flex-direction:row}
  .hwf-sbtns .btn{flex:1;min-width:0}
  .hwf-sbtns:first-child{grid-column:1/-1}
  .hwf-nt{grid-column:1/-1;margin-top:2px}
  .hwf-nums,.hwf-lg{grid-column:1/-1}
}
@media(max-width:400px){
  .hwf-side{grid-template-columns:1fr}
  .hwf-timer{grid-column:1/-1}
  .hwf-sbtns{grid-column:1/-1}
}
/* --- вікно розминки (крок 2Б-2, частина В, PR 4; student/hw-full.js,
   hwfWinOpen): картка рушія в маленькому вікні — без другої рамки; номери
   завдань і «Завершити» — одним рядком над нею --- */
.modal.hwf-wm .hwf-card{background:none!important;border:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;padding:0;margin:0}
/* номер питання вже є в шапці вікна («n/N») — у картці лишаємо самі бали */
.modal.hwf-wm .hwf-qn{display:none}
.modal.hwf-wm .hwf-qh{justify-content:flex-end}
.hwf-wbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.hwf-wbar .hwf-nums{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;min-width:0}
.hwf-wbar .hwf-n{width:36px;height:34px}
.hwf-wbar>.btn{margin-left:auto}


/* ===== Stage 2: налаштування тесту + візуальний редактор ===== */
.hwa-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.hwa-row>.a-lbl{margin:0;width:210px;flex:none}
.hwa-row>.a-inp{flex:1;min-width:150px;margin:0}
.hwa-sec{font-weight:900;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.hwa-sec:first-child{margin-top:0;padding-top:0;border-top:0}
.hwa-sum{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}
.hwa-chip{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--c1-wash);color:var(--c1-d);border:1px solid var(--c1-pale)}
.hwa-chip.off{background:var(--bg2);color:var(--muted);border-color:var(--line)}

/* панель інструментів редактора */
.hwa-ed{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);margin:0}
.hwa-tb{display:flex;flex-wrap:wrap;gap:3px;padding:5px 6px;background:var(--bg2);border-bottom:1px solid var(--line)}
.hwa-tb button{width:30px;height:28px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ink);font-weight:800;font-size:13.5px;line-height:1;cursor:pointer;transition:background .15s,border-color .15s}
.hwa-tb button:hover{background:var(--card);border-color:var(--line)}
.hwa-tb button:active{transform:translateY(1px)}
.hwa-tb button:focus-visible{outline:2px solid var(--c1);outline-offset:1px}
.hwa-tb .w{width:auto;padding:0 9px;font-size:12px}
.hwa-tb i{width:1px;height:20px;background:var(--c1-pale);margin:4px 3px;flex:none}
.hwa-ed textarea{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-weight:700;font-size:14px;line-height:1.5;padding:9px 11px;resize:vertical;display:block;min-height:66px}
.hwa-pv{border-top:1px dashed var(--line);padding:8px 11px;font-weight:700;font-size:13.5px;line-height:1.55;color:var(--ink);background:var(--bg3)}
.hwa-pv:empty{display:none}
.hwa-pvl{font-weight:900;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:3px}
.hwa-pv img{max-width:160px;border-radius:8px;display:block;margin:4px 0}
.hwa-u2{text-decoration:underline;text-decoration-style:double;text-underline-offset:3px}
.hwf-u2{text-decoration:underline;text-decoration-style:double;text-underline-offset:3px}
html[data-theme="dark"] .hwa-ed{background:var(--dcard);border-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .hwa-tb{background:rgba(255,255,255,.05);border-bottom-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .hwa-tb button:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .hwa-tb i{background:rgba(255,255,255,.14)}
html[data-theme="dark"] .hwa-pv{background:rgba(255,255,255,.04);border-top-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .hwa-chip{background:rgba(var(--c1-rgb),.16);color:var(--c1-mid);border-color:rgba(var(--c1-rgb),.34)}
html[data-theme="dark"] .hwa-chip.off{background:rgba(255,255,255,.05);color:var(--muted);border-color:rgba(255,255,255,.10)}
@media(max-width:560px){ .hwa-row>.a-lbl{width:100%} }



/* HWM · міні-тест у вікні (.hwm-*, .lm-warm) прибрано 29.09.2026 разом із міні-домашкою */



/* окрема сторінка входу для команди — /admin */
.ag-wrap{width:100%;flex:1 1 auto;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:28px 18px;
  background:radial-gradient(900px 520px at 10% -12%,var(--c1-wash),transparent 62%),radial-gradient(760px 460px at 104% 112%,var(--c1-tint),transparent 64%)}
.ag-card{width:100%;max-width:412px;background:var(--card);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow);padding:30px 26px 24px}
.ag-lg{text-align:center;font-size:25px;font-weight:900;letter-spacing:-.02em;color:#282A3C}
.ag-lg i{font-style:normal;color:#3C7FCB}
html[data-theme="dark"] .ag-lg{color:#EDF1F7}
html[data-theme="dark"] .ag-lg i{color:#6BA8E4}
.ag-badge{display:flex;align-items:center;justify-content:center;gap:6px;margin:15px auto 3px;width:max-content;font-size:11px;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c1-txt);background:var(--c1-wash);border-radius:999px;padding:7px 15px}
.ag-inp{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);font-size:15px;background:var(--surface);color:var(--ink);margin-top:10px}
.ag-inp:focus{outline:none;border-color:var(--c1);box-shadow:0 0 0 3px var(--c1-wash)}
.ag-g{width:100%;margin-top:16px;padding:12px 14px;border-radius:12px;background:#fff;color:#333;border:1px solid var(--line);
  font-size:14.5px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:box-shadow .18s ease}
.ag-g:hover{box-shadow:var(--shadow-s)}
.ag-g b{color:#4285F4;font-size:17px;font-weight:900}
.ag-or{text-align:center;font-weight:800;font-size:12px;color:var(--muted);margin:13px 0 0}
.ag-note{margin-top:8px;text-align:center;font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.45}
.ag-msg{margin-top:11px;padding:10px 12px;border-radius:12px;font-weight:800;font-size:13px;line-height:1.45}
.ag-msg.bad{background:rgba(255,84,112,.13);color:var(--red)}
.ag-msg.ok{background:rgba(37,194,110,.13);color:var(--green)}
.ag-msg.note{background:var(--c1-wash);color:var(--ink);font-size:12px;font-weight:700}
.ag-me{display:flex;align-items:center;gap:11px;margin-top:16px;padding:13px 14px;border-radius:14px;background:var(--c1-wash)}
.ag-me.no{background:rgba(255,84,112,.10)}
.ag-me .em{font-size:26px;line-height:1}
.ag-me .nm{font-weight:900;font-size:14.5px;color:var(--ink);word-break:break-all}
.ag-me .rl{font-weight:700;font-size:12px;color:var(--muted);margin-top:1px}
.ag-foot{text-align:center;margin-top:15px;font-size:12.5px;font-weight:700;color:var(--muted)}
.ag-foot a{color:var(--c1-txt);cursor:pointer;text-decoration:none;border-bottom:1px solid transparent}
.ag-foot a:hover{border-bottom-color:currentColor}
.ag-sep{height:1px;background:var(--line);margin:16px 0 0}
html[data-theme="dark"] .ag-card{background:rgba(var(--dcard),.72);border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 50px rgba(0,0,0,.42)}
html[data-theme="dark"] .ag-g{background:rgba(255,255,255,.94)}
@media (max-width:430px){ .ag-card{padding:26px 20px 22px} .ag-lg{font-size:23px} }


/* картка курсу очима учня (модалка прев'ю) */
.lp-card{margin-top:12px;border-radius:20px;border:1.5px solid var(--line);padding:16px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.02))}
.lp-card:before{content:'';position:absolute;inset:0 0 auto 0;height:5px;background:var(--lp)}
.lp-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.lp-em{font-size:26px}
.lp-tag{font-size:11px;font-weight:900;padding:3px 9px;border-radius:99px;background:rgba(var(--c1-rgb),.14);color:var(--c1-txt)}
.lp-card h4{margin:0 0 4px;font-size:18px;font-weight:900;line-height:1.25}
.lp-card p{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.lp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.lp-tags span{font-size:11px;font-weight:900;padding:3px 9px;border-radius:99px;border:1.5px solid var(--line);color:var(--muted)}
.lp-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;font-weight:800;color:var(--muted);margin-bottom:12px}
.lp-btm{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lp-pr{font-size:20px;font-weight:900}
.lp-pr span{font-size:12px;font-weight:800;color:var(--muted)}
.lp-go{margin-left:auto;padding:10px 20px;border-radius:13px;background:var(--lp);color:#fff;font-weight:900;font-size:13.5px}
/* ======================= ПРИГОДИ · квест-двигун =======================
   Тон світу живе на <html data-qtone="...">, тому змінні бачать і сцена,
   і модалки, які висять на <body>. Усі імена з префіксом --qz-, щоб
   нічого не перетнулося зі змінними платформи. */

/* ---------- ТОН 1: світлий флет (за замовчуванням, у кольорах палітри) ---------- */
[data-qtone="flat"]{
  --qz-ink:#1B2340;--qz-muted:#6C7796;--qz-acc:var(--c1);--qz-accink:#fff;
  --qz-accsoft:rgba(var(--c1-rgb),.13);
  --qz-panel:#FFFFFF;--qz-line:#E6EAF5;--qz-chip:#F2F5FC;
  --qz-optbg:#F7FAFF;--qz-optline:#DCE3F4;--qz-cardbg:#FFFFFF;--qz-cardline:#E6EAF5;
  --qz-fbbg:#F3F6FD;--qz-mapbg:#EDF2FD;--qz-tagbg:#FFFFFF;
  --qz-nodebg:#FFFFFF;--qz-nodeline:#DDE4F5;--qz-nodesh:0 6px 18px rgba(37,52,110,.14);
  --qz-ok:#12B981;--qz-okbg:#E4FBF2;--qz-okink:#0A7B55;
  --qz-no:#F4586B;--qz-nobg:#FFECEE;--qz-noink:#C22B3E;
  --qz-sh:0 8px 26px rgba(37,52,110,.10);
  --qz-stage:linear-gradient(178deg,#F8FBFF 0%,#EDF2FD 55%,#E4ECFB 100%);
  --qz-h1:#D7E2FA;--qz-h2:#C3D3F3;--qz-h3:#AFC4EE;--qz-sun:#FFD48A;
  --qz-glow1:rgba(var(--c1-rgb),.30);--qz-glow2:rgba(255,206,69,.32);
  --qz-ovbg:rgba(20,28,52,.62);--qz-serif:inherit;--qz-lton:#fff
}
html[data-theme="dark"][data-qtone="flat"]{
  --qz-ink:var(--ink);--qz-muted:var(--muted);
  --qz-panel:rgba(24,29,47,.9);--qz-line:rgba(255,255,255,.13);--qz-chip:rgba(255,255,255,.06);
  --qz-optbg:rgba(255,255,255,.05);--qz-optline:rgba(255,255,255,.15);
  --qz-cardbg:#171B29;--qz-cardline:rgba(255,255,255,.14);--qz-fbbg:rgba(255,255,255,.05);
  --qz-mapbg:rgba(9,12,22,.5);--qz-tagbg:rgba(22,27,45,.92);
  --qz-nodebg:#1B2133;--qz-nodeline:rgba(255,255,255,.17);--qz-nodesh:0 8px 22px rgba(0,0,0,.45);
  --qz-okbg:rgba(18,185,129,.17);--qz-okink:#6EE7B7;
  --qz-nobg:rgba(244,88,107,.16);--qz-noink:#FFA6B1;
  --qz-sh:0 12px 34px rgba(0,0,0,.34);
  --qz-stage:linear-gradient(178deg,rgba(16,21,38,.78),rgba(12,16,30,.9) 58%,rgba(9,12,24,.95));
  --qz-h1:rgba(255,255,255,.075);--qz-h2:rgba(255,255,255,.05);--qz-h3:rgba(255,255,255,.035);
  --qz-sun:rgba(var(--c1-rgb),.34);
  --qz-glow1:rgba(var(--c1-rgb),.26);--qz-glow2:rgba(var(--c2-rgb),.14);
  --qz-ovbg:rgba(4,6,12,.80)
}

/* ---------- ТОН 2: графічний роман ---------- */
[data-qtone="roman"]{
  --qz-ink:#F4F7FF;--qz-muted:#9BA7C8;--qz-acc:#F5C243;--qz-accink:#1A1206;
  --qz-accsoft:rgba(245,194,67,.16);
  --qz-panel:rgba(20,24,38,.82);--qz-line:rgba(255,255,255,.13);--qz-chip:rgba(255,255,255,.07);
  --qz-optbg:#1B2033;--qz-optline:rgba(255,255,255,.16);--qz-cardbg:#131727;--qz-cardline:rgba(255,255,255,.14);
  --qz-fbbg:#1A1F31;--qz-mapbg:rgba(9,12,22,.62);--qz-tagbg:rgba(14,17,28,.86);
  --qz-nodebg:rgba(28,33,52,.94);--qz-nodeline:rgba(255,255,255,.19);--qz-nodesh:0 8px 24px rgba(0,0,0,.5);
  --qz-ok:#39D98A;--qz-okbg:rgba(57,217,138,.16);--qz-okink:#8AF0BE;
  --qz-no:#FF6B6B;--qz-nobg:rgba(255,107,107,.15);--qz-noink:#FFA9A9;
  --qz-sh:0 14px 44px rgba(0,0,0,.42);
  --qz-stage:linear-gradient(178deg,#080A12 0%,#0E1322 42%,#151A2E 72%,#0A0D18 100%);
  --qz-h1:#1A2136;--qz-h2:#131A2C;--qz-h3:#0A0E1A;--qz-sun:#F5C243;
  --qz-glow1:rgba(59,79,168,.55);--qz-glow2:rgba(138,75,196,.4);
  --qz-ovbg:rgba(6,7,14,.84);--qz-serif:inherit;--qz-lton:#06251A
}

/* ---------- ТОН 3: ретро-карта ---------- */
[data-qtone="retro"]{
  --qz-ink:#3A2A16;--qz-muted:#8A7350;--qz-acc:#B3652A;--qz-accink:#FFF6E7;
  --qz-accsoft:rgba(179,101,42,.13);
  --qz-panel:#F7ECD5;--qz-line:#D9C29A;--qz-chip:#EFE0C2;
  --qz-optbg:#FDF7EA;--qz-optline:#D2B98E;--qz-cardbg:#FBF3E2;--qz-cardline:#D9C29A;
  --qz-fbbg:#F3E7CD;--qz-mapbg:#EFDFBE;--qz-tagbg:#F7ECD5;
  --qz-nodebg:#FCF5E6;--qz-nodeline:#C9AE81;--qz-nodesh:0 5px 14px rgba(90,64,26,.24);
  --qz-ok:#5C8A3C;--qz-okbg:#E7F0D8;--qz-okink:#3D6127;
  --qz-no:#B44A3A;--qz-nobg:#F8E0DA;--qz-noink:#8B3226;
  --qz-sh:0 8px 24px rgba(90,64,26,.17);
  --qz-stage:radial-gradient(circle at 18% 22%,rgba(160,120,60,.13),transparent 42%),
    radial-gradient(circle at 82% 74%,rgba(140,100,50,.14),transparent 46%),
    linear-gradient(170deg,#F2E3C4,#E7D3AC 60%,#DCC79C);
  --qz-h1:#C9AE81;--qz-h2:#B99C6E;--qz-h3:#A5854F;--qz-sun:#E7CFA0;
  --qz-glow1:transparent;--qz-glow2:transparent;
  --qz-ovbg:rgba(58,42,22,.72);--qz-serif:Georgia,"Times New Roman",serif;--qz-lton:#FFF6E7
}

/* ---------- сцена ---------- */
.qz-stage{position:relative;border-radius:24px;overflow:hidden;background:var(--qz-stage);
  padding:16px;margin:-4px 0 0;color:var(--qz-ink)}
.qz-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.qz-glow{position:absolute;border-radius:50%;filter:blur(70px)}
.qz-scene{position:relative;z-index:5}
.qz-hud{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:16px;
  margin-bottom:14px;background:var(--qz-panel);border:1px solid var(--qz-line);box-shadow:var(--qz-sh)}
.qz-hud .ttl{font-weight:900;font-size:16px;color:var(--qz-ink);font-family:var(--qz-serif)}
.qz-hud .sub{font-size:12px;color:var(--qz-muted);font-weight:700;margin-top:2px}
.qz-hud .sp{flex:1}
.qz-back{border:1px solid var(--qz-line);background:var(--qz-chip);color:var(--qz-ink);
  font:800 13px/1 inherit;padding:9px 13px;border-radius:11px;cursor:pointer}@media (hover:hover) and (pointer:fine){.qz-back:hover{border-color:var(--qz-acc);color:var(--qz-acc)}}
.qz-res{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:11px;
  background:var(--qz-chip);border:1px solid var(--qz-line);font-weight:900;font-size:14px;color:var(--qz-ink)}
#qzcoinbox.pop{animation:qzpop .42s cubic-bezier(.2,1.6,.4,1)}
@keyframes qzpop{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1)}}

/* ---------- карта ---------- */
.qz-mapwrap{position:relative;border-radius:20px;overflow:hidden;background:var(--qz-mapbg);
  border:1px solid var(--qz-line);box-shadow:var(--qz-sh)}
[data-qtone="retro"] .qz-mapwrap{border-width:2px}
.qz-map{position:relative;width:100%;height:560px}
.qz-map svg.qz-path{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.qz-mdec{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.qz-mdec svg.h{position:absolute;left:0;width:100%;height:auto;display:block}
.qz-mdec .star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;animation:qztw 3.4s ease-in-out infinite}
@keyframes qztw{0%,100%{opacity:.18}50%{opacity:.85}}
/* Сонце у світі пригод колись ділило клас .sun із грою «полювання» і через
   цей збіг задарма діставало її анімації. 22.09.2026 гра переїхала на
   .candy — тож погойдування описуємо тут явно, інакше фон завмер би. */
.qz-mdec .sun{position:absolute;border-radius:50%;animation:qzSunFloat 3.2s ease-in-out .5s infinite}
@keyframes qzSunFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.qz-mdec .fog{position:absolute;left:0;right:0;bottom:0;height:46%}
.qz-node{position:absolute;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;
  align-items:center;gap:7px;cursor:pointer;background:none;border:0;padding:0;font:inherit}
.qz-dot{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:23px;
  border:2px solid var(--qz-nodeline);background:var(--qz-nodebg);color:var(--qz-ink);
  box-shadow:var(--qz-nodesh);transition:transform .18s}@media (hover:hover) and (pointer:fine){.qz-node:hover .qz-dot{transform:scale(1.09)}}
.qz-node .nm{font-size:11.5px;font-weight:900;color:var(--qz-ink);text-align:center;max-width:150px;line-height:1.25;
  padding:4px 9px;border-radius:9px;background:var(--qz-tagbg);border:1px solid var(--qz-line);display:block}
.qz-node .nm .nmt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  max-height:2.5em;word-break:break-word}
.qz-node.done .qz-dot{background:var(--qz-okbg);border-color:var(--qz-ok);color:var(--qz-okink)}
.qz-node.lock{cursor:not-allowed}
.qz-node.lock .qz-dot{opacity:.42;filter:grayscale(.6)}
.qz-node.lock .nm{opacity:.5}
.qz-node.cur .qz-dot{border-color:var(--qz-acc);box-shadow:0 0 0 6px var(--qz-accsoft),var(--qz-nodesh)}
.qz-node.cur .qz-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--qz-acc);animation:qzring 1.9s ease-out infinite}
@keyframes qzring{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.7);opacity:0}}
.qz-hero{position:absolute;z-index:4;transform:translate(-50%,calc(-100% - 40px));font-size:30px;
  transition:left .7s cubic-bezier(.4,0,.2,1),top .7s cubic-bezier(.4,0,.2,1);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));animation:qzbob 2.6s ease-in-out infinite}
@keyframes qzbob{0%,100%{transform:translate(-50%,calc(-100% - 40px))}50%{transform:translate(-50%,calc(-100% - 47px))}}

/* ---------- смуга епізоду ---------- */
.qz-epi{margin-top:14px;padding:15px 18px;border-radius:16px;background:var(--qz-panel);
  border:1px solid var(--qz-line);box-shadow:var(--qz-sh)}
.qz-epi h3{margin:0 0 4px;font-size:15px;color:var(--qz-ink);font-weight:900;font-family:var(--qz-serif)}
.qz-epi p{margin:0 0 12px;font-size:13px;color:var(--qz-muted);line-height:1.5;font-weight:600}
.qz-bar{height:9px;border-radius:99px;background:var(--qz-chip);overflow:hidden;border:1px solid var(--qz-line)}
.qz-bar i{display:block;height:100%;width:0;background:var(--qz-acc);border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.qz-arts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.qz-art{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:19px;
  background:var(--qz-chip);border:1px dashed var(--qz-line);opacity:.35;transition:.3s}
.qz-art.got{opacity:1;border-style:solid;border-color:var(--qz-acc);background:var(--qz-accsoft)}
.qz-art.got.new{animation:qzpop .5s cubic-bezier(.2,1.6,.4,1)}

/* ---------- модалка питання ---------- */
.qz-ov{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:16px;
  background:var(--qz-ovbg);backdrop-filter:blur(6px)}
.qz-ov.on{display:flex}
.qz-card{width:100%;max-width:640px;border-radius:22px;padding:24px 26px 26px;position:relative;
  background:var(--qz-cardbg);border:1px solid var(--qz-cardline);box-shadow:0 34px 90px rgba(0,0,0,.45);
  animation:qzup .3s cubic-bezier(.2,.9,.3,1);max-height:92svh;overflow:auto;color:var(--qz-ink)}
.qz-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--qz-acc);border-radius:22px 22px 0 0}
@keyframes qzup{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}
.qz-qtop{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.qz-tag{font-size:11.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;
  border-radius:99px;background:var(--qz-accsoft);color:var(--qz-acc);border:1px solid var(--qz-acc);
  max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qz-num{font-size:12.5px;font-weight:900;color:var(--qz-muted)}
.qz-qtop .sp{flex:1}
.qz-x{border:1px solid var(--qz-cardline);background:var(--qz-optbg);color:var(--qz-ink);width:34px;height:34px;
  border-radius:10px;cursor:pointer;font-size:15px;font-weight:900;opacity:.75}@media (hover:hover) and (pointer:fine){.qz-x:hover{opacity:1;border-color:var(--qz-acc)}}
.qz-prog{display:flex;gap:5px;margin-bottom:16px}
.qz-prog i{flex:1;height:5px;border-radius:99px;background:var(--qz-optline)}
.qz-prog i.d{background:var(--qz-acc)}
.qz-qtxt{font-size:20px;font-weight:800;color:var(--qz-ink);line-height:1.5;margin:0 0 18px;font-family:var(--qz-serif)}
.qz-opts{display:grid;gap:10px}
.qz-opt{text-align:left;padding:15px 16px 15px 56px;border-radius:14px;font:700 16px/1.45 inherit;cursor:pointer;
  background:var(--qz-optbg);color:var(--qz-ink);border:2px solid var(--qz-optline);transition:.15s;position:relative;
  min-height:54px;display:flex;align-items:center}
.qz-opt .lt{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;font:900 14px/1 inherit;background:var(--qz-chip);
  border:1px solid var(--qz-optline);color:var(--qz-muted)}@media (hover:hover) and (pointer:fine){.qz-opt:hover:not(:disabled){border-color:var(--qz-acc);background:var(--qz-accsoft)}}@media (hover:hover) and (pointer:fine){.qz-opt:hover:not(:disabled) .lt{border-color:var(--qz-acc);color:var(--qz-acc)}}
.qz-opt:disabled{cursor:default}
.qz-opt.ok{background:var(--qz-okbg);border-color:var(--qz-ok);color:var(--qz-okink)}
.qz-opt.ok .lt{background:var(--qz-ok);border-color:var(--qz-ok);color:var(--qz-lton)}
.qz-opt.no{background:var(--qz-nobg);border-color:var(--qz-no);color:var(--qz-noink)}
.qz-opt.no .lt{background:var(--qz-no);border-color:var(--qz-no);color:var(--qz-lton)}
.qz-fb{margin-top:16px;padding:14px 16px;border-radius:13px;font-size:15px;line-height:1.55;font-weight:600;
  color:var(--qz-ink);background:var(--qz-fbbg);border:1px solid var(--qz-cardline);
  display:none}
.qz-fb.on{display:block;animation:qzup .25s ease}
.qz-fb.good{border-left-color:var(--qz-ok)}
.qz-fb.bad{border-left-color:var(--qz-no)}
.qz-fb b{display:block;font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;
  color:var(--qz-muted);margin-bottom:5px}
.qz-nxt{margin-top:16px;width:100%;padding:15px;border-radius:13px;border:0;cursor:pointer;
  font:900 16px/1 inherit;background:var(--qz-acc);color:var(--qz-accink);display:none}@media (hover:hover) and (pointer:fine){.qz-nxt:hover{filter:brightness(1.07)}}
.qz-nxt.on{display:block}

/* ---------- монети ---------- */
#qzcoins{position:fixed;inset:0;pointer-events:none;z-index:1400}
.qz-coin{position:fixed;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:900;color:#7a4a05;
  background:radial-gradient(circle at 33% 28%,#FFE9A8,#F5C243 45%,#D99A18);
  box-shadow:0 2px 7px rgba(0,0,0,.3),inset 0 -2px 3px rgba(150,90,0,.4)}
.qz-plus{position:fixed;font:900 20px/1 inherit;color:#E9A100;text-shadow:0 2px 10px rgba(0,0,0,.25);
  pointer-events:none;z-index:1401}

/* ---------- фінал вузла ---------- */
.qz-fin{position:fixed;inset:0;z-index:1300;display:none;align-items:center;justify-content:center;padding:16px;
  background:var(--qz-ovbg);backdrop-filter:blur(8px)}
.qz-fin.on{display:flex}
.qz-fcard{max-width:440px;width:100%;text-align:center;padding:32px 26px;border-radius:24px;color:var(--qz-ink);
  background:var(--qz-cardbg);border:1px solid var(--qz-cardline);box-shadow:0 34px 90px rgba(0,0,0,.5);animation:qzup .35s}
.qz-fcard .big{font-size:56px;margin-bottom:8px;animation:qzbob2 2.4s ease-in-out infinite}
@keyframes qzbob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.qz-fcard h2{margin:0 0 8px;font-size:22px;color:var(--qz-ink);font-weight:900;font-family:var(--qz-serif)}
.qz-fcard p{margin:0 0 18px;font-size:14.5px;color:var(--qz-muted);font-weight:600;line-height:1.55}
.qz-fstats{display:flex;gap:10px;margin-bottom:18px}
.qz-fst{flex:1;padding:12px;border-radius:14px;background:var(--qz-fbbg);border:1px solid var(--qz-cardline)}
.qz-fst b{display:block;font-size:20px;color:var(--qz-ink);font-weight:900}
.qz-fst span{font-size:11px;color:var(--qz-muted);font-weight:800;text-transform:uppercase;letter-spacing:.05em}

/* ---------- хаб «Пригоди» ---------- */
.qz-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:14px}
.qz-wcard{position:relative;overflow:hidden;text-align:left;padding:18px;border-radius:20px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-s);transition:.18s;width:100%}@media (hover:hover) and (pointer:fine){.qz-wcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}}
.qz-wcard.soon{opacity:.8;cursor:default;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.qz-wcard.soon h4{color:var(--ink)}
.qz-wcard.soon .d,.qz-wcard.soon .badge{color:var(--muted);-webkit-text-fill-color:var(--muted)}@media (hover:hover) and (pointer:fine){.qz-wcard.soon:hover{transform:none;box-shadow:var(--shadow-s)}}
.qz-wcard .em{font-size:34px;line-height:1}
.qz-wcard h4{font-size:17px;margin:8px 0 4px}
.qz-wcard .d{font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.5}

@media(max-width:700px){
  .qz-stage{padding:12px;border-radius:20px}
  .qz-map{height:1040px}
  .qz-dot{width:48px;height:48px;font-size:20px}
  .qz-node .nm{font-size:10.5px;max-width:104px;padding:3px 7px}
  .qz-hero{font-size:26px}
  .qz-card{padding:20px 16px 22px;border-radius:18px}
  .qz-qtxt{font-size:18px;margin-bottom:16px}
  .qz-opt{font-size:15px;padding:14px 14px 14px 50px;min-height:52px}
  .qz-opt .lt{left:10px;width:28px;height:28px}
  .qz-fb{font-size:14px}}

/* ===== сторінка заняття v3: Vimeo + перелік відео + матеріали ===== */
.v-soon{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;color:#fff}
.v-soon .em{font-size:44px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.v-soon .t1{font-weight:900;font-size:19px;margin-top:8px;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.v-soon .t2{font-weight:700;font-size:13px;opacity:.9;margin-top:6px;max-width:420px;line-height:1.5;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.v-panel.col .v-pbody{display:none}
.v-panel.col.open .v-pbody{display:block}
.v-panel.col .v-phead{cursor:pointer;user-select:none}
.v-panel.col .cv{margin-left:6px;font-size:13px;opacity:.75;transition:transform .2s}
.v-panel.col.open .cv{transform:rotate(180deg)}
.v-vg{padding:9px 14px 3px;font-weight:900;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.v-mt{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(215px,100%),1fr));gap:9px}
.v-mt .mt{display:flex;align-items:center;gap:9px;text-align:left;padding:10px 11px;border-radius:13px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;font:inherit;color:var(--ink);text-decoration:none;transition:.15s;min-width:0}@media (hover:hover) and (pointer:fine){.v-mt .mt:hover{border-color:var(--c1-txt);transform:translateY(-1px);box-shadow:0 6px 16px rgba(var(--c1-rgb),.14)}}
.v-mt .mt .ic{font-size:18px;line-height:1;flex:none}
.v-mt .mt .nm{flex:1;min-width:0;font-weight:800;font-size:13px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
.v-mt .mt .tg{flex:none;font-weight:900;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border:1.5px solid var(--line);border-radius:99px;padding:2px 6px}
/* --- темна тема: панелі сторінки заняття --- */
html[data-theme="dark"] .v-panel{background:rgba(var(--dcard),.62);border:1px solid rgba(255,255,255,.09);box-shadow:0 14px 40px rgba(0,0,0,.35)}
html[data-theme="dark"] .v-mt .mt,html[data-theme="dark"] .v-mat button,html[data-theme="dark"] .v-inp{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);color:var(--ink)}@media (hover:hover) and (pointer:fine){html[data-theme="dark"] .v-mt .mt:hover,html[data-theme="dark"] .v-mat button:hover{background:rgba(255,255,255,.09);border-color:rgba(var(--c1-rgb),.55);color:var(--ink)}}
html[data-theme="dark"] .v-hw .it{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}@media (hover:hover) and (pointer:fine){html[data-theme="dark"] .v-chap:hover,html[data-theme="dark"] .v-les:hover{background:rgba(255,255,255,.07)}}
html[data-theme="dark"] .v-chap.on,html[data-theme="dark"] .v-les.on{background:rgba(var(--c1-rgb),.24)}
html[data-theme="dark"] .v-les.ok{background:rgba(55,217,160,.16)}
html[data-theme="dark"] .v-note{background:rgba(var(--c1-rgb),.16)}
html[data-theme="dark"] .v-chap .tm{background:rgba(var(--c1-rgb),.22);color:var(--c1-pale)}
html[data-theme="dark"] .v-seek .tick{background:rgba(255,255,255,.35)}

/* ============ УНІВЕРСАЛЬНИЙ ІМПОРТ ПИТАНЬ ============ */
#imp-ov{position:fixed;inset:0;z-index:9200;background:rgba(14,16,26,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding:22px 14px 40px;overflow:auto}
#imp-ov.off{display:none}
.i-win{width:min(1000px,100%);background:var(--card);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden;color:var(--ink)}
.i-hd{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}
.i-hd h2{font-size:19px;margin:0;flex:1;font-weight:900}
.i-bd{padding:16px 20px 22px}
.i-steps{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.i-st{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:var(--bg3);font-size:12.5px;font-weight:800;color:var(--muted)}
.i-st.on{background:var(--c1);color:#fff}
.i-st.dn{background:rgba(55,217,160,.18);color:#1E9E74}
.i-btn{border:1px solid var(--line);background:var(--bg2);color:var(--ink);border-radius:12px;padding:9px 15px;font-weight:800;font-size:13.5px;cursor:pointer;font-family:inherit}@media (hover:hover) and (pointer:fine){.i-btn:hover{border-color:var(--c1-txt);color:var(--c1-txt)}}
.i-btn.pri{background:var(--c1);border-color:var(--c1-txt);color:#fff}@media (hover:hover) and (pointer:fine){.i-btn.pri:hover{filter:brightness(1.06);color:#fff}}
.i-btn.sm{padding:6px 11px;font-size:12.5px;border-radius:10px}
.i-btn[disabled]{opacity:.45;cursor:not-allowed}
.i-drop{border:2px dashed var(--line);border-radius:18px;padding:26px 18px;text-align:center;background:var(--bg2)}
.i-drop.hot{border-color:var(--c1-txt);background:rgba(var(--c1-rgb),.08)}
.i-drop .big{font-size:34px;line-height:1}
.i-drop h3{margin:8px 0 4px;font-size:17px}
.i-lbl{font-size:11px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.i-inp{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--bg2);color:var(--ink);border-radius:12px;padding:9px 12px;font-size:14px;font-family:inherit}
.i-inp:focus{outline:none;border-color:var(--c1-txt)}
textarea.i-inp{min-height:150px;resize:vertical;line-height:1.5;font-size:13.5px}
.i-hint{font-size:12.5px;color:var(--muted);line-height:1.5}
.i-note{background:rgba(var(--c1-rgb),.10);border:1px solid rgba(var(--c1-rgb),.22);border-radius:14px;padding:11px 13px;font-size:13px;line-height:1.55;margin-bottom:14px}
.i-warn{background:rgba(224,138,30,.12);border:1px solid rgba(224,138,30,.35);border-radius:14px;padding:11px 13px;font-size:13px;line-height:1.5;margin-bottom:12px}
.i-bad{background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.35);border-radius:14px;padding:11px 13px;font-size:13px;margin-bottom:12px}
.i-g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.i-g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.i-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(215px,100%),1fr));gap:10px;margin-bottom:14px}
.i-prev{max-height:390px;overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--bg2);padding:8px}
.i-q{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:7px}
.i-q.bad{border-color:rgba(255,90,90,.5);background:rgba(255,90,90,.07)}
.i-q .qh{display:flex;gap:8px;align-items:flex-start;font-weight:800;font-size:13.5px;line-height:1.45}
.i-q .qn{flex:none;min-width:24px;color:var(--muted)}
.i-q .qo{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.i-q .qo span{font-size:12.5px;padding:4px 9px;border-radius:9px;background:var(--bg3);color:var(--muted)}
.i-q .qo span.ok{background:rgba(55,217,160,.2);color:#1E9E74;font-weight:800}
.i-q .qe{margin-top:6px;font-size:12.5px;color:var(--muted);line-height:1.45}
.i-q .qt{margin-top:6px;font-size:11.5px;color:var(--muted)}
.i-q .qerr{margin-top:6px;font-size:12.5px;color:#E05A5A;font-weight:700}
.i-tb{width:100%;border-collapse:collapse;font-size:12.5px}
.i-tb td,.i-tb th{border:1px solid var(--line);padding:5px 8px;text-align:left;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.i-tb th{background:var(--bg3);font-weight:800}
.i-ft{display:flex;gap:9px;justify-content:flex-end;align-items:center;margin-top:16px;flex-wrap:wrap}
.i-ck{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;cursor:pointer}
.i-ck input{width:17px;height:17px;accent-color:var(--c1-txt)}
.i-sp{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:ispin .7s linear infinite;vertical-align:-3px;margin-right:7px}
@keyframes ispin{to{transform:rotate(360deg)}}
html[data-theme="dark"] .i-win{background:rgba(var(--dcard),.94);border:1px solid rgba(255,255,255,.10)}
html[data-theme="dark"] .i-inp,html[data-theme="dark"] .i-btn,html[data-theme="dark"] .i-drop,html[data-theme="dark"] .i-prev{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--ink)}
html[data-theme="dark"] .i-btn.pri{background:var(--c1);border-color:var(--c1);color:#fff}
html[data-theme="dark"] .i-q{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .i-q .qo span{background:rgba(255,255,255,.08);color:var(--muted)}
html[data-theme="dark"] .i-q .qo span.ok{background:rgba(55,217,160,.22);color:#5AE0B0}
html[data-theme="dark"] .i-st{background:rgba(255,255,255,.07)}
html[data-theme="dark"] .i-tb th{background:rgba(255,255,255,.07)}
.i-tb th .i-inp{min-width:118px}
html[data-theme="dark"] .i-inp option,html[data-theme="dark"] select.i-inp{color:#ECEBF5;-webkit-text-fill-color:#ECEBF5}
html[data-theme="dark"] .i-tb td,html[data-theme="dark"] .i-tb th{border-color:rgba(255,255,255,.14);color:var(--ink)}
html[data-theme="dark"] select.i-inp option{background:#262436;color:#ECEBF5;-webkit-text-fill-color:#ECEBF5}
select.i-inp{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A93A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 10px center;background-size:11px 8px;padding-right:30px;cursor:pointer}
html[data-theme="dark"] select.i-inp{background-color:rgba(255,255,255,.06);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23A3AFC6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");border-color:rgba(255,255,255,.14);background-repeat:no-repeat;background-position:right 11px center;background-size:11px 8px;padding-right:32px}
@media(max-width:760px){.i-g2,.i-g3{grid-template-columns:1fr}.i-bd{padding:14px}}

/* ============ БЕК-ОФІС: КЕРУВАННЯ (копії / готовність / пошук / доступ) ============ */
#ops-ov{position:fixed;inset:0;z-index:9250;background:rgba(14,16,26,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding:22px 14px 40px;overflow:auto}
#ops-ov.off{display:none}
.o-win{width:min(1120px,100%);background:var(--card);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden;color:var(--ink)}
.o-hd{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}
.o-hd h2{font-size:19px;margin:0;flex:1;font-weight:900}
.o-bd{padding:16px 20px 22px}
.o-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.o-tab{border:1px solid var(--line);background:var(--bg2);color:var(--muted);border-radius:999px;padding:8px 15px;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit}
.o-tab.on{background:var(--c1);border-color:var(--c1-txt);color:#fff}
.o-btn{border:1px solid var(--line);background:var(--bg2);color:var(--ink);border-radius:12px;padding:9px 15px;font-weight:800;font-size:13.5px;cursor:pointer;font-family:inherit}@media (hover:hover) and (pointer:fine){.o-btn:hover{border-color:var(--c1-txt);color:var(--c1-txt)}}
.o-btn.pri{background:var(--c1);border-color:var(--c1-txt);color:#fff}@media (hover:hover) and (pointer:fine){.o-btn.pri:hover{filter:brightness(1.06);color:#fff}}
.o-btn.sm{padding:6px 11px;font-size:12.5px;border-radius:10px}
.o-btn.dgr{border-color:rgba(224,90,90,.5);color:#E05A5A}@media (hover:hover) and (pointer:fine){.o-btn.dgr:hover{background:rgba(224,90,90,.1);border-color:#E05A5A;color:#E05A5A}}
.o-btn[disabled]{opacity:.45;cursor:not-allowed}
.o-lbl{font-size:11px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.o-inp{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--bg2);color:var(--ink);border-radius:12px;padding:9px 12px;font-size:14px;font-family:inherit}
.o-inp:focus{outline:none;border-color:var(--c1-txt)}
.o-hint{font-size:12.5px;color:var(--muted);line-height:1.5}
.o-note{background:rgba(var(--c1-rgb),.10);border:1px solid rgba(var(--c1-rgb),.22);border-radius:14px;padding:11px 13px;font-size:13px;line-height:1.55;margin-bottom:14px}
.o-warn{background:rgba(224,138,30,.12);border:1px solid rgba(224,138,30,.35);border-radius:14px;padding:11px 13px;font-size:13px;line-height:1.5;margin-bottom:12px}
.o-bad{background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.35);border-radius:14px;padding:11px 13px;font-size:13px;margin-bottom:12px}
.o-good{background:rgba(55,217,160,.14);border:1px solid rgba(55,217,160,.35);border-radius:14px;padding:11px 13px;font-size:13px;margin-bottom:12px}
.o-g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.o-g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.o-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.o-card{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:13px 15px;margin-bottom:10px}
.o-card h4{margin:0 0 4px;font-size:15.5px;font-weight:900}
.o-bar{height:9px;border-radius:99px;background:var(--bg3);overflow:hidden;margin:8px 0 6px}
.o-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#37D9A0,#2BB88A)}
.o-bar.mid i{background:linear-gradient(90deg,#F0B429,#E08A1E)}
.o-bar.low i{background:linear-gradient(90deg,#FF7A7A,#E05A5A)}
.o-iss{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-top:1px dashed var(--line);font-size:13px;line-height:1.45}
.o-iss:first-of-type{border-top:0}
.o-iss .ic{flex:none}
.o-iss .tx{flex:1}
.o-pill{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--bg3);color:var(--muted);margin:0 5px 5px 0}
.o-pill.ok{background:rgba(55,217,160,.2);color:#1E9E74}
.o-pill.warn{background:rgba(224,138,30,.18);color:#B26E12}
.o-pill.err{background:rgba(255,90,90,.18);color:#D24A4A}
.o-list{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--bg2);padding:8px}
.o-q{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 11px;margin-bottom:7px;display:flex;gap:9px;align-items:flex-start}
.o-q .ck{width:17px;height:17px;accent-color:var(--c1-txt);flex:none;margin-top:2px}
.o-q .bd{flex:1;min-width:0}
.o-q .tt{font-weight:800;font-size:13.5px;line-height:1.45}
.o-q .mt{margin-top:4px;font-size:11.5px;color:var(--muted)}
.o-q.bad{border-color:rgba(255,90,90,.45);background:rgba(255,90,90,.06)}
.o-bk{display:flex;gap:11px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:10px 13px;margin-bottom:8px;flex-wrap:wrap}
.o-bk .bd{flex:1;min-width:170px}
.o-bk .tt{font-weight:800;font-size:14px}
.o-bk .mt{font-size:11.5px;color:var(--muted);margin-top:2px}
.o-ft{display:flex;gap:9px;justify-content:flex-end;align-items:center;margin-top:16px;flex-wrap:wrap}
.o-ck{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;cursor:pointer}
.o-ck input{width:17px;height:17px;accent-color:var(--c1-txt)}
.o-sp{display:inline-block;width:16px;height:16px;border:2px solid rgba(140,140,160,.35);border-top-color:var(--c1-txt);border-radius:50%;animation:ospin .7s linear infinite;vertical-align:-3px;margin-right:7px}
@keyframes ospin{to{transform:rotate(360deg)}}
#pin-ov{position:fixed;inset:0;z-index:9400;background:rgba(14,16,26,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px}
#pin-ov.off{display:none}
.p-win{width:min(390px,100%);background:var(--card);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.4);padding:24px 22px;text-align:center;color:var(--ink)}
.p-win .em{font-size:38px;line-height:1}
.p-win h3{margin:8px 0 3px;font-size:19px}
.p-dots{display:flex;gap:9px;justify-content:center;margin:16px 0 4px}
.p-dots i{width:13px;height:13px;border-radius:50%;background:var(--bg3);border:1px solid var(--line)}
.p-dots i.on{background:var(--c1);border-color:var(--c1-txt)}
.p-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:16px}
.p-pad button{border:1px solid var(--line);background:var(--bg2);color:var(--ink);border-radius:14px;padding:13px 0;font-size:19px;font-weight:800;cursor:pointer;font-family:inherit}@media (hover:hover) and (pointer:fine){.p-pad button:hover{border-color:var(--c1-txt);color:var(--c1-txt)}}
.p-err{color:#E05A5A;font-weight:800;font-size:13px;min-height:18px;margin-top:10px}
html[data-theme="dark"] .o-win,html[data-theme="dark"] .p-win{background:rgba(var(--dcard),.96);border:1px solid rgba(255,255,255,.10)}
html[data-theme="dark"] .o-inp,html[data-theme="dark"] .o-btn,html[data-theme="dark"] .o-tab,html[data-theme="dark"] .o-list,html[data-theme="dark"] .o-card,html[data-theme="dark"] .o-bk,html[data-theme="dark"] .p-pad button{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--ink)}
html[data-theme="dark"] .o-tab{color:var(--muted)}
html[data-theme="dark"] .o-tab.on,html[data-theme="dark"] .o-btn.pri{background:var(--c1);border-color:var(--c1);color:#fff}
html[data-theme="dark"] .o-btn.dgr{color:#FF8A8A;border-color:rgba(255,120,120,.45)}
html[data-theme="dark"] .o-q{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .o-pill,html[data-theme="dark"] .o-bar,html[data-theme="dark"] .p-dots i{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .o-pill.ok{background:rgba(55,217,160,.22);color:#5AE0B0}
html[data-theme="dark"] .o-pill.warn{background:rgba(240,180,41,.22);color:#F0C86B}
html[data-theme="dark"] .o-pill.err{background:rgba(255,90,90,.22);color:#FF9A9A}
html[data-theme="dark"] .p-dots i.on{background:var(--c1)}
select.o-inp{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A93A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 11px center;background-size:11px 8px;padding-right:32px;cursor:pointer}
html[data-theme="dark"] .o-inp option,html[data-theme="dark"] select.o-inp{color:#ECEBF5;-webkit-text-fill-color:#ECEBF5}
html[data-theme="dark"] select.o-inp{background-color:rgba(255,255,255,.06);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23A3AFC6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");border-color:rgba(255,255,255,.14);background-repeat:no-repeat;background-position:right 11px center;background-size:11px 8px;padding-right:32px}
html[data-theme="dark"] select.o-inp option{background:#262436;color:#ECEBF5;-webkit-text-fill-color:#ECEBF5}
html[data-theme="dark"] .o-iss{border-color:rgba(255,255,255,.14)}
@media(max-width:760px){.o-g2,.o-g3{grid-template-columns:1fr}.o-bd{padding:14px}}

/* ============ АНАЛІТИКА ТА ОПЛАТИ: СТИЛІ ============ */
.o-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:9px;margin-bottom:12px}
.o-kpi{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:11px 13px}
.o-kpi b{display:block;font-size:24px;font-weight:900;line-height:1.1}
.o-kpi span{display:block;font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-top:3px}
.o-kpi i{font-style:normal;font-size:11.5px;font-weight:800;color:var(--muted)}
html[data-theme="dark"] .o-kpi{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}

.o-fn{margin:6px 0 2px}
.o-fs{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.o-fs .lb{flex:1;min-width:0}
.o-fs .lb b{display:block;font-size:13.5px;font-weight:800;line-height:1.25}
.o-fs .lb i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted)}
.o-fs .vl{font-size:15px;font-weight:900;min-width:52px;text-align:right}
.o-ftrack{height:20px;border-radius:8px;background:var(--bg3);overflow:hidden;margin-bottom:2px}
.o-ftrack i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--c1),var(--c2))}
.o-fdrop{font-size:11.5px;font-weight:800;color:#D9534F;margin:0 0 9px 2px}
.o-fdrop.ok{color:#1E9E74}
html[data-theme="dark"] .o-ftrack{background:rgba(255,255,255,.07)}

.o-tb{width:100%;border-collapse:collapse;font-size:12.5px}
.o-tb th{text-align:left;font-weight:800;color:var(--muted);text-transform:uppercase;font-size:10.5px;letter-spacing:.03em;padding:6px 8px;border-bottom:1px solid var(--line)}
.o-tb td{padding:7px 8px;border-bottom:1px solid var(--line);font-weight:700;vertical-align:middle}
.o-tb tr:last-child td{border-bottom:0}
.o-tb .num{text-align:right;font-variant-numeric:tabular-nums}
html[data-theme="dark"] .o-tb th,html[data-theme="dark"] .o-tb td{border-color:rgba(255,255,255,.08)}

.o-spark{display:flex;align-items:flex-end;gap:3px;height:56px;margin:8px 0 2px}
.o-spark i{flex:1;border-radius:4px 4px 0 0;background:var(--c1);min-height:2px;opacity:.85}
.o-spark i.z{opacity:.18}

.o-seg{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.o-seg button{border:1px solid var(--line);background:var(--bg2);color:var(--ink);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:800;cursor:pointer;font-family:inherit}
.o-seg button.on{background:var(--c1);border-color:var(--c1-txt);color:#fff}
html[data-theme="dark"] .o-seg button{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);color:#ECEBF5}

.o-st{display:inline-block;font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;border-radius:999px;padding:3px 9px;white-space:nowrap}
.o-st.new{background:rgba(120,140,180,.18);color:#5B6B86}
.o-st.pend{background:rgba(240,180,40,.20);color:#B07C0A}
.o-st.paid{background:rgba(55,217,160,.20);color:#1E9E74}
.o-st.fail{background:rgba(230,90,80,.18);color:#C7443C}
.o-st.ref{background:rgba(160,120,220,.18);color:#7B5BC0}
html[data-theme="dark"] .o-st.new{color:#A9B7CE}
html[data-theme="dark"] .o-st.pend{color:#F0C060}
html[data-theme="dark"] .o-st.paid{color:#4BD9A6}
html[data-theme="dark"] .o-st.fail{color:#FF8B82}
html[data-theme="dark"] .o-st.ref{color:#C0A6F0}

.o-warnbox{border:1.5px solid rgba(230,150,40,.45);background:rgba(240,180,40,.10);border-radius:14px;padding:11px 13px;margin-bottom:12px;font-size:12.5px;font-weight:700;line-height:1.5}
.o-warnbox b{font-weight:900}

/* ---- каса для учня ---- */
.pay-plans{display:grid;gap:9px;margin:14px 0 6px}
.pay-pl{position:relative;display:flex;align-items:center;gap:11px;border:2px solid var(--line);background:var(--card);border-radius:16px;padding:12px 13px;cursor:pointer;text-align:left;font-family:inherit;color:var(--ink);width:100%}@media (hover:hover) and (pointer:fine){.pay-pl:hover{border-color:var(--c1-txt)}}
.pay-pl.on{border-color:var(--c1-txt);background:rgba(var(--c1-rgb),.07)}
.pay-pl .rd{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center}
.pay-pl.on .rd{border-color:var(--c1-txt)}
.pay-pl.on .rd:after{content:'';width:10px;height:10px;border-radius:50%;background:var(--c1)}
.pay-pl .tx{flex:1;min-width:0}
.pay-pl .tx b{display:block;font-size:14.5px;font-weight:900}
.pay-pl .tx i{font-style:normal;display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-top:1px}
.pay-pl .pr{text-align:right;flex:none}
.pay-pl .pr b{display:block;font-size:17px;font-weight:900;white-space:nowrap}
.pay-pl .pr s{display:block;font-size:11.5px;font-weight:700;color:var(--muted)}
.pay-pl .bg{position:absolute;top:-9px;right:11px;font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;background:var(--c1);color:#fff;border-radius:999px;padding:3px 9px}
html[data-theme="dark"] .pay-pl{background:rgba(var(--dcard),.75);border-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .pay-pl.on{background:rgba(var(--c1-rgb),.16)}
.pay-sum{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px dashed var(--line);margin-top:12px;padding-top:11px;font-weight:800;font-size:13.5px}
.pay-sum b{font-size:21px;font-weight:900}
.pay-note{font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.5;margin-top:10px;text-align:center}
.pay-prow{display:flex;gap:7px;margin-top:10px}
.pay-prow input{flex:1}
.pay-ok{font-size:12px;font-weight:800;color:#1E9E74;margin-top:6px}
.pay-bad{font-size:12px;font-weight:800;color:#D9534F;margin-top:6px}

/* ===== блоки сторінки заняття: матеріали / розминка / домашні завдання ===== */
.les-2col{display:grid;gap:14px;margin-top:14px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));align-items:start}
.les-2col .card{margin:0;height:100%}
.les-bl{padding:16px 16px 14px}
.les-blh{font-size:16px;margin:0 0 12px;font-weight:900}
.les-blr{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.les-blr .les-blh{margin-right:2px}
.les-blr .les-cnt{margin-left:auto}
.lm-it{padding:11px 0;border-top:1.5px solid var(--line)}
.lm-it:first-of-type{border-top:0;padding-top:0}
.lm-bt{display:flex;gap:8px;flex-wrap:wrap}
.lm-d{margin-top:7px;font-size:12.8px;font-weight:700;line-height:1.5;color:var(--muted)}
.dl{font-size:11px;opacity:.85}

.hw-it{border:1.5px solid var(--line);border-radius:14px;padding:12px 13px;margin-top:10px;background:var(--bg2,transparent)}
.hw-it:first-of-type{margin-top:0}
.hw-it.done{border-color:rgba(45,190,120,.45)}
.hw-hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hw-nm{font-weight:900;font-size:14.5px}
.hw-sp{flex:1;min-width:0}
.hw-st{font-weight:800;font-size:11.5px;color:var(--muted);white-space:nowrap}
.hw-st.ok{color:#1d9d63}
.hw-d{margin-top:7px;font-size:12.8px;font-weight:700;line-height:1.5;color:var(--muted)}
.hw-mts{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px}
/* «Прогрес N з M» притискаємо до правого краю блоку */
.hw-mts .hw-mt:last-child{margin-left:auto}
.hw-mt{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800}
.hw-mt .k{color:var(--muted);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.hw-mt b.g{color:#1d9d63}.hw-mt b.o{color:#d98014}.hw-mt b.r{color:#d9534f}
.hw-pb{margin-top:9px;height:7px}
.hw-bt{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}

.hw-lvl{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:900;padding:3px 9px 3px 7px;border-radius:99px;background:rgba(120,130,150,.13);color:var(--muted);white-space:nowrap}
.hw-lvl .lvw{display:inline-flex;gap:2.5px;align-items:flex-end}
.hw-lvl .lv{width:4px;height:7px;border-radius:2px;background:rgba(120,130,150,.32);display:inline-block}
.hw-lvl .lv:nth-child(2){height:10px}
.hw-lvl .lv:nth-child(3){height:13px}
.hw-lvl.l1{background:rgba(45,190,120,.15);color:#1d9d63}
.hw-lvl.l1 .lv.on{background:#2dbe78}
.hw-lvl.l2{background:rgba(240,160,40,.17);color:#c37a10}
.hw-lvl.l2 .lv.on{background:#f0a028}
.hw-lvl.l3{background:rgba(226,90,80,.16);color:#cf4a42}
.hw-lvl.l3 .lv.on{background:#e25a50}

.hw-due{font-weight:800;font-size:12px;color:var(--muted);white-space:nowrap}
.hw-due.hot{color:#d9534f}
.hw-due.late{color:#d9534f;font-weight:900}

.v-mtl{font-weight:900;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin:14px 0 8px}

@media (max-width:900px){
  .les-2col{grid-template-columns:1fr}
  .les-bl{padding:14px 13px 12px}
  .hw-nm{font-size:14px}
  .hw-bt .btn{flex:1 1 auto}
}



.rew-next{margin-top:9px;padding:8px 11px;border-radius:11px;font-weight:800;font-size:12.5px;line-height:1.45;
  background:linear-gradient(90deg,rgba(55,217,160,.16),rgba(55,217,160,.05));border:1px solid rgba(55,217,160,.4);color:var(--ink)}
.rew-k{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:11.5px;padding:2px 8px;border-radius:999px;
  background:rgba(120,130,150,.13);color:var(--muted)}
.rew-k.up{background:rgba(55,217,160,.18);color:#1d9d63}
.rew-k.dn{background:rgba(255,107,107,.16);color:#d9534f}
.rw-box{margin:0 0 14px;padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-s)}
.rw-hd{font-weight:900;font-size:14px;margin-bottom:9px;color:var(--ink)}
.rw-row{display:flex;gap:8px;flex-wrap:wrap}
.rw-c{display:flex;flex-direction:column;gap:2px;padding:7px 11px;border-radius:12px;background:rgba(120,130,150,.10);min-width:104px}
.rw-c .k{font-size:10.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.rw-c b{font-size:14px;font-weight:900;color:var(--ink)}
.rw-note{margin-top:10px;font-weight:700;font-size:12.5px;color:var(--muted);line-height:1.5}
.rw-note b{color:var(--ink)}


/* Спливаюча панель форматування: зʼявляється, коли в полі виділили текст */
#rt-bar{position:fixed;z-index:9999;display:none;gap:2px;align-items:center;padding:4px;border-radius:12px;
  background:#22293D;box-shadow:0 10px 28px rgba(0,0,0,.28);transform:translate(-50%,-100%)}
#rt-bar.on{display:flex}
#rt-bar button{appearance:none;border:0;background:transparent;color:#fff;cursor:pointer;font:inherit;font-size:14px;
  font-weight:800;line-height:1;min-width:32px;height:30px;padding:0 7px;border-radius:9px;display:flex;
  align-items:center;justify-content:center;transition:background .14s ease}
#rt-bar button:hover{background:rgba(255,255,255,.16)}
#rt-bar button:active{background:rgba(255,255,255,.26)}
#rt-bar i.sep{width:1px;height:17px;background:rgba(255,255,255,.24);margin:0 3px;display:block}
#rt-bar u{text-underline-offset:2px}


/* Кнопка «формула» у правому верхньому куті поля + вікно редактора */
.fx-w{position:relative;display:block}
.fx-b{position:absolute;top:5px;right:6px;z-index:3;appearance:none;border:1px solid var(--line);
  background:var(--card);color:var(--muted);cursor:pointer;border-radius:8px;width:26px;height:24px;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;line-height:1;
  padding:0;opacity:.6;transition:opacity .15s ease,color .15s ease,border-color .15s ease}
.fx-w:hover .fx-b,.fx-b:focus-visible{opacity:1;color:var(--c1-txt);border-color:var(--c1)}
.fx-b i{font-style:normal;font-size:9px;vertical-align:-2px;margin-left:1px}
.fx-w > textarea,.fx-w > input{padding-right:38px}

.fx-ta{width:100%;min-height:88px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font:600 14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical}
.fx-ta:focus{outline:none;border-color:var(--c1);box-shadow:0 0 0 3px var(--c1-wash)}
.fx-pv{margin-top:12px;min-height:62px;padding:14px;border-radius:12px;background:var(--c1-wash);
  display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--ink);overflow-x:auto}
.fx-pv.err{background:rgba(255,84,112,.12);color:var(--red);font-size:13px;font-weight:700}
.fx-lbl{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.fx-pal{display:flex;flex-wrap:wrap;gap:6px}
.fx-pal button{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink);
  cursor:pointer;border-radius:10px;min-width:38px;height:34px;padding:0 9px;font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;transition:border-color .14s ease,background .14s ease}
.fx-pal button:hover{border-color:var(--c1);background:var(--c1-wash)}
.fx-grp{font-size:11.5px;font-weight:800;color:var(--muted);width:100%;margin:8px 0 -2px}
.fx-hint{font-size:12px;font-weight:700;color:var(--muted);line-height:1.5;margin-top:12px}


/* Встановлення відповідності: перетягування варіанта в порожнє поле */
.mt{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:12px;margin-top:10px;align-items:start}
.mt-rows{display:flex;flex-direction:column;gap:10px}
.mt-row{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);gap:8px;align-items:center}
.mt-q{display:flex;gap:8px;align-items:flex-start;padding:9px 10px;border-radius:14px;background:var(--c1-wash);min-width:0}
.mt-n{flex:0 0 22px;height:22px;border-radius:7px;background:var(--card);color:var(--c1-txt);display:flex;
  align-items:center;justify-content:center;font-weight:900;font-size:12px}
.mt-t{flex:1;font-weight:700;font-size:13px;line-height:1.4;color:var(--ink);min-width:0;word-break:break-word}
.mt-ar{text-align:center;color:var(--muted);font-size:15px;line-height:1;user-select:none}
.mt-slot{min-height:46px;border-radius:14px;border:2px dashed var(--line);background:var(--card);
  display:flex;align-items:center;justify-content:center;padding:5px;transition:border-color .15s ease,background .15s ease}
.mt-slot.empty::after{content:attr(data-ph);font-size:11.5px;font-weight:800;color:var(--muted)}
.mt-slot.over{border-color:var(--c1);background:var(--c1-wash)}
.mt-slot.arm{border-color:var(--c1);border-style:solid;box-shadow:0 0 0 3px var(--c1-wash);cursor:pointer}
.mt-slot.full{border-style:solid;border-color:transparent;padding:0}
.mt-slot.ok{background:var(--green-bg)}
.mt-slot.no{background:var(--orange-bg)}
.mt-bank{border-radius:16px;background:var(--bg2);padding:10px;min-height:58px}
.mt-bh{font-weight:900;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:2px 0 8px}
.mt-bank .mt-empty{font-size:12px;font-weight:700;color:var(--muted);padding:4px 2px}
.mt-chip{display:flex;width:100%;gap:8px;align-items:center;text-align:left;padding:8px 9px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:700;font-size:13px;
  line-height:1.35;margin-bottom:6px;cursor:grab;transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease}
.mt-bank .mt-chip:last-child{margin-bottom:0}
.mt-chip:hover{border-color:var(--c1)}
.mt-chip.sel{border-color:var(--c1);box-shadow:0 0 0 3px var(--c1-wash)}
.mt-chip.drag{opacity:.45}
.mt-chip>i{flex:0 0 22px;height:22px;border-radius:7px;background:var(--c2);color:var(--ink);display:flex;
  align-items:center;justify-content:center;font-style:normal;font-weight:900;font-size:12px}
.mt-chip>span{flex:1;min-width:0;word-break:break-word}
.mt-slot .mt-chip{margin:0;cursor:default;border-color:transparent;background:transparent}
.mt-chip>span.mt-x{flex:0 0 22px;width:22px;height:22px;border-radius:7px;border:0;background:rgba(0,0,0,.06);
  color:var(--muted);cursor:pointer;font-size:11px;line-height:1;display:flex;align-items:center;
  justify-content:center;padding:0;min-width:0}
.mt-x:hover{background:var(--c3);color:#fff}
.mt-tip{grid-column:1/-1;font-size:11.5px;font-weight:700;color:var(--muted);margin-top:2px}
html[data-theme="dark"] .mt-bank{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .mt-chip{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .mt-x{background:rgba(255,255,255,.12)}
/* послідовність: зліва номер позиції, під ним банк подій */
.mt.oq{grid-template-columns:1fr;gap:14px}
.mt-row.oq{grid-template-columns:44px minmax(0,1fr);gap:10px}
.mt-pos{width:36px;height:36px;border-radius:11px;background:var(--c1-wash);color:var(--c1-txt);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px}
.mt-bank.oq .mt-bh{font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink);margin-bottom:2px}
.mt-bs{font-size:12px;font-weight:700;color:var(--muted);margin:0 0 9px}
.mt-chip>span.mt-gr{flex:0 0 18px;width:18px;text-align:center;color:var(--muted);font-size:14px;
  line-height:1;min-width:0;cursor:grab}
@media (max-width:760px){
  .mt{grid-template-columns:1fr}
  .mt-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .mt-row.oq{grid-template-columns:40px minmax(0,1fr);gap:8px}
  .mt-ar{display:none}
  .mt-slot{min-height:46px}
  .mt-chip{font-size:14px;padding:10px 10px}
  .mt-chip>i{flex:0 0 26px;height:26px;font-size:13px}
}


/* «Заповни пропуск»: текст із вибором слова просто в рядку */
.gp{font-size:15px;line-height:2.25;font-weight:600;color:var(--ink)}
.gp-w{position:relative;display:inline-block;vertical-align:baseline}
.gp-b{appearance:none;font:inherit;font-weight:800;font-size:14px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--card);color:var(--muted);border-radius:10px;
  padding:4px 26px 4px 10px;min-width:110px;max-width:min(320px,72vw);text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .15s ease,background .15s ease}
.gp-b:hover{border-color:var(--c1)}
.gp-b.on{border-color:var(--c1);color:var(--ink);background:var(--c1-wash)}
.gp-b.open{border-color:var(--c1);box-shadow:0 0 0 3px var(--c1-wash)}
.gp-b.ok{border-color:var(--green);background:var(--green-bg);color:var(--green)}
.gp-b.no{border-color:var(--c3);background:var(--orange-bg);color:var(--red)}
.gp-b::after{content:'▾';position:absolute;right:9px;font-size:11px;opacity:.75}
.gp-b .gp-n{display:inline-block;min-width:15px;margin-right:5px;color:var(--c1-txt);font-size:11.5px}
.gp-ans{display:inline-block;margin:0 4px 0 10px;font-size:12.5px;font-weight:800;color:var(--green)}
.gp-m{position:absolute;z-index:40;top:calc(100% + 5px);left:0;min-width:220px;max-width:min(340px,86vw);
  background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:5px;max-height:270px;overflow:auto}
.gp-m button{display:block;width:100%;text-align:left;appearance:none;border:0;background:transparent;
  font:inherit;font-weight:700;font-size:14px;color:var(--ink);padding:9px 10px;border-radius:10px;
  cursor:pointer;line-height:1.4;white-space:normal}
.gp-m button:hover{background:var(--c1-wash)}
.gp-m button.on{background:var(--c1-wash);color:var(--c1-txt)}
.gp-m .gp-clr{color:var(--muted);font-weight:800}
html[data-theme="dark"] .gp-b{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .gp-m{background:var(--surface)}
@media (max-width:560px){ .gp{font-size:14.5px;line-height:2.35} .gp-b{max-width:70vw} }


/* Відкритий тест: сторінка входу для учасника вебінару */
.ot-wrap{width:100%;flex:1 1 auto;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:28px 18px;
  background:radial-gradient(900px 520px at 10% -12%,var(--c1-wash),transparent 62%),radial-gradient(760px 460px at 104% 112%,var(--c1-tint),transparent 64%)}
.ot-card{width:100%;max-width:430px;background:var(--card);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow);padding:30px 26px 24px}
.ot-lg{text-align:center;font-size:24px;font-weight:900;letter-spacing:-.02em;color:#282A3C}
.ot-lg i{font-style:normal;color:#3C7FCB}
html[data-theme="dark"] .ot-lg{color:#EDF1F7} html[data-theme="dark"] .ot-lg i{color:#6BA8E4}
.ot-badge{display:flex;align-items:center;justify-content:center;margin:14px auto 3px;width:max-content;font-size:11px;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c1-txt);background:var(--c1-wash);border-radius:999px;padding:7px 15px}
.ot-h{font-size:20px;font-weight:900;text-align:center;margin:12px 0 4px;color:var(--ink);letter-spacing:-.01em}
.ot-sub{font-size:13px;font-weight:700;text-align:center;color:var(--muted);margin:0;line-height:1.5}
.ot-inp{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);font-size:15px;background:var(--surface);color:var(--ink);margin-top:10px}
.ot-inp:focus{outline:none;border-color:var(--c1);box-shadow:0 0 0 3px var(--c1-wash)}
.ot-err{margin-top:10px;padding:10px 12px;border-radius:12px;font-weight:800;font-size:13px;background:rgba(255,84,112,.13);color:var(--red)}
.ot-foot{text-align:center;margin-top:14px;font-size:12px;font-weight:700;color:var(--muted);line-height:1.5}
.ot-meta{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.ot-meta span{font-size:11.5px;font-weight:800;color:var(--muted);background:var(--bg2);border-radius:999px;padding:5px 11px}
/* прев'ю уроку */
.pv-card{border-radius:18px;border:1.5px solid var(--line);padding:14px}
.pv-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:7px}
.pv-tag{font-size:11px;font-weight:900;padding:3px 9px;border-radius:99px;border:1.5px solid var(--line);color:var(--muted)}
.pv-tag.red{border-color:rgba(220,60,60,.45);color:#c33}
.pv-exp{margin-left:auto;font-size:11.5px;font-weight:900;color:var(--muted)}
.pv-card h4{margin:0 0 2px;font-size:17px;font-weight:900}
.pv-sub{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:8px}
.pv-dt{font-size:12.5px;font-weight:800;margin-bottom:10px}
.pv-dt.dim{color:var(--muted);font-weight:700}
.pv-g{margin-bottom:9px}
.pv-gt{display:block;font-size:10.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pv-i{display:inline-block;margin:0 5px 5px 0;padding:5px 11px;border-radius:10px;border:1.5px solid var(--line);
  font-size:12.5px;font-weight:800}
.pv-ft{margin-top:8px;padding-top:9px;border-top:1.5px solid var(--line);font-size:12px;font-weight:700;color:var(--muted)}


.lz-trk{margin-top:22px}
.lz-th{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.lz-th h3{margin:0;font-size:18px;font-weight:900}
.lz-n{font-size:12.5px;font-weight:900;color:var(--muted)}
.lz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:12px}
.lz-card{border:1.5px solid var(--line);border-radius:18px;background:var(--card);padding:14px}
.lz-card.done{border-color:rgba(46,168,102,.45)}
.lz-card.lock{opacity:.82}
.lz-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:7px}
.lz-tag{font-size:11px;font-weight:900;padding:3px 9px;border-radius:99px;border:1.5px solid var(--line);color:var(--muted)}
.lz-tag.red{border-color:rgba(220,60,60,.45);color:#c33}
.lz-tag.ok{border-color:rgba(46,168,102,.5);color:#1f8f56}
.lz-exp{margin-left:auto;font-size:11.5px;font-weight:900;color:var(--muted)}
.lz-card h4{margin:0 0 2px;font-size:16px;font-weight:900;line-height:1.25}
.lz-sub{font-size:12.5px;font-weight:700;color:var(--muted)}
.lz-st{display:flex;gap:10px;flex-wrap:wrap;margin-top:7px;font-size:11.5px;font-weight:800;color:var(--muted)}
.lz-st .ok{color:#1f8f56}
.lz-dt{font-size:12px;font-weight:800;color:var(--muted);margin-top:5px}
.lz-lock{font-size:12.5px;font-weight:800;color:var(--muted);padding:9px 11px;border-radius:12px;border:1.5px dashed var(--line)}
.lz-cta{display:flex;gap:8px;flex-wrap:wrap}
.lz-cta .btn{flex:1}
.lv-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}
.lv-row:last-child{border-bottom:0}
.lv-i{font-size:16px;flex:none}
.lv-n{flex:1;min-width:120px;font-weight:800;font-size:13.5px;display:flex;flex-direction:column;gap:2px}
.lv-n i{font-style:normal;font-weight:700;font-size:12px;color:var(--muted)}
.lv-tc{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.lv-tc span{font-size:11px;font-weight:800;color:var(--muted);border:1.5px solid var(--line);border-radius:99px;padding:2px 8px}
.lv-mat{margin:0 6px 6px 0}


.les-dt{font-size:11.5px;font-weight:800;color:var(--muted);flex:1 1 130px;min-width:118px;line-height:1.3;overflow-wrap:anywhere}
.hw-lvl{font-size:10.5px;font-weight:900;padding:2px 8px;border-radius:99px;border:1.5px solid var(--line);color:var(--muted)}
.v-panel.col.open .v-pbody{display:block}


.af-meter{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:11px 13px;margin:0 0 12px}
.af-meter .af-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:800;color:var(--txt)}
.af-meter .af-bar{height:7px;border-radius:99px;background:var(--line);margin:7px 0 6px;overflow:hidden}
.af-meter .af-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--c1-ll),var(--c1));transition:width .3s}
.af-meter .af-hint{font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.45}


/* ---- політ монет ---- */
#lms-fly{position:fixed;inset:0;pointer-events:none;z-index:9999}
#lms-fly .lms-coin{position:absolute;font-size:22px;font-style:normal;line-height:1;
  transition:transform .85s cubic-bezier(.4,0,.25,1),opacity .85s ease;will-change:transform,opacity}
@keyframes lmsPop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
.chip.coins.lms-pop{animation:lmsPop .45s ease}

/* ---- плеєр ---- */
.v-stage.lp-stage{background:#0d1017}
.lp-box{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.lp-box iframe,.lp-box .lp-mount,.lp-box #lp-yt{width:100%;height:100%;border:0}
.lp-box .lp-mount iframe{position:absolute;inset:0;width:100%;height:100%}
.lp-nav{margin-top:10px;padding:11px 13px;border-radius:16px;border:1.5px solid var(--line);background:var(--card)}
.lp-pb{height:7px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:8px}
.lp-pb i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--c1-ll),var(--c1));transition:width .25s}
.lp-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lp-row.bt{margin-top:9px}
.lp-st{font-size:12.5px;font-weight:800;color:var(--muted)}
.lp-st b{color:var(--ink)}
.lp-st .ok{color:#1f8f56;font-weight:900}
.lp-tm{margin-left:auto;font-size:12px;font-weight:900;color:var(--muted);font-variant-numeric:tabular-nums}
.lp-tcs{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.lp-tc{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border-radius:99px;
  border:1.5px solid var(--line);background:var(--card);cursor:pointer;font:inherit}
.lp-tc:hover{border-color:var(--c1)}
.lp-tc b{font-size:11.5px;font-weight:900;color:var(--c1-txt);font-variant-numeric:tabular-nums}
.lp-tc span{font-size:12px;font-weight:800;color:var(--muted)}
.v-pp{font-style:normal;font-size:11px;font-weight:900;color:var(--muted);margin-left:6px}
.v-x{font-size:12px;font-weight:900;color:var(--muted);padding:0 4px;cursor:pointer}
.v-x:hover{color:var(--red)}

/* ---- матеріали курсу: усі кнопки однакової висоти й шрифту ---- */
.lm-row{display:flex;flex-wrap:wrap;gap:9px}
.lm-b{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:13px;
  border:1.5px solid var(--line);background:var(--card);cursor:pointer;font:inherit;max-width:100%}
.lm-b:hover{border-color:var(--c1)}
.lm-b.got{border-color:rgba(46,168,102,.5)}
.lm-b .ic{font-size:15px;line-height:1;flex:none}
.lm-b .nm{font-size:13.5px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lm-b .tg{font-size:10.5px;font-weight:900;color:var(--muted);letter-spacing:.4px;flex:none}

/* ---- домашка: рядок рекорду ---- */
.hw-nx{margin-top:8px;padding:8px 11px;border-radius:12px;background:var(--green-bg);
  font-size:12.5px;font-weight:800;line-height:1.45}
.hw-nx.done{background:rgba(var(--c1-rgb),.09)}
.hw-lvl.light{border-color:rgba(46,168,102,.5);color:#1f8f56}
.hw-lvl.medium{border-color:rgba(242,183,5,.6);color:#a97c00}
.hw-lvl.hard{border-color:rgba(220,60,60,.5);color:#c33}

/* ---- картка курсу: теги однакової висоти ---- */
.cc-tags{gap:7px;flex-wrap:wrap;margin-bottom:8px}
.cat-chip{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:99px;
  font-size:12px;font-weight:900;line-height:1;white-space:nowrap}
.cat-chip.nmt{background:var(--green-bg);color:#1f8f56}

.cal-st{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:2px 8px;border-radius:99px;
  font-size:10.5px;font-weight:900;background:rgba(255,255,255,.7);color:var(--muted);white-space:nowrap}
.cal-st.available{color:#1f8f56}
.cal-st.completed{color:#1f8f56}
.cal-st.locked{color:#a97c00}
.cal-st.scheduled{color:#5b6b8c}
.cal-st.ev{color:#6b4ce0}
html[data-theme="dark"] .cal-st{background:rgba(0,0,0,.28)}

.cal-mod{max-width:460px}
.cal-mod .cal-mk{font-size:11.5px;font-weight:900;color:var(--muted);letter-spacing:.4px;text-transform:uppercase}
.cal-mod .cal-mr{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.cal-mod .cal-mr:last-of-type{border-bottom:0}
.cal-mod .cal-mr span{min-width:88px;font-weight:800;color:var(--muted);font-size:12px}
.cal-mod .cal-mr b{font-weight:900}
.cal-mod .cal-mn{margin:10px 0 0;font-weight:700;font-size:13px;line-height:1.55;color:var(--muted)}
.cal-mod .cal-mw{margin-top:12px;padding:10px 12px;border-radius:12px;border:1.5px dashed var(--line);
  font-weight:800;font-size:12.5px;color:var(--muted)}

#exp-ov{position:fixed;inset:0;z-index:9500;display:none}
#exp-ov.show{display:block}
.exp-scene{position:absolute;inset:0;overflow:hidden;font-family:inherit;color:#F6F1E8}
.exp-sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--s1) 0%,var(--s2) 52%,var(--s3) 100%)}
.exp-stars{position:absolute;inset:0}
.exp-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.75;
  animation:expTw 3.6s ease-in-out infinite}
@keyframes expTw{0%,100%{opacity:.2}50%{opacity:.9}}
.exp-sun{position:absolute;left:50%;bottom:14%;width:220px;height:220px;margin-left:-110px;border-radius:50%;
  background:radial-gradient(circle,#FFE7B5,#F2A24C 45%,rgba(242,162,76,0) 70%);opacity:.55;filter:blur(1px)}
.exp-hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:34vh;min-height:150px}
.exp-hills path{fill:var(--gr)}
.exp-body{position:absolute;inset:0;display:flex;flex-direction:column;overflow:auto;
  padding:max(14px,env(safe-area-inset-top)) 14px 18px}

.exp-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0;
  background:rgba(0,0,0,.32);color:#fff;font-size:16px;cursor:pointer;z-index:5}

/* ---- вступ ---- */
.exp-intro{margin:auto;max-width:560px;text-align:center;padding:22px 4px}
.exp-era{font-size:12px;font-weight:900;letter-spacing:2px;text-transform:uppercase;opacity:.75}
.exp-h1{font-size:clamp(30px,7vw,46px);font-weight:900;margin:4px 0 8px;letter-spacing:-.5px}
.exp-lead{font-size:15px;font-weight:700;line-height:1.55;opacity:.92;margin:0 0 16px}
.exp-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-bottom:14px}
.exp-rule{background:rgba(0,0,0,.24);border-radius:14px;padding:10px 8px}
.exp-rule b{display:block;font-size:17px;font-weight:900}
.exp-rule span{font-size:11px;font-weight:700;opacity:.8;line-height:1.3;display:block;margin-top:2px}
.exp-note{font-size:12.5px;font-weight:700;line-height:1.55;opacity:.78;margin:0 0 18px}
.exp-pickh{font-size:12px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;opacity:.8;margin-bottom:9px}
.exp-arts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.exp-art{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.22);border-radius:18px;
  padding:14px 12px;color:#fff;cursor:pointer;text-align:center;font:inherit;transition:.15s;backdrop-filter:blur(6px)}
.exp-art:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.exp-art .em{font-size:28px;display:block;margin-bottom:5px}
.exp-art b{display:block;font-size:14px;font-weight:900;margin-bottom:3px}
.exp-art .d{font-size:11.5px;font-weight:700;opacity:.82;line-height:1.4;display:block}
.exp-best{margin-top:16px;font-size:12.5px;font-weight:800;opacity:.85}

/* ---- HUD ---- */
.exp-hud{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:rgba(0,0,0,.3);border-radius:18px;padding:9px 12px;backdrop-filter:blur(8px);flex:none}
.exp-back{width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.14);
  color:#fff;font-size:14px;cursor:pointer;flex:none}
.exp-lamp{display:flex;align-items:center;gap:8px;flex:1;min-width:150px}
.exp-lamp .ico{font-size:19px}
.exp-lamp .t{font-size:19px;font-weight:900;font-variant-numeric:tabular-nums;min-width:52px}
.exp-lamp .bar{flex:1;height:7px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden;min-width:60px}
.exp-lamp .bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#FFD98A,#F2A24C);transition:width .2s linear}
.exp-lamp.low .t{color:#FF9A8A}
.exp-lamp.low .bar i{background:linear-gradient(90deg,#FF9A8A,#E8446E)}
.exp-sc{text-align:center;flex:none}
.exp-sc b{display:block;font-size:17px;font-weight:900;line-height:1}
.exp-sc span{font-size:10px;font-weight:800;opacity:.75}
.exp-inv{display:flex;gap:5px;flex:none}
.exp-inv .exp-i{width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:15px}
.exp-inv .exp-i.off{opacity:.3}

/* ---- карта ---- */
.exp-mapwrap{flex:1;overflow:auto;margin-top:12px;padding:4px 0 8px}
.exp-map{display:flex;flex-direction:column;align-items:center;gap:0;max-width:620px;margin:0 auto}
.exp-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.exp-link{width:2px;height:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.35));margin:2px 0}
.exp-n{min-width:118px;background:rgba(0,0,0,.3);border:1.5px solid rgba(255,255,255,.16);border-radius:16px;
  padding:11px 10px;color:#fff;font:inherit;text-align:center;cursor:default;opacity:.5;transition:.16s}
.exp-n .em{font-size:22px;display:block;line-height:1.1}
.exp-n b{display:block;font-size:13px;font-weight:900;margin-top:3px}
.exp-n .q{font-size:10.5px;font-weight:800;opacity:.75;display:block;margin-top:2px}
.exp-n .sub{font-size:10px;font-weight:800;opacity:.9;display:block;margin-top:4px;
  background:rgba(255,255,255,.14);border-radius:99px;padding:2px 7px}
.exp-n.reach{opacity:1;cursor:pointer;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.14)}
.exp-n.reach:hover{transform:translateY(-3px);background:rgba(255,255,255,.22)}
.exp-n.done{opacity:.85;border-color:rgba(120,220,160,.5)}
.exp-n.cur{opacity:1;border-color:#FFD98A;box-shadow:0 0 0 3px rgba(255,217,138,.22)}
.exp-n.boss{min-width:160px}
.exp-n.boss .em{font-size:26px}
.exp-hint{text-align:center;font-size:12.5px;font-weight:800;opacity:.8;padding:8px 0 2px;flex:none}

/* ---- питання ---- */
.exp-qwrap{margin:12px auto 0;max-width:620px;width:100%;background:rgba(12,10,26,.72);
  border:1.5px solid rgba(255,255,255,.14);border-radius:22px;padding:16px;backdrop-filter:blur(10px)}
.exp-qtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.exp-tag{font-size:11px;font-weight:900;padding:3px 10px;border-radius:99px;background:var(--c);color:#fff}
.exp-topic{font-size:11.5px;font-weight:800;opacity:.8}
.exp-cnt{margin-left:auto;font-size:11.5px;font-weight:900;opacity:.8}
.exp-q{font-size:17px;font-weight:800;line-height:1.45;margin:0 0 14px}
.exp-opts{display:grid;gap:8px}
.exp-o{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;font:inherit;cursor:pointer;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);border-radius:14px;padding:11px 12px;color:#fff;transition:.14s}
.exp-o:hover:not(:disabled){background:rgba(255,255,255,.16)}
.exp-o .k{width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.18);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:900}
.exp-o .t{font-size:14px;font-weight:700;line-height:1.4}
.exp-o.right{border-color:#5BD69A;background:rgba(91,214,154,.2)}
.exp-o.wrong{border-color:#FF7A8A;background:rgba(255,122,138,.18)}
.exp-o.gone{opacity:.22;text-decoration:line-through}
.exp-o:disabled{cursor:default}
.exp-fb{display:none}
.exp-fb.on{display:block;margin-top:12px;padding:11px 13px;border-radius:14px;font-size:13px;font-weight:800;line-height:1.5}
.exp-fb.good{background:rgba(91,214,154,.16)}
.exp-fb.bad{background:rgba(255,122,138,.15)}
.exp-fb .pl{color:#8CE8B4}
.exp-fb .mn{color:#FFA8A8}
.exp-fb .ex{margin-top:5px;font-weight:700;opacity:.86;font-size:12.5px}
.exp-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.exp-use{font:inherit;font-size:12.5px;font-weight:800;padding:9px 13px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.22);color:#fff}
.exp-use:hover{background:rgba(255,255,255,.2)}
.exp-use.skip{margin-left:auto;opacity:.8}
.exp-next{font:inherit;font-size:14px;font-weight:900;padding:12px 20px;border-radius:14px;border:0;cursor:pointer;
  background:linear-gradient(180deg,#FFD98A,#F2A24C);color:#3A2408;width:100%}

/* ---- схованка ---- */
.exp-cache{margin:auto;max-width:520px;text-align:center;padding:20px 4px}
.exp-cem{font-size:56px;margin-bottom:6px}
.exp-cache h2{font-size:26px;font-weight:900;margin:0 0 6px}

/* ---- підсумок ---- */
.exp-fin{margin:auto;max-width:560px;width:100%;text-align:center;padding:18px 2px}
.exp-fem{font-size:56px;line-height:1}
.exp-fin h2{font-size:25px;font-weight:900;margin:6px 0 6px}
.exp-fstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.exp-fstats div{background:rgba(0,0,0,.28);border-radius:14px;padding:10px 6px}
.exp-fstats b{display:block;font-size:20px;font-weight:900}
.exp-fstats span{font-size:10.5px;font-weight:800;opacity:.78}
.exp-card{background:rgba(0,0,0,.3);border-radius:18px;padding:14px;margin-bottom:10px;text-align:left}
.exp-card h3{font-size:14px;font-weight:900;margin:0 0 10px}
.exp-tr{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.exp-tr .nm{font-size:12.5px;font-weight:800;flex:0 0 42%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exp-tr .bar{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.exp-tr .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#FFD98A,#F2A24C)}
.exp-tr .pc{font-size:11.5px;font-weight:900;width:34px;text-align:right}
.exp-sm{font-size:11.5px;font-weight:700;opacity:.78;line-height:1.5;margin:9px 0 0}
.exp-ul{margin:0 0 10px;padding-left:18px;font-size:12.5px;font-weight:800;line-height:1.7}
.exp-none{font-size:12.5px;font-weight:700;opacity:.7}
.exp-rew{font-size:13px;font-weight:800;margin:12px 0;opacity:.95}
.exp-rew .best{display:block;font-size:11.5px;font-weight:800;opacity:.75;margin-top:3px}
.exp-fbtn{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.exp-btn{font:inherit;font-size:14px;font-weight:900;padding:12px 22px;border-radius:14px;border:0;cursor:pointer;
  background:linear-gradient(180deg,#FFD98A,#F2A24C);color:#3A2408}
.exp-btn.ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.24)}

@media(max-width:560px){
  .exp-arts{grid-template-columns:1fr}
  .exp-n{min-width:96px;padding:9px 7px}
  .exp-n b{font-size:12px}
  .exp-sun{width:150px;height:150px;margin-left:-75px}
}


/* ---- Тести НМТ: екран учня (етап Б, план 2) ----
   Тут, а не в team/css/team.css: це видно УЧНЕВІ. Межа між двома
   файлами проходить по тому, хто це бачить (CLAUDE.md). Класи мають
   власний префікс kbs-, щоб не зачепити наявні .kb-* старого екрана
   «База знань», який лишається в коді заради «Ігор». */
.kbs-wrap{max-width:980px}
.kbs-hero{display:flex;gap:12px;align-items:center;border-radius:22px;padding:16px;margin:10px 0 4px;border:1.5px solid transparent}
/* Три класи всередині героя (.kb-ic, .kb-t, .kb-s) у базі описані ЛИШЕ
   під .kb-card — герой предмета не картка, тож без цих трьох рядків
   емодзі лишилося б голим текстом, а назва — типовим h3. Повторюємо
   значення, а не розширюємо .kb-card: герой і картка — різні вузли, і
   зшивати їх одним селектором означало б, що правка одного мовчки
   міняє другий. */
.kbs-hero .kb-ic{width:52px;height:52px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;flex:none;box-shadow:0 4px 12px rgba(0,0,0,.07)}
.kbs-hero .kb-t{font-size:19px;line-height:1.2;color:var(--kc)}
.kbs-hero .kb-s{font-size:12.5px;font-weight:800;color:var(--muted);margin-top:3px}
html[data-theme="dark"] .kbs-hero .kb-ic{background:rgba(255,255,255,.10);color:#EAF2FF;box-shadow:none}
.kbs-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 10px}
.kbs-tab{border:1px solid var(--line);background:var(--surface);color:var(--muted);font-weight:800;font-size:13px;padding:8px 14px;border-radius:999px;cursor:pointer;min-height:36px}
.kbs-tab.on{background:var(--c1);border-color:var(--c1);color:#fff}
.kbs-grp{border:1px solid var(--line);border-radius:16px;background:var(--surface);margin-bottom:10px;overflow:hidden}
.kbs-gh{display:flex;align-items:center;gap:10px;width:100%;padding:13px 14px;background:none;border:none;cursor:pointer;text-align:left;font-weight:900;font-size:15px;color:var(--ink)}
.kbs-gh .n{margin-left:auto;font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap}
.kbs-gb{display:flex;flex-direction:column;gap:8px;padding:0 14px 12px}
.kbs-t{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:var(--card)}
.kbs-t.done{border-color:color-mix(in srgb,var(--c1) 45%,var(--line))}
.kbs-t.lock{opacity:.78}
.kbs-t .tb{white-space:nowrap;flex:none}
@media(max-width:560px){.kbs-t .tb{width:100%;margin-top:4px}}
.kbs-t .ti{flex:1;min-width:0}
.kbs-t .tn{font-weight:800;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.kbs-t .ts{font-size:12px;font-weight:700;color:var(--muted);margin-top:2px}
.kbs-sc{font-weight:900;font-size:14px;color:var(--c1-txt);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Прочерк «бал НМТ не визначено» приглушуємо ОКРЕМИМ правилом.
   Самого класу .muted мало: він оголошений вище (рядок 159) з тією самою
   специфічністю (0,1,0), тож виграє пізніше правило — і прочерк малювався
   б тим самим акцентним кольором, що й справжній бал. Тобто розрізнення
   «не визначено, а не оцінка», заради якого гілку й написано (scoreHTML,
   student/kb-student.js), учень би не побачив. */
.kbs-sc.muted{color:var(--muted)}
/* БЛОК УСПІШНОСТІ РЯДКА (§5.2 + замовлення Ростислава 16.09.2026):
   підпис, відсоток, під ними смужка. Значення переписані з картки
   домашки курсу (.hw-mts/.hw-mt/.hw-pb вище), а не успадковані від неї
   селектором: рядок Бази знань і картка домашки — різні вузли, і
   зшивати їх означало б, що правка одного мовчки міняє другий (той
   самий довід, що в шапці .kbs-hero .kb-ic). Ширина фіксована, бо
   рядок тут вузький, а праворуч від блоку стоять ще чіп балів, бал
   НМТ і кнопка. */
.kbs-pr{flex:none;width:126px;display:flex;flex-direction:column;gap:5px}
.kbs-prm{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.kbs-prm .k{color:var(--muted);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.kbs-prm b{margin-left:auto;font-size:13px;font-weight:900;font-variant-numeric:tabular-nums}
.kbs-prm b.g{color:#1d9d63}.kbs-prm b.r{color:#d9534f}.kbs-prm b.n{color:var(--muted)}
.kbs-bar{height:7px}
/* Чіп балів «13/18». Тонший за бал НМТ поруч навмисно: головне на
   рядку — успішність і дія, бали тут уточнення. */
.kbs-pts{flex:none;font-weight:900;font-size:12.5px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;background:rgba(120,130,150,.13);border-radius:999px;padding:3px 9px}
.kbs-pts.n{color:var(--muted)}
html[data-theme="dark"] .kbs-pts{background:rgba(255,255,255,.08)}
/* На телефоні рядок розкладається на три: назва згори, під нею смужка,
   чіп і бал НМТ, а знизу на всю ширину кнопка. Порядок заданий ЯВНО й
   кнопці теж: без order у неї нуль, тобто вона стала б перед смужкою й
   розірвала б рядок показників навпіл — так було, доки показник був
   один (.kbs-bar{order:3}), і саме тому смужка колись опинялася під
   кнопкою.
   НАЗВІ ОКРЕМИЙ РЯДОК ТРЕБА ВИПИСАТИ, А НЕ ЧЕКАТИ ВІД order. Розрив
   рядка flex рахує за flex-basis, а не за order: у .ti (вище) стоїть
   flex:1, тобто basis 0, і в .kbs-pr так само — тож обидва «вміщаються»
   поруч із чіпом і балом НМТ, і всі четверо лишаються на ОДНОМУ рядку
   (на новий рядок їх виганяє лише кнопка з width:100%). Далі вільне
   місце ділиться, але .kbs-pr забирає свої 120px за min-width, а назві
   лишається залишок — на 360px це кілька десятків пікселів, і при
   overflow-wrap:anywhere назва ламається по одній-дві літери в стовпчик.
   Тому flex-basis 100%: назва займає перший рядок цілком, як і сказано
   абзацом вище. min-width:0 лишається від правила .kbs-t .ti. */
@media(max-width:560px){
  .kbs-t{flex-wrap:wrap}
  .kbs-t .ti{order:1;flex:0 0 100%}
  .kbs-pr{order:3;flex:1;width:auto;min-width:120px}
  .kbs-pts{order:4}
  .kbs-sc{order:5;margin-left:auto}
  .kbs-t .tb{order:6}
}