/* ===== Тема ============================================================== */
:root{
  --bg:#f6f7fb; --panel:#ffffff; --panel-2:#f1f2f7; --line:#e3e5ee;
  --text:#14161c; --muted:#6b7080; --accent:#4f46e5; --accent-soft:#eceafe;
  --ok:#16a34a; --ok-soft:#e6f6ec; --bad:#dc2626; --bad-soft:#fdecec;
  --warn:#b45309; --warn-soft:#fdf3e3;
  --shadow:0 1px 2px rgba(16,18,28,.06), 0 8px 24px rgba(16,18,28,.07);
  --radius:16px;
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1116; --panel:#171a22; --panel-2:#1e222c; --line:#2a2f3b;
    --text:#e8eaf0; --muted:#9298a8; --accent:#8b83ff; --accent-soft:#25243c;
    --ok:#4ade80; --ok-soft:#14301f; --bad:#f87171; --bad-soft:#331a1a;
    --warn:#fbbf24; --warn-soft:#332a14;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1116; --panel:#171a22; --panel-2:#1e222c; --line:#2a2f3b;
  --text:#e8eaf0; --muted:#9298a8; --accent:#8b83ff; --accent-soft:#25243c;
  --ok:#4ade80; --ok-soft:#14301f; --bad:#f87171; --bad-soft:#331a1a;
  --warn:#fbbf24; --warn-soft:#332a14;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  color-scheme:dark;
}

/* ===== База ============================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:40px;
}
button{font:inherit; color:inherit; cursor:pointer}
h1,h2,h3{margin:0 0 .4em; line-height:1.2; letter-spacing:-.01em}
h1{font-size:28px} h2{font-size:21px} h3{font-size:17px}
p{margin:0 0 .8em}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em;
  background:var(--panel-2); padding:.12em .4em; border-radius:6px}
.muted{color:var(--muted)}
.small{font-size:13.5px}
main{max-width:860px; margin:0 auto; padding:0 16px}

/* ===== Верхняя панель ==================================================== */
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  justify-content:space-between; padding:10px 16px; margin-bottom:8px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
}
.brand{background:none; border:0; font-weight:650; font-size:15px; letter-spacing:-.01em; padding:6px 8px; border-radius:10px}
.brand:hover{background:var(--panel-2)}
.topbar-right{display:flex; align-items:center; gap:8px}
.mini-progress{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.icon-btn{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  width:36px; height:36px; display:grid; place-items:center; font-size:15px; flex:none;
}
.icon-btn:hover{background:var(--panel-2)}

/* ===== Экраны ============================================================ */
.screen{display:none; animation:fade .18s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

/* ===== Главный =========================================================== */
.hero{display:flex; gap:20px; align-items:center; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); margin-bottom:18px}
.hero-text{min-width:0}
.ring{width:96px; height:96px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:19px; font-variant-numeric:tabular-nums}
.ring span{background:var(--panel); width:76px; height:76px; border-radius:50%; display:grid; place-items:center}
.stat-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--panel-2);
  border:1px solid var(--line); border-radius:999px; padding:4px 11px; font-size:13.5px; font-weight:500}
.chip b{font-variant-numeric:tabular-nums}
.chip.ok{background:var(--ok-soft); border-color:transparent; color:var(--ok)}
.chip.warn{background:var(--warn-soft); border-color:transparent; color:var(--warn)}

.field{margin-bottom:18px}
.field-label{display:block; font-size:13px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px}
.segmented{display:flex; gap:6px; flex-wrap:wrap}
.segmented.scroll-x{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; margin-bottom:8px; -webkit-overflow-scrolling:touch}
.segmented button{
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; font-size:14px; white-space:nowrap;
}
.segmented button:hover{background:var(--panel-2)}
.segmented button.active{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:550}

