/* ===================================================================
   promova.zno — спільні стилі для сторінок кабінету
   Використовують: reyestratsiya.html, kabinet.html,
                   probnyk.html, vykladach.html
   Палітра та шрифти ті самі, що на index.html
   =================================================================== */

:root{
  --ink:#4A1B2E;
  --ink-2:#63273D;
  --paper:#FFFFFF;
  --white:#FFFFFF;
  --tint:#FFF8F0;
  --accent:#E96E98;
  --accent-deep:#B23A63;
  --accent-light:#F9BBD0;
  --accent-tint:#F9BBD0;
  --accent-shadow:#B23A63;
  --on-accent:#3D1425;
  --muted:#7A6068;
  --on-dark:#F0D8E1;
  --on-dark-2:#CFA7B6;
  --line:#F5DDE5;
  --line-strong:#EFC6D5;
  --track:#F7E4EA;
  --note-bg:#FFF6EE;
  --ok:#1B7A55;
  --ok-bg:#E6F4EE;
  --header-bg:rgb(249,187,208);
  --shadow:rgba(74,27,46,.22);
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{font-family:'Onest',system-ui,sans-serif;background:var(--tint);color:var(--ink);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
body > .wrap{flex:1 0 auto;width:100%}   /* контент розтягується, футер лишається внизу */
/* width:100% — не прикраса. body тут flex-колонка, а .wrap має margin:auto; без явної
   ширини браузер робить .wrap «за вмістом», і на телефоні сторінка розпиралася до 1080px
   (фото в привітанні, каруселі). З width:100% вона завжди рівно на ширину екрана. */
h1,h2,h3,.disp{font-family:'Unbounded',system-ui,sans-serif;line-height:1.15;letter-spacing:-.02em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:520px}
.hidden{display:none!important}

/* ---------- шапка ---------- */
header{position:sticky;top:0;z-index:60;background:var(--header-bg);border-bottom:1px solid var(--line-strong);color:var(--ink)}
/* Шапка суцільна (без прозорості й blur) — так Safari на iOS 26 сам зафарбовує смугу
   над нею. Жодних ::before над шапкою: Safari їх не малює, а колір фону такого
   псевдоелемента плутає Safari, коли той визначає колір смуги. */
.nav{display:flex;align-items:center;gap:16px;height:64px}
.logo{font-family:'Unbounded';font-weight:800;font-size:18px;text-decoration:none;letter-spacing:-.03em;display:flex;align-items:center;min-height:44px}
.logo span{color:#8C2A4E}
.logo small{font-family:'Onest';font-size:12px;font-weight:500;color:#6B3348;letter-spacing:0;margin-left:9px}
.who{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:14px}
.who b{font-weight:600}
.who .tier{background:var(--ink);color:var(--accent-light);font-size:11px;font-weight:700;letter-spacing:.08em;padding:4px 10px;border-radius:99px}
.who a{color:#6B3348;text-decoration:none;font-weight:600}
.who a:hover{color:var(--ink)}
@media(max-width:640px){.who .tier,.who b{display:none}}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:13px 24px;border-radius:999px;border:0;font-family:'Onest';font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.btn-main{background:var(--accent);color:var(--ink);box-shadow:0 4px 0 var(--accent-shadow)}
/* кнопка-заглушка: дію вже виконано, натискати нема куди */
.btn.is-off{background:var(--track);color:var(--muted);box-shadow:none;cursor:default;
  border:1px solid var(--line-strong)}
.btn.is-off:hover{transform:none;background:var(--track)}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--accent-shadow)}
.btn-main:active{transform:translateY(2px);box-shadow:0 2px 0 var(--accent-shadow)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--accent-light);box-shadow:0 4px 0 rgba(74,27,46,.35)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn-wide{width:100%}

/* ---------- картки ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:28px}
@media(max-width:600px){.card{padding:20px}}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);display:block;margin-bottom:10px}
.lead{color:var(--muted)}

/* ---------- форма ---------- */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-size:14px;font-weight:600}
.field input,.field select{min-height:50px;padding:13px 15px;border:1.5px solid var(--line-strong);border-radius:10px;font-family:'Onest';font-size:16px;background:var(--white);color:var(--ink)}
.field input::placeholder{color:#B49AA4}
.field small{font-size:13px;color:var(--muted)}
.field.bad input{border-color:var(--accent-deep);background:#FFF4F7}
.err{font-size:13px;color:var(--accent-deep);font-weight:600}

/* ---------- банер розробнику ---------- */
.devnote{display:none}          /* учень плашок не бачить — див. app.js, ?dev=1 */
.dev-on .devnote{display:block}
.devnote{background:var(--accent-tint);border-left:5px solid var(--accent-deep);border-radius:12px;padding:18px 20px;margin-bottom:26px;font-size:14px;color:var(--on-accent);line-height:1.55}
.devnote b{color:var(--ink)}

/* плашка пробника — світло-рожева, як шапка */
.probnyk-card{background:var(--accent-tint);border-color:var(--accent-tint)}
.probnyk-card .eyebrow{color:#8C2A4E}
.probnyk-card h2{color:var(--ink)}
.probnyk-card p{color:var(--on-accent)}
/* дві дії в картці пробника: темна — головна, світла — ігри */
.probnyk-cta{display:flex;flex-wrap:wrap;gap:12px}
.btn-play{background:var(--white);color:var(--accent-deep);box-shadow:0 4px 0 rgba(74,27,46,.18)}
.btn-play:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(74,27,46,.18)}
.btn-play:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(74,27,46,.18)}
@media(max-width:520px){.probnyk-cta .btn{width:100%}}

/* ---------- вітальна картка кабінету ---------- */
.hello{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
@media(max-width:820px){.hello{grid-template-columns:1fr;gap:24px}}
.hello h1{font-size:clamp(26px,4vw,36px);font-weight:800;margin-bottom:10px}
.hello .sub{color:var(--accent-deep);font-weight:600;margin-bottom:14px}
.hello p{color:var(--muted);margin-bottom:22px}
.hello-pic{aspect-ratio:4/3;border-radius:14px;background:var(--accent-tint);display:grid;place-items:center;text-align:center;padding:18px;color:var(--on-accent);font-size:13px;line-height:1.6;overflow:hidden}
.hello-pic img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- сітки ---------- */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.g3{grid-template-columns:1fr}}
@media(max-width:700px){.g2{grid-template-columns:1fr}}

/* ---------- прев'ю відеоуроків ---------- */
.vid{aspect-ratio:16/9;border-radius:14px;background:var(--accent-tint);border:2px dashed var(--accent-deep);display:grid;place-items:center;text-align:center;padding:18px;color:var(--on-accent);font-size:13px;line-height:1.6}
.vid b{display:block;font-size:15px;margin-bottom:4px}
.vid img,.vid iframe{width:100%;height:100%;border:0;border-radius:12px;display:block;object-fit:cover}

/* ---------- безкоштовні матеріали (PDF) ---------- */
.files{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.files{grid-template-columns:1fr}}
.file{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
      border-radius:14px;padding:20px 20px 18px;box-shadow:0 6px 18px -14px var(--shadow)}
.file .tag{align-self:flex-start;background:var(--accent-tint);color:var(--on-accent);font-size:11px;
      font-weight:700;letter-spacing:.08em;padding:4px 10px;border-radius:99px;margin-bottom:12px}
.file h3{font-size:17px;font-weight:800;line-height:1.3;margin-bottom:6px}
.file p{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:16px;flex:1 0 auto}
.file .btn{width:100%;min-height:44px;padding:11px 18px;font-size:15px}
/* заглушка, поки PDF не покладено в docs/free/ */
.file.empty{background:var(--accent-tint);border:2px dashed var(--accent-deep);box-shadow:none;
      text-align:center;justify-content:center;min-height:170px;color:var(--on-accent)}
.file.empty h3{font-size:15px}
.file.empty p{color:var(--on-accent);font-size:13px;flex:0;margin-bottom:0}

/* кнопка «до матеріалів» під записом уроку */
.vlinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.vlinks a{display:inline-flex;align-items:center;font-size:13px;font-weight:600;
      padding:7px 13px;border-radius:99px;text-decoration:none;
      background:var(--tint);color:var(--accent-deep);border:1px solid var(--line-strong);
      transition:background .18s ease,transform .18s ease}
.vlinks a:hover{background:var(--accent-tint);transform:translateY(-1px)}
/* картка, на яку перейшли із запису уроку */
.file.flash{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
@media(prefers-reduced-motion:no-preference){
  .file.flash{animation:flashcard 2.6s ease forwards}
}
@keyframes flashcard{
  0%,60%{box-shadow:0 0 0 4px var(--accent-tint)}
  100%{box-shadow:0 6px 18px -14px var(--shadow)}
}

/* ---------- прогрес ---------- */
.bar{height:8px;border-radius:99px;background:var(--track);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent-deep);border-radius:99px;
  transition:width .9s cubic-bezier(.22,.7,.3,1)}
@media(prefers-reduced-motion:reduce){.bar i{transition:none}}

/* ---------- таблиця учнів ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--white)}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:760px}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
th{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--note-bg)}
td b{font-weight:600}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:4px 11px;border-radius:99px;white-space:nowrap}
.pill.basic{background:var(--track);color:var(--accent-deep)}
.pill.pro{background:var(--accent-tint);color:var(--on-accent)}
.pill.vip{background:var(--ink);color:var(--accent-light)}
.progcell{display:flex;align-items:center;gap:10px;min-width:150px}
.progcell span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.empty{padding:44px 20px;text-align:center;color:var(--muted)}

/* ---------- тарифи ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.plan{background:var(--white);border:1.5px solid var(--line);border-radius:18px;padding:26px;position:relative}
.plan.best{border-color:var(--ink);border-width:2px;box-shadow:0 20px 44px -26px var(--shadow)}
.plan .flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--white);font-size:11px;font-weight:700;letter-spacing:.07em;padding:6px 13px;border-radius:99px;text-transform:uppercase;white-space:nowrap}
.plan h3{font-family:'Unbounded';font-size:20px;font-weight:800;margin-bottom:6px}
.plan .for{font-size:14px;color:var(--muted);margin-bottom:16px;min-height:44px}
.price{font-family:'Unbounded';font-size:27px;font-weight:800;margin-bottom:16px}
.price small{font-family:'Onest';font-size:13px;font-weight:400;color:var(--muted)}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.plan li{padding-left:24px;position:relative;font-size:14px}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.plan li.no{color:#B49AA4}
.plan li.no::before{content:"—";color:var(--line-strong)}
.plan .btn{width:100%}
.plan.current{border-color:var(--ok)}
.plan.current .flag{background:var(--ok)}

footer{background:var(--ink);color:var(--on-dark-2);padding:32px 0;font-size:14px;text-align:center;margin-top:60px;flex-shrink:0}
footer a{color:var(--on-dark)}

/* ---------- три великі кнопки розділів (оплачений кабінет) ---------- */
.hub{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:44px}
/* пʼята й шоста плашки стають другим рядом — по половині ширини кожна */
.hub a:nth-child(n+5){grid-column:span 2}
@media(max-width:1000px){.hub{grid-template-columns:repeat(2,1fr)}
  .hub a:nth-child(n+5){grid-column:auto}}
@media(max-width:560px){.hub{grid-template-columns:1fr}}
.hub a{display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:104px;
  padding:18px 20px;border-radius:16px;text-decoration:none;
  background:var(--accent-tint);color:var(--ink);border:1px solid var(--line-strong);
  box-shadow:0 4px 0 var(--line-strong);transition:transform .18s ease,box-shadow .18s ease}
.hub a:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--line-strong)}
.hub a:active{transform:translateY(1px);box-shadow:0 2px 0 var(--line-strong)}
.hub b{font-family:'Unbounded',system-ui,sans-serif;font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.hub span{font-size:13.5px;line-height:1.4;color:var(--ink-2)}

/* ---------- пошук по матеріалах ---------- */
.msearch{position:relative;margin-bottom:14px}
.msearch input{width:100%;box-sizing:border-box;padding:15px 46px 15px 18px;
  font:inherit;font-size:15.5px;color:var(--ink);
  background:var(--white);border:1px solid var(--line-strong);border-radius:14px;
  -webkit-appearance:none;appearance:none}
.msearch input::placeholder{color:var(--muted)}
.msearch input:focus{outline:none;border-color:var(--accent-deep)}
.msearch input::-webkit-search-cancel-button{display:none}
.msearch button{position:absolute;top:50%;right:10px;transform:translateY(-50%);
  width:30px;height:30px;line-height:1;font-size:20px;cursor:pointer;
  color:var(--ink-2);background:var(--accent-tint);border:0;border-radius:50%}
.msearch button:hover{background:var(--accent);color:var(--ink)}
.mscount{margin:0 0 18px;font-size:13.5px;color:var(--muted)}
.mswhere{display:inline-block;margin-bottom:8px;padding:5px 11px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--accent-tint);color:var(--accent-deep)}

/* ---------- рядок «Далі» над розділами кабінету ---------- */
.nextup{display:flex;align-items:center;gap:16px;margin-bottom:22px;padding:16px 20px;
  background:var(--accent-tint);border:1px solid var(--accent);border-radius:16px;
  text-decoration:none;color:inherit}
.nextup:hover{background:var(--white);border-color:var(--accent-deep)}
.nextup-tag{flex:none;font-family:'Unbounded',system-ui,sans-serif;font-size:11px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);
  background:var(--white);border-radius:999px;padding:7px 13px}
