/* ============ ТЕМЫ ============ */
:root{
  --hz:"Noto Serif SC","Songti SC","STSong","SimSun","Noto Serif CJK SC",serif;
  --ui:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:20px; --tabbar:74px;
  /* цвета тренировок — одинаковые во всех темах */
  --c-red:#ff5a3c; --c-blue:#3b82f6; --c-violet:#8b5cf6; --c-teal:#12b3a6; --c-amber:#f59e0b; --c-pink:#ec4899; --c-green:#22b573; --c-indigo:#6366f1;
}
:root, :root[data-theme="light"]{
  --bg:#f5f6fb; --card:#ffffff; --card2:#f0f2f8;
  --ink:#1c2233; --ink2:#5b6478; --ink3:#98a0b3; --line:#e4e7f0;
  --acc:#ff5a3c; --acc-d:#d8401f; --acc-ink:#ffffff;
  --ok:#22b573; --ok-d:#17935b; --ok-bg:#dff6ea; --bad:#f0466b; --bad-d:#cf2c52; --bad-bg:#ffe3ea;
  --shadow:0 10px 30px -18px rgba(40,50,90,.35);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0f1220; --card:#191e30; --card2:#222841;
  --ink:#eef1fa; --ink2:#a9b1c8; --ink3:#6c7590; --line:#2a3150;
  --acc:#ff6b4f; --acc-d:#c9442b; --acc-ink:#ffffff;
  --ok:#3ecf8e; --ok-d:#249a66; --ok-bg:#143326; --bad:#ff6b8a; --bad-d:#c93d5c; --bad-bg:#3b1723;
  --shadow:0 12px 30px -18px rgba(0,0,0,.9);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"]{
    --bg:#0f1220; --card:#191e30; --card2:#222841;
    --ink:#eef1fa; --ink2:#a9b1c8; --ink3:#6c7590; --line:#2a3150;
    --acc:#ff6b4f; --acc-d:#c9442b; --acc-ink:#ffffff;
    --ok:#3ecf8e; --ok-d:#249a66; --ok-bg:#143326; --bad:#ff6b8a; --bad-d:#c93d5c; --bad-bg:#3b1723;
    --shadow:0 12px 30px -18px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}
:root[data-theme="sakura"]{
  --bg:#fff2f6; --card:#ffffff; --card2:#ffe6ee;
  --ink:#3a1c2a; --ink2:#7d5266; --ink3:#b993a4; --line:#f6d5e0;
  --acc:#e8437c; --acc-d:#c0295f; --acc-ink:#ffffff;
  --ok:#22b573; --ok-d:#17935b; --ok-bg:#dff6ea; --bad:#e2483d; --bad-d:#bd3027; --bad-bg:#ffe2df;
  --shadow:0 10px 30px -18px rgba(190,60,110,.45);
  color-scheme:light;
}
:root[data-theme="jade"]{
  --bg:#eef7f1; --card:#ffffff; --card2:#e2f1e7;
  --ink:#15281f; --ink2:#4c6557; --ink3:#8aa394; --line:#d3e6da;
  --acc:#17a06b; --acc-d:#0f7c52; --acc-ink:#ffffff;
  --ok:#17a06b; --ok-d:#0f7c52; --ok-bg:#d9f2e4; --bad:#f0466b; --bad-d:#cf2c52; --bad-bg:#ffe3ea;
  --shadow:0 10px 30px -18px rgba(20,90,60,.4);
  color-scheme:light;
}
:root[data-theme="ocean"]{
  --bg:#eef4fd; --card:#ffffff; --card2:#e1ecfb;
  --ink:#14213a; --ink2:#4b5d7e; --ink3:#8b9bb8; --line:#d5e2f5;
  --acc:#2f7cf6; --acc-d:#1d5fd0; --acc-ink:#ffffff;
  --ok:#22b573; --ok-d:#17935b; --ok-bg:#dff6ea; --bad:#f0466b; --bad-d:#cf2c52; --bad-bg:#ffe3ea;
  --shadow:0 10px 30px -18px rgba(30,80,170,.4);
  color-scheme:light;
}
:root[data-theme="gold"]{
  --bg:#0d1424; --card:#161f35; --card2:#1e2a46;
  --ink:#f1ead6; --ink2:#aab4cc; --ink3:#6d7a97; --line:#27344f;
  --acc:#f0b23e; --acc-d:#b9831c; --acc-ink:#1d1403;
  --ok:#3ecf8e; --ok-d:#249a66; --ok-bg:#143326; --bad:#ff6b8a; --bad-d:#c93d5c; --bad-bg:#3b1723;
  --shadow:0 12px 30px -18px rgba(0,0,0,.9);
  color-scheme:dark;
}