.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.tile{
  text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; display:grid; gap:3px; box-shadow:var(--shadow); transition:transform .12s, border-color .12s;
}
.tile:hover{transform:translateY(-2px); border-color:var(--accent)}
.tile.primary{border-color:var(--accent); background:linear-gradient(160deg,var(--accent-soft),var(--panel) 70%)}
.tile-ico{font-size:22px}
.tile-name{font-weight:650; font-size:16.5px}
.tile-desc{font-size:13.5px; color:var(--muted); line-height:1.35}
.home-foot{display:flex; gap:16px; justify-content:center; margin-top:22px}
.link-btn{background:none; border:0; color:var(--muted); font-size:14px; padding:6px 8px; border-radius:8px}
.link-btn:hover{color:var(--accent); background:var(--panel-2)}

/* ===== Модули ============================================================ */
.modules{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
.mod{
  text-align:left; background:var(--panel); border:1.5px solid var(--line); border-radius:12px;
  padding:12px 14px; display:grid; gap:4px; transition:border-color .12s, background .12s;
}
.mod:hover{border-color:var(--accent)}
.mod.active{border-color:var(--accent); background:var(--accent-soft)}
.mod-name{font-weight:600; font-size:15px; line-height:1.25}
.mod-stat{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.mod-bar{display:block; height:5px; background:var(--panel-2); border-radius:999px; overflow:hidden; margin-top:4px}
.mod-bar span{display:block; height:100%; background:var(--accent); border-radius:999px; transition:width .3s}
.mod.active .mod-bar{background:color-mix(in srgb, var(--accent) 22%, transparent)}
.text-input{
  width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; font:inherit; font-size:15px; color:var(--text);
}
.text-input:focus{outline:none; border-color:var(--accent)}

/* ===== Полоса режима ===================================================== */
.bar{display:flex; align-items:center; gap:10px; margin-bottom:18px}
.bar-title{margin:0; font-size:19px}
.bar input[type="search"]{
  flex:1; min-width:0; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:9px 12px; font:inherit; font-size:15px; color:var(--text);
}
.progress{flex:1; height:8px; background:var(--panel-2); border-radius:999px; overflow:hidden; border:1px solid var(--line)}
.progress-fill{height:100%; width:0; background:var(--accent); border-radius:999px; transition:width .3s ease}
.bar-label{font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.bar-label.big{font-size:19px; font-weight:650; color:var(--text); flex:1}

/* ===== Вопрос / карточка ================================================= */
.pane{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow)}
.q-kind{font-size:12.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px}
.q-word{font-size:34px; font-weight:680; letter-spacing:-.02em; line-height:1.15; word-break:break-word}
.q-tr{font-size:18px; color:var(--accent); margin-top:4px}
.q-note{font-size:13.5px; color:var(--muted); margin-top:8px}
.q-extra{font-size:14px; color:var(--muted); margin-top:10px; display:flex; gap:14px; flex-wrap:wrap}
.q-extra b{color:var(--text); font-weight:600}

.options{display:grid; gap:10px; margin-top:20px}
.option{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  background:var(--panel); border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; font-size:17px;
  transition:border-color .12s, background .12s;
}
.option:hover:not(:disabled){border-color:var(--accent); background:var(--accent-soft)}
.option:disabled{cursor:default}
.option .num{width:22px; height:22px; flex:none; border-radius:6px; background:var(--panel-2);
  display:grid; place-items:center; font-size:12px; color:var(--muted); font-weight:600}
.option.correct{border-color:var(--ok); background:var(--ok-soft)}
.option.wrong{border-color:var(--bad); background:var(--bad-soft)}
.option.correct .num{background:var(--ok); color:#fff}
.option.wrong .num{background:var(--bad); color:#fff}

.answer-row{display:flex; gap:10px; margin-top:20px}
.answer-row input{
  flex:1; min-width:0; background:var(--panel); border:1.5px solid var(--line); border-radius:12px;
  padding:14px 16px; font:inherit; font-size:20px; color:var(--text);
}
.answer-row input:focus{outline:none; border-color:var(--accent)}
.answer-row input.correct{border-color:var(--ok); background:var(--ok-soft)}
.answer-row input.wrong{border-color:var(--bad); background:var(--bad-soft)}
.answer-row input.near{border-color:var(--warn); background:var(--warn-soft)}

.uml-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px}
.uml-row .uml{
  min-width:38px; height:38px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:9px; font-size:17px; line-height:1; padding:0 8px;
}
.uml-row .uml:hover{border-color:var(--accent); background:var(--accent-soft)}
.uml-hint{font-size:12.5px; color:var(--muted); margin-left:4px}

.btn{background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:12px;
  padding:13px 20px; font-size:15.5px; font-weight:550}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--panel); color:var(--text); border-color:var(--line)}
.btn.ghost:hover{background:var(--panel-2); filter:none}
.btn.wide{width:100%}
.btn:disabled{opacity:.5; cursor:default; filter:none}
.row{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.row.end{justify-content:flex-end}

.feedback{margin-top:16px; border-radius:12px; padding:13px 15px; font-size:15px; display:none}
.feedback.show{display:block}
.feedback.ok{background:var(--ok-soft); color:var(--ok)}
.feedback.bad{background:var(--bad-soft); color:var(--bad)}
.feedback.near{background:var(--warn-soft); color:var(--warn)}
.feedback b{font-weight:650}

/* ===== Карточки ========================================================== */
.flip{perspective:1400px; margin-bottom:16px}
.flip-inner{
  position:relative; width:100%; min-height:260px; cursor:pointer;
  transition:transform .5s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d;
}
.flip.flipped .flip-inner{transform:rotateX(180deg)}
.flip-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:28px; display:grid; place-content:center; text-align:center; gap:6px;
}
.flip-face.back{transform:rotateX(180deg)}
.flip-hint{position:absolute; bottom:12px; left:0; right:0; text-align:center;
  font-size:12.5px; color:var(--muted)}
.card-word{font-size:40px; font-weight:680; letter-spacing:-.02em; word-break:break-word}
.card-tr{font-size:20px; color:var(--accent)}
.card-ru{font-size:30px; font-weight:600}
.card-meta{font-size:14px; color:var(--muted); margin-top:6px}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.dots{display:flex; gap:4px; flex-wrap:wrap; justify-content:center; margin-top:16px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--line)}
.cards-stats{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  justify-content:center; margin-top:14px; font-size:13.5px}
.dot.known{background:var(--ok)} .dot.unknown{background:var(--bad)} .dot.now{background:var(--accent); transform:scale(1.5)}