.nextup-body{flex:1;min-width:0}
.nextup-body b{display:block;font-size:15.5px;font-weight:700;line-height:1.3;color:var(--ink)}
.nextup-body small{display:block;margin-top:3px;font-size:13px;color:var(--ink-2)}
.nextup-go{flex:none;font-size:20px;font-weight:800;color:var(--accent-deep)}
@media(max-width:560px){.nextup{gap:12px;padding:14px 16px}.nextup-tag{padding:6px 10px}}

/* ---------- плашка прогресу під розділами ---------- */
.pcard{margin-bottom:44px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.pgrid.one{grid-template-columns:1fr}
.pgrid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.pgrid.three{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr}}
.pstat{background:var(--white);border:1px solid var(--line-strong);border-radius:16px;padding:18px 20px}
.pstat .pnum{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.pstat .pnum b{font-family:'Unbounded',system-ui,sans-serif;font-size:30px;font-weight:800;
  letter-spacing:-.03em;line-height:1;color:var(--accent-deep)}
.pstat .pnum span{font-size:14px;font-weight:600;color:var(--ink-2)}
.pstat .bar{margin-bottom:10px}
.pstat small{display:block;font-size:13px;color:var(--muted);line-height:1.45}
.pstat.done .pnum b{color:var(--ok)}
.pstat.done .bar i{background:var(--ok)}
.unsub{margin:26px 0 8px;text-align:center;font-size:14px}
.unsub a{color:var(--muted);text-underline-offset:3px}
.unsub a:hover{color:var(--ink)}
.phint{margin-top:16px;font-size:13.5px;color:var(--muted);line-height:1.5}

/* ---------- результат пробника на картці ---------- */
.probres{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.probres div{background:var(--white);border:1px solid var(--line-strong);border-radius:12px;
  padding:10px 16px;min-width:96px}
.probres b{display:block;font-family:'Unbounded',system-ui,sans-serif;font-size:22px;font-weight:800;line-height:1.2}
.probres small{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---------- розклад ---------- */
.rz-top{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.rz-top .rz-titles{flex:1 1 260px}
.rz-nav{display:flex;align-items:center;gap:12px;margin-left:auto}
.rz-nav b{font-family:'Unbounded',system-ui,sans-serif;font-size:17px;font-weight:800;
  min-width:9ch;text-align:center}
.rz-nav button{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line-strong);
  background:var(--white);color:var(--ink);font-size:19px;line-height:1;cursor:pointer;
  transition:background .18s ease}
.rz-nav button:hover:not(:disabled){background:var(--accent-tint)}
.rz-nav button:disabled{opacity:.35;cursor:default}
.rz-body{background:var(--tint);border:1px solid var(--line);border-radius:18px;padding:22px}
@media(max-width:600px){.rz-body{padding:14px}}
.rz-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rz-cols.c4{grid-template-columns:repeat(4,1fr);gap:14px}   /* місяці з чотирма днями */
@media(max-width:1000px){.rz-cols.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.rz-cols{grid-template-columns:1fr}}
@media(max-width:620px){.rz-cols.c4{grid-template-columns:1fr}}
/* колонка тягнеться на всю висоту рядка, а картки всередині ділять її
   порівну — тому клітинки в усіх днях однакового розміру, навіть якщо
   в якомусь дні тексту менше */
.rz-col{display:grid;grid-template-rows:auto auto 1fr}
.rz-col > h3{font-size:17px;font-weight:800;margin-bottom:2px}
.rz-col > p{font-size:13px;color:var(--muted);margin-bottom:12px}
.rz-items{display:grid;grid-auto-rows:1fr;gap:12px}
.rz-card{background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column}
.rz-card .rz-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.rz-card .rz-date{font-size:14px;font-weight:700;flex:1}
.rz-tag{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:4px 10px;border-radius:99px;white-space:nowrap;
  background:var(--track);color:var(--ink-2)}
.rz-tag.online{background:var(--ink);color:var(--accent-light)}
.rz-tag.sam{background:var(--accent);color:var(--on-accent)}
.rz-card .rz-name{font-size:15px;line-height:1.4;margin-bottom:10px}
.rz-card .rz-meta{font-size:13px;color:var(--muted);margin-top:auto}
.rz-empty{text-align:center;color:var(--muted);padding:38px 20px;font-size:15px}
.probres .d b{font-family:'Onest',system-ui,sans-serif;font-size:15px;font-weight:700;padding-top:4px}

/* ---------- список місяців (записи уроків, матеріали) ---------- */
.mlist{background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.m + .m{border-top:1px solid var(--line)}
.m-head{display:flex;align-items:center;gap:16px;width:100%;padding:18px 22px;border:0;
  background:transparent;font-family:'Onest',system-ui,sans-serif;font-size:17px;
  color:var(--ink);text-align:left;cursor:pointer;transition:background .18s ease}
.m-head:hover{background:var(--tint)}
.m-num{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-tint);color:var(--on-accent);font-weight:800;font-size:16px}
.m.open .m-num{background:var(--ink);color:var(--accent-light)}
.m-name{flex:1;display:flex;flex-direction:column;gap:1px;font-weight:700}
.m-name small{font-size:13px;font-weight:500;color:var(--muted)}
.m-go{flex:0 0 auto;font-size:15px;font-weight:600;color:var(--accent-deep)}
.m.open .m-go{color:var(--muted)}
.m-body{padding:2px 22px 26px}
.m-empty{color:var(--muted);font-size:15px;padding:4px 0 2px}
@media(max-width:600px){
  .m-head{padding:15px 14px;gap:12px}
  .m-body{padding:2px 14px 20px}
  .m-go{display:none}
}

/* ---------- банер угорі оплаченого кабінету ----------
   Це не картинка, а текст: напис лишається різким на будь-якому екрані,
   правиться просто в розмітці й не обрізається на телефоні. Висоту задає
   сам текст, тому aspect-ratio тут немає.
   Щоб повернути фото: розкоментуй .banner-photo нижче й покладіть у
   розмітку <img> замість двох абзаців. */
.banner{
  position:relative;overflow:hidden;border-radius:18px;margin-bottom:22px;
  padding:38px 42px;border:1px solid var(--ink);
  background:
    radial-gradient(120% 150% at 88% 8%, rgba(233,110,152,.45) 0%, rgba(233,110,152,0) 62%),
    radial-gradient(90% 120% at 96% 100%, rgba(249,187,208,.16) 0%, rgba(249,187,208,0) 65%),
    linear-gradient(135deg, #4A1B2E 0%, #3D1425 100%);
  box-shadow:0 10px 30px -20px var(--shadow);
}
.banner-lead{
  position:relative;z-index:1;font-size:16px;line-height:1.55;
  color:var(--on-dark-2);max-width:56ch;margin-bottom:14px;
}
.banner-quote{
  position:relative;z-index:1;font-family:'Unbounded',system-ui,sans-serif;
  font-size:clamp(18px,2.2vw,26px);font-weight:800;line-height:1.3;letter-spacing:-.02em;
  color:var(--accent-light);max-width:40ch;
}
.banner-quote em{font-style:normal;color:var(--white);white-space:nowrap}
@media(max-width:600px){
  .banner{border-radius:14px;padding:24px 20px}
  .banner-lead{font-size:15px;margin-bottom:12px}
  /* на вузькому екрані цитата займає багато рядків, тож тримаємо їх щільніше */
  .banner-quote{font-size:17px;line-height:1.26}
}
/* якщо колись повернеш фото */
.banner-photo{padding:0;aspect-ratio:2286/762}
.banner-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* ---------- карусель карток (безкоштовні матеріали) ---------- */
.carousel{position:relative}
.ftrack{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 2px 10px;
  scrollbar-width:none;-ms-overflow-style:none}
.ftrack::-webkit-scrollbar{display:none}
.ftrack > .file{flex:0 0 calc((100% - 36px)/3);scroll-snap-align:start}
@media(max-width:900px){.ftrack > .file{flex-basis:calc((100% - 18px)/2)}}
@media(max-width:560px){.ftrack > .file{flex-basis:100%}}
.zgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.cbtn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--ink);color:var(--accent);font-size:26px;line-height:1;
  display:grid;place-items:center;box-shadow:0 4px 14px -4px var(--shadow);
  transition:opacity .2s ease}
.cbtn:hover{opacity:.85}
.cbtn[disabled]{opacity:.25;cursor:default}
.cbtn.prev{left:-14px}
.cbtn.next{right:-14px}
@media(max-width:600px){.cbtn.prev{left:2px}.cbtn.next{right:2px}}
.dots{display:flex;justify-content:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:var(--line-strong);transition:background .2s ease,width .2s ease}
.dots button[aria-current="true"]{background:var(--accent-deep);width:24px;border-radius:99px}

/* ---------- кнопки тестів під карткою матеріалу ---------- */
.file .tests{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.file .tests a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:46px;padding:8px 6px;border-radius:10px;text-decoration:none;text-align:center;
  font-size:13px;font-weight:700;line-height:1.25;
  background:var(--tint);color:var(--ink);border:1.5px solid var(--line-strong);
  transition:background .18s ease,border-color .18s ease}
.file .tests a:hover{background:var(--accent-tint);border-color:var(--accent-deep)}
.file .tests a small{font-size:11px;font-weight:600;color:var(--muted)}
.file .tag.ok{background:var(--ok-bg);color:var(--ok)}
.file .tests a.done{background:var(--ok-bg);border-color:var(--ok)}
.file .tests a.done small{color:var(--ok)}
.file.empty .tests a{background:var(--white);border-color:var(--accent-deep)}

/* СПИСОК ПЕРЕГЛЯНУТИХ ЗАПИСІВ у кабінеті викладача */
.pseen-m{margin-bottom:16px}
.pseen-m:last-child{margin-bottom:0}
.pseen-m h4{display:flex;align-items:baseline;gap:10px;font-size:14px;font-weight:800;
  margin-bottom:8px}
.pseen-m h4 small{font-size:12.5px;font-weight:600;color:var(--muted)}
.pseen-m ul{list-style:none;border:1px solid var(--line);border-radius:12px;
  background:var(--white);overflow:hidden}
.pseen-m li{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:14px;
  border-top:1px solid var(--line);color:var(--muted)}
.pseen-m li:first-child{border-top:0}
.pseen-m li i{width:9px;height:9px;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--line-strong)}
.pseen-m li em{margin-left:auto;font-style:normal;font-size:12px;white-space:nowrap}
.pseen-m li.on{color:var(--ink)}
.pseen-m li.on i{background:var(--ok);border-color:var(--ok)}
.pseen-m li.on em{color:var(--ok);font-weight:700}

/* ГАЛОЧКА «ПЕРЕГЛЯНУТО» під записом уроку.
   Справжній checkbox лишаємо в розмітці (клавіатура, доступність),
   але ховаємо, а малюємо квадратик самі. */
.seen{display:inline-flex;align-items:center;gap:9px;margin:12px 0 2px;
  padding:7px 13px 7px 10px;border:1px solid var(--line-strong);border-radius:999px;
  background:var(--white);font-size:13.5px;font-weight:600;color:var(--ink-2);
  cursor:pointer;transition:background .18s ease,border-color .18s ease}
.seen:hover{border-color:var(--accent-deep)}
.seen input{position:absolute;opacity:0;width:0;height:0}
.seen i{width:19px;height:19px;flex:0 0 auto;border:2px solid var(--line-strong);
  border-radius:6px;background:var(--white);position:relative;
  transition:background .18s ease,border-color .18s ease}
.seen i::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--white);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(.4);
  opacity:0;transition:opacity .16s ease,transform .16s ease}
