:root{
  --pink:#e2481c;
  --pink-soft:#fbe6dd;
  --ink:#2a231f;
  --muted:#7a6f68;
  --line:#efe6df;
  --blue-card:#fdecc9;
  --lilac-card:#fce0d4;
  --ok:#1faa6c;
  --bg1:#efe9e2;
  --bg2:#d8cfc4;
  --radius:22px;
  --shadow:0 10px 30px rgba(30,20,60,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%;overscroll-behavior-x:none}
body{
  font-family:'Manrope',-apple-system,system-ui,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.35) 0 2px, transparent 2px 26px),
    linear-gradient(135deg,var(--bg1),var(--bg2));
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}
.app{max-width:560px;margin:0 auto;padding:14px 14px 90px;min-height:100vh;width:100%;overflow-x:hidden}

/* ---- top bar ---- */
.topbar{display:flex;align-items:center;gap:10px;padding:6px 4px 14px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.4px}
.brand .logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--pink),#f5a623);color:#fff;font-size:18px}
.brand b{color:var(--pink)}
.topbar .spacer{flex:1}
.iconbtn{border:none;background:rgba(255,255,255,.7);border-radius:12px;width:40px;height:40px;
  font-size:18px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.backbtn{border:none;background:rgba(255,255,255,.7);border-radius:12px;padding:9px 14px;
  font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.06)}

/* ---- home ---- */
.hero{background:rgba(255,255,255,.66);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;
  box-shadow:var(--shadow);backdrop-filter:blur(4px)}