/* ===== Пары ============================================================== */
.match-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media (max-width:560px){ .match-grid{grid-template-columns:repeat(3,1fr)} }
.match-tile{
  min-height:88px; background:var(--panel); border:1.5px solid var(--line); border-radius:12px;
  padding:10px; font-size:15px; display:grid; place-items:center; text-align:center; line-height:1.25;
  transition:transform .12s, opacity .25s;
}
.match-tile:hover{border-color:var(--accent)}
.match-tile.sel{border-color:var(--accent); background:var(--accent-soft)}
.match-tile.hit{border-color:var(--ok); background:var(--ok-soft); animation:pop .25s}
.match-tile.miss{border-color:var(--bad); background:var(--bad-soft); animation:shake .3s}
.match-tile.done{opacity:0; pointer-events:none}
.match-tile .t{font-size:12.5px; color:var(--accent); display:block; margin-top:3px}
@keyframes pop{50%{transform:scale(1.06)}}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ===== Спряжение ========================================================= */
.bar.wrap{flex-wrap:wrap}
.btn.small{padding:8px 13px; font-size:13.5px; border-radius:10px}
.tile:disabled{opacity:.45; cursor:default}
.tile:disabled:hover{transform:none; border-color:var(--line)}

.conj-block{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:6px 16px 10px; margin-bottom:14px; box-shadow:var(--shadow)}
.conj-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 0 10px; border-bottom:1px solid var(--line); font-size:17px}
.conj-head .muted{font-size:14px}
.conj-done{
  margin-left:auto; font-size:12.5px; font-weight:650; color:var(--muted);
  background:var(--panel-2); border:1px solid var(--line); border-radius:999px;
  padding:2px 9px; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.conj-done.all{color:var(--ok); background:var(--ok-soft); border-color:transparent}
.conj-done + .conj-flag{margin-left:0}
.conj-flag{margin-left:auto; font-size:12.5px; font-weight:600; color:var(--warn);
  background:var(--warn-soft); border-radius:999px; padding:3px 10px; white-space:nowrap}

.crow{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line)}
.crow:last-child{border-bottom:0}
.c-n{width:24px; flex:none; text-align:right; color:var(--muted); font-size:13.5px;
  font-variant-numeric:tabular-nums}