.seen.on{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.seen.on i{background:var(--ok);border-color:var(--ok)}
.seen.on i::after{opacity:1;transform:rotate(45deg) scale(1)}
.seen input:focus-visible + i{outline:3px solid var(--accent);outline-offset:2px}

/* ІСТОРІЯ СПРОБ — складаний рядок під тестом на всю ширину картки.
   Працює на <details>, тож розкривається без скрипта. */
.tlog{margin-top:8px;font-size:12.5px}
.tlog summary,.tlog.none{display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 12px;border:1px solid var(--line-strong);border-radius:12px;
  background:var(--white);color:var(--ink-2);font-weight:600;text-align:left}
.tlog summary{cursor:pointer;list-style:none;
  transition:background .18s ease,border-color .18s ease}
.tlog summary::-webkit-details-marker{display:none}
.tlog summary small,.tlog.none small{margin-left:auto;font-size:11.5px;font-weight:600;
  color:var(--muted)}
/* стрілку малюємо рамкою, а не символом: так вона є в будь-якому шрифті */
.tlog summary::after{content:'';width:0;height:0;flex:0 0 auto;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;transition:transform .2s ease}
.tlog[open] summary::after{transform:rotate(180deg)}
.tlog summary:hover{background:var(--accent-tint);border-color:var(--accent-deep)}
/* рядок без жодної спроби — той самий вигляд, але неклікабельний */
.tlog.none{color:var(--muted);border-style:dashed}
.file.empty .tlog.none{border-color:var(--accent-deep)}
.tlog ol{list-style:none;margin-top:8px;border:1px solid var(--line);border-radius:12px;
  background:var(--white);overflow:hidden}
.tlog li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line)}
.tlog li:first-child{border-top:0}
.tlog i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.02em;
  color:var(--accent-deep);background:var(--accent-tint);
  padding:2px 7px;border-radius:99px;white-space:nowrap}
