:root{
  --bg:#12100e; --bg2:#1a1714; --line:#2b2621; --ink:#efe7dc; --dim:#a1948a;
  --accent:#e0a45e; --accent2:#7fb3a3; --danger:#d4736b; --fs:20px;
  --head:rgba(18,16,14,.92); --layer:#39332c; --layer-line:#4b433a;
}
/* Светлая тема — не белая: чистый #fff на просвет режет глаза при долгом
   чтении. Тёплый молочный тон спокойнее и привычен по бумажным книгам. */
:root[data-theme="light"]{
  --bg:#f4efe6; --bg2:#fffdf8; --line:#e0d7c7; --ink:#2a2521; --dim:#6b6157;
  --accent:#8f5619; --accent2:#33695a; --danger:#a3423c;
  --head:rgba(247,243,236,.93); --layer:#fffdf9; --layer-line:#e3dbcd;
}
@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    --bg:#f4efe6; --bg2:#fffdf8; --line:#e0d7c7; --ink:#2a2521; --dim:#6b6157;
    --accent:#8f5619; --accent2:#33695a; --danger:#a3423c;
    --head:rgba(247,243,236,.93); --layer:#fffdf9; --layer-line:#e3dbcd;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  overscroll-behavior-y:none}
body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}

header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;
  padding:calc(8px + env(safe-area-inset-top)) 14px 8px;background:var(--head);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
#top-title{flex:1;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ghost{background:none;border:none;color:var(--dim);font-size:19px;padding:4px 8px;cursor:pointer}

.view{display:none;padding:0 16px}
.view.active{display:block}