.c-main{flex:1; min-width:0}
.c-sent{display:flex; align-items:center; flex-wrap:wrap; gap:7px;
  font-size:17px; line-height:1.45}
.c-sub{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:4px}
.c-ru{font-size:13.5px; color:var(--muted)}
.c-rule{font-size:12.5px}
.c-rule[open]{flex-basis:100%}
.c-rule summary{
  cursor:pointer; color:var(--accent); list-style:none; display:inline-flex; align-items:center;
  gap:4px; padding:1px 9px; border:1px solid var(--line); border-radius:999px; user-select:none;
}
.c-rule summary::-webkit-details-marker{display:none}
.c-rule summary::before{content:"?"; font-weight:700; font-size:11px; opacity:.75}
.c-rule summary:hover{border-color:var(--accent); background:var(--accent-soft)}
.c-rule[open] summary{background:var(--accent-soft); border-color:var(--accent)}
.c-rule-body{
  margin-top:7px; background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:9px; padding:9px 12px; font-size:13px; line-height:1.55; color:var(--text); max-width:640px;
}
.c-inf{color:var(--muted); font-size:14px}
.c-in{
  width:9.5em; background:var(--panel-2); border:1.5px solid var(--line); border-radius:9px;
  padding:6px 10px; font:inherit; font-size:16px; color:var(--text);
}
.c-in:focus{outline:none; border-color:var(--accent); background:var(--panel)}
.c-in:disabled{opacity:1}
.c-note{flex:none; font-size:13.5px; min-width:5.5em; text-align:right}
.bad-text{color:var(--bad)} .warn-text{color:var(--warn)}
.crow.ok .c-in{border-color:var(--ok); background:var(--ok-soft)}
.crow.ok .c-note{color:var(--ok); font-size:17px}
.crow.bad .c-in{border-color:var(--bad); background:var(--bad-soft)}
.c-note small{font-size:11px; opacity:.85}
.crow.shown .c-in{border-color:var(--line); background:var(--panel-2); color:var(--muted)}
@media (max-width:560px){
  .conj-block{padding:6px 12px 10px}
  .crow{gap:7px}
  .c-sent{font-size:15.5px; line-height:1.4; gap:6px}
  .c-ru{font-size:12.5px}
  .c-in{width:6.4em; font-size:15px; padding:5px 8px}
  .c-inf{display:none}          /* инфинитив уже есть в шапке блока */
  .c-note{min-width:3.4em; font-size:12.5px}
  .conj-flag{margin-left:0}
}

.conj-tabs{margin-bottom:14px}
.conj-note-top{margin:-4px 0 14px}
.trow{display:flex; align-items:flex-start; gap:10px; padding:11px 0; border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.trow .c-n{padding-top:3px}
.t-main{flex:1; min-width:0}
.t-ru{font-size:16px; margin-bottom:6px}
.t-in{
  width:100%; background:var(--panel-2); border:1.5px solid var(--line); border-radius:10px;
  padding:9px 12px; font:inherit; font-size:16.5px; color:var(--text); lang:de;
}
.t-in:focus{outline:none; border-color:var(--accent); background:var(--panel)}
.t-in:disabled{opacity:1}
.t-note{font-size:13.5px; margin-top:5px; min-height:1em}
.t-note:empty{display:none}
.t-answer{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-bottom:7px; margin-bottom:7px; border-bottom:1px solid var(--line); font-size:15px}
.trow .c-sub{margin-top:6px}
.ok-text{color:var(--ok)}
.trow.ok .t-in{border-color:var(--ok); background:var(--ok-soft)}
.trow.bad .t-in{border-color:var(--bad); background:var(--bad-soft)}
/* Подпись времени рядом с русским предложением: «сделал» — это и Past Simple,
   и Present Perfect, поэтому время задаётся явно. */
.t-tense{
  display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px;
  font-size:12px; font-weight:600; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-soft);
}
.trow.shown .t-in{border-color:var(--line); background:var(--panel-2); color:var(--muted)}
@media (max-width:560px){ .t-ru{font-size:15px} .t-in{font-size:15.5px} }