/* ============ ОСНОВА ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--ui); font-size:16px; line-height:1.45; font-weight:500;
  min-height:100vh; min-height:100dvh; -webkit-tap-highlight-color:transparent; transition:background-color .25s, color .25s;
}
button,input,textarea,select{font:inherit; color:inherit}
button{cursor:pointer; touch-action:manipulation; border:0; background:none; padding:0}
input,textarea{font-size:16px}
.hz{font-family:var(--hz)}
[hidden]{display:none !important}
h2,h3,p{margin:0}

.top{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  padding:10px 16px; padding-top:max(10px, env(safe-area-inset-top));
  background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.back{width:40px; height:40px; border-radius:14px; background:var(--card); display:grid; place-items:center; flex:none; box-shadow:0 2px 0 var(--line)}
.back:active{transform:translateY(2px); box-shadow:none}
.top-title{font-weight:900; font-size:21px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em}
.top-right{display:flex; gap:8px; align-items:center}
.pillstat{display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:20px; background:var(--card); font-weight:800; font-size:14px; box-shadow:0 2px 0 var(--line)}
.pillstat.fire{color:#f97316}
.pillstat.cloud{color:var(--ok)}
.pillstat.cloud.off{color:var(--ink3)}

main{max-width:600px; margin:0 auto; padding:8px 16px calc(var(--tabbar) + 30px + env(safe-area-inset-bottom))}
body.focus main{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
body.sheet-open main{padding-bottom:calc(250px + env(safe-area-inset-bottom))}
main > *{animation:rise .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes pop{0%{transform:scale(.9)} 60%{transform:scale(1.04)} 100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:grid; grid-template-columns:repeat(4, 1fr);
  padding:8px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background:color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.tabbar button{display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 2px; font-size:11.5px; font-weight:800; color:var(--ink3)}
.tabbar .g{width:52px; height:32px; border-radius:16px; display:grid; place-items:center; transition:background .2s, color .2s, transform .2s}
.tabbar button.active{color:var(--acc)}
.tabbar button.active .g{background:color-mix(in srgb, var(--acc) 16%, transparent); transform:translateY(-1px)}
body.focus .tabbar{display:none}

/* ============ ОБЩИЕ ЭЛЕМЕНТЫ ============ */
.card{background:var(--card); border-radius:var(--r); box-shadow:var(--shadow)}
.muted{color:var(--ink2)} .small{font-size:13.5px}
.sec{font-size:13px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; color:var(--ink3); margin:22px 4px 10px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 20px; border-radius:16px;
  background:var(--acc); color:var(--acc-ink); font-weight:900; font-size:16px; box-shadow:0 4px 0 var(--acc-d);
  transition:transform .06s, box-shadow .06s; user-select:none;
}
.btn:active{transform:translateY(4px); box-shadow:0 0 0 var(--acc-d)}
.btn.wide{width:100%}
.btn.ghost{background:var(--card); color:var(--ink); box-shadow:0 4px 0 var(--line); border:2px solid var(--line)}
.btn.ghost:active{box-shadow:0 0 0 var(--line)}
.btn.ok{background:var(--ok); box-shadow:0 4px 0 var(--ok-d); color:#fff}
.btn.bad{background:var(--bad); box-shadow:0 4px 0 var(--bad-d); color:#fff}
.btn.sm{padding:8px 14px; font-size:14px; border-radius:12px; box-shadow:0 3px 0 var(--acc-d)}
.btn.sm.ghost{box-shadow:0 3px 0 var(--line)}
.btn.sm:active{transform:translateY(3px); box-shadow:none}
.btn:disabled{opacity:.5; pointer-events:none}

textarea,.inp{width:100%; border:2px solid var(--line); background:var(--card2); border-radius:14px; padding:11px 13px; outline:none; transition:border-color .15s}
textarea:focus,.inp:focus{border-color:var(--acc)}
textarea{resize:vertical; min-height:64px}

.spk{width:40px; height:40px; border-radius:13px; background:var(--card2); color:var(--ink2); display:grid; place-items:center; flex:none}
.spk:active{transform:scale(.92)}
.spk.sm{width:32px; height:32px; border-radius:10px}
.spk.sm svg{width:16px; height:16px}

.toast{
  position:fixed; left:50%; bottom:calc(var(--tabbar) + 16px + env(safe-area-inset-bottom)); transform:translate(-50%, 20px); opacity:0;
  background:var(--ink); color:var(--bg); padding:11px 16px; border-radius:14px; font-size:14px; font-weight:700; z-index:90;
  transition:opacity .2s, transform .2s; max-width:calc(100vw - 32px); text-align:center; pointer-events:none;
}
.toast.show{opacity:1; transform:translate(-50%, 0)}
body.focus .toast{bottom:calc(24px + env(safe-area-inset-bottom))}

.empty{padding:34px 22px; text-align:center}
.empty .big{font-family:var(--hz); font-size:60px; line-height:1; color:var(--acc); margin-bottom:12px; font-weight:700}
.empty h3{font-size:19px; font-weight:900; margin-bottom:6px}
.empty p{color:var(--ink2); margin-bottom:18px}

/* ============ ГЛАВНАЯ ============ */
.hero{padding:18px; display:flex; gap:16px; align-items:center; margin-bottom:14px;
  background:linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 60%, #ffb347)); color:var(--acc-ink); position:relative; overflow:hidden}
.hero::after{content:"字"; position:absolute; right:-14px; bottom:-46px; font-family:var(--hz); font-size:170px; line-height:1; opacity:.13; font-weight:700; pointer-events:none}
.ring{position:relative; width:86px; height:86px; flex:none}
.ring svg{transform:rotate(-90deg)}
.ring .n{position:absolute; inset:0; display:grid; place-items:center; font-weight:900; font-size:22px; line-height:1}
.ring .n small{display:block; font-size:11px; font-weight:800; opacity:.85; margin-top:2px}
.hero h2{font-size:20px; font-weight:900; line-height:1.2}
.hero p{font-size:14px; opacity:.92; margin-top:3px; font-weight:700}
.week{display:flex; gap:5px; margin-top:10px}
.week i{width:26px; height:26px; border-radius:9px; background:rgba(255,255,255,.22); display:grid; place-items:center; font-style:normal; font-size:10.5px; font-weight:900}
.week i.done{background:rgba(255,255,255,.95); color:var(--acc)}
.week i.today{outline:2px solid rgba(255,255,255,.9); outline-offset:1px}
.stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:14px}
.stat{padding:13px 8px; text-align:center}
.stat b{display:block; font-size:25px; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px; color:var(--ink2); font-weight:700}
.modes{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px}
@media (min-width:520px){ .modes{grid-template-columns:repeat(3, 1fr)} }
.mode{
  text-align:left; padding:14px; border-radius:var(--r); background:var(--card); box-shadow:0 4px 0 var(--line);
  display:flex; flex-direction:column; gap:10px; min-height:122px; transition:transform .06s, box-shadow .06s; border:2px solid var(--line);
}
.mode:active{transform:translateY(4px); box-shadow:none}
.mode .g{width:46px; height:46px; border-radius:15px; display:grid; place-items:center; font-family:var(--hz); font-size:25px; font-weight:700;
  background:color-mix(in srgb, var(--c) 16%, var(--card)); color:var(--c)}
.mode b{font-size:15.5px; font-weight:900; line-height:1.2}
.mode small{color:var(--ink3); font-size:12.5px; line-height:1.3; font-weight:700; margin-top:-5px}
.mode.wide{grid-column:1 / -1; flex-direction:row; align-items:center; min-height:0}
.mode.wide > div{display:flex; flex-direction:column; gap:2px}
.mode.wide small{margin-top:0}

/* ============ ТРЕНИРОВКИ ============ */
.progress{display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:14px; font-weight:800; color:var(--ink2)}
.bar{flex:1; height:12px; background:var(--line); border-radius:12px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--ok); border-radius:12px; transition:width .35s cubic-bezier(.2,.8,.2,1); min-width:12px}
.chip{display:inline-flex; align-items:center; gap:3px; padding:3px 9px; border-radius:20px; font-size:13px; font-weight:900; font-variant-numeric:tabular-nums}
.chip.ok{background:var(--ok-bg); color:var(--ok-d)} .chip.bad{background:var(--bad-bg); color:var(--bad-d)}
:root[data-theme="dark"] .chip.ok, :root[data-theme="gold"] .chip.ok{color:var(--ok)} :root[data-theme="dark"] .chip.bad, :root[data-theme="gold"] .chip.bad{color:var(--bad)}

.ask{font-size:13.5px; font-weight:900; color:var(--ink3); text-transform:uppercase; letter-spacing:.06em; margin:0 4px 8px}
.prompt{position:relative; padding:30px 16px; text-align:center; margin-bottom:16px; min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px}
.prompt .spk{position:absolute; left:12px; top:12px}
.prompt-h{font-family:var(--hz); font-size:clamp(60px, 19vw, 96px); line-height:1.1; font-weight:700}
.prompt-p{font-size:clamp(34px, 10vw, 48px); line-height:1.2; font-weight:800}
.prompt-sub{color:var(--ink3); font-size:14px; font-weight:700}
.listen-btn{width:104px; height:104px; border-radius:50%; background:var(--acc); color:var(--acc-ink); display:grid; place-items:center; box-shadow:0 6px 0 var(--acc-d); position:relative}
.listen-btn:active{transform:translateY(6px); box-shadow:none}
.listen-btn svg{width:44px; height:44px}
.listen-btn::before{content:""; position:absolute; inset:-10px; border-radius:50%; border:3px solid var(--acc); opacity:0}
.listen-btn.playing::before{animation:pulse 1s ease-out}
@keyframes pulse{from{opacity:.6; transform:scale(.85)} to{opacity:0; transform:scale(1.25)}}

.opts{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px}
.opt{
  min-height:70px; padding:10px 8px; border-radius:16px; border:2px solid var(--line); background:var(--card); box-shadow:0 4px 0 var(--line);
  display:flex; align-items:center; justify-content:center; text-align:center; word-break:break-word; font-weight:700; position:relative;
  transition:transform .06s, box-shadow .06s, background .15s, border-color .15s;
}
.opt:active{transform:translateY(4px); box-shadow:none}
.opt-h{font-family:var(--hz); font-size:32px; line-height:1.15}
.opt-p{font-size:20px; font-weight:800}
.opt-t{font-size:15px; line-height:1.3}
.opt.ok{background:var(--ok-bg); border-color:var(--ok); box-shadow:0 4px 0 var(--ok); color:var(--ok-d); animation:pop .3s}
.opt.bad{background:var(--bad-bg); border-color:var(--bad); box-shadow:0 4px 0 var(--bad); color:var(--bad-d); animation:shake .4s}
:root[data-theme="dark"] .opt.ok, :root[data-theme="gold"] .opt.ok{color:var(--ok)} :root[data-theme="dark"] .opt.bad, :root[data-theme="gold"] .opt.bad{color:var(--bad)}
.opts.locked .opt{pointer-events:none}
.opts.locked .opt:not(.ok):not(.bad){opacity:.5}

/* лист с ответом: пиньинь + перевод после каждого ответа */
.sheet{position:fixed; left:0; right:0; bottom:0; z-index:60; transform:translateY(105%); transition:transform .28s cubic-bezier(.2,.8,.2,1); pointer-events:none}
.sheet.show{transform:none; pointer-events:auto}
.sheet-in{max-width:600px; margin:0 auto; padding:16px 18px max(18px, env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; background:var(--ok-bg); border-top:3px solid var(--ok); box-shadow:0 -14px 40px -20px rgba(0,0,0,.5)}
.sheet.bad .sheet-in{background:var(--bad-bg); border-top-color:var(--bad)}
.sheet-head{font-weight:900; font-size:17px; color:var(--ok-d); display:flex; align-items:center; gap:8px; margin-bottom:8px}
.sheet.bad .sheet-head{color:var(--bad-d)}
:root[data-theme="dark"] .sheet-head, :root[data-theme="gold"] .sheet-head{color:var(--ok)} :root[data-theme="dark"] .sheet.bad .sheet-head, :root[data-theme="gold"] .sheet.bad .sheet-head{color:var(--bad)}
.sheet-word{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.sheet-word .hz{font-size:40px; line-height:1.1; font-weight:700; color:var(--ink)}
.sheet-word .hz.long{font-size:24px; line-height:1.3}
.sheet-word .info{flex:1; min-width:0}
.sheet-word .py{font-weight:900; font-size:17px; color:var(--ink)}
.sheet-word .tr{font-size:15px; color:var(--ink2); font-weight:700}
.sheet .spk{background:var(--card)}
.sheet-btns{display:flex; gap:10px}
.sheet-btns .btn{flex:1}

/* результат */
.result{padding:26px 18px; text-align:center; position:relative; overflow:hidden}
.result h2{font-size:24px; font-weight:900}
.bigring{position:relative; width:150px; height:150px; margin:14px auto}
.bigring svg{transform:rotate(-90deg)}
.bigring .n{position:absolute; inset:0; display:grid; place-items:center; font-weight:900; font-size:38px}
.score{display:flex; justify-content:center; gap:10px; margin:6px 0 18px; flex-wrap:wrap}
.score span{padding:8px 14px; border-radius:14px; font-weight:900; font-size:15px}
.score .ok{background:var(--ok-bg); color:var(--ok-d)} .score .bad{background:var(--bad-bg); color:var(--bad-d)} .score .xp{background:color-mix(in srgb, var(--c-amber) 18%, var(--card)); color:#b8750a}
.errs{margin-top:18px; text-align:left; display:flex; flex-direction:column; gap:8px}
.err{display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:14px; background:var(--card2)}
.err .hz{font-size:28px; line-height:1.1; min-width:46px; text-align:center; font-weight:700}
.err .hz.long{font-size:17px; min-width:0}
.err b{font-weight:900} .err .you{color:var(--bad); font-size:13px; font-weight:700}
.confetti{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.confetti i{position:absolute; top:-14px; width:9px; height:14px; border-radius:3px; animation:fall linear forwards}
@keyframes fall{to{transform:translateY(560px) rotate(720deg); opacity:.2}}

/* предложения */
.sent-zh{font-family:var(--hz); font-size:clamp(26px, 7.4vw, 40px); line-height:1.35; font-weight:700}
.built{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; min-height:62px; padding:12px; border:2px dashed var(--line); border-radius:16px; margin-bottom:16px}
.slot{min-width:44px; min-height:34px; border-bottom:3px solid var(--line); display:inline-flex; align-items:center; justify-content:center; padding:0 6px; font-size:16.5px; font-weight:700}
.slot.filled{border-bottom-color:var(--acc); animation:pop .2s}
.tiles{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.tile{padding:11px 16px; border-radius:14px; border:2px solid var(--line); background:var(--card); box-shadow:0 4px 0 var(--line); font-size:16.5px; font-weight:700}
.tile:active{transform:translateY(4px); box-shadow:none}
.tile.used{opacity:.22; pointer-events:none; box-shadow:none; transform:translateY(4px)}
.tile.flash{animation:shake .4s; border-color:var(--bad); background:var(--bad-bg)}

/* новые слова */
.parts-row{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:8px}
.pchip{display:flex; align-items:center; gap:7px; padding:6px 12px 6px 9px; border-radius:12px; background:var(--card2); font-size:13.5px; color:var(--ink2); font-weight:700}
.pchip .hz{font-size:22px; color:var(--ink); line-height:1; font-weight:700}
.unlock{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:6px}
.unlock button{padding:9px 12px; border-radius:14px; border:2px solid var(--line); background:var(--card); box-shadow:0 3px 0 var(--line); display:flex; flex-direction:column; align-items:center; min-width:66px}
.unlock button .hz{font-size:26px; line-height:1.1; font-weight:700} .unlock button small{font-size:11px; color:var(--ink3); font-weight:800}

/* письмо */
.wslots{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:0 0 14px}
.wslot{width:46px; height:46px; border:2px dashed var(--line); border-radius:12px; display:grid; place-items:center; font-family:var(--hz); font-size:28px; background:var(--card); font-weight:700}
.wslot.active{border:2.5px solid var(--acc)} .wslot.done{border-style:solid; border-color:var(--ok); color:var(--ok-d); background:var(--ok-bg)}
.tzg{
  width:min(300px, 80vw); aspect-ratio:1; margin:0 auto; position:relative; touch-action:none;
  background-color:var(--card); border:3px solid var(--acc); border-radius:20px; box-shadow:var(--shadow); overflow:hidden;
  --g:color-mix(in srgb, var(--acc) 26%, transparent);
  background-image:
    linear-gradient(to right, transparent calc(50% - .75px), var(--g) calc(50% - .75px), var(--g) calc(50% + .75px), transparent calc(50% + .75px)),
    linear-gradient(to bottom, transparent calc(50% - .75px), var(--g) calc(50% - .75px), var(--g) calc(50% + .75px), transparent calc(50% + .75px)),
    linear-gradient(45deg, transparent calc(50% - .5px), var(--g) calc(50% - .5px), var(--g) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(-45deg, transparent calc(50% - .5px), var(--g) calc(50% - .5px), var(--g) calc(50% + .5px), transparent calc(50% + .5px));
}
.tzg svg{display:block} .tzg.done{border-color:var(--ok)}
.wstatus{text-align:center; color:var(--ink2); font-size:14.5px; min-height:22px; margin:12px 0; font-weight:700}
.wstatus.bad{color:var(--bad)}
.wtools{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}

/* ============ СЛОВА ============ */
.tabs{display:flex; gap:7px; overflow-x:auto; padding:2px 2px 6px; margin:0 -2px 12px; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none; padding:8px 15px; border-radius:20px; background:var(--card); font-size:14px; font-weight:800; color:var(--ink2); box-shadow:0 2px 0 var(--line)}
.tabs button.active{background:var(--acc); color:var(--acc-ink); box-shadow:0 2px 0 var(--acc-d)}
.section{padding:16px; margin-bottom:14px}
.section h3{font-size:16.5px; font-weight:900; margin-bottom:4px}
.section .hint{margin-bottom:12px; color:var(--ink2); font-size:14px}
.wlist{display:flex; flex-direction:column}
.wrow{display:grid; grid-template-columns:52px 1fr 1.4fr 36px; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line)}
.wrow:last-child{border-bottom:0}
.wrow .hz{font-size:25px; text-align:center; line-height:1.1; position:relative; cursor:pointer; font-weight:700}
.wrow .hz.learned::after{content:""; position:absolute; right:2px; top:0; width:8px; height:8px; border-radius:50%; background:var(--ok)}
.wrow .inp{padding:7px 9px; font-size:14.5px; border-radius:10px; min-width:0}
.wrow .inp.missing{border-color:var(--bad)}
.del{width:34px; height:34px; border-radius:10px; background:var(--card2); color:var(--ink3); font-size:18px; line-height:1; font-weight:900}
@media (max-width:440px){ .wrow{grid-template-columns:44px 1fr 34px} .wrow .inp.t{grid-column:2} .wrow .del{grid-row:1 / span 2; grid-column:3} .wrow .hz{grid-row:1 / span 2} }
.srow{display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:0}
.srow .hz{font-size:25px; line-height:1.1; cursor:pointer; min-width:40px; text-align:center; font-weight:700}
.srow .tx{min-width:0; display:flex; flex-direction:column}
.srow .tx b{font-weight:800; font-size:14.5px} .srow .tx span{font-size:13.5px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.srow .lv{font-size:11.5px; color:var(--ink3); white-space:nowrap; font-weight:800}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:8px}
.cell{padding:10px 4px 8px; border-radius:14px; border:2px solid var(--line); background:var(--card); text-align:center; display:flex; flex-direction:column; align-items:center; gap:3px; min-height:76px; justify-content:center; transition:background .15s, border-color .15s}
.cell .hz{font-size:23px; line-height:1.15; font-weight:700} .cell small{font-size:11.5px; color:var(--ink3); line-height:1.2; font-weight:700}
.cell.on{background:var(--ok-bg); border-color:var(--ok)} .cell.on small{color:var(--ok-d)}
.hsk-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap}

/* ============ НАСТРОЙКИ ============ */
.themes{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.theme{border-radius:16px; border:3px solid var(--line); background:var(--card); overflow:hidden; text-align:left; display:flex; flex-direction:column}
.theme.on{border-color:var(--acc)}
.theme .pv{height:58px; display:flex; align-items:center; justify-content:center; gap:7px}
.theme .pv .c{width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-family:var(--hz); font-size:19px; color:#fff; font-weight:700}
.theme .pv .l{display:flex; flex-direction:column; gap:5px} .theme .pv .l i{display:block; height:6px; border-radius:4px}
.theme .nm{padding:6px 9px 8px; font-size:12.5px; font-weight:800}
.setcard{overflow:hidden; margin-bottom:4px}
.setrow{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:0}
.setrow.col{flex-direction:column; align-items:stretch; gap:10px}
.setrow .tx{flex:1; min-width:0}
.setrow .tx b{display:block; font-size:15.5px; font-weight:800} .setrow .tx small{display:block; color:var(--ink3); font-size:13px; margin-top:1px; font-weight:600}
.seg{display:flex; background:var(--card2); border-radius:12px; padding:3px; gap:2px}
.seg button{padding:7px 11px; border-radius:10px; font-weight:800; font-size:14px; color:var(--ink2)}
.seg button.on{background:var(--card); color:var(--acc); box-shadow:0 1px 3px rgba(0,0,0,.15)}
.sw{position:relative; width:46px; height:28px; flex:none}
.sw input{appearance:none; -webkit-appearance:none; width:46px; height:28px; border-radius:28px; background:var(--line); margin:0; cursor:pointer; transition:background .2s}
.sw input::after{content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw input:checked{background:var(--ok)} .sw input:checked::after{transform:translateX(18px)}
.range{width:120px; accent-color:var(--acc)}
.badge{display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:900; background:var(--ok-bg); color:var(--ok-d); vertical-align:middle}
.badge.off{background:var(--card2); color:var(--ink3)}

/* ============ ДИАЛОГ ============ */
.chat-top{display:flex; gap:8px; align-items:center; margin-bottom:10px}
.pill{padding:6px 12px; border-radius:20px; background:var(--card); font-size:13.5px; color:var(--ink2); font-weight:800; box-shadow:0 2px 0 var(--line)}
.pill.on{background:var(--ink); color:var(--bg); box-shadow:none}
.grow{flex:1}
.topics{display:flex; gap:7px; overflow-x:auto; padding:2px 2px 6px; margin:0 -2px 8px; scrollbar-width:none}
.topics::-webkit-scrollbar{display:none}
.topics button{flex:none; padding:7px 13px; border-radius:20px; background:var(--card); font-size:13.5px; font-weight:800; color:var(--ink2); box-shadow:0 2px 0 var(--line)}
.topics button.on{background:color-mix(in srgb, var(--acc) 16%, var(--card)); color:var(--acc)}
.chat{display:flex; flex-direction:column; gap:10px; min-height:calc(100vh - 350px); min-height:calc(100dvh - 350px)}
.msg{max-width:88%; padding:10px 13px; border-radius:20px; background:var(--card); box-shadow:var(--shadow); animation:rise .25s both}
.msg.bot{align-self:flex-start; border-bottom-left-radius:6px}
.msg.me{align-self:flex-end; background:var(--acc); color:var(--acc-ink); border-bottom-right-radius:6px}
.msg .who{font-size:12px; color:var(--ink3); margin-bottom:2px; font-weight:800}
.msg .line{display:flex; align-items:flex-start; gap:8px}
.msg .zh{font-family:var(--hz); font-size:21px; line-height:1.5; flex:1; font-weight:500}
.msg .w{cursor:pointer; border-radius:5px}
.msg .w.unk{border-bottom:2px dotted var(--bad)}
.msg.me .w.unk{border-bottom-color:rgba(255,255,255,.8)}
.msg .py{font-size:13.5px; color:var(--ink3); margin-top:2px; font-weight:700}
.msg .tr{font-size:14px; color:var(--ink2); margin-top:6px; padding-top:6px; border-top:1px dashed var(--line); font-weight:600}
.msg.me .py,.msg.me .tr{color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.3)}
.msg.me .spk{background:rgba(255,255,255,.2); color:#fff}
.msg.note{align-self:flex-end; max-width:88%; background:color-mix(in srgb, var(--c-amber) 16%, var(--card)); font-size:14px; font-weight:700; box-shadow:none; border-radius:14px}
.msg.sys{align-self:center; background:var(--card2); color:var(--ink2); font-size:13.5px; font-weight:700; box-shadow:none; text-align:center; border-radius:14px}
.typing{align-self:flex-start; padding:12px 16px; border-radius:20px; border-bottom-left-radius:6px; background:var(--card); display:flex; gap:5px}
.typing i{width:8px; height:8px; border-radius:50%; background:var(--ink3); animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3; transform:none} 30%{opacity:1; transform:translateY(-4px)}}
.chat-bottom{position:sticky; bottom:calc(var(--tabbar) + env(safe-area-inset-bottom)); z-index:5; margin:14px -16px 0; padding:10px 16px 12px; background:var(--bg); border-top:1px solid var(--line)}
.hints{display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none}
.hints::-webkit-scrollbar{display:none}
.hint{flex:none; max-width:78vw; padding:7px 13px; border-radius:16px; border:2px solid var(--line); background:var(--card); text-align:left; display:flex; flex-direction:column}
.hint .hz{font-size:17px; line-height:1.3} .hint small{font-size:12px; color:var(--ink3); font-weight:700}
.inrow{display:flex; gap:8px}
.inrow .inp{flex:1; font-family:var(--hz); font-size:17px}
.steps{display:flex; flex-direction:column; gap:10px; text-align:left; margin:14px 0 18px}
.step{display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:16px; background:var(--card2)}
.step .n{width:28px; height:28px; border-radius:50%; background:var(--acc); color:var(--acc-ink); display:grid; place-items:center; font-weight:900; flex:none}
.step.done .n{background:var(--ok)}
.step b{font-weight:900; display:block} .step small{color:var(--ink2); font-weight:600; font-size:13.5px}