/* контейнер списку місяців має клас .mlist — той самий, що й списки
   відповідностей у тестах. Щоб його нумерація не пролізла в історію
   спроб, гасимо лічильник саме тут. */
.tlog ol li::before{content:none}

/* КНОПКА «ЗДАТИ ТЕСТ» — липне до низу екрана, поки йде тест.
   Смужка на всю ширину і з непрозорим тлом: інакше кнопка накривала б
   варіанти відповіді, які лишаються під нею. */
.give{position:sticky;bottom:0;z-index:5;display:flex;justify-content:center;
  margin:26px -20px 0;padding:14px 20px 18px;
  background:linear-gradient(to top,var(--tint) 62%,rgba(255,248,240,0))}
.give .btn{background:var(--white);
  box-shadow:0 10px 26px -14px var(--shadow),0 4px 0 var(--line-strong)}
.give .btn:hover{background:var(--accent-tint)}
.tlog b{font-weight:700;color:var(--ink);white-space:nowrap}
.tlog span{color:var(--muted);white-space:nowrap}
.tlog em{margin-left:auto;font-style:normal;font-weight:700;color:var(--ink);white-space:nowrap}

/* ---------- сторінка тесту ---------- */
.qcard .qnum{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:8px}
.qcard .qtext{font-family:'Onest',system-ui,sans-serif;font-size:18px;font-weight:700;
  line-height:1.5;margin-bottom:16px}
