:root{
  --bg:#f7f3ec; --paper:#fffdf9; --ink:#24232b; --muted:#77727e; --line:#e8e1d5; --soft:#f2ece2;
  --accent:#6f9a2e; --accent-soft:#eef5dc;
  --good:#2e9a58; --good-soft:#e2f4e8; --bad:#d24a3f; --bad-soft:#fce8e5;
  --class:#3d6fd0; --class-soft:#e9effc; --home:#b8721b; --home-soft:#fcf1de;
  --ru:#7b6a96;
  --radius:20px; --shadow:0 1px 2px rgba(40,30,20,.05),0 10px 28px rgba(40,30,20,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  margin:0;font-family:'Nunito',system-ui,-apple-system,sans-serif;color:var(--ink);font-size:18px;line-height:1.55;
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23000' fill-opacity='.03'%3E%3Cg transform='translate(30 34) rotate(-18)'%3E%3Cellipse cx='12' cy='18' rx='8' ry='7'/%3E%3Ccircle cx='3' cy='8' r='3.2'/%3E%3Ccircle cx='9.5' cy='3' r='3.2'/%3E%3Ccircle cx='16.5' cy='3' r='3.2'/%3E%3Ccircle cx='22' cy='9' r='3.2'/%3E%3C/g%3E%3Cg transform='translate(108 104) rotate(24)'%3E%3Cellipse cx='12' cy='18' rx='8' ry='7'/%3E%3Ccircle cx='3' cy='8' r='3.2'/%3E%3Ccircle cx='9.5' cy='3' r='3.2'/%3E%3Ccircle cx='16.5' cy='3' r='3.2'/%3E%3Ccircle cx='22' cy='9' r='3.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
button{font:inherit;color:inherit}
h1,h2,h3{line-height:1.2;margin:0}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:rgba(247,243,236,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{max-width:900px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;white-space:nowrap;font-size:17px}
.chips{display:flex;gap:6px;flex:1;justify-content:center;overflow-x:auto;padding:2px}
.chip{min-width:34px;height:34px;padding:0 4px;border-radius:999px;display:grid;place-items:center;font-weight:800;font-size:15px;text-decoration:none;color:var(--ink);background:var(--paper);border:2px solid var(--line);flex:none;transition:.2s}
.chip.rule{padding:0 12px}
.chip.class{border-color:#c6d6f7}.chip.home{border-color:#efd6a8}
.chip.done{background:var(--good);border-color:var(--good);color:#fff}
.mode{display:flex;background:var(--soft);border-radius:999px;padding:3px;flex:none}
.mode button{border:0;background:none;font-size:14px;font-weight:800;padding:6px 12px;border-radius:999px;color:var(--muted);cursor:pointer}
.mode button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.bar{height:4px;background:var(--line)}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s}

.wrap{max-width:900px;margin:0 auto;padding:30px 16px 190px}

/* hero */
.hero{display:flex;gap:24px;align-items:center;margin-bottom:8px}
.badge{display:inline-block;font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:4px 12px;border-radius:999px}
.hero h1{font-size:48px;font-weight:900;margin:10px 0 4px;letter-spacing:-.01em}
.hero .sub{color:var(--muted);font-size:20px;font-weight:700}
.plan{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 6px}
.step{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:16px;font-weight:700}
.step i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:900;background:var(--ink)}
.step.c i{background:var(--class)}.step.h i{background:var(--home)}
.step small{display:block;color:var(--muted);font-weight:600;font-size:14px;line-height:1.2}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;margin:20px 0}

/* rule */
.rule-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.rule-head h2{font-size:30px;font-weight:900}
.pill{border:2px solid var(--line);background:var(--paper);border-radius:999px;padding:4px 12px;font-size:14px;font-weight:800;cursor:pointer;color:var(--ru)}
.pill.off{color:var(--muted);text-decoration:line-through}
body.no-ru .ru{display:none}
.lead{font-size:20px;margin:0}
.ru{color:var(--ru);font-size:16px;margin:4px 0 0;padding-left:12px;border-left:3px solid #e2daee}
.block{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}
.block h3{font-size:22px;font-weight:900;display:flex;align-items:center;gap:10px}
.bn{width:30px;height:30px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:16px;flex:none}
.forms{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.f{border:2px solid var(--line);border-radius:14px;padding:12px 16px}
.f .who{font-size:15px;color:var(--muted);font-weight:700}
.f .v{font-size:26px;font-weight:900}
.f.hl{border-color:var(--accent);background:var(--accent-soft)}
.f.hl b,.hl-s{color:var(--accent)}
.ex{list-style:none;padding:0;margin:12px 0 0}
.ex li{padding:5px 0 5px 14px;border-left:3px solid var(--accent-soft);margin:4px 0}
.ex li b{color:var(--accent)}
.spell{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 0}
.sp{background:var(--soft);border-radius:12px;padding:10px 14px;font-size:16px}
.sp b{color:var(--accent)}
.sp span{display:block}
.sp span+span{color:var(--muted)}
.uses{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.use{border:2px solid var(--line);border-radius:14px;padding:12px 14px;font-size:16px}
.use h4{margin:0 0 6px;font-size:17px;font-weight:900}
.use p{margin:3px 0}
.use p b{color:var(--accent)}
.use .ru{margin-top:8px;font-size:14px}
table.neg{width:100%;border-collapse:separate;border-spacing:0;margin:14px 0;font-size:17px;border:2px solid var(--line);border-radius:14px;overflow:hidden}
.neg th,.neg td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line)}
.neg tr:last-child td{border-bottom:0}
.neg th{background:var(--soft);font-size:14px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.neg td b{color:var(--accent)}
.trap{background:#fff7e0;border:2px solid #f3dfa3;border-radius:14px;padding:12px 16px;margin-top:10px}
.trap .t{font-weight:900;margin-bottom:6px}
.yes,.no{margin:3px 0}
.yes::before{content:"✓";color:var(--good);font-weight:900;margin-right:8px}
.no::before{content:"✗";color:var(--bad);font-weight:900;margin-right:8px;display:inline-block;text-decoration:none}
.no{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(210,74,63,.6)}
.scale{display:flex;margin:16px 0 6px;border-radius:12px;overflow:hidden;font-weight:800;font-size:15px;text-align:center}
.scale div{flex:1;padding:8px 4px;color:#fff}
.scale small{display:block;font-size:12px;opacity:.85}
.chips-words{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.chips-words > span{background:var(--accent-soft);color:var(--accent);font-weight:800;padding:4px 12px;border-radius:999px;font-size:16px}

/* sections & tasks */
.sec{display:flex;align-items:center;gap:12px;margin:44px 0 0}
.sec h2{font-size:26px;font-weight:900}
.sec .tag{font-size:14px}
.sec p{margin:0;color:var(--muted);font-size:16px}
.tag{display:inline-block;font-size:13px;font-weight:800;padding:3px 10px;border-radius:999px}
.tag.class{background:var(--class-soft);color:var(--class)}
.tag.home{background:var(--home-soft);color:var(--home)}
.t-head{display:flex;gap:14px;align-items:center}
.t-num{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-weight:900;font-size:22px;color:#fff;flex:none;background:var(--class)}
.task.home .t-num{background:var(--home)}
.t-title{flex:1;min-width:0}
.t-title h3{font-size:22px;font-weight:900}
.t-meta{display:flex;gap:10px;align-items:center;margin-top:4px}
.lvl{display:inline-flex;gap:2px;color:#ddd3c3}
.lvl .on{color:var(--ink)}
.score{font-weight:900;font-size:18px;color:var(--muted);white-space:nowrap}
.score b{color:var(--ink);font-size:24px}
.example{margin:16px 0 4px;font-size:16px;color:var(--muted);background:var(--soft);border-radius:12px;padding:8px 14px}
.example b{color:var(--ink)}
.items{list-style:none;padding:0;margin:8px 0 0}
.item{display:flex;gap:12px;padding:14px 0;border-top:1px dashed var(--line)}
.item:first-child{border-top:0}
.item .n{width:26px;flex:none;color:var(--muted);font-weight:800;padding-top:4px}
.ib{flex:1;min-width:0}
.sent{font-size:19px;line-height:2}
.blank{display:inline-block;min-width:70px;border-bottom:2.5px solid #c9c1b4;text-align:center;font-weight:900;line-height:1.3}
.blank.filled{border-color:transparent;background:var(--soft);border-radius:8px;padding:0 8px}
.is-ok .blank.filled{background:var(--good-soft);color:var(--good)}
.is-bad .blank.filled{background:var(--good-soft);color:var(--good)}
.opts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.opt{font-weight:800;padding:6px 18px;border-radius:12px;border:2px solid var(--line);background:#fff;cursor:pointer;box-shadow:0 2px 0 var(--line);transition:.15s}
.opt:hover:not(:disabled){border-color:#cfc6b8;transform:translateY(-1px)}
.opt:disabled{cursor:default}
.opt.right{background:var(--good-soft);border-color:var(--good);color:var(--good);box-shadow:none}
.opt.wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);box-shadow:none;text-decoration:line-through}
.gap{font:inherit;font-weight:800;width:8.5em;padding:0 10px;height:36px;border:0;border-bottom:2.5px solid #bdb5a8;background:var(--soft);border-radius:10px 10px 4px 4px;outline:none;color:var(--ink);transition:.2s}
.gap:focus{border-color:var(--accent);background:var(--accent-soft)}
.gap.ok{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.gap.bad{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);text-decoration:line-through}
.gap.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.verb{color:var(--muted);font-style:italic;font-size:17px}
.btn{font-weight:800;font-size:15px;background:var(--ink);color:#fff;border:0;border-radius:10px;padding:6px 16px;cursor:pointer;vertical-align:middle}
.btn:disabled{opacity:.3;cursor:default}
.btn.ghost{background:var(--soft);color:var(--ink)}
.fb{font-size:16px;font-weight:700;margin-top:6px;color:var(--good)}
.fb::before{content:"✓";font-weight:900;margin-right:8px}
.fb b{font-weight:900}
.key{display:none;font-size:13px;background:#fff3b8;border-radius:8px;padding:2px 9px;margin-top:6px;color:#6b5a00;font-weight:800}
body.teacher .key{display:inline-block}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.hint{font-size:14px;font-weight:800;color:var(--home);background:var(--home-soft);border:0;border-radius:999px;padding:4px 12px 4px 9px;cursor:pointer;display:inline-flex;gap:5px;align-items:center}
.hint svg{fill:currentColor}
/* order */
.built{min-height:50px;border:2px dashed #d9d0c2;border-radius:14px;padding:6px 10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:18px}
.built:empty::before{content:"Нажимай на слова по порядку";color:#b3ab9e;font-size:16px;font-weight:700}

.built.ok{border-style:solid;border-color:var(--good);background:var(--good-soft)}
.built.bad{border-style:solid;border-color:var(--bad);background:var(--bad-soft)}
.bank{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;min-height:10px}
.tile{font-weight:800;font-size:18px;padding:5px 14px;border-radius:11px;border:2px solid var(--line);background:#fff;box-shadow:0 3px 0 var(--line);cursor:pointer}
.built .tile{box-shadow:none;background:var(--paper)}
.built .tile:first-child::first-letter{text-transform:uppercase}
.row{display:flex;gap:8px;margin-top:10px}
/* mistake */
.words{display:flex;flex-wrap:wrap;gap:2px 4px}
.w{background:none;border:0;font-size:19px;padding:1px 6px;border-radius:8px;cursor:pointer;border-bottom:2px dotted #d8cfc1}
.w:hover:not(:disabled){background:var(--soft)}
.w:disabled{cursor:default}
.w.found{background:var(--good-soft);color:var(--good);font-weight:900;border-bottom-color:transparent}
.w.picked{background:var(--bad-soft);color:var(--bad);text-decoration:line-through;border-bottom-color:transparent}
/* place */
.adv{display:inline-block;background:var(--accent-soft);color:var(--accent);font-weight:900;padding:1px 12px;border-radius:999px;margin-right:8px;font-size:17px}
.place{display:flex;flex-wrap:wrap;align-items:center}
.item[data-done] .adv{opacity:.35}
.place .tw{padding:0 2px}
.slot{width:26px;height:26px;margin:0 2px;border-radius:50%;border:2px dashed #c9c0b2;background:none;cursor:pointer;color:#b2a998;font-weight:900;font-size:15px;line-height:1;padding:0}
.slot:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.ins{font-weight:900;padding:0 8px;margin:0 3px;border-radius:8px}
.ins.ok{background:var(--good-soft);color:var(--good)}
.ins.bad{background:var(--bad-soft);color:var(--bad);text-decoration:line-through}
/* story */
.story{font-size:19px;line-height:2.3;margin-top:14px}
.story p{margin:0 0 12px}
.story .ans{color:var(--good);font-weight:900;font-size:16px;margin-left:4px}
.story-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
/* talk & done */
.talk{margin-top:20px;background:var(--class-soft);border-radius:16px;padding:16px 20px}
.talk h4{margin:0 0 6px;font-size:18px;font-weight:900;color:var(--class);display:flex;align-items:center;gap:8px}
.talk ul{margin:0;padding-left:20px}
.talk li{margin:4px 0}
.done-banner{display:none;margin-top:16px;background:var(--good-soft);color:var(--good);font-weight:900;border-radius:12px;padding:10px 16px}
.task.complete .done-banner{display:block}

/* Axel */
.axel{position:fixed;right:16px;bottom:10px;z-index:30;display:flex;align-items:flex-end;gap:4px;pointer-events:none}
.axel .cat{width:124px;height:142px;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 8px 10px rgba(0,0,0,.14));overflow:visible}
.bubble{pointer-events:auto;max-width:250px;background:#fff;border:2px solid var(--ink);border-radius:18px 18px 4px 18px;padding:10px 14px;font-weight:800;font-size:16px;line-height:1.35;margin-bottom:100px;opacity:0;transform:translateY(8px) scale(.96);transform-origin:bottom right;transition:.25s}
.bubble.show{opacity:1;transform:none}
.cat .all{transform-box:view-box;transform-origin:100px 220px}
.cat .tail{transform-box:view-box;transform-origin:138px 206px;animation:tail 3.4s ease-in-out infinite}
@keyframes tail{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(8deg)}}
.cat .eye{transform-box:fill-box;transform-origin:center;animation:blink 5s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.cat .pupil,.cat .head,.cat .ear{transition:transform .35s}
.cat .head{transform-box:view-box;transform-origin:100px 125px}
.cat .ear{transform-box:fill-box}
.cat .ear-l{transform-origin:100% 100%}
.cat .ear-r{transform-origin:0% 100%}
.cat .eyes-happy,.cat .eyes-sleep,.cat .brows,.cat .mouth-open,.cat .zzz,.cat .qmark,.cat .heart{display:none}
.cat[data-state=happy] .eyes-open,.cat[data-state=sleep] .eyes-open{display:none}
.cat[data-state=happy] .eyes-happy,.cat[data-state=happy] .mouth-open,.cat[data-state=happy] .heart{display:inline}
.cat[data-state=happy] .all{animation:hop .45s ease 2}
@keyframes hop{50%{transform:translateY(-12px)}}
.cat[data-state=happy] .heart{animation:rise 1.2s ease forwards}
@keyframes rise{from{transform:translateY(8px);opacity:0}to{transform:translateY(-6px);opacity:1}}
.cat[data-state=think] .head{transform:rotate(-8deg)}
.cat[data-state=think] .pupil{transform:translate(2.5px,-3.5px)}
.cat[data-state=think] .qmark{display:inline}
.cat[data-state=sad] .ear-l{transform:rotate(-24deg)}
.cat[data-state=sad] .ear-r{transform:rotate(24deg)}
.cat[data-state=sad] .pupil{transform:translateY(3px)}
.cat[data-state=sad] .brows{display:inline}
.cat[data-state=sad] .tail{animation:none;transform:rotate(-12deg)}
.cat[data-state=sleep] .eyes-sleep,.cat[data-state=sleep] .zzz{display:inline}
.cat[data-state=sleep] .head{transform:translateY(6px) rotate(6deg)}
.cat[data-state=sleep] .tail{animation-duration:8s}
.zzz text{animation:zz 2.6s ease-in-out infinite;font-family:Nunito,sans-serif;font-weight:900;fill:#8d8797}
.zzz text:nth-child(2){animation-delay:.6s}
@keyframes zz{0%{opacity:0;transform:translateY(6px)}40%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.qmark text{font-family:Nunito,sans-serif;font-weight:900;fill:var(--home)}

@media (max-width:700px){
  body{font-size:17px}
  .logo span{display:none}
  .hero h1{font-size:36px}
  .forms,.spell{grid-template-columns:1fr}
  .uses{grid-template-columns:1fr}
  .card{padding:20px 16px}
  .axel .cat{width:86px;height:99px}
  .bubble{max-width:190px;font-size:15px;margin-bottom:72px}
  .mode button{padding:5px 9px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== app additions (not in the original template) ===== */
.logo{color:var(--ink);text-decoration:none}
.who-am-i{display:flex;align-items:center;gap:8px;flex:none;font-size:15px;font-weight:800;color:var(--muted)}
.who-am-i a,.linkbtn{color:var(--muted);font-weight:800;text-decoration:none;background:none;border:0;cursor:pointer;padding:4px 8px;border-radius:8px;font-size:15px}
.who-am-i a:hover,.linkbtn:hover{background:var(--soft);color:var(--ink)}
.crumbs{font-size:15px;font-weight:800;color:var(--muted);margin-bottom:6px}
.crumbs a{color:var(--muted)}
.empty{color:var(--muted);text-align:center;padding:40px 0}
.err{color:var(--bad);font-weight:800;min-height:1.4em;margin-top:10px}

/* login */
.login{max-width:380px;margin:12vh auto 0;padding:0 16px}
.login .card{text-align:center}
.login h1{font-size:30px;font-weight:900;margin:8px 0 18px}
.field{display:block;text-align:left;margin:12px 0;font-weight:800;font-size:15px;color:var(--muted)}
.field input{display:block;width:100%;margin-top:4px;font:inherit;font-size:18px;padding:10px 14px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);outline:none}
.field input:focus{border-color:var(--accent)}
.btn.big{font-size:18px;padding:12px 20px;border-radius:14px;width:100%;margin-top:8px}

/* course and lesson lists */
.list{display:grid;gap:14px;margin-top:20px}
.row-card{display:flex;align-items:center;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;text-decoration:none;color:var(--ink);transition:.15s}
.row-card:hover{transform:translateY(-2px)}
.row-card.off{opacity:.55;pointer-events:none}
.row-num{width:52px;height:52px;border-radius:16px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:900;font-size:22px;flex:none}
.row-card.done .row-num{background:var(--good)}
.row-main{flex:1;min-width:0}
.row-main h3{font-size:21px;font-weight:900}
.row-main p{margin:2px 0 0;color:var(--muted);font-size:16px}
.row-side{text-align:right;font-weight:900;color:var(--muted);font-size:15px;white-space:nowrap}
.mini-bar{width:110px;height:8px;border-radius:99px;background:var(--line);margin-top:6px;overflow:hidden}
.mini-bar i{display:block;height:100%;background:var(--accent)}
.row-card.done .mini-bar i{background:var(--good)}

/* rule blocks */
.rule-p{margin:10px 0 0}
.note{background:var(--soft);border-radius:12px;padding:10px 14px;margin-top:12px;font-size:16px}
table.neg td:first-child{font-weight:800}

/* task extras */
.best{font-size:13px;font-weight:800;color:var(--good);background:var(--good-soft);padding:2px 9px;border-radius:999px}
.retry{margin-top:10px}
.is-near .blank.filled,.gap.near{background:#fff4d6;border-color:#e0b64a;color:#9a6b00}
.fb.near{color:#9a6b00}
.fb.near::before{content:"≈"}
.fb.bad{color:var(--bad)}
.fb.bad::before{content:"→"}
.play{width:36px;height:36px;border-radius:50%;border:0;background:var(--accent-soft);color:var(--accent);cursor:pointer;display:inline-grid;place-items:center;flex:none;padding:0}
.play:hover{background:var(--accent);color:#fff}
.play svg{width:16px;height:16px;fill:currentColor}

/* dialog */
.dialog{margin-top:14px;display:grid;gap:8px}
.line{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:14px;cursor:pointer}
.line:hover{background:var(--soft)}
.line.speaking{background:var(--accent-soft)}
.line .who{font-weight:900;min-width:76px;color:var(--class)}
.line .txt{flex:1}
.line .ru{margin-top:2px}
.dialog-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* match */
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:14px}
.match .col{display:grid;gap:8px;align-content:start}
.mbtn{font-weight:800;text-align:left;padding:10px 14px;border-radius:12px;border:2px solid var(--line);background:#fff;cursor:pointer;box-shadow:0 2px 0 var(--line)}
.mbtn.sel{border-color:var(--accent);background:var(--accent-soft)}
.mbtn.right{background:var(--good-soft);border-color:var(--good);color:var(--good);box-shadow:none;cursor:default}
.mbtn.wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);box-shadow:none;cursor:default}
.mbtn small{display:block;font-weight:700;font-size:13px}

/* text block (culture, notes) */
.textblock{margin-top:12px}
.textblock p{margin:8px 0}

/* admin */
.tbl{width:100%;border-collapse:collapse;font-size:16px;margin-top:12px}
.tbl th,.tbl td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl th{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.inline-form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-top:12px}
.inline-form .field{margin:0;flex:1;min-width:140px}
.inline-form select{font:inherit;padding:10px;border:2px solid var(--line);border-radius:12px;background:#fff}

@media (max-width:700px){
  .match{grid-template-columns:1fr 1fr;gap:8px}
  .row-side .mini-bar{width:70px}
  .line .who{min-width:60px}
  .who-am-i span{display:none}
}

/* words */
.wcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:14px;align-items:start}
.wcard{border:2px solid var(--line);border-radius:16px;padding:12px 14px;background:#fff;cursor:pointer;box-shadow:0 3px 0 var(--line);transition:.15s}
.wcard:hover{border-color:#cfc6b8}
.wcard.open{border-color:var(--accent);background:var(--accent-soft);box-shadow:none}
.wfront{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wfront b{font-size:21px}
.wfront small{width:100%;color:var(--muted);font-weight:700;font-size:13px}
.wback{display:none;margin-top:8px}
.wcard.open .wback{display:block}
.wru{font-weight:900;color:var(--accent);font-size:18px}
.wex{display:flex;gap:6px;align-items:flex-start;font-size:15px;margin-top:6px}
.wex span{display:block;color:var(--muted);font-size:14px}
.wex .play{width:26px;height:26px}
.wforms{margin-top:8px;font-size:14px;border-collapse:collapse;width:100%}
.wforms td{padding:2px 4px;border-top:1px dashed var(--line)}
.wforms td:first-child{color:var(--muted)}
.quiz-h{margin:22px 0 0;font-size:19px;font-weight:900}

/* tap-to-translate */
.gw{cursor:pointer;border-radius:5px;transition:background .15s}
.gw:hover{background:var(--accent-soft)}
/* Longhands on purpose: Safari drops the whole text-decoration shorthand when it has a thickness */
.gw.new{-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.gloss-tip{color:var(--muted);font-size:15px;font-weight:700;margin:6px 0 0}

/* units on the course page */
.unit-h{margin:22px 0 -4px;font-size:20px;font-weight:900;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.unit-h span{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:var(--accent-soft);padding:3px 10px;border-radius:999px}