:root{
  --bg:#f5f6fa; --card:#fff; --ink:#1b2230; --mute:#6a7385; --line:#e2e6ee;
  --red:#c6363c; --blue:#0c4076; --blue2:#2b63a8;
  --ok:#1f9d55; --okbg:#e4f6ec; --bad:#d4413b; --badbg:#fdeaea; --warnbg:#fff5d9; --warn:#a67400;
  --tile:#fff; --tileb:#d5dae4; --shadow:0 2px 10px rgba(20,40,80,.07);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f141d;--card:#18202d;--ink:#e7ebf3;--mute:#98a2b6;--line:#2a3446;
  --blue:#8db8ee;--blue2:#6aa0e3;--red:#ff7a7f;--ok:#4fd18b;--okbg:#16332499;--bad:#ff7b75;--badbg:#3b1b1b;--warnbg:#3a3013;--warn:#f1c35a;
  --tile:#202a3a;--tileb:#36425a;--shadow:none}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--blue2)}
header.top{background:var(--blue);color:#fff;position:sticky;top:0;z-index:20;border-bottom:4px solid var(--red)}
@media (prefers-color-scheme:dark){header.top{background:#15284a}}
header.top .in{max-width:900px;margin:auto;display:flex;align-items:center;gap:10px;padding:10px 16px}
header.top h1{font-size:18px;margin:0;flex:1;line-height:1.2}
header.top h1 small{display:block;font-weight:400;opacity:.8;font-size:13px}
header.top a.back,header.top button{background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:10px;padding:7px 11px;font:inherit;font-size:15px;cursor:pointer;text-decoration:none;white-space:nowrap}
nav.tabs{max-width:900px;margin:auto;display:flex;gap:4px;padding:0 12px;overflow-x:auto}
nav.tabs a{color:#fff;opacity:.75;text-decoration:none;padding:8px 12px 9px;border-bottom:3px solid transparent;white-space:nowrap;font-size:15px}
nav.tabs a.on{opacity:1;border-color:#fff;font-weight:600}
main{max-width:900px;margin:auto;padding:16px 16px 140px}
h2{font-size:22px;margin:4px 0 12px}
h3{font-size:18px;margin:0 0 8px;color:var(--blue)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow)}
.muted{color:var(--mute);font-size:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{background:var(--blue2);color:#fff;border:0;border-radius:12px;padding:11px 18px;font:inherit;font-weight:600;cursor:pointer}
.btn.alt{background:transparent;color:var(--blue2);border:2px solid var(--blue2)}
.btn.sm{padding:6px 12px;font-size:15px;border-radius:10px}
.btn[disabled]{opacity:.4;cursor:default}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.tile-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;cursor:pointer;text-align:left;font:inherit;color:inherit;box-shadow:var(--shadow);position:relative;display:block;text-decoration:none}
.tile-card:hover{border-color:var(--blue2)}
.tile-card .em{font-size:26px}
.tile-card b{display:block;font-size:17px;margin-top:2px}
.tile-card .s{color:var(--mute);font-size:14px;display:block}
.tile-card.off{opacity:.45;cursor:default}
.badge{position:absolute;top:12px;right:12px;font-size:13px;font-weight:700;border-radius:20px;padding:2px 9px;background:var(--line);color:var(--mute)}
.badge.good{background:var(--okbg);color:var(--ok)}
.badge.mid{background:var(--warnbg);color:var(--warn)}
.bar{height:10px;background:var(--line);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok);border-radius:6px;transition:width .3s}

/* Serbian text that can be spoken */
.say{cursor:pointer;text-decoration:underline dotted color-mix(in srgb,var(--blue2) 55%,transparent);text-underline-offset:3px}
body.no-tts .say{cursor:auto;text-decoration:none}
.spk{background:none;border:0;cursor:pointer;font-size:18px;padding:2px 6px;border-radius:8px;line-height:1}
.spk:hover{background:var(--line)}
body.no-tts .spk{display:none}

/* Cheat sheet */
.cheat h3{margin-top:2px}
.cheat table{border-collapse:collapse;width:100%;margin:6px 0 4px;font-size:16px}
.cheat td,.cheat th{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.cheat th{color:var(--mute);font-weight:600;font-size:14px}
.cheat .sr{font-weight:600}
.cheat .tip{background:var(--warnbg);border-radius:12px;padding:10px 12px;margin:10px 0 2px;font-size:15px}
.cheat .bad{color:var(--bad);text-decoration:line-through}
.cheat .good{color:var(--ok)}
.cheat ul{margin:6px 0;padding-left:20px}
.cheat li{margin:3px 0}
.scale{display:flex;flex-direction:column;gap:4px}
.scale div{display:flex;gap:10px;align-items:center}
.scale span.e{width:28px;text-align:center;font-size:20px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){.two{grid-template-columns:1fr}}

/* vocab */
.vocab{width:100%;border-collapse:collapse}
.vocab td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.vocab td.e{width:34px;font-size:20px;text-align:center}
.vocab td.s{font-weight:600}
.vocab td.r{color:var(--mute)}
.vocab.hide-ru td.r span{filter:blur(6px);cursor:pointer}
.vocab.hide-sr td.s span{filter:blur(6px);cursor:pointer}
.vocab td.r .n{font-size:13px;opacity:.85}
.flash{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;user-select:none}
.flash .big{font-size:30px;font-weight:700}
.flash .em{font-size:44px}
.flash .back{margin-top:10px;font-size:20px;color:var(--mute)}

/* audio */
audio{width:100%;margin:6px 0}
.tr{margin:8px 0 0;padding:0;list-style:none}
.tr li{padding:4px 0;border-bottom:1px dashed var(--line)}
.tr li b{color:var(--mute);font-weight:600;margin-right:6px;font-size:14px}
.tr h4{margin:10px 0 2px;font-size:14px;color:var(--mute)}
.pick{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.pick button{flex:1 1 220px;text-align:left;background:var(--tile);border:2px solid var(--tileb);color:var(--ink);border-radius:12px;padding:9px 12px;font:inherit;cursor:pointer}
.pick button.on{border-color:var(--blue2);background:color-mix(in srgb,var(--blue2) 12%,var(--tile))}

/* runner */
.runner .top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.runner .top .bar{flex:1}
.runner .x{background:none;border:0;font-size:24px;color:var(--mute);cursor:pointer;padding:0 4px}
.q-title{font-size:14px;color:var(--mute);margin-bottom:6px;font-weight:600}
.q-prompt{font-size:21px;font-weight:600;margin-bottom:14px;line-height:1.4}
.q-prompt .em{font-size:40px;display:block;margin-bottom:4px}
.q-prompt .wrong{color:var(--bad);text-decoration:line-through;text-decoration-thickness:1px}
.q-sub{color:var(--mute);font-size:15px;margin:-8px 0 14px}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{text-align:left;background:var(--tile);color:var(--ink);border:2px solid var(--tileb);border-bottom-width:4px;border-radius:14px;padding:12px 15px;font:inherit;cursor:pointer}
.opt:hover:not([disabled]){border-color:var(--blue2)}
.opt.ok{border-color:var(--ok);background:var(--okbg)}
.opt.no{border-color:var(--bad);background:var(--badbg)}
.opt[disabled]{cursor:default}
.answer-zone{min-height:60px;border-bottom:2px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 10px;margin-bottom:18px;align-content:flex-start}
.answer-zone.lines{background:repeating-linear-gradient(transparent 0 57px,var(--line) 57px 59px);border-bottom:0;min-height:118px}
.bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.wt{background:var(--tile);color:var(--ink);border:2px solid var(--tileb);border-bottom-width:4px;border-radius:12px;padding:8px 13px;font:inherit;font-size:18px;cursor:pointer;user-select:none;min-width:40px}
.wt:active{transform:translateY(2px);border-bottom-width:2px}
.wt.ghost{background:var(--line);color:transparent;border-color:var(--line);cursor:default}
.answer-zone .wt{animation:pop .12s}
@keyframes pop{from{transform:scale(.85)}to{transform:scale(1)}}
.fill-line{font-size:22px;line-height:2.1;margin-bottom:18px}
.blank{display:inline-block;min-width:70px;border-bottom:3px solid var(--blue2);text-align:center;font-weight:700;padding:0 6px;line-height:1.3}
.blank.ok{color:var(--ok);border-color:var(--ok)}
.blank.no{color:var(--bad);border-color:var(--bad)}
.dlg{background:var(--bg);border-radius:12px;padding:8px 12px;margin-bottom:12px;font-size:15px;color:var(--mute)}
.dlg div b{color:var(--ink);opacity:.6;margin-right:4px}
.split{font-size:25px;letter-spacing:.5px;line-height:2.4;word-break:break-all;margin-bottom:12px;user-select:none}
.split span{cursor:pointer;padding:2px 1px;border-radius:5px;display:inline-block;line-height:1.3}
.split span:hover{background:var(--line)}
.split span.br{margin-right:16px;box-shadow:7px 0 0 -4px var(--blue2)}
.split span.ok-br{margin-right:16px;box-shadow:7px 0 0 -4px var(--ok)}
.split span.bad-br{margin-right:16px;box-shadow:7px 0 0 -4px var(--bad)}
.match{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.match .col{display:flex;flex-direction:column;gap:9px}
.match .opt{padding:10px 12px;font-size:16px}
.match .opt.sel{border-color:var(--blue2);background:color-mix(in srgb,var(--blue2) 14%,var(--tile))}
.match .opt.done{opacity:.35;border-color:var(--ok)}
.match .opt.shake{animation:shake .3s;border-color:var(--bad)}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.sort-word{text-align:center;font-size:28px;font-weight:700;margin:6px 0 14px;min-height:44px}
.sort-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px}
.sort-cats .cat{border:2px solid var(--tileb);border-radius:14px;background:var(--tile);padding:8px 10px;min-height:120px;cursor:pointer;font:inherit;color:var(--ink);text-align:left;display:flex;flex-direction:column;gap:3px}
.sort-cats .cat:hover{border-color:var(--blue2)}
.sort-cats .cat b{font-size:15px;margin-bottom:4px}
.sort-cats .cat i{font-style:normal;font-size:14px;background:var(--okbg);color:var(--ok);border-radius:8px;padding:1px 7px;align-self:flex-start}
.sort-cats .cat i.was{background:var(--badbg);color:var(--bad)}
.sort-cats .cat.flash-bad{border-color:var(--bad)}

/* feedback sheet */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:30;border-top:2px solid var(--line);background:var(--card);padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
.sheet .in{max-width:900px;margin:auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.sheet .msg{flex:1 1 300px;min-width:0}
.sheet .msg b{font-size:19px;display:block}
.sheet .msg .cor{font-size:17px;margin-top:2px}
.sheet .msg .ex{font-size:15px;color:var(--mute);margin-top:4px}
.sheet.ok{background:var(--okbg);border-color:var(--ok)}
.sheet.ok .msg b{color:var(--ok)}
.sheet.no{background:var(--badbg);border-color:var(--bad)}
.sheet.no .msg b{color:var(--bad)}
.sheet.ok .btn{background:var(--ok)}
.sheet.no .btn{background:var(--bad)}
.sheet .btn{min-width:150px}
.result{text-align:center;padding:24px 12px}
.result .big{font-size:52px;font-weight:800;color:var(--blue2)}
.mistakes{text-align:left;margin-top:16px}
.mistakes li{margin:4px 0}
.hint-tts{font-size:14px}
.no-say .say,.say.no-say{text-decoration:none;cursor:inherit}

/* order: put dialogue lines in sequence */
.order-zone{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;min-height:60px;border-bottom:2px solid var(--line);padding-bottom:12px}
.order-zone .picked{display:flex;flex-direction:column;gap:7px}
.ol{text-align:left;background:var(--tile);color:var(--ink);border:2px solid var(--blue2);border-radius:12px;padding:9px 12px;font:inherit;font-size:16px;cursor:pointer;counter-increment:ol}
.ol.given{border-color:var(--line);background:var(--bg);cursor:default}
.ol.ok{border-color:var(--ok);background:var(--okbg)}
.ol.no{border-color:var(--bad);background:var(--badbg)}
.order-zone{counter-reset:ol}
.ol::before{content:counter(ol) ". ";color:var(--mute);font-weight:700}
.order-bank{display:flex;flex-direction:column;gap:8px}
.order-bank .opt{font-size:16px;padding:9px 12px}