/* слово, про яке питають — щоб його було видно в жирному тексті */
.qcard .qtext b{background:var(--accent-tint);color:var(--accent-deep);
  padding:1px 7px;border-radius:6px;box-decoration-break:clone;
  -webkit-box-decoration-break:clone}
/* саме речення — трохи легше за питання, окремим рядком */
.qcard .qtext .sent{display:block;margin-top:8px;font-weight:500;color:var(--ink-2)}
.qcard .opts{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.opt{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  padding:13px 16px;border-radius:12px;border:1.5px solid var(--line-strong);
  background:var(--white);color:var(--ink);font-family:'Onest',system-ui,sans-serif;
  font-size:16px;line-height:1.45;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.opt:hover:not(:disabled){border-color:var(--accent-deep)}
.opt:disabled{cursor:default}
.opt .mark{flex:0 0 auto;width:22px;height:22px;border-radius:50%;margin-top:1px;
  border:1.5px solid var(--line-strong);display:grid;place-items:center;
  font-size:13px;font-weight:800;line-height:1}
.opt.on{border-color:var(--accent-deep);background:var(--accent-tint)}
.opt.on .mark{background:var(--accent-deep);border-color:var(--accent-deep)}
.opt.right{border-color:var(--ok);background:var(--ok-bg)}
.opt.right .mark{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.wrong{border-color:var(--accent-deep);background:#FFF4F7}
.opt.wrong .mark{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.qcard .check{margin-bottom:14px}
.qcard .exp{background:var(--note-bg);border-left:4px solid var(--accent-deep);
  border-radius:10px;padding:14px 16px;font-size:15px;line-height:1.55}
.qcard .exp.ok{border-left-color:var(--ok);background:var(--ok-bg)}

/* ---------- завдання на відповідність ---------- */
.qcard .qtag{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;
  letter-spacing:.04em;padding:3px 9px;border-radius:99px;
  background:var(--accent-tint);color:var(--on-accent);vertical-align:2px}
.mlist{list-style:none;counter-reset:m;display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.mlist li{counter-increment:m;display:flex;align-items:center;gap:12px;
  padding:11px 14px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--white)}
.mlist li::before{content:counter(m)".";font-weight:700;color:var(--accent-deep);flex:0 0 auto}
.mlist .mtx{flex:1;font-size:16px;line-height:1.45;font-weight:400}
.mlist select{flex:0 0 auto;min-height:44px;padding:8px 10px;border:1.5px solid var(--line-strong);
  border-radius:9px;font-family:'Onest',system-ui,sans-serif;font-size:15px;
  background:var(--white);color:var(--ink)}
.mlist li.right{border-color:var(--ok);background:var(--ok-bg)}
.mlist li.wrong{border-color:var(--accent-deep);background:#FFF4F7}
.mlist .mres{flex:0 0 auto;font-size:13px;font-weight:700;white-space:nowrap}
.mlist li.right .mres{color:var(--ok)}
.mlist li.wrong .mres{color:var(--accent-deep)}
.mopts{list-style:none;background:var(--note-bg);border-radius:12px;padding:15px 18px;
  display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.45;margin-bottom:14px}
.mopts b{color:var(--accent-deep)}
@media(max-width:520px){
  .mlist li{flex-wrap:wrap}
  .mlist .mtx{flex:1 0 100%;order:2}
  .mlist select{order:3;margin-left:auto}
}

/* ---------- персональна пропозиція після пробника ---------- */
.offer{position:relative;overflow:hidden;border-radius:18px;padding:26px 28px;margin-bottom:22px;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);color:var(--white)}
.offer .eyebrow{color:var(--accent-light);margin-bottom:8px}
.offer h2{font-size:clamp(20px,3.4vw,25px);font-weight:800;margin-bottom:8px;color:var(--white)}
.offer p{font-size:15px;line-height:1.55;color:var(--on-dark);margin-bottom:18px;max-width:62ch}
.offer .btn{background:var(--white);color:var(--accent-deep);box-shadow:0 4px 0 rgba(0,0,0,.18)}
.offer .btn:hover{transform:translateY(-2px)}
.offer.done{background:var(--ok-bg);color:var(--ink);border:1px solid var(--ok)}
.offer.done .eyebrow{color:var(--ok)}
.offer.done h2{color:var(--ink)}
.offer.done p{color:var(--muted);margin-bottom:0}
@media(max-width:600px){.offer{padding:22px 18px}}

/* спливна плашка */
.zback{position:fixed;inset:0;z-index:190;display:none;align-items:center;justify-content:center;
  padding:20px;overflow-y:auto;background:rgba(35,12,22,.68);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.zback.on{display:flex}
.zbox{position:relative;width:100%;max-width:440px;margin:auto;border-radius:26px;padding:38px 34px 32px;
  text-align:center;color:var(--white);box-shadow:0 30px 80px rgba(30,10,20,.45);
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
  animation:auth-in .22s ease-out}
@media(prefers-reduced-motion:reduce){.zbox{animation:none}}
.zbox .zx{position:absolute;top:12px;right:14px;width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(255,255,255,.18);color:var(--white);font-size:22px;line-height:1;cursor:pointer}
.zbox .zx:hover{background:rgba(255,255,255,.32)}
.zbox .zicon{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;background:var(--white);
  color:var(--accent-deep);display:grid;place-items:center;
  font-family:'Unbounded',system-ui,sans-serif;font-size:34px;font-weight:800}
.zbox .eyebrow{color:var(--accent-light);margin-bottom:8px}
.zbox h2{font-family:'Unbounded',system-ui,sans-serif;font-size:23px;font-weight:800;
  line-height:1.3;margin-bottom:10px;color:var(--white)}
.zbox p{font-size:15px;line-height:1.55;color:var(--on-dark);margin-bottom:22px}
.zbox .btn{width:100%;background:var(--white);color:var(--accent-deep);box-shadow:0 4px 0 rgba(0,0,0,.18)}
.zbox .zlater{display:block;margin-top:14px;font-size:14px;color:var(--on-dark-2);
  background:none;border:0;cursor:pointer;width:100%}
.zbox .zlater:hover{color:var(--white)}

/* ціни зі знижкою */
.plan .price s{font-family:'Onest',system-ui,sans-serif;font-size:20px;font-weight:600;
  color:var(--muted);text-decoration-thickness:2px;margin-right:10px}
.plan .saveflag{display:inline-block;margin-left:8px;font-size:11px;font-weight:800;letter-spacing:.06em;
  padding:3px 9px;border-radius:99px;background:var(--ok-bg);color:var(--ok);vertical-align:4px}

/* ---------- кабінет викладача: список учнів і панель ---------- */
.stu-list{border:1px solid var(--line);border-radius:16px;background:var(--white);overflow:hidden}
.stu{
  display:flex;align-items:center;gap:16px;padding:16px 20px;
  border-top:1px solid var(--line);
}
.stu:first-child{border-top:0}
.stu-av{
  flex:0 0 46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-tint);color:var(--on-accent);
  font-family:'Unbounded',system-ui,sans-serif;font-size:14px;font-weight:800;letter-spacing:.02em;
}
.stu-txt{flex:1 1 auto;min-width:0}
.stu-name{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-weight:700;font-size:17px}
.stu-sub{font-size:14px;color:var(--muted);margin-top:2px}
.stu .btn{min-height:42px;padding:10px 20px;font-size:15px;flex:0 0 auto}
@media(max-width:560px){
  .stu{flex-wrap:wrap}
  .stu-txt{flex:1 1 100%;order:3}
  .stu .btn{margin-left:auto}
}

/* чипи-перемикачі: тариф, група, місяці */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:10px 18px;
  border:1.5px solid var(--line-strong);border-radius:99px;background:var(--white);
  font-family:'Onest';font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.chip:hover{transform:translateY(-1px);border-color:var(--accent-deep)}
.chip:active{transform:translateY(1px)}
.chip.on{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.chip.on::before{content:"✓";font-weight:800}
.chip.lock::before{content:"🔒";font-weight:400}

/* секція всередині панелі учня */
.psec{margin-bottom:26px}
.psec > .eyebrow{margin-bottom:8px}
.psec .lead{font-size:15px;margin-bottom:14px}
.pback{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-weight:600;color:var(--accent-deep);text-decoration:none;margin-bottom:10px;
}
.pback:hover{color:var(--ink)}
.pfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:26px}
.pfact{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.pfact b{display:block;font-family:'Unbounded',system-ui,sans-serif;font-size:22px;font-weight:800;margin-bottom:2px}
.pfact span{font-size:13px;color:var(--muted)}