:root {
  --bg: #ececec;
  --card: #ffffff;
  --text: #111111;
  --muted: #7a7a7a;
  --title: #2c6a8c;
  --blue: #2b6386;
  --ipa: #2c6a8c;
  --lime: #a3d04a;
  --lime-dark: #8dbb35;
  --teal: #66ddcd;
  --teal-dark: #3fc9b6;
  --ru: #3a8f98;
  --red: #ea4661;
  --pink: #ea5f78;
  --chip: #e1e1e1;
  --line: #dcdcdc;
  --shadow: 0 1px 3px rgba(0, 0, 0, .08);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: "Roboto Condensed", "Arial Narrow", -apple-system, BlinkMacSystemFont, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--text); font: 17px/1.3 var(--font);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
input, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; }
.hidden { display: none !important; }

#app { max-width: 560px; margin: 0 auto; min-height: 100dvh; padding-bottom: calc(var(--safe-b) + 16px); position: relative; }

/* ---------- main: status bar ---------- */
.status {
  display: grid; grid-template-columns: auto auto 1fr; gap: 14px; align-items: center;
  background: var(--card); padding: calc(var(--safe-t) + 12px) 16px 10px;
}
.st-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; }
.level { width: 46px; height: 46px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: #f1f1f1; display: flex; align-items: center; justify-content: center; font-size: 28px; border: 2px solid #e4e4e4; }
.learned-pill { width: 100%; height: 46px; border-radius: 23px; background: var(--lime); color: #fff; font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.st-item.grow { width: 100%; }
.st-item small { color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.st-item small b { color: var(--teal-dark); font-weight: 500; }

.brand { text-align: center; padding: 14px 16px 2px; }
.brand h1 { color: var(--title); font-size: 34px; font-weight: 700; letter-spacing: .01em; line-height: 1.1; }
.brand { padding-left: 8px; padding-right: 8px; }
.brand-sub { font-size: clamp(14px, 4.6vw, 20px); font-weight: 500; color: var(--title); white-space: nowrap; margin-top: 2px; }
.brand p { margin: 4px 0 0; font-size: clamp(11px, 3.7vw, 17px); white-space: nowrap; color: #555; font-style: italic; }   /* слоган всегда в одну строку */
.pager { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 8px; }
.pager h2 { color: var(--title); font-size: 24px; font-weight: 700; }
.arrow { width: 44px; height: 44px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; color: var(--title); }
.arrow[disabled] { opacity: .3; pointer-events: none; }
.arrow svg { width: 22px; height: 22px; }

.grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 0 6px; }
.cell {
  position: relative; background: var(--card); border-radius: 6px; aspect-ratio: 1; min-width: 0; min-height: 0;   /* все ячейки — одинаковые квадраты */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px 12px;
}
#app.fit { padding-bottom: 0; }

/* экран урока целиком на одном экране */
.lscreen { height: 100dvh; display: flex; flex-direction: column; }
.lscreen .lhead { flex: none; padding: calc(var(--safe-t) + 8px) 12px 10px; }
.lscreen .lhead .top { margin-bottom: 8px; }
.lscreen .lhead h1 { font-size: 26px; }
.lscreen .chips { gap: 7px 6px; }
.lscreen .wchip { font-size: 15px; padding: 3px 10px; }
.lscreen .plan { flex: 1; min-height: 0; padding: 10px 10px 10px 0; grid-template-columns: 50px 1fr; }
.lscreen .stages { height: 100%; gap: 8px; }
.lscreen .stage { flex: 1 1 0; min-height: 0; padding: 5px 16px 5px 5px; }
.lscreen .stage .sic { height: 100%; width: auto; aspect-ratio: 1; max-height: 84px; }
.lscreen .stage .sic svg { width: 55%; height: 55%; }
.lscreen .stage .sname { font-size: 18px; }
.lscreen .stage .sname small { font-size: 13px; }
.lscreen .stage .sst svg { width: 26px; height: 26px; }
.lscreen .rep-box { flex: none; margin: 0 10px calc(var(--safe-b) + 8px); padding: 10px 14px; }
.lscreen .rep-box p { margin-bottom: 6px; font-size: 15px; }
.lscreen .rep-box .btn { margin-top: 0; min-height: 42px; }
.lscreen .plan:last-child { padding-bottom: calc(var(--safe-b) + 10px); }

/* «Повторение» (пары) — все слова на одном экране */
.xfit { height: 100dvh; display: flex; flex-direction: column; }
.xfit .xbody { flex: 1; min-height: 0; padding-bottom: calc(var(--safe-b) + 10px); }
.match-cap { flex: none; white-space: nowrap; font-size: clamp(13px, 4.2vw, 17px); color: #555; text-align: center; margin-top: 10px; line-height: 1.25; }
.xfit .match { flex: 1; min-height: 0; gap: 6px 10px; margin-top: 10px; align-content: start; }
.xfit .mb { min-height: 0; font-size: 16px; line-height: 1.1; padding: 2px 8px; border-radius: 999px; }

/* кнопка ОК в окнах всегда видна внизу */
.sheet.ans { min-height: min(318px, 70dvh); display: flex; flex-direction: column; padding-top: 14px; }
.sheet.ans .verdict { font-size: 30px; margin-bottom: 2px; }
.sheet.ans .ans-word { font-size: 30px; line-height: 1.1; }
.sheet.ans .ans-ipa { font-size: 17px; }
.sheet.ans .ans-ru { font-size: 28px; margin: 8px 0 4px; line-height: 1.15; }
.sheet.ans .ans-ex, .sheet.ans .ans-exru { font-size: 19px; }
.sheet.ans .ans-exru { margin-top: 6px; }
.sheet.ans .sticky .btn { min-height: 54px; margin-top: 8px; }
.sheet.ans.long .ans-ex, .sheet.ans.long .ans-exru { font-size: 16.5px; }
.sheet.ans.long .ans-ru { font-size: 24px; }
.sheet.ans .sticky { margin-top: auto; }
.sheet .sticky { position: sticky; bottom: calc(-22px - var(--safe-b)); background: #fff; margin: 0 -22px calc(-22px - var(--safe-b)); padding: 4px 22px calc(18px + var(--safe-b)); }
.sheet .sticky .btn { margin-top: 10px; }

.cell.need-rep { box-shadow: inset 0 0 0 3px #f7b3bf; background: #fff5f7; }
.cell.rep-ready { box-shadow: inset 0 0 0 3px var(--red); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { background: #ffe3e8; } }
.rep-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 6px 8px; padding: 10px 12px; background: #fff; border-radius: 12px; border-left: 5px solid var(--red); font-size: 16px; }
.rep-banner .rb { min-width: 34px; height: 30px; padding: 0 8px; border-radius: 15px; background: #fde3e7; color: var(--red); font-weight: 700; }
.rep-banner .rb.ready { background: var(--red); color: #fff; }
.rep-banner .rb-note { width: 100%; font-size: 14px; color: var(--red); }
.rep-banner .rb-note.gray { color: var(--muted); }
.cell.empty { background: transparent; pointer-events: none; }
.cell .num { font-size: 22px; font-weight: 700; color: #111; }
.cell .ms { font-size: 28px; font-weight: 700; color: var(--title); line-height: 1; }
.cell .ms-sub { font-size: 14px; font-weight: 700; color: var(--title); margin-top: -2px; }
.cell .bar { position: absolute; left: 7px; right: 7px; bottom: 7px; height: 6px; border-radius: 3px; background: #e6e6e6; overflow: hidden; }
.cell .bar i { display: block; height: 100%; background: var(--lime); }
.cell .done-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; }
.cell .done-ic svg { width: 26px; height: 26px; }
.cell .tag { font-size: 13px; font-weight: 500; padding: 2px 9px; border-radius: 10px; line-height: 1.3; white-space: nowrap; }
.cell .tag.teal { background: var(--teal); color: #fff; }
.cell .tag.lime { background: var(--lime); color: #111; }
.cell .tag.gray { background: #e3e3e3; color: #555; }
.cell .cur-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--lime); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.badge {
  position: absolute; top: -7px; right: -5px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
  background: var(--red); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 2;
}
.cell.test { gap: 3px; padding-bottom: 6px; }
.cell.test .box { width: 36px; height: 36px; border-radius: 50%; background: var(--teal); display: flex; align-items: center; justify-content: center; color: #fff; }
.cell.test .box svg { width: 26px; height: 26px; }
.cell.test.locked .box { background: #cfeee9; }
.stars { display: flex; gap: 1px; color: #cfcfcf; }
.stars svg { width: 13px; height: 13px; }
.stars .on { color: #f6b91c; }

/* ---------- lesson screen ---------- */
.lhead { background: var(--card); padding: calc(var(--safe-t) + 12px) 14px 14px; }
.lhead .top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin-bottom: 14px; }
.lhead h1 { text-align: center; color: var(--title); font-size: 30px; font-weight: 700; letter-spacing: .02em; }
.back { width: 44px; height: 44px; border-radius: 50%; background: #efefef; display: flex; align-items: center; justify-content: center; }
.back svg { width: 22px; height: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px 8px; }
.wchip {
  position: relative; border-radius: 16px; padding: 5px 13px; font-size: 17px; font-weight: 500; color: var(--title);
  background: linear-gradient(90deg, var(--lime) var(--p, 0%), var(--chip) var(--p, 0%));
}
.wchip.known { background: #d7eef0; color: #7aa9b3; }
.wchip .badge { top: -9px; right: -9px; min-width: 22px; height: 22px; font-size: 12px; }

.plan { position: relative; padding: 18px 12px 18px 0; display: grid; grid-template-columns: 58px 1fr; }
.rail { position: relative; }
.rail .dotline { position: absolute; left: 50%; width: 0; border-left: 6px dotted; transform: translateX(-50%); }
.rail .gnum { position: absolute; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.stages { display: flex; flex-direction: column; gap: 14px; }
.stage { display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: 50px; padding: 8px 20px 8px 8px; min-height: 96px; text-align: left; width: 100%; }
.stage .sic { width: 80px; height: 80px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.stage .sic svg { width: 44px; height: 44px; }
.stage .sname { flex: 1; font-size: 19px; font-weight: 700; }
.stage .sname small { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }
.stage .sst { font-size: 19px; font-weight: 700; color: var(--title); }
.stage .sst.bad { color: var(--red); }
.stage .sst svg { width: 30px; height: 30px; color: var(--lime); }
.stage.locked { opacity: .55; }
.g0 { background: var(--blue); } .g1 { background: var(--lime); } .g2 { background: var(--pink); }
.gc0 { color: var(--blue); } .gc1 { color: var(--lime); } .gc2 { color: var(--pink); }
.rep-box { margin: 4px 12px 18px; background: var(--card); border-radius: 24px; padding: 16px 18px; text-align: center; }
.rep-box p { margin: 0 0 12px; }

/* ---------- exercise ---------- */
.xhead { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: calc(var(--safe-t) + 10px) 14px 10px; background: var(--card); }
.xhead h2 { text-align: center; color: var(--title); font-size: 22px; font-weight: 700; }
.heart { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--title); }
.heart svg { width: 32px; height: 32px; }
.heart.on { color: var(--red); }
.mute { width: 44px; height: 44px; border-radius: 50%; background: #f1f1f1; display: flex; align-items: center; justify-content: center; color: var(--red); }
.mute.on { color: var(--lime-dark); }
.mute svg { width: 24px; height: 24px; }

.pbar { position: relative; margin: 14px 14px 0; height: 26px; border-radius: 13px; background: #fff; overflow: hidden; }
.pbar .seg { position: absolute; top: 0; bottom: 0; }
.pbar .seg.ok { background: var(--lime); }
.pbar .seg.bad { background: var(--red); }
.pbar .cnt { position: absolute; left: 0; top: 0; min-width: 26px; height: 26px; border-radius: 13px; background: var(--lime); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: flex-start; padding-left: 9px; z-index: 1; }
.pbar .tot { position: absolute; right: 10px; top: 0; line-height: 26px; font-size: 15px; font-weight: 700; z-index: 1; }

.xbody { padding: 0 16px; display: flex; flex-direction: column; align-items: center; }
.bigword { font-size: 54px; font-weight: 700; text-align: center; line-height: 1.1; margin-top: 44px; max-width: 100%; overflow-wrap: normal; word-break: normal; hyphens: none; }
.bigword.ru { font-size: 42px; margin-top: 40px; }
.ipa { font-size: 30px; color: var(--ipa); margin-top: 10px; }
.ipa.gray { color: #8a8a8a; font-size: 24px; }
.tools { display: flex; justify-content: space-around; width: 100%; margin: 26px 0 8px; }
.tool { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 18px; color: #555; position: relative; }
.tool .tb { width: 54px; height: 54px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; position: relative; }
.tool .tb svg { width: 28px; height: 28px; }
.tool.snd .tb { color: var(--lime-dark); }
.tool.snd.off .tb { color: #c9c9c9; }
.tool .hbadge { position: absolute; top: -6px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--lime-dark); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tool.nohint { opacity: .4; pointer-events: none; }
.ring { width: 54px; height: 54px; position: relative; }
.ring svg { width: 54px; height: 54px; transform: rotate(-90deg); }
.ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.ring .arc { transition: stroke-dasharray .6s ease; }
.ring.bump span { animation: bump .45s ease; }
@keyframes bump { 40% { transform: scale(1.35); color: var(--lime-dark); } }

.opts { width: 100%; display: grid; gap: 12px; margin-top: 28px; }
.opt { background: #fff; border-radius: 14px; min-height: 60px; padding: 10px 14px; font-size: 22px; text-align: center; }
.opt.gone { visibility: hidden; }
.opt.ok { background: var(--lime); color: #fff; }
.opt.bad { background: var(--red); color: #fff; }
.opts.lock .opt { pointer-events: none; }

.listen-cap { font-size: 20px; margin-top: 26px; }
.listen { width: 116px; height: 116px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; margin-top: 16px; }
.listen:active { background: var(--teal-dark); }
.listen svg { width: 62px; height: 62px; }

.cells { display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px; margin: 12px 0 4px; min-height: 44px; width: 100%; }
.cells .c { text-transform: uppercase; flex: none; width: var(--w, 38px); height: var(--h, 57px); background: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: var(--fs, 28px); color: var(--title); }
.cells .c.gap { background: transparent; width: 16px; }
.cells .c.fail { color: var(--red); }
.cells .c.hint { color: var(--lime-dark); }
.cells .c.cur { box-shadow: inset 0 -3px 0 var(--teal); }
.cells .c.flash { background: #fde3e7; }
.tiles { display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px; margin-top: 36px; width: 100%; }
.tile { flex: none; width: var(--w, 46px); height: var(--h, 67px); padding: 0; border-radius: 6px; background: #fff; font-size: var(--fs, 30px); color: var(--title); transition: background .12s; }
.tile.used { visibility: hidden; }
.tile.bad { background: var(--red); color: #fff; }
.tile.good { background: var(--lime); color: #fff; }

.kbd { position: fixed; left: 0; right: 0; bottom: 0; background: #d3d6dc; padding: 8px 3px calc(var(--safe-b) + 8px); z-index: 5; }
.kbd-in { max-width: 560px; margin: 0 auto; }
.krow { display: flex; justify-content: center; gap: 5px; margin-bottom: 9px; }
.key { flex: none; width: calc((100% - 45px) / 10); height: 46px; border-radius: 6px; background: #fff; box-shadow: 0 1px 0 #898a8d; font-size: 24px; display: flex; align-items: center; justify-content: center; }
.key.wide { width: calc((100% - 45px) / 10 * 5 + 20px); }
.key.mid { width: calc((100% - 45px) / 10 * 1.5 + 2.5px); font-size: 22px; }
.key.bad { background: var(--red); color: #fff; }
.key:active, .key.press { background: #bfc3ca; }
.tile.press { background: #dfe3e8; }
/* буквы: без выделения текста, лупы и меню по долгому касанию, без задержек жестов */
.key, .tile, .kbd, .tiles { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.kbd-space { height: 250px; }

.match { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 14px; }
.mb { min-height: 58px; border-radius: 29px; background: #fff; font-size: 19px; padding: 6px 10px; transition: background .15s, color .15s; }
.mb.sel { background: #d7f0ec; box-shadow: inset 0 0 0 3px var(--teal); }
.mb.done { background: var(--lime); color: #fff; pointer-events: none; }
.mb.bad { background: var(--red); color: #fff; }

.big-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin: 36px 0 10px; }
.bbtn { min-height: 78px; border-radius: 10px; color: #fff; font-size: 21px; }
.bbtn.teal { background: var(--teal); }
.bbtn.lime { background: var(--lime); }

.study .st-top { flex: none; height: 118px; margin-top: 14px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.study .bigword { margin: 0; line-height: 1.05; white-space: nowrap; }
.sline { position: relative; width: 78%; margin: 12px 0 8px; border-top: 1px solid #d5d5d5; }
.sline .spk { position: absolute; right: -30px; top: -28px; }
.spk { width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--teal-dark); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.spk svg { width: 30px; height: 30px; }
.spk.dark { color: var(--blue); background: transparent; width: 40px; height: 40px; }
.study .ru { flex: none; height: 84px; margin-top: 12px; color: var(--ru); text-align: center; line-height: 1.15; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; }
.study .ex-box { flex: 1; min-height: 0; width: 100%; overflow: hidden; }
.study .ex { width: 100%; margin-top: 8px; padding: 0 66px 0 10px; }
.study .ex .sline { width: 100%; margin: 12px 0 10px; }
.study .ex .sline .spk { right: -62px; }
.study .ex .en { font-style: italic; font-size: 1em; }
.study .ex .ruex { font-style: italic; font-size: 1em; color: #8a8a8a; }
.study .big-btns { flex: none; margin: 10px 0 0; }
@media (max-height: 620px) {
  .study .st-top { height: 96px; margin-top: 6px; } .study .ru { height: 70px; transform-origin: top; }
  .study .bbtn { min-height: 64px; } .study .ex .sline { margin: 8px 0 6px; }
}
em { font-style: inherit; color: #f0592b; }

/* ---------- bottom sheets ---------- */
.sheet-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .28); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: #fff; width: 100%; max-width: 560px; border-radius: 28px 28px 0 0; padding: 20px 22px calc(var(--safe-b) + 22px); max-height: 92dvh; overflow-y: auto; animation: up .22s ease; position: relative; }
@media (min-width: 600px) { .sheet-bg { align-items: center; } .sheet { border-radius: 28px; } }
@keyframes up { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }
.verdict { text-align: center; font-size: 34px; font-weight: 700; margin-bottom: 6px; }
.verdict.ok { color: var(--lime); }
.verdict.bad { color: var(--red); }
.ans-row { display: flex; align-items: center; gap: 10px; }
.ans-row .grow { flex: 1; }
.ans-word { font-size: 36px; font-weight: 700; }
.ans-ipa { color: #666; font-size: 19px; }
.ans-ru { font-size: 36px; font-weight: 700; color: var(--title); margin: 14px 0 6px; }
.ans-ex { font-style: italic; font-size: 21px; }
.ans-exru { font-style: italic; font-size: 21px; color: var(--title); margin-top: 14px; }
.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 60px; border-radius: 12px; font-size: 22px; color: #fff; background: var(--lime); margin-top: 22px; }
.btn.teal { background: var(--teal); }
.btn.gray { background: #e7e7e7; color: #333; }
.btn.red { background: #fde3e7; color: var(--red); }
.btn.small { min-height: 46px; font-size: 18px; margin-top: 10px; }
.sheet-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; }
.sheet-close svg { width: 24px; height: 24px; }
.sheet h2 { font-size: 30px; font-weight: 700; text-align: center; margin: 4px 44px 10px; }
.sheet .note { text-align: center; font-size: 15px; margin: 0 0 10px; }
.legend { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; margin-bottom: 14px; }
.legend .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
.res { position: relative; display: flex; align-items: center; justify-content: space-between; border-radius: 24px; padding: 4px 4px 4px 18px; min-height: 48px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); font-weight: 700; font-size: 16px; }
.res.ok { background: var(--lime); box-shadow: none; }
.res .pts { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.res .badge { top: -10px; right: -8px; }

.done-title { text-align: center; font-size: 32px; font-weight: 700; margin: 4px 0 8px; }
.kpis { display: flex; justify-content: space-around; text-align: center; font-weight: 700; font-size: 18px; }
.kpi .circle { width: 92px; height: 92px; border-radius: 50%; background: #f1f1f1; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 6px; color: var(--title); font-size: 38px; }
.kpi .circle small { font-size: 15px; color: #111; font-weight: 500; }
.chart-title { text-align: center; font-weight: 700; font-size: 19px; margin: 12px 0 6px; }
.chart { position: relative; display: flex; justify-content: space-around; align-items: flex-end; height: 86px; padding: 0 8px; }
.chart .col { width: 12px; height: 100%; border-radius: 6px; background: var(--lime); position: relative; overflow: hidden; }
.chart .col i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--red); border-radius: 6px; }
.chart .avg { position: absolute; left: 0; right: 0; border-top: 1px solid #333; }
.rating { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; margin-top: 8px; }
.rating .wchip { background: var(--lime); }
.rating .wchip.fav { box-shadow: 0 0 0 3px var(--red); }
.sub { text-align: center; font-size: 15px; }

.rep-text { text-align: center; font-size: 22px; line-height: 1.35; margin: 28px 6px 6px; }
.rep-text span { color: var(--red); }
.sheet h2.teal { color: var(--title); font-size: 34px; }

/* ---------- определение уровня ---------- */
.onb { padding: calc(var(--safe-t) + 6px) 14px calc(var(--safe-b) + 20px); }
.onb .brand { padding-top: 8px; }
.onb-h { text-align: center; color: #111; font-size: 23px; font-weight: 700; margin: 14px 0 6px; }
.btn.zero-btn { flex-direction: column; gap: 2px; padding: 10px 14px; font-size: 20px; margin: 4px 0 14px; line-height: 1.2; }
.zero-btn small { font-size: 15px; font-weight: 400; opacity: .9; }
.onb-sub { text-align: center; color: #555; font-size: 16px; margin: 0 4px 12px; }
.lvls { display: grid; gap: 8px; }
.lvl { background: #fff; border-radius: 16px; padding: 10px 10px 10px 14px; }
.lvl-info { font-size: 14px; color: #666; margin-bottom: 8px; }
.lvl-info b { color: var(--title); font-size: 20px; }
.lvl-info span { color: #111; font-weight: 700; font-size: 16px; }
.lvl-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lvl-b { height: 52px; border-radius: 14px; background: var(--chip); color: var(--title); font-size: 18px; font-weight: 700; line-height: 1.05; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.lvl-b.mid { background: #d7eef0; }
.lvl-b small { font-size: 11.5px; font-weight: 500; color: #6b7c86; line-height: 1.05; }
.lvl-b:active small { color: #fff; }
.lvl-b:active { background: var(--lime); color: #fff; }
.btn.ghost-link { background: none; color: var(--title); text-decoration: underline; min-height: 44px; font-size: 17px; margin-top: 12px; }
.onb-list { background: #fff; border-radius: 16px; padding: 14px 16px 14px 34px; margin: 8px 0 4px; font-size: 16px; line-height: 1.45; }
.bands { display: grid; gap: 8px; background: #fff; border-radius: 16px; padding: 12px 14px; }
.band { display: grid; grid-template-columns: 112px 1fr 58px; align-items: center; gap: 8px; font-size: 15px; }
.band-bar { height: 12px; border-radius: 6px; background: #eee; overflow: hidden; }
.band-bar i { display: block; height: 100%; border-radius: 6px; }
.band-bar i.ok { background: var(--lime); } .band-bar i.mid { background: #f5b544; } .band-bar i.bad { background: var(--red); }
.band-r { text-align: right; color: #555; }
.onb-start { text-align: center; margin: 16px 0 8px; font-weight: 700; font-size: 17px; }
.stepper { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 8px; }
.stepper button { min-width: 48px; height: 44px; border-radius: 12px; background: #fff; color: var(--title); font-weight: 700; font-size: 16px; }
.stepper b { min-width: 70px; font-size: 34px; color: var(--title); }
.place-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 12px; }
.place-tools .btn { margin: 0; }
.btn.idk { margin-top: 14px; min-height: 52px; font-size: 19px; }
.pbar .seg.skip { background: #c9c9c9; }
.cell.skipped .done-ic { background: #bfe9e2; }
.cell.skipped .bar i { background: #d5e9ad; }

/* ---------- курс 2 (уроки 301–500) ---------- */
.pager h2 small { display: block; font-size: 14px; font-weight: 500; color: var(--pink); text-align: center; }
.gm-banner { display: flex; align-items: center; gap: 12px; margin: 0 6px 8px; padding: 10px 12px; background: #fff; border-radius: 12px; border-left: 5px solid #d42a36; font-size: 14px; color: #555; }
.gm-banner b { display: block; color: #111; font-size: 15px; margin-bottom: 2px; }
.gm-banner .badge-svg { flex: none; }
.cell.gm-locked { opacity: .55; }
.cell .lock-ic { color: #888; } .cell .lock-ic svg { width: 16px; height: 16px; }

/* ---------- лиги ---------- */
.badge-svg { display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.25)); }
.st-item .badge-svg { width: 48px; height: 48px; }
.lg-big { display: flex; justify-content: center; margin: 4px 0 2px; }
.lg-name { text-align: center; font-size: 24px; font-weight: 700; color: var(--title); }
.lg-prog { margin: 10px 10px 4px; }
.progress { height: 12px; border-radius: 6px; background: #e8e8e8; overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 6px; background: var(--lime); }
.lg-list { display: grid; gap: 6px; margin-top: 14px; }
.lg-row { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 14px; background: #f6f6f6; }
.lg-row.cur { background: #eef7dc; box-shadow: inset 0 0 0 2px var(--lime); }
.lg-row.future .badge-svg { filter: grayscale(1) opacity(.45); }
.lg-t { flex: 1; } .lg-t b { font-size: 17px; } .lg-t div { font-size: 13px; color: var(--muted); }
.lg-you { font-size: 13px; font-weight: 700; color: var(--lime-dark); }
.lg-ok svg { width: 22px; height: 22px; color: var(--lime-dark); }
.lg-sheet { text-align: center; overflow: hidden; }
.lg-up { font-size: 30px; font-weight: 700; color: var(--red); letter-spacing: .04em; margin-top: 6px; }
.lg-sheet .lg-big .badge-svg { animation: lgpop .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes lgpop { 0% { transform: scale(.2) rotate(-25deg); opacity: 0; } 70% { transform: scale(1.12) rotate(4deg); opacity: 1; } 100% { transform: none; } }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: fall 2.2s ease-in forwards; }
@keyframes fall { to { transform: translateY(620px) rotate(540deg); opacity: 0; } }

/* ---------- мини-тест ---------- */
.sheet.mt { background: #efefef; text-align: center; }
.sheet.mt .sticky { background: #efefef; }
.sheet-close.left { right: auto; left: 16px; background: #fff; }
.mt-title { color: #ff0a54; font-size: 44px; font-weight: 700; margin: 10px 40px 8px; letter-spacing: .01em; }
.mt-text { color: #555; font-size: 17px; margin: 0 6px 14px; }
.mt-choose { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.mt-level { margin-top: 14px; }
.mt-name { color: var(--title); font-size: 21px; font-weight: 700; }
.mt-desc { color: #6b6b6b; font-size: 15px; margin: 4px 10px 10px; }
.mt-pill { position: relative; width: 100%; height: 64px; border-radius: 32px; background: #fff; display: flex; align-items: center; justify-content: center; }
.mt-score { position: absolute; left: 26px; color: var(--title); font-weight: 700; font-size: 19px; }
.mt-stars { gap: 14px; }
.mt-stars svg { width: 26px; height: 26px; }
.mt-result { color: var(--title); font-size: 38px; font-weight: 700; margin-top: 8px; }
.mt-sub { color: #6b6b6b; font-size: 15px; margin: 4px 6px 10px; }
.mt-rt { font-size: 21px; font-weight: 700; margin-top: 12px; }
.big-stars { justify-content: center; gap: 8px; margin: 8px 0 4px; color: #fff; }
.big-stars .on { color: #f6b91c; }
.speed { display: grid; gap: 6px; margin-top: 6px; text-align: left; }
.sp-row { position: relative; height: 28px; border-radius: 14px; background: #fff; }
.sp-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 14px; padding-left: 14px; display: flex; align-items: center; font-size: 15px; white-space: nowrap; }
.sp-bar.ok { background: #94d500; }
.sp-bar.bad { background: #ff0a54; color: #fff; }
.sp-val { position: absolute; right: 14px; top: 0; line-height: 28px; font-size: 15px; }

/* ---------- profile ---------- */
.prof h3 { font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin: 22px 0 8px; }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eee; }
.linkbtn { color: var(--teal-dark); font-weight: 700; font-size: 14px; text-decoration: underline; }
.prow:last-child { border-bottom: 0; }
.prow .l { flex: 1; }
.prow .l div { font-size: 14px; color: var(--muted); }
.avatars { display: flex; flex-wrap: wrap; gap: 8px; }
.avatars button { width: 44px; height: 44px; border-radius: 50%; background: #f1f1f1; font-size: 26px; }
.avatars button.on { box-shadow: 0 0 0 3px var(--teal); }
.name-input, .select { height: 42px; border-radius: 10px; border: 1px solid #ddd; padding: 0 12px; font-size: 18px; background: #fafafa; }
.name-input { width: 100%; }
.select { max-width: 210px; }
.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 16px; background: #ddd; transition: .2s; }
.switch span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: .2s; }
.switch input:checked + span { background: var(--lime); }
.switch input:checked + span::after { transform: translateX(20px); }
input[type=range] { accent-color: var(--lime-dark); width: 150px; }
.stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.stat3 div { background: #f4f4f4; border-radius: 14px; padding: 10px 4px; }
.stat3 b { display: block; font-size: 26px; color: var(--title); }
.stat3 span { font-size: 14px; color: var(--muted); }
.favlist { max-height: 260px; overflow-y: auto; }
.fav { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.fav .t { flex: 1; } .fav .t div { color: var(--muted); font-size: 15px; }
.fav .x { color: var(--red); font-size: 22px; width: 36px; }

.toast { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 24px); transform: translateX(-50%) translateY(16px); background: rgba(20,20,20,.9); color: #fff; padding: 11px 16px; border-radius: 14px; font-size: 16px; opacity: 0; pointer-events: none; transition: .25s; z-index: 60; max-width: calc(100% - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%); }

@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.shake { animation: shake .3s; }

/* невысокие экраны (iPhone SE и Safari с панелями): клавиатура не должна закрывать кнопки */
@media (max-height: 640px) {
  .bigword { margin-top: 24px; } .bigword.ru { margin-top: 14px; }
  .tools { margin: 12px 0 4px; } .tool .tb, .ring, .ring svg { width: 46px; height: 46px; } .tool { gap: 4px; font-size: 15px; }
  .key { height: 40px; } .krow { margin-bottom: 7px; } .kbd-space { height: 212px; }
  .listen { width: 96px; height: 96px; margin-top: 8px; } .listen-cap { margin-top: 14px; }
  .tiles { margin-top: 22px; }
}
/* очень низкие экраны (iPhone SE в Safari с панелями): слово в две строки + клавиатура */
@media (max-height: 600px) {
  .bigword.ru { margin-top: 8px; } .cells { margin: 8px 0 2px; }
  .tools { margin: 6px 0 2px; } .tool { gap: 2px; font-size: 13px; }
  .tool .tb, .ring, .ring svg { width: 40px; height: 40px; } .ring span { font-size: 15px; }
  .key { height: 38px; } .krow { margin-bottom: 6px; } .kbd-space { height: 196px; }
}
@media (max-width: 380px) {
  .bigword { font-size: 46px; } .study .bigword { font-size: 50px; }
  .stage { min-height: 84px; } .stage .sic { width: 68px; height: 68px; }
  .cell .num { font-size: 19px; } .cell .ms { font-size: 23px; }
}
@media (min-width: 600px) {
  .cell .num { font-size: 26px; }
  .grid { gap: 6px; padding: 0 10px; }
}
@media (hover: hover) { .opt:hover, .tile:hover, .mb:hover, .key:hover { filter: brightness(.97); } }

/* заставка, пока грузятся словарь и код (заменяется первым render) */
.splash { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--teal-dark, #3a8f86); }
.splash b { font-size: 40px; } .splash span { font-size: 17px; color: #888; }