/* ===== Список слов ======================================================= */
.wlist{display:grid; gap:8px}
.wrow{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:11px 14px}
.wrow .word{font-weight:620; font-size:16.5px}
.wrow .tr{color:var(--accent); font-size:14px}
.wrow .ru{font-size:14.5px; color:var(--muted)}
.wrow .pl{font-size:13px; color:var(--muted); margin-top:2px}
.wrow .acts{display:flex; gap:4px; align-items:center}
.stage-dot{width:9px; height:9px; border-radius:50%; background:var(--line); flex:none}
.stage-dot[data-s="1"],.stage-dot[data-s="2"]{background:var(--warn)}
.stage-dot[data-s="3"]{background:var(--ok)}
.star{background:none; border:0; font-size:16px; padding:4px; border-radius:8px; opacity:.35}
.star.on{opacity:1}
.star:hover{background:var(--panel-2); opacity:.8}
.star.del{font-size:14px; color:var(--bad)}
.speak{background:none; border:0; font-size:15px; padding:4px 6px; border-radius:8px; opacity:.55}
.speak:hover{opacity:1; background:var(--panel-2)}

/* ===== Чтение ============================================================ */
.txt-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.txt-card{
  text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; display:grid; gap:3px; box-shadow:var(--shadow); transition:transform .12s, border-color .12s;
}
.txt-card:hover{transform:translateY(-2px); border-color:var(--accent)}
.txt-card.done{border-color:color-mix(in srgb, var(--ok) 55%, var(--line))}
.txt-head{display:flex; align-items:center; gap:8px; justify-content:space-between}
.txt-title{font-weight:650; font-size:16.5px}
.txt-level{font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--accent);
  background:var(--accent-soft); border-radius:999px; padding:2px 8px; flex:none}
.txt-ru{font-size:14px; color:var(--muted)}
.txt-meta{font-size:12.5px; color:var(--muted); margin-top:2px}

.reader{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px 18px; box-shadow:var(--shadow)}
.reader-title{margin:0; font-size:25px}
.reader-ru{color:var(--muted); margin:2px 0 18px; font-size:15px}
.reader-text{font-size:19px; line-height:2.15; margin:0 0 16px}
.reader-hint{font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:12px; margin:0}
.sent{transition:background .12s}
.w{border-radius:5px; padding:1px 1px; cursor:pointer; transition:background .1s, box-shadow .1s}
.w:hover{background:var(--accent-soft); box-shadow:0 1px 0 var(--accent)}
.se{
  color:var(--accent); font-weight:700; cursor:help; padding:1px 3px 1px 1px; border-radius:5px;
  background:var(--accent-soft);
}
.se:hover{background:var(--accent); color:#fff}

.tip{
  position:absolute; z-index:120; max-width:330px;
  background:var(--panel); color:var(--text); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:11px; padding:10px 13px; font-size:14px; line-height:1.5; box-shadow:0 8px 28px rgba(0,0,0,.28);
}
.tip[hidden]{display:none}
.tip b{font-weight:650}
.tip-sent{display:block; margin-top:4px}
.tip-hint{display:block; margin-top:6px; font-size:11.5px; color:var(--muted)}

@media (max-width:560px){
  .reader{padding:18px 16px 14px}
  .reader-text{font-size:17.5px; line-height:2.1}
  .reader-title{font-size:21px}
  .tip{max-width:min(330px, calc(100vw - 24px))}
}

/* ===== Итоги ============================================================= */
.result{text-align:center; padding:8px 0 4px}
.result .big{font-size:52px; font-weight:700; letter-spacing:-.03em}
.result .sub{color:var(--muted); margin-bottom:6px}
.mistakes{margin-top:18px; display:grid; gap:8px; text-align:left}
.mistake{background:var(--bad-soft); border-radius:12px; padding:11px 14px; font-size:14.5px}
.mistake b{font-size:16px}
.mistake .you{color:var(--bad)}

/* ===== Диалог и «свои» модули ============================================ */
.modal{position:fixed; inset:0; z-index:200; background:rgba(8,9,14,.55);
  display:grid; place-items:center; padding:18px; backdrop-filter:blur(3px)}
.modal[hidden]{display:none}
.modal-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; width:min(520px,100%); max-height:88vh; overflow:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.modal-title{margin:0 0 6px; font-size:19px}
.modal-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
.modal-row select{width:100%}
.modal-card .field-label{margin-bottom:5px}
.modal-card pre.hint{max-height:38vh; overflow:auto}

.tip-actions{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.tip-btn{
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  padding:4px 9px; font-size:12.5px; color:var(--text);
}
.tip-btn:hover{border-color:var(--accent); background:var(--accent-soft)}
.tip-btn.add{color:var(--accent); font-weight:600}

.mod-own, .badge{
  font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--muted); background:var(--panel-2); border:1px solid var(--line);
  border-radius:999px; padding:1px 7px; vertical-align:middle; white-space:nowrap;
}
.acts.wrap{flex-wrap:wrap; justify-content:flex-end}

/* ===== Прочее ============================================================ */
textarea{width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  padding:12px; font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--text); resize:vertical}
pre.hint{background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; overflow-x:auto; font-size:13.5px; margin:0 0 12px}
.set-row{display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:0}
.set-row .t{font-weight:550}
.set-row .d{font-size:13.5px; color:var(--muted)}
select{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 10px;
  font:inherit; font-size:14px; color:var(--text)}