.hero h1{margin:0 0 4px;font-size:20px}
.hero p{margin:0;color:var(--muted);font-size:13px}
.progress{margin-top:12px}
.progress .bar{height:10px;border-radius:99px;background:#e6e2f0;overflow:hidden}
.progress .fill{height:100%;background:linear-gradient(90deg,var(--pink),#f5a623);border-radius:99px;transition:width .4s}
.progress .lbl{font-size:12px;color:var(--muted);margin-top:6px}
.stats{display:flex;gap:10px;margin-top:12px}
.stat{flex:1;background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:14px;
  padding:10px 12px;text-align:center}
button.stat{cursor:pointer;font-family:inherit}
button.stat.goal:active{transform:scale(.97)}
.stat-num{font-size:18px;font-weight:800;color:var(--pink)}
.stat-lbl{font-size:11px;color:var(--muted);margin-top:2px}

.level{margin-bottom:20px}
.level-head{display:flex;align-items:center;gap:12px;padding:2px 4px 10px}
.level-badge{flex:none;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--pink),#f5a623);
  border-radius:10px;padding:6px 10px;letter-spacing:.5px}
.level-meta{flex:1;min-width:0}
.level-name{font-weight:800;font-size:15px}
.level-head small{color:var(--muted);font-size:12px;display:block;line-height:1.3}
.level-count{flex:none;font-size:12px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.lessons{display:flex;flex-direction:column;gap:12px}
.lesson-card{display:flex;align-items:center;gap:14px;background:#fff;border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow);cursor:pointer;border:1px solid var(--line);
  transition:transform .12s}
.lesson-card:active{transform:scale(.98)}
.lesson-card .emoji{width:48px;height:48px;border-radius:14px;background:var(--lilac-card);
  display:grid;place-items:center;font-size:24px;flex:none}
.lesson-card .meta{flex:1;min-width:0}
.lesson-card .meta h3{margin:0 0 2px;font-size:16px}
.lesson-card .meta small{color:var(--muted);font-size:12.5px;display:block;line-height:1.3}
.lesson-card .ring{flex:none;font-size:12px;font-weight:800;color:var(--pink)}
.badge-done{color:var(--ok)}

/* ---- view toggle ---- */
.viewtoggle{display:flex;gap:8px;background:rgba(255,255,255,.6);padding:5px;border-radius:16px;margin-bottom:16px}
.viewtoggle button{flex:1;border:none;background:transparent;padding:9px;border-radius:12px;font-weight:700;
  color:var(--muted);cursor:pointer;font-size:14px}
.viewtoggle button.active{background:#fff;color:var(--pink);box-shadow:0 2px 8px rgba(0,0,0,.08)}

/* ---- roadmap ---- */
.road{position:relative;padding:4px 0 8px}
.road::before{content:'';position:absolute;left:50%;top:6px;bottom:6px;width:3px;transform:translateX(-50%);
  background:repeating-linear-gradient(var(--line) 0 9px, transparent 9px 17px);z-index:0}
.road-milestone{position:relative;z-index:1;display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.85);border-radius:14px;padding:9px 12px;margin:20px 0 10px;box-shadow:var(--shadow)}
.road-node-wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px;margin:12px 0}
.road-node{width:66px;height:66px;border-radius:50%;border:3px solid #fff;cursor:pointer;
  display:grid;place-items:center;background:#fff;box-shadow:var(--shadow);position:relative;transition:transform .12s}
.road-node:active{transform:scale(.92)}
.road-node .rn-emoji{font-size:28px;line-height:1}
.road-node.todo{opacity:.7}
.road-node.started{background:var(--blue-card)}
.road-node.done{background:var(--pink-soft)}
.road-node.current{box-shadow:0 0 0 4px var(--pink),var(--shadow);animation:nodePulse 1.7s ease-in-out infinite}
@keyframes nodePulse{0%,100%{box-shadow:0 0 0 4px var(--pink),var(--shadow)}
  50%{box-shadow:0 0 0 8px rgba(226,72,28,.22),var(--shadow)}}
@media (prefers-reduced-motion:reduce){.road-node.current{animation:none}}
.rn-badge{position:absolute;right:-3px;top:-3px;width:22px;height:22px;border-radius:50%;
  background:var(--ok);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;
  box-shadow:0 1px 4px rgba(0,0,0,.25)}
.rn-badge.star{background:var(--pink)}
.road-label{font-size:11.5px;font-weight:700;color:var(--muted);max-width:120px;text-align:center;line-height:1.2}

/* ---- flashcard ---- */
.stage{display:flex;flex-direction:column;gap:14px}
.counter{text-align:center;color:var(--muted);font-size:13px;font-weight:700}
.card{border-radius:26px;padding:30px 22px;box-shadow:var(--shadow);text-align:center;
  position:relative;overflow:hidden}
.card.word{background:var(--blue-card)}
.card.sentence{background:var(--lilac-card)}
.card .tag{position:absolute;top:12px;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:1.5px;color:#9a90b0;border:1px solid #d7cee6;border-radius:99px;
  padding:3px 12px;font-weight:700}
.card .ua{font-size:19px;font-weight:700;margin:10px 0 6px}
.card-pic{font-size:52px;line-height:1;margin:8px 0 2px}
.ua-back{margin-top:14px;font-size:25px;font-weight:800;color:var(--ink);
  border-top:1px dashed var(--line);padding-top:14px}
.flipword{display:block;width:100%;border:none;font-family:inherit;cursor:pointer}
.card .en{font-size:40px;font-weight:800;color:var(--pink);line-height:1.1;margin:6px 0 12px;word-break:break-word}
.card.sentence .en{font-size:26px}
.card .ua-small{font-size:15px;color:#4a4a55;margin:6px 0 4px}
.card .tr{font-size:22px;letter-spacing:.5px;color:#33333d;font-weight:600}
.card.sentence .tr{font-size:17px}
.card .tr .stress{color:var(--pink);font-weight:800}
.speak{margin:16px auto 0;border:none;background:#ffffffcc;border-radius:99px;
  padding:10px 20px;font-weight:700;font-size:15px;cursor:pointer;display:inline-flex;
  align-items:center;gap:8px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.speak:active{transform:scale(.96)}
.speak-ico{padding:10px 18px;font-size:22px;line-height:1}

.controls{display:flex;gap:10px}
.controls button{flex:1;border:none;border-radius:16px;padding:15px;font-size:15px;font-weight:700;
  cursor:pointer;box-shadow:var(--shadow)}
.btn-again{background:#fff;color:var(--muted)}
.btn-know{background:var(--pink);color:#fff}
.btn-nav{background:rgba(255,255,255,.8)}

.section-title{font-weight:800;font-size:15px;margin:6px 4px;display:flex;align-items:center;gap:8px}
.tabs{display:flex;gap:8px;background:rgba(255,255,255,.6);padding:5px;border-radius:16px;margin-bottom:4px}
.tabs button{flex:1;border:none;background:transparent;padding:10px;border-radius:12px;font-weight:700;
  cursor:pointer;color:var(--muted);font-size:14px}
.tabs button.active{background:#fff;color:var(--pink);box-shadow:0 2px 8px rgba(0,0,0,.08)}

/* ---- quiz ---- */
.quiz-q{background:#fff;border-radius:var(--radius);padding:22px;text-align:center;box-shadow:var(--shadow)}
.quiz-q .prompt{color:var(--muted);font-size:13px;margin-bottom:6px}
.quiz-q .big{font-size:32px;font-weight:800;color:var(--pink)}
.quiz-q .big.ua{color:var(--ink)}
.options{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.options button{border:1px solid var(--line);background:#fff;border-radius:16px;padding:15px;
  font-size:16px;font-weight:600;cursor:pointer;text-align:center;transition:.12s}
.options button.correct{background:#e4f7ee;border-color:var(--ok);color:var(--ok)}
.options button.wrong{background:#fde8ef;border-color:var(--pink);color:var(--pink)}
.options button:disabled{cursor:default}
.opt-say{margin-left:8px;opacity:.6;font-size:15px}
.done-card{background:#fff;border-radius:var(--radius);padding:28px 20px;text-align:center;box-shadow:var(--shadow)}
.done-card .score{font-size:44px;font-weight:800;color:var(--pink)}
.done-card p{color:var(--muted)}
.primary{border:none;background:var(--pink);color:#fff;border-radius:16px;padding:14px 22px;
  font-weight:700;font-size:15px;cursor:pointer;margin-top:12px}

/* ---- sentence builder ---- */
.build-q{background:#fff;border-radius:var(--radius);padding:20px 18px;box-shadow:var(--shadow)}
.build-q .prompt{color:var(--muted);font-size:13px;text-align:center}
.build-ua{font-size:19px;font-weight:800;text-align:center;margin:6px 0 14px}
.answer{min-height:52px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;
  border-bottom:2px dashed var(--line);padding:6px 4px 14px;margin-bottom:14px}
.ans-empty{color:#b8ab9f;font-size:13px}
.bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tile{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 14px;font-size:16px;
  font-weight:700;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.06);transition:.1s}
.tile:active{transform:scale(.94)}
.tile:disabled{opacity:.28;cursor:default;box-shadow:none}
.tile.placed{background:var(--blue-card);border-color:transparent}
.subtabs{display:flex;gap:8px;background:rgba(255,255,255,.6);padding:5px;border-radius:14px;margin-bottom:12px}
.subtabs button{flex:1;border:none;background:transparent;padding:8px;border-radius:10px;font-weight:700;
  color:var(--muted);cursor:pointer;font-size:13px}
.subtabs button.active{background:#fff;color:var(--pink);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.flipcard{display:block;width:100%;border:none;font-family:inherit;cursor:pointer}
.flip-hint{font-size:13px;color:var(--muted);margin-top:16px}
/* ---- conjugation table ---- */
.conj{width:100%;border-collapse:collapse;margin:14px 0 4px}
.conj td{padding:7px 4px;border-top:1px solid rgba(0,0,0,.08);text-align:left;vertical-align:middle}
.conj .cp{color:var(--muted);font-weight:700;width:32%;font-size:14px}
.conj .cf{font-weight:800;color:var(--pink);font-size:16px}
.conj .ct{color:#33333d;font-size:12.5px;text-align:right;white-space:nowrap}
.conj-row{cursor:pointer}
.conj-row:active{opacity:.6}
.conj-t{font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--pink);
  margin:14px 0 2px;text-align:left}
.conj-hint{font-size:11.5px;color:var(--muted);margin-top:6px}
.build-fb{min-height:26px;text-align:center;margin-top:12px;font-weight:700}
.fb-ok{color:var(--ok)}
.fb-ok .fb-tr{color:#33333d;font-weight:600}
.fb-no{color:var(--pink)}

/* ---- grammar note ---- */
.grammar{background:#fff;border:1px solid var(--line);border-left:4px solid var(--pink);
  border-radius:14px;margin-bottom:12px;box-shadow:0 2px 10px rgba(0,0,0,.05);overflow:hidden}
.grammar-head{width:100%;border:none;background:transparent;text-align:left;padding:12px 14px;
  font-weight:800;font-size:14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.grammar-head .chev{color:var(--pink)}
.grammar-body{padding:0 14px 14px;font-size:14px;line-height:1.5;color:#3a3a44}
.grammar-body b{color:var(--pink)}

/* ---- review banner ---- */
.review-banner{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#fff,#fbeadd);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;
  box-shadow:var(--shadow);cursor:pointer}
.review-banner:active{transform:scale(.99)}
.review-banner.install{background:linear-gradient(135deg,#fff,#e6f7ee)}
.review-banner.install .rb-badge{background:var(--ok)}
.review-banner .rb-ico{font-size:24px}
.review-banner .rb-meta{flex:1;min-width:0}
.review-banner .rb-title{font-weight:800;font-size:16px}
.review-banner .rb-meta small{color:var(--muted);font-size:12.5px}
.review-banner .rb-badge{flex:none;min-width:30px;height:30px;padding:0 9px;border-radius:99px;
  background:var(--pink);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center}

/* ---- vocabulary ---- */
.vfilters{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.vrow{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.vchip{flex:none;border:1px solid var(--line);background:#fff;border-radius:99px;padding:7px 12px;
  font-weight:700;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap}
.vchip.active{background:var(--pink);color:#fff;border-color:transparent}
.vrowitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:8px;cursor:pointer;font-family:inherit}
.vrowitem:active{transform:scale(.99)}
.vnum{flex:none;min-width:24px;color:var(--muted);font-weight:800;font-size:12px;font-variant-numeric:tabular-nums;text-align:right}
.vemoji{flex:none;font-size:22px;width:26px;text-align:center}
.vmain{flex:1;min-width:0;display:flex;flex-direction:column}
.vmain .ven{font-weight:800;color:var(--pink);font-size:16px}
.vmain .vua{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vlvl{flex:none;font-size:11px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--pink),#f5a623);border-radius:8px;padding:3px 7px}
.vpos{flex:none;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:3px 7px}

/* ---- ad slot + paywall ---- */
.adslot{display:flex;align-items:center;gap:10px;margin:16px 0 4px;padding:14px 14px;border-radius:14px;
  border:1px dashed #cdbfae;background:rgba(255,255,255,.5);cursor:pointer}
.ad-tag{flex:none;font-size:10px;font-weight:800;letter-spacing:1px;color:#a99a86;border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.ad-body{flex:1;color:var(--muted);font-size:14px;font-weight:600}
.ad-remove{flex:none;font-size:12px;font-weight:800;color:var(--pink)}
.paywall{display:flex;flex-direction:column;gap:10px}
.pw-benefit{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 16px;font-weight:700;font-size:15px}
.pw-plans{display:flex;gap:10px;margin-top:4px}
.pw-plan{flex:1;border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px;cursor:pointer;
  display:flex;flex-direction:column;gap:3px;font-family:inherit}
.pw-plan b{font-size:16px;color:var(--ink)}
.pw-plan span{font-size:12.5px;color:var(--muted)}
.pw-plan.best{border-color:var(--pink);box-shadow:0 0 0 2px var(--pink) inset}
.pw-plan:active{transform:scale(.98)}
.pw-restore{border:none;background:transparent;color:var(--muted);text-decoration:underline;
  font-size:13px;cursor:pointer;padding:6px;margin-top:2px}
.continue-btn{width:100%;margin-top:14px;border:none;border-radius:16px;padding:15px;font-size:16px;
  font-weight:800;color:#fff;cursor:pointer;box-shadow:var(--shadow);
  background:linear-gradient(90deg,var(--pink),#f5a623)}
.continue-btn:active{transform:scale(.98)}
.continue-done{margin-top:14px;text-align:center;font-size:13px;font-weight:700;color:var(--muted)}
.vsearch{margin-bottom:12px}
.vsearch input{width:100%;border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  font-size:15px;font-family:inherit;background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.05)}
.vsearch input:focus{outline:none;border-color:var(--pink)}
.dict-play{margin-top:6px;border:none;border-radius:99px;padding:16px 26px;font-size:18px;font-weight:800;
  color:#fff;cursor:pointer;box-shadow:var(--shadow);background:linear-gradient(90deg,var(--pink),#f5a623)}
.dict-play:active{transform:scale(.97)}

.hint{font-size:12px;color:var(--muted);text-align:center;margin-top:8px}

/* ================= ТЕМНА ТЕМА ================= */
:root[data-theme="dark"]{
  --ink:#ececf2; --muted:#a3a3b2; --line:#33333f;
  --blue-card:#1b2735; --lilac-card:#241b34; --pink-soft:#33232b;
  --bg1:#15151b; --bg2:#0e0e13;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --surface:#1c1c24;
}
:root[data-theme="dark"] body{
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 26px),
    linear-gradient(135deg,var(--bg1),var(--bg2));
}
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .iconbtn,
:root[data-theme="dark"] .backbtn,
:root[data-theme="dark"] .lesson-card,
:root[data-theme="dark"] .road-milestone,
:root[data-theme="dark"] .road-node,
:root[data-theme="dark"] .btn-again,
:root[data-theme="dark"] .btn-nav,
:root[data-theme="dark"] .quiz-q,
:root[data-theme="dark"] .options button,
:root[data-theme="dark"] .done-card,
:root[data-theme="dark"] .build-q,
:root[data-theme="dark"] .tile,
:root[data-theme="dark"] .grammar,
:root[data-theme="dark"] .vchip,
:root[data-theme="dark"] .vrowitem,
:root[data-theme="dark"] .vsearch input,
:root[data-theme="dark"] .pw-benefit,
:root[data-theme="dark"] .pw-plan,
:root[data-theme="dark"] .speak,
:root[data-theme="dark"] .viewtoggle button.active,
:root[data-theme="dark"] .tabs button.active,
:root[data-theme="dark"] .subtabs button.active{ background:var(--surface); }
:root[data-theme="dark"] .viewtoggle,
:root[data-theme="dark"] .tabs,
:root[data-theme="dark"] .subtabs{ background:rgba(255,255,255,.06); }
:root[data-theme="dark"] .road-node{ border-color:var(--surface); }
:root[data-theme="dark"] .progress .bar{ background:#2a2a35; }
:root[data-theme="dark"] .review-banner{ background:linear-gradient(135deg,#1c1c24,#2a1420); }
:root[data-theme="dark"] .review-banner.install{ background:linear-gradient(135deg,#1c1c24,#12261b); }
:root[data-theme="dark"] .card .tr,
:root[data-theme="dark"] .conj .ct,
:root[data-theme="dark"] .fb-ok .fb-tr{ color:#c9c9d4; }
:root[data-theme="dark"] .card .ua-small{ color:#b7b7c4; }
:root[data-theme="dark"] .grammar-body{ color:#c2c2cf; }
:root[data-theme="dark"] .card .tag{ color:#a99fc0; border-color:#3a3450; }
:root[data-theme="dark"] .ans-empty{ color:#6f6f80; }
:root[data-theme="dark"] .options button.correct{ background:#12301f; }
:root[data-theme="dark"] .options button.wrong{ background:#3a1020; }
:root[data-theme="dark"] .conj td{ border-top-color:rgba(255,255,255,.1); }