.hero{padding:22px 0 14px}
.hero-sub{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.hero h1{margin:4px 0 0;font-size:31px;font-weight:600;letter-spacing:-.01em}

.list{display:flex;flex-direction:column;gap:10px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer}
.card:active{background:#221d19}
.card .t1{font-size:17px;font-weight:600}
.card .t2{font-size:14px;color:var(--dim);margin-top:2px}
.card .meta{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.tag{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:20px;padding:2px 9px}
.tag.on{color:var(--accent);border-color:#4a3a26}
.bar{height:3px;background:var(--line);border-radius:2px;margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}

.stats-row{display:flex;gap:10px;margin:18px 0}
.stat{flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.stat b{display:block;font-size:22px;font-weight:600}
.stat span{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}

/* читалка */
.page{font-size:var(--fs);line-height:1.72;padding:14px 0 6px;letter-spacing:.002em;
  overflow-wrap:break-word;hyphens:auto}
.para{margin:0 0 1.15em}
.para .ru{display:block;font-size:14px;line-height:1.5;color:var(--dim);margin-top:.35em;
  border-left:2px solid var(--line);padding-left:10px}
.w{cursor:pointer;border-radius:3px;padding:0 .5px}
.w:active{background:#3a3128}
.w.saved{border-bottom:1px dashed #6d5a3f}
.w.active{background:var(--accent);color:#1a1410}
.pager{display:flex;align-items:center;gap:10px;padding:8px 14px;
  position:fixed;left:0;right:0;bottom:calc(52px + env(safe-area-inset-bottom));z-index:25;
  background:var(--head);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.pager-btn{flex:1;background:var(--bg2);border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:13px;font-size:14px;cursor:pointer}
.pager-btn:disabled{opacity:.35}
.pageno{font-size:12px;color:var(--dim);min-width:56px;text-align:center}

/* шторка */
.sheet-wrap{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end}
/* display:flex у класса перебивал атрибут hidden — обе шторки висели поверх экрана всегда */
.sheet-wrap[hidden]{display:none}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.sheet{position:relative;width:100%;background:var(--bg2);border-top:1px solid var(--line);
  border-radius:20px 20px 0 0;padding:8px 18px calc(22px + env(safe-area-inset-bottom));
  max-height:82vh;overflow:auto;animation:up .22s ease}
@keyframes up{from{transform:translateY(28px);opacity:.4}to{transform:none;opacity:1}}
.sheet-grip{width:38px;height:4px;background:#3a332c;border-radius:3px;margin:0 auto 14px}
.sh-word{font-size:27px;font-weight:600;letter-spacing:-.01em}
.sh-lemma{font-size:13px;color:var(--dim);margin-top:3px}
.sh-tr{font-size:20px;color:var(--accent);margin:12px 0 4px}
.sh-note{font-size:13px;color:var(--dim);line-height:1.45}
.sh-sent{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:15px;line-height:1.6}
.sh-sent mark{background:#4a3a26;color:var(--accent);border-radius:3px;padding:0 2px}
.sh-sent .ru{display:block;color:var(--dim);font-size:14px;margin-top:7px}
.sh-actions{display:flex;gap:9px;margin-top:16px}
.btn{flex:1;border-radius:12px;padding:13px;font-size:14px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);cursor:pointer}
.btn.primary{background:var(--accent);color:#1a1410;border-color:var(--accent);font-weight:600}
.btn.ok{background:var(--accent2);border-color:var(--accent2);color:#10201c;font-weight:600}
.btn:disabled{opacity:.45}
.loading{color:var(--dim);font-size:14px;padding:8px 0}

.set-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;
  border-bottom:1px solid var(--line);font-size:15px}
.seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{background:none;border:none;color:var(--dim);padding:8px 13px;font-size:13px;cursor:pointer}
.seg button.on{background:var(--accent);color:#1a1410;font-weight:600}
#fontsize button[data-fs="17"]{font-size:12px}#fontsize button[data-fs="20"]{font-size:15px}
#fontsize button[data-fs="23"]{font-size:18px}

.search{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;color:var(--ink);font-size:15px;margin-bottom:12px}
.vrow{background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:12px 14px}
.vrow .vw{font-size:17px;font-weight:600}
.vrow .vt{font-size:15px;color:var(--accent);margin-top:2px}
.vrow .vs{font-size:12.5px;color:var(--dim);margin-top:7px;line-height:1.45}
.vrow .vs mark{background:#3a332c;color:var(--ink);padding:0 2px;border-radius:2px}
.vrow .vdel{float:right;color:var(--dim);background:none;border:none;font-size:17px;cursor:pointer}

/* карточки */
.cards-head{display:flex;gap:9px;justify-content:space-between;padding:16px 0 6px;flex-wrap:wrap}
.flash{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:34px 20px;
  min-height:236px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;cursor:pointer;margin-top:14px}
.flash .big{font-size:31px;font-weight:600;letter-spacing:-.01em}
.flash .ans{font-size:25px;color:var(--accent);margin-top:16px}
.flash .ctx{font-size:13px;color:var(--dim);margin-top:16px;line-height:1.5}
.flash .hint{font-size:12px;color:#6b6058;margin-top:20px;letter-spacing:.06em;text-transform:uppercase}
.grades{display:flex;gap:9px;margin-top:14px}
.grade{flex:1;border-radius:12px;padding:14px 6px;font-size:13px;border:1px solid var(--line);
  background:var(--bg2);color:var(--ink);cursor:pointer}
.grade.g0{border-color:#4a2b28;color:var(--danger)}
.grade.g2{border-color:#2b4a42;color:var(--accent2)}
.empty{text-align:center;color:var(--dim);padding:48px 20px;font-size:15px;line-height:1.6}

nav#tabs{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;
  background:var(--head);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
nav#tabs button{flex:1;background:none;border:none;color:var(--dim);font-size:10.5px;
  padding:9px 0 8px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;position:relative}
nav#tabs button span{font-size:19px;line-height:1}
nav#tabs button.on{color:var(--accent)}
#due-badge{position:absolute;top:5px;right:50%;margin-right:-24px;background:var(--danger);
  color:#fff;font-size:9px;font-style:normal;border-radius:9px;padding:1px 5px;min-width:16px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:80px;z-index:90;
  background:var(--layer);border:1px solid var(--layer-line);border-radius:11px;padding:10px 16px;font-size:14px;
  animation:up .2s ease}

/* Кнопки листания закреплены над нижней панелью — раньше они уезжали вниз
   и до них приходилось прокручивать страницу. */
#view-reader.active{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
#top-pageno{font-size:12px;color:var(--dim);letter-spacing:.04em;margin-left:8px}

/* ---- разделы приложения ---- */
#menu-wrap{align-items:stretch;justify-content:flex-start}
/* Панель была того же тона, что и фон (контраст 1,06) — на затемнённой
   странице она читалась не как слой, а как «всё потемнело». В тёмной теме
   всплывающий слой обязан быть светлее подложки и отбрасывать тень. */
#menu{width:82%;max-width:340px;background:var(--layer);border-right:1px solid var(--layer-line);
  box-shadow:14px 0 40px rgba(0,0,0,.55);
  padding:calc(20px + env(safe-area-inset-top)) 0 20px;display:flex;flex-direction:column;gap:2px;
  animation:slidein .22s cubic-bezier(.22,.61,.36,1)}
@keyframes slidein{from{transform:translateX(-100%)}to{transform:none}}
.menu-head{padding:8px 20px 18px;font-size:19px;font-weight:650;letter-spacing:.14em}
.menu-head span{display:block;font-size:11px;font-weight:400;color:var(--dim);letter-spacing:.02em;margin-top:4px}
.menu-item{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:0 12px;
  align-items:center;background:none;border:none;color:var(--ink);text-align:left;
  padding:13px 20px;cursor:pointer;font-size:16px}
.menu-item span{grid-row:1/3;font-size:23px}
.menu-item b{font-weight:600}
.menu-item i{font-style:normal;font-size:12px;color:#b8ada1}
:root[data-theme="light"] .menu-item i{color:#6b6157}
.menu-item:disabled{opacity:.4}
.menu-item.on{background:rgba(224,164,94,.13)}

/* ---- папки карточек ---- */
.deck-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.deck{background:var(--bg2);border:1px solid var(--line);border-radius:15px;padding:13px 13px 11px;
  cursor:pointer;position:relative;min-height:104px;display:flex;flex-direction:column}
.deck .em{font-size:21px}
.deck .nm{font-size:13.5px;font-weight:600;margin:6px 0 auto;line-height:1.3}
.deck .st{font-size:11px;color:var(--dim);display:flex;gap:8px;margin-top:8px}
.deck .st b{color:var(--accent);font-weight:600}
.deck .bar{height:3px;background:var(--line);border-radius:3px;margin-top:7px;overflow:hidden}
.deck .bar i{display:block;height:100%;background:var(--accent)}
.deck-del{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--dim);
  font-size:17px;cursor:pointer;padding:2px 6px}
.btn-wide{width:100%;margin-top:14px;padding:13px;border-radius:13px;background:var(--bg2);
  border:1px solid var(--line);color:var(--ink);font-size:15px;cursor:pointer}
.btn-wide.primary{background:var(--accent);color:#1b1408;border-color:transparent;font-weight:600}
.sheet-title{font-size:17px;font-weight:600;margin:2px 0 14px}
#nd-preview{margin-top:14px;max-height:38vh;overflow:auto}
.nd-word{display:flex;gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.nd-word b{font-weight:600}
.nd-word span{color:var(--dim);font-size:12px}
.nd-word button{margin-left:auto;background:none;border:none;color:var(--dim);cursor:pointer;font-size:15px}
#top-pageno{margin-left:auto;font-size:12px;color:var(--dim);letter-spacing:.04em}
#btn-menu{font-size:19px}

/* линейные иконки вместо эмодзи */
.ic{display:block;opacity:.9}
nav#tabs button .ic{margin-bottom:1px}
.deck .em{color:var(--dim);height:22px}
.deck .em .ic{opacity:1}
.menu-item span{display:flex;align-items:center;justify-content:center;color:var(--dim)}
.menu-item.on span{color:var(--accent)}
nav#tabs button.on .ic{opacity:1}
#btn-menu{display:flex;align-items:center;justify-content:center;padding:6px 8px}

/* Светлая тема: подложка модальных окон мягче, тень слоя заметнее */
:root[data-theme="light"] .sheet-bg{background:rgba(40,34,28,.32)}
:root[data-theme="light"] #menu{box-shadow:14px 0 40px rgba(60,50,40,.18)}
:root[data-theme="light"] .sheet{box-shadow:0 -10px 40px rgba(60,50,40,.14)}

/* Подложка гасит фон плавно: резкое появление читалось как вспышка. */
.sheet-wrap .sheet-bg{animation:fadein .22s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* Панель обязана быть непрозрачной, иначе сквозь неё просвечивает страница */
#menu{opacity:1;will-change:transform}

/* каталог готовых подборок */
#nd-catalog{margin-top:16px;max-height:46vh;overflow:auto}
.cat-hint{font-size:12px;color:var(--dim);margin:0 0 10px;text-align:center}
.cat-group{margin-bottom:14px}
.cat-title{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.cat-items{display:flex;flex-wrap:wrap;gap:6px}
.cat-item{background:var(--bg2);border:1px solid var(--line);color:var(--ink);
  border-radius:11px;padding:8px 11px;font-size:13px;text-align:left;cursor:pointer;line-height:1.25}
.cat-item:active{border-color:var(--accent)}

/* Словарная форма — то, что учим; форма из текста — то, что встретилось.
   Разделяем их визуально, иначе непонятно, что запоминать. */
.form{margin-top:10px;font-size:13.5px;color:var(--dim);line-height:1.5}
.form b{color:var(--ink);font-weight:600}
.form span{display:block;font-size:12px;opacity:.85;margin-top:2px}