input[type="range"]{width:150px; accent-color:var(--accent)}
.switch{position:relative; width:46px; height:27px; flex:none}
.switch input{opacity:0; width:0; height:0}
.switch span{position:absolute; inset:0; background:var(--line); border-radius:999px; transition:.2s}
.switch span::before{content:""; position:absolute; width:21px; height:21px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + span{background:var(--accent)}
.switch input:checked + span::before{transform:translateX(19px)}
.danger{color:var(--bad); border-color:var(--bad)!important}

.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); opacity:0; pointer-events:none;
  background:var(--text); color:var(--bg); padding:11px 18px; border-radius:999px; font-size:14.5px;
  transition:.22s; z-index:100; max-width:90vw; text-align:center;
}
.toast.show{opacity:1; transform:translate(-50%,0)}

.empty{text-align:center; color:var(--muted); padding:48px 20px}
.empty .ico{font-size:40px; display:block; margin-bottom:10px}

@media (max-width:560px){
  main{padding:0 14px}
  .hero{flex-direction:column; text-align:center; gap:14px}
  .stat-row{justify-content:center}
  .q-word{font-size:28px}
  .card-word{font-size:32px} .card-ru{font-size:25px}
  .tiles{grid-template-columns:1fr}
  h1{font-size:24px}
}

/* ===== Предпросмотр на экране «Добавить слова» =========================== */
/* Транскрипция у новых слов считается автоматически, поэтому строки видно
   до добавления: подсвеченное поле — черновик, его правят прямо здесь. */
#addPreview:not(:empty){margin-top:14px}
.ap-head{font-size:13px; color:var(--muted); margin-bottom:6px}
.ap-row{
  display:grid; grid-template-columns:minmax(90px,1.1fr) minmax(90px,1.1fr) 1.4fr auto;
  gap:8px; align-items:center; padding:5px 0; border-bottom:1px solid var(--line);
}
.ap-en{font-weight:620}
.ap-pl{display:block; font-weight:400; font-size:12px; color:var(--muted)}
.ap-tr{
  width:100%; padding:4px 7px; border:1px solid var(--line); border-radius:7px;
  background:var(--bg); color:var(--accent); font:inherit; font-size:14px;
}
.ap-tr:focus{outline:none; border-color:var(--accent)}
.ap-tr.draft{border-color:var(--warn); background:var(--warn-soft)}
.ap-ru{font-size:14px}
.ap-pos{font-size:12px; color:var(--muted)}
.ap-note{margin:8px 0 0}
.ap-bad{margin:8px 0 0; color:var(--bad)}
@media (max-width:560px){
  .ap-row{grid-template-columns:1fr 1fr; row-gap:4px}
  .ap-ru{grid-column:1 / -1}
  .ap-pos{grid-column:1 / -1}
}