/* ===========================================================
   RADOBOT — Уроки · бренд Radooga LMS (design_handoff_radobot_lms)
   White BG · primary #084eb1 · accent #e4c113 · Comfortaa display · Manrope body
   =========================================================== */

:root{
  --primary:#084eb1;  --blue:#307bed;
  --accent:#e4c113;   --red:#e63a30;
  --ink:#14110d;      --text-2:#4d4d4d;  --muted:#6b7280;  --ph:#9aa1ad;
  --bg:#fafbfc;
  --card-border:#e8eaef;  --input-border:#dfe3ea;  --divider:#edeff3;
  --ok-ink:#1b7a44;   --ok-dot:#23a55a;  --danger-ink:#c22a21;
  --viewer-bg:#10131c; --navy:#0d1f4d;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  overflow:hidden;
}
input::placeholder{ color:var(--ph); }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes popIn{ from{ opacity:0; transform:scale(.97) translateY(8px); } to{ opacity:1; transform:scale(1) translateY(0); } }

/* екрани */
.screen{ position:fixed; inset:0; display:none; flex-direction:column; }
.screen.is-active{ display:flex; }

/* ───── КНОПКИ ───── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Manrope',sans-serif; font-weight:800; border:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:.15s;
}
.btn--yellow{ background:var(--accent); color:var(--ink); border-radius:12px; }
.btn--yellow:hover{ filter:brightness(1.05); }
.btn--yellow:active{ transform:scale(.98); }
.btn--ghost{
  height:44px; padding:0 18px; border-radius:10px;
  border:1.5px solid var(--input-border); background:#fff;
  font-size:13px; color:var(--text-2);
}
.btn--ghost:hover{ border-color:var(--primary); color:var(--primary); }

/* ───── ВХІД ───── */
.screen--login{
  background:#fff; overflow:auto;
  padding:clamp(20px,5vw,40px) clamp(14px,4vw,24px);
  overflow-x:clip;
}
.login__card{
  margin:auto; position:relative;
  width:480px; max-width:100%;
  background:#fff; border:1px solid var(--card-border); border-radius:22px;
  box-shadow:0 18px 50px rgba(13,27,62,.08);
  padding:clamp(26px,6vw,44px) clamp(20px,5vw,48px) clamp(30px,6vw,48px);
  animation:fadeUp .5s ease both;
}
.login__star{ position:absolute; pointer-events:none; }
.login__star--1{ top:26px; right:40px; color:var(--accent); font-size:22px; }
.login__star--2{ top:130px; right:22px; color:var(--blue); font-size:15px; }
.login__star--3{ bottom:90px; left:18px; color:var(--blue); font-size:18px; }
.login__logo{ height:34px; margin-bottom:30px; display:block; }
.login__sticker-wrap{ position:relative; display:inline-block; margin-bottom:22px; }
.login__sticker{
  display:inline-block; background:var(--accent); color:var(--ink);
  padding:10px 22px 10px 16px; border-radius:4px; transform:rotate(-4deg);
  font-weight:800; font-size:18px; line-height:1.25;
  box-shadow:0 4px 12px rgba(228,193,19,.4);
}
.login__brick{
  position:absolute; right:-34px; top:-6px; transform:rotate(12deg);
  display:flex; flex-direction:column; align-items:center;
}
.login__brick-studs{ display:flex; gap:4px; margin-bottom:-2px; }
.login__brick-studs i{ width:16px; height:11px; border-radius:3px 3px 0 0; background:var(--red); }
.login__brick-body{ width:56px; height:30px; border-radius:6px; background:var(--red); box-shadow:0 4px 10px rgba(230,58,48,.35); }
.login__title{
  font-family:'Comfortaa',sans-serif; font-weight:700;
  font-size:clamp(29px,7vw,38px); line-height:1.15; color:var(--ink);
  margin:0 0 10px;
}
.login__sub{ margin:0 0 28px; font-size:16px; color:var(--text-2); }
.login__form{ display:flex; flex-direction:column; gap:14px; }
.field{
  height:54px; width:100%; border:1.5px solid var(--input-border); border-radius:12px;
  padding:0 18px; font-size:16px; font-family:'Manrope',sans-serif; font-weight:600;
  color:var(--ink); background:var(--bg); outline:none; transition:border-color .15s;
}
.field:focus{ border-color:var(--blue); background:#fff; }
.login__err{ color:var(--red); font-size:14px; font-weight:700; }
.login__err:empty{ display:none; }
.login__cta{ height:58px; font-size:18px; gap:12px; margin-top:6px; width:100%; }
.login__cta-arrow{ font-size:20px; }
/* --ph (#9aa1ad) на білому = 2.5:1 — провал AA. А це єдина підказка для дитини,
   яка не може зайти. --muted (#6b7280) дає 4.8:1. */
.login__note{
  display:block; margin-top:16px; font-size:13px; color:var(--muted);
  font-weight:600; text-align:center;
}
.login__hatch{
  position:absolute; bottom:-14px; right:30px; width:90px; height:26px;
  background:repeating-linear-gradient(105deg, var(--blue) 0 4px, transparent 4px 9px);
  transform:rotate(-8deg); opacity:.85; pointer-events:none;
}

/* ───── ТОП-БАР (каталог) ───── */
.topbar{
  display:flex; flex-wrap:wrap; row-gap:8px; align-items:center; justify-content:space-between;
  background:#fff; border-bottom:1px solid var(--divider);
  padding:clamp(10px,2vw,14px) clamp(12px,3vw,32px);
  padding-top:calc(clamp(10px,2vw,14px) + env(safe-area-inset-top));
}
.topbar__logo{ height:26px; }
.topbar__right{ display:flex; align-items:center; gap:clamp(10px,2.5vw,16px); flex-wrap:wrap; }
.topbar__who{ font-size:13.5px; color:var(--text-2); font-weight:600; }
/* перемикач розділів «Роботи» / «Уроки» (єдиний вхід) — показується лише коли доступні обидва */
.topbar__nav{ display:flex; gap:6px; background:#eef1f6; border-radius:12px; padding:4px; }
.topbar__nav:empty{ display:none; }
.secnav__tab{
  border:none; background:transparent; cursor:pointer; font-family:inherit;
  font-size:14px; font-weight:800; color:#4d4d4d; padding:8px 18px; border-radius:9px; line-height:1;
}
.secnav__tab.is-active{ background:#084eb1; color:#fff; box-shadow:0 2px 8px rgba(8,78,177,.28); }
.net-wrap{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:700; color:var(--ok-ink); white-space:nowrap;
}
.net{ width:9px; height:9px; border-radius:50%; background:var(--ok-dot); flex-shrink:0; }
.net.is-off{ background:var(--red); }
.net-label.is-off{ color:var(--danger-ink); }

/* ───── КАТАЛОГ ───── */
.catalog{
  flex:1; overflow-y:auto; background:var(--bg);
  padding:clamp(22px,4vw,34px) clamp(14px,4vw,32px) 64px;
}
.catalog > div{
  width:100%; max-width:1160px; margin-left:auto; margin-right:auto;
  animation:fadeUp .4s ease both;
}
.course__title{
  font-family:'Comfortaa',sans-serif; font-weight:700;
  font-size:clamp(23px,5.5vw,32px); line-height:1.2; color:var(--ink);
  margin:0 0 22px;
}
.module{ margin-bottom:34px; }
.module__head{ position:relative; display:inline-flex; align-items:center; margin-bottom:20px; }
.module__head::before,
.module__head::after{
  content:""; position:absolute; width:24px; height:13px; border-radius:3px;
  background:var(--red); transform:rotate(-18deg);
}
.module__head::before{ left:-12px; top:-6px; }
.module__head::after{ right:-12px; bottom:-6px; }
.module__tape{
  display:inline-block; background:var(--accent); color:var(--ink);
  padding:8px 20px; border-radius:4px; transform:rotate(-1.2deg);
  font-weight:800; font-size:clamp(13px,3vw,15px);
  letter-spacing:.04em; text-transform:uppercase;
}
.lessons{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr)); gap:20px; }
.lesson{
  background:#fff; border:1px solid var(--card-border); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column; cursor:pointer;
  animation:popIn .45s ease both;
  transition:box-shadow .18s, border-color .18s;
}
.lesson:hover{ box-shadow:0 10px 26px rgba(13,27,62,.10); border-color:#d5dae3; }
.lesson:active{ transform:scale(.99); }
.lesson__imgwrap{
  position:relative; aspect-ratio:16/9; margin:10px 10px 0;   /* єдиний формат обкладинок 16:9 (08.09.2026) */
  border-radius:10px; background:#e8f1fd; overflow:hidden; flex-shrink:0;
}
.lesson__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lesson__body{ padding:14px 16px; display:flex; flex-direction:column; gap:4px; flex:1; }
.lesson__title{ margin:0; font-size:17px; font-weight:800; line-height:1.3; }
.lesson__steps{ font-size:13px; color:var(--muted); font-weight:600; }
.lesson__meta{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:800; padding:6px 12px; border-radius:999px; white-space:nowrap;
}
/* Акцент лишаємо для того, що дитині справді важливо (прогрес), а не для технічного
   статусу «Офлайн», який їй байдужий: коли підсвічено все — не підсвічено ніщо. */
.badge--ready{ background:#f0f2f6; color:var(--muted); }
.badge--off{ background:#f0f2f6; color:var(--muted); }
/* «де я зупинився» — цього в каталозі не було взагалі */
.lesson__prog{
  margin-top:10px; height:4px; border-radius:999px; background:#eceff4; overflow:hidden;
}
.lesson__prog i{ display:block; height:100%; background:var(--accent); }
.lesson__pos{ font-size:12.5px; color:var(--ink); font-weight:800; white-space:nowrap; }
.lesson__count{ font-size:12.5px; color:var(--muted); font-weight:700; white-space:nowrap; }
.lesson__cta{ margin-left:auto; font-size:14px; font-weight:800; white-space:nowrap; }
.lesson__cta--open{ color:var(--primary); }
/* --red (#e63a30) на білому = 4.0:1 — для 14px це провал AA */
.lesson__cta--dl{ color:var(--danger-ink); }
.lesson:hover .lesson__cta{ text-decoration:underline; }

/* ───── ПЕРЕГЛЯД ───── */
.screen--viewer{ background:var(--viewer-bg); align-items:center; justify-content:center; overflow:hidden; }
/* Стейдж — на весь екран. Аспект-рамка тут була зайвою: drawSlide() сам заливає канвас
   і вписує бітмап через baseFit(), тобто леттербокс робить канвас, і робить його краще.
   Заразом лікує портрет, де min(92vw,148vh) при 16/10 перетворював слайд на смужку. */
.viewer__stage{
  flex:1 1 auto; width:100%; min-height:0;
  position:relative; overflow:hidden;
  animation:fadeUp .4s ease both;
}
.viewer__canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; display:block; }
/* Лічильник тут — дублер того, що в барі: потрібен лише коли бар схований.
   Інакше «4 / 26» видно двічі одночасно (видно на скріншоті iPad). */
.screen--viewer:not(.is-immersive) .viewer__num{ display:none; }
.viewer__num{
  position:absolute; left:16px; bottom:14px; z-index:2;
  background:rgba(255,255,255,.92); color:var(--ink);
  font-family:'Comfortaa',sans-serif; font-weight:700; font-size:clamp(15px,3vw,19px);
  padding:7px 14px; border-radius:10px; pointer-events:none;
}
/* Смуга прогресу — 3px по нижньому краю. Урок може бути на 129 слайдів, а орієнтира
   «скільки лишилось» не було взагалі. Лишається видимою в іммерсиві. */
.viewer__prog{
  position:absolute; left:0; right:0; bottom:0; height:3px; z-index:3;
  background:rgba(255,255,255,.14); pointer-events:none;
}
.viewer__prog i{ display:block; height:100%; width:0; background:var(--accent); transition:width .18s ease; }
.viewer__restart{
  height:36px; padding:0 14px; border-radius:999px; border:0; cursor:pointer; flex-shrink:0;
  background:rgba(255,255,255,.14); color:#fff;
  font-size:13px; font-weight:800; font-family:'Manrope',sans-serif;
  backdrop-filter:blur(8px); -webkit-tap-highlight-color:transparent; transition:.15s;
}
.viewer__restart:hover{ background:rgba(255,255,255,.26); }
.viewer__restart:active{ background:var(--accent); color:var(--ink); }
.zoom-badge{
  position:absolute; z-index:6; left:50%; top:calc(env(safe-area-inset-top) + 74px);
  transform:translateX(-50%); background:rgba(6,10,24,.82); color:#fff;
  font-size:15px; font-weight:800; padding:7px 16px; border-radius:999px;
  backdrop-filter:blur(8px); pointer-events:none; white-space:nowrap;
}
.viewer__bar{
  position:absolute; top:0; left:0; right:0; z-index:5;
  display:flex; align-items:center; gap:12px;
  padding:clamp(10px,2.5vw,16px) clamp(12px,3vw,22px);
  padding-top:calc(clamp(10px,2.5vw,16px) + env(safe-area-inset-top));
  /* ландшафт на телефоні з вирізом: інакше «‹ Уроки» їде під чубчик */
  padding-left:calc(clamp(12px,3vw,22px) + env(safe-area-inset-left));
  padding-right:calc(clamp(12px,3vw,22px) + env(safe-area-inset-right));
  background:linear-gradient(rgba(6,10,24,.72), rgba(6,10,24,0));
}
.viewer__back{
  height:44px; padding:0 18px; border-radius:999px; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff;
  font-size:14.5px; font-weight:800; font-family:'Manrope',sans-serif;
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
  backdrop-filter:blur(8px); -webkit-tap-highlight-color:transparent; transition:.15s;
}
.viewer__back:hover{ background:rgba(255,255,255,.26); }
.viewer__back:active{ background:var(--accent); color:var(--ink); }
.viewer__title{
  font-size:clamp(15px,3.5vw,17px); font-weight:800; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.viewer__count{
  margin-left:auto; background:var(--accent); color:var(--ink);
  font-size:clamp(13px,3vw,14.5px); font-weight:800;
  padding:8px 14px; border-radius:999px; white-space:nowrap; flex-shrink:0;
}
.viewer__nav{
  position:absolute; z-index:5; left:50%; transform:translateX(-50%);
  bottom:calc(clamp(14px,3.5vw,26px) + env(safe-area-inset-bottom));
  display:flex; gap:14px;
}
.navbtn{
  width:clamp(48px,12vw,56px); height:clamp(48px,12vw,56px);
  border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; font-size:22px; line-height:1;
  font-family:'Manrope',sans-serif;
  backdrop-filter:blur(8px); -webkit-tap-highlight-color:transparent; transition:.15s;
}
.navbtn:hover{ background:rgba(255,255,255,.28); }
.navbtn:active{ background:var(--accent); color:var(--ink); }
.viewer__fs{
  position:absolute; z-index:7;
  right:calc(clamp(12px,3vw,26px) + env(safe-area-inset-right));
  bottom:calc(clamp(14px,3.5vw,26px) + env(safe-area-inset-bottom));
  width:clamp(48px,12vw,56px); height:clamp(48px,12vw,56px);
  border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(8px);
  -webkit-tap-highlight-color:transparent; transition:.15s;
}
.viewer__fs:hover{ background:rgba(255,255,255,.28); }
.viewer__fs:active,.viewer__fs.is-on{ background:var(--accent); color:var(--ink); }
/* Іммерсив ховає ВЕСЬ хром, а не лише верхній бар. Лишається тільки номер слайда;
   повернути хром — одиночний тап по слайду. */
.screen--viewer.is-immersive .viewer__bar,
.screen--viewer.is-immersive .viewer__nav,
.screen--viewer.is-immersive .viewer__fs{ display:none; }

/* ───── ЛОАДЕР (модальний оверлей завантаження уроку) ───── */
.loader{
  position:fixed; inset:0; z-index:50;
  background:rgba(6,14,38,.6);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.loader__box{
  background:#fff; border-radius:18px; padding:clamp(22px,5vw,32px);
  width:420px; max-width:100%;
  display:flex; flex-direction:column; gap:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.loader__heading{ margin:0; font-size:20px; font-weight:800; color:var(--primary); }
.loader__name{ font-size:15px; color:var(--text-2); font-weight:600; }
.loader__bar{ height:12px; border-radius:999px; background:#e8eaf0; overflow:hidden; }
.loader__bar i{
  display:block; height:100%; width:0; border-radius:999px;
  background:var(--blue); transition:width .12s linear;
}
.loader__pct{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:14px; color:var(--text-2); align-self:flex-end;
}

/* ───── ТОСТ ───── */
.toast{
  position:fixed; z-index:60; left:50%; bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(10px); max-width:min(560px,92vw);
  background:var(--ink); color:#fff; font-size:14px; font-weight:600; line-height:1.45;
  padding:13px 20px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.25);
  opacity:0; transition:.3s; pointer-events:none; text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

[hidden]{ display:none !important; }