/* quran.css — читалка Корана (РИИ, Э3). Токены — семья DESIGN.md §3 (как у словаря),
   значения те же, что в шаблонах: страница — родня vocab/manual, а не отдельная веха.
   Вязь — Amiri (OFL 1.1, файлы локальные): огласовки критичны, системные шрифты
   их скалят по-разному. Аудио и данные — рядом со страницей, никаких CDN. */

@font-face{
  font-family:"Amiri";
  src:url("../assets/fonts/Amiri-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Amiri";
  src:url("../assets/fonts/Amiri-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  --bg:#FDFBF7; --bg2:#F5F0E6; --card:#FFFFFF; --card2:#FBF8F2;
  --ink:#1C1917; --ink2:#5B534B; --ink3:#948B80;
  --line:rgba(28,25,23,.09); --line2:rgba(28,25,23,.05);
  --accent:#2F5D50; --accent-soft:rgba(47,93,80,.10);
  --warm:#B4552D; --warm-soft:rgba(180,85,45,.10);
  --shadow:0 1px 2px rgba(28,25,23,.04), 0 8px 24px -12px rgba(28,25,23,.16);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,ui-serif,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.32,.72,0,1);
  --r:18px; --r-sm:10px;
  --vh:56px; /* высота верхней панели */
  /* Таджвид (DESIGN.md §3): обучающая раскраска правил чтения — по семейству,
     не декор. Цвет — подсказка; точное правило читается в легенде и подсказке. */
  --tj-madd:#2E6FB0; --tj-ghunnah:#2E8B57; --tj-nun:#B85C0F;
  --tj-mim:#7B4EA3; --tj-qalqalah:#B3261E; --tj-silent:#6B7280;
}
[data-theme=dark]{
  /* «Изумруд + золото» — тёмная тема корпуса РИИ (DESIGN.md §3). */
  --bg:#0A2C28; --bg2:#0D3833; --card:#0D3833; --card2:#134A43;
  --ink:#F5EEE1; --ink2:#C4B79C; --ink3:#AFA28A;
  --line:rgba(245,238,225,.12); --line2:rgba(245,238,225,.06);
  --accent:#C39D55; --accent-soft:rgba(195,157,85,.16);
  --warm:#E08670; --warm-soft:rgba(224,134,112,.16);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --tj-madd:#7FB4E6; --tj-ghunnah:#6FCF97; --tj-nun:#E8A15C;
  --tj-mim:#C3A0E0; --tj-qalqalah:#F08A82; --tj-silent:#9AA3AF;
}

/* Таджвид: в светлой теме фон — белый, чтобы краски правил читались контрастнее
   (просьба пользователя). Тёмная тема «изумруд + золото» не меняется. */
html:not([data-theme="dark"]) body.tajweed{
  --bg:#FFFFFF; --bg2:#F7F5F0; --card:#FFFFFF; --card2:#FFFFFF;
}
/* Белый фон — только у текста: шапка остаётся в палитре корпуса, иначе «пилюля» меню
   белеет и выпадает из ряда остальных поверхностей сервиса. */
html:not([data-theme="dark"]) body.tajweed .topbar{
  --bg:#FDFBF7; --bg2:#F5F0E6; --card:#FFFFFF; --card2:#FBF8F2;
}

/* ── Орнамент-пояс (гирих) ──────────────────────────────────────────── */
/* Полоса-пояс корпуса РИИ: звёзды гириха в SVG-маске, цвет — токеном `--accent`
   (в тёмной теме РИИ — золото), фикс-цвета нет. Декор по краю, не под текстом
   (DESIGN.md §8); вход короткий, `transform`/`opacity` (DESIGN.md §7). */
html{--orn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14' viewBox='0 0 40 14'%3E%3Cpath d='M0 7H14.4M25.6 7H40M20 1.4L21.909 5.091L25.6 7L21.909 8.909L20 12.6L18.091 8.909L14.4 7L18.091 5.091Z' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E")}
.orn{height:14px;background:var(--accent);opacity:.5;
  -webkit-mask-image:var(--orn);-webkit-mask-repeat:repeat-x;
  -webkit-mask-position:center;-webkit-mask-size:auto 100%;
  mask-image:var(--orn);mask-repeat:repeat-x;
  mask-position:center;mask-size:auto 100%;
  animation:orn-in 460ms cubic-bezier(.2,.7,.2,1) both}
@keyframes orn-in{from{opacity:0;transform:scaleX(.55)}to{opacity:.5;transform:none}}
@media (prefers-reduced-motion: reduce){.orn{animation:none}}

/* ── Таджвид: раскраска правил чтения (Т2 замысла quran-tajweed) ─────── */
/* Буква красится по семейству правила (`--tj-*`). Цвет — не единственный носитель:
   у каждого отрезка есть подсказка с названием правила, а в легенде — список правил. */
.tj{cursor:help}
.tj-madd{color:var(--tj-madd)}
.tj-ghunnah{color:var(--tj-ghunnah)}
.tj-nun{color:var(--tj-nun)}
.tj-mim{color:var(--tj-mim)}
.tj-qalqalah{color:var(--tj-qalqalah)}
.tj-silent{color:var(--tj-silent)}
/* Легенда таджвида — в языке сервиса: полоса выровнена с «пилюлей», семейства правил
   идут чипами (рамка + фон `--card`, как чипы хаба). Заголовок — переключатель:
   легенду можно свернуть (класс `collapsed` на полосе). */
.tj-legend{
  margin:0 auto; padding:8px 14px 2px;
  width:100%; max-width:1320px;
  display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center;
  font:12px/1.55 var(--sans); color:var(--ink2);
}
.tj-legend[hidden]{display:none}
.tj-head{
  appearance:none; border:0; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; margin:0 4px 0 0; padding:2px 0;
  font:700 11px/1.4 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink3);
  transition:color .3s;
}
.tj-head:hover{color:var(--ink)}
.tj-chev{font-size:9px; line-height:1}
.tj-legend.collapsed .tj-fam{display:none}
.tj-fam{display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card);
  font-size:11.5px}
.tj-fam .sw{display:inline-block; width:10px; height:10px; border-radius:2px; background:currentColor; flex:0 0 auto}
.tj-fam .nm{font-weight:600; color:var(--ink)}
.tj-fam .rules{color:var(--ink3)}

/* ── Учебник таджвида (Т3 замысла quran-tajweed) ─────────────────────── */
/* Карточки правил: метка семейства красится токеном `--tj-*` — тем же языком, что и
   раскраска вязи, поэтому цвет читается как подсказка, а не декор. Сетка карточек,
   на узком экране — в один столбец. */
.learn{padding:18px 14px 40px; max-width:1080px; margin:0 auto}
.learn-head h1{margin:0 0 4px; font:700 24px/1.2 var(--serif)}
.learn-meta{margin:0 0 12px; color:var(--ink2); font:13px/1.5 var(--sans)}
.learn-bar{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 12px; background:var(--card2); border:1px solid var(--line); border-radius:var(--r-sm)}
.learn-bar .spacer{flex:1}
.learn-progress{font:600 13px/1 var(--sans); color:var(--accent)}
.learn-fam{margin-top:22px}
.learn-fam h2{display:flex; align-items:center; gap:8px; margin:0 0 10px;
  font:700 15px/1.3 var(--sans); color:var(--ink)}
.learn-fam h2 .sw,.lc-head .sw{width:12px; height:12px; border-radius:3px;
  background:currentColor; flex:0 0 auto}
.learn-cards{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.learn-card{padding:12px 14px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-sm); box-shadow:var(--shadow)}
.learn-card.on{border-color:var(--accent); background:var(--accent-soft)}
.lc-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.lc-ru{font:700 15px/1.3 var(--sans)}
.lc-ar{color:var(--ink2); font-size:17px}
.lc-mark{margin-left:auto; height:30px; padding:0 12px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink2); font-size:12px}
.lc-mark:hover{border-color:var(--accent); color:var(--accent)}
.lc-mark.on{background:var(--accent); border-color:transparent; color:var(--card)}
.lc-def{margin:8px 0 0; font-size:14px}
.lc-when{margin:6px 0 0; font-size:13px; color:var(--ink2)}
.lc-when .lc-wl{font-weight:600; color:var(--ink)}
.lc-ex{margin:8px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  font:12px/1.5 var(--sans); color:var(--ink3)}
.lc-exl{font-weight:600}
.lc-ref{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-soft)}
.lc-ref:hover{border-bottom-color:var(--accent)}
.lc-frag{font-size:18px; color:var(--ink)}
.learn-src{margin:26px 0 0; color:var(--ink3); font:12px/1.55 var(--sans)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 var(--serif);
  -webkit-font-smoothing:antialiased;
}
button{
  font:600 13px/1 var(--sans); color:var(--ink);
  background:none; border:none; cursor:pointer;
}
input[type=number],input[type=search]{
  font:14px/1 var(--sans); color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:8px;
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* ── Шапка: меню-пилюля сервиса + полоса режимов + панель заучивания (липкая) ── */
/* Как на остальных поверхностях сервиса (DESIGN.md §6): липкий полупрозрачный
   ярус, внутри — плавающая «пилюля» навигации. */
.topbar{
  position:sticky; top:0; z-index:40;
  padding:12px 20px 0; display:flex; flex-direction:column; gap:8px;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(18px) saturate(170%);
}
.topbar::after{content:""; position:absolute; left:0; right:0; top:100%; height:10px;
  pointer-events:none;
  background:linear-gradient(color-mix(in srgb, var(--bg) 90%, transparent), transparent)}
.pill{
  display:flex; align-items:center; gap:8px;
  width:100%; max-width:1320px; margin:0 auto;
  padding:7px; border-radius:999px; border:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 1px 2px rgba(28,25,23,.05), 0 10px 30px -14px rgba(28,25,23,.30);
  overflow-x:auto; scrollbar-width:none;
}
.pill::-webkit-scrollbar{display:none}
.brand{display:flex; align-items:center; gap:9px; padding:0 14px 0 12px;
  color:var(--ink); text-decoration:none; white-space:nowrap}
.brand-mark{width:22px; height:22px; border-radius:7px; flex:none;
  background:linear-gradient(135deg, var(--accent), var(--warm))}
.brand-text{font-family:var(--serif); font-size:15px}
.iconbtn{
  appearance:none; border:1px solid var(--line); background:var(--card); color:var(--ink2);
  width:34px; height:34px; border-radius:999px; cursor:pointer; flex:none;
  display:grid; place-items:center; font-size:15px; line-height:1;
  transition:border-color .3s, color .3s;
}
.iconbtn:hover{color:var(--ink); border-color:var(--ink)}
.iconbtn svg{width:16px; height:16px; stroke:currentColor; fill:none;
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}

/* Тумблеры слоёв (Р-16): транслитерация и два перевода — независимо. Кнопки — как в
   «сегменте» сервиса: без рамки, активная красится парой `--line2`/`--ink`. */
.tgl{
  appearance:none; border:0; background:transparent; color:var(--ink3); cursor:pointer;
  font:inherit; font-size:11.5px; font-weight:600; letter-spacing:.04em;
  padding:6px 12px; border-radius:999px; white-space:nowrap; transition:all .4s var(--ease);
}
.tgl[aria-pressed=true]{background:var(--line2); color:var(--ink)}
.tgl:hover:not([aria-pressed=true]){color:var(--ink)}

/* Переходы по сервису: те же ссылки-пилюли, что на остальных поверхностях
   (DESIGN.md §6); видны только на сервере — из папки (`file://`) абсолютные
   адреса вели бы в корень диска. */
.hubnav{display:flex; gap:5px; margin-left:auto; white-space:nowrap}
.hubnav a{
  padding:4px 10px; border-radius:999px; display:inline-flex; align-items:center;
  border:1px solid var(--line); background:var(--card); color:var(--ink2);
  font-family:var(--sans); font-size:12px; line-height:1.35; text-decoration:none;
  transition:color .3s, border-color .3s;
}
.hubnav a:hover{color:var(--ink); border-color:var(--ink)}
.hubnav a[aria-current="page"]{color:var(--accent); border-color:var(--accent)}

/* Нижняя полоса инструментов: слева — режимы, справа — слои перевода. Обе группы —
   «сегменты» сервиса (как `.seg` тренажёра): обойма-пилюля с кнопками внутри, активная
   кнопка красится парой токенов `--line2`/`--ink`. */
.toolbar{
  display:flex; align-items:center; gap:10px; padding:6px 14px 0;
  width:100%; max-width:1320px; margin:0 auto;
  overflow-x:auto; scrollbar-width:none;
}
.toolbar::-webkit-scrollbar{display:none}
/* Полоса режимов (Р-10, замысел §5.1): Чтение · Разбор · Строки · Заучивание. */
.modes{display:flex; gap:2px; margin-right:auto;
  border:1px solid var(--line); background:var(--card); border-radius:999px; padding:3px}
/* Слои перевода (Р-16): транслитерация и два перевода — справа, отдельно от режимов. */
.layers{display:flex; gap:2px; margin-left:auto; flex:none;
  border:1px solid var(--line); background:var(--card); border-radius:999px; padding:3px}
.mode-btn{
  appearance:none; border:0; background:transparent; color:var(--ink3); cursor:pointer;
  font:inherit; font-size:11.5px; font-weight:600; letter-spacing:.04em;
  padding:6px 12px; border-radius:999px; white-space:nowrap; transition:all .4s var(--ease);
}
.mode-btn.on{background:var(--line2); color:var(--ink)}
.mode-btn:hover:not(.on){color:var(--ink)}

/* Панель «Заучивания»: видна только в своём режиме (класс на body). */
.hifz{
  display:none; flex-wrap:wrap; align-items:center; gap:10px 14px;
  padding:8px 14px 10px; border-top:1px solid var(--line2);
  font:13px/1.4 var(--sans); color:var(--ink2);
}
body.mode-hifz .hifz{display:flex}
.hifz-chk{display:inline-flex; align-items:center; gap:6px; cursor:pointer}
.hifz-chk input{width:18px; height:18px; accent-color:var(--accent)}
.hifz-num{display:inline-flex; align-items:center; gap:6px}
.hifz-num input{width:3.4rem; height:32px; padding:0 6px; text-align:center}
.hifz-rate{display:inline-flex; align-items:center; gap:4px}
.hifz-progress{
  font-weight:700; color:var(--accent);
  background:var(--accent-soft); border-radius:999px; padding:6px 12px;
}
.mini{
  height:32px; padding:0 12px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink2);
}
.mini[aria-pressed=true]{background:var(--accent-soft); border-color:transparent; color:var(--accent)}
.mini:hover{background:var(--accent-soft); color:var(--accent); border-color:transparent}

/* ── Ящик сур и джузов ──────────────────────────────────────────────── */
.scrim{
  position:fixed; inset:0; z-index:30; background:rgba(20,17,15,.42);
  opacity:0; pointer-events:none; transition:opacity .18s var(--ease);
}
.scrim.open{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; z-index:31; top:0; bottom:0; left:0;
  width:min(340px, 88vw); display:flex; flex-direction:column;
  background:var(--card); border-right:1px solid var(--line);
  transform:translateX(-102%); visibility:hidden;
  transition:transform .18s var(--ease), visibility 0s .18s var(--ease);
}
.drawer.open{transform:none; visibility:visible; box-shadow:var(--shadow);
  transition:transform .18s var(--ease)}
.drawer header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--line);
}
.drawer header h2{font:700 15px/1.2 var(--sans); margin:0}
.filter{
  margin:10px 12px 6px; height:40px; padding:0 12px;
  border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--bg); color:var(--ink);
  font:14px/1 var(--sans);
}
.sura-list{flex:1; overflow:auto; padding:4px 6px 12px}
.sura-item{
  display:flex; align-items:baseline; gap:8px; width:100%;
  min-height:44px; padding:6px 10px; text-align:left;
  border-radius:var(--r-sm); font:14px/1.3 var(--sans); color:var(--ink);
}
.sura-item:hover{background:var(--accent-soft)}
.sura-item.now{background:var(--accent-soft); color:var(--accent); font-weight:700}
.sura-item .n{font:600 11px/1 var(--mono); color:var(--ink2); min-width:24px}
.sura-item .ar{margin-left:auto; font-size:14px; color:var(--ink2)}
.sura-item .cnt{font:500 11px/1 var(--mono); color:var(--ink2)}
.juz-strip{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:6px;
  padding:10px 12px 14px; border-top:1px solid var(--line);
}
.juz-strip h3{grid-column:1 / -1; font:700 12px/1 var(--sans); margin:2px 0 0; color:var(--ink2)}
.juz-btn{
  height:38px; border-radius:var(--r-sm); border:1px solid var(--line);
  font:600 12px/1 var(--mono); color:var(--ink2);
}
.juz-btn:hover{background:var(--accent-soft); color:var(--accent)}

/* Закладки (Э3, часть 2б): список отмеченных аятов в ящике. */
.bm-list{
  border-top:1px solid var(--line); padding:10px 12px 14px;
  max-height:32vh; overflow:auto;
}
.bm-list h3{font:700 12px/1 var(--sans); margin:2px 0 8px; color:var(--ink2)}
.bm-list .bm-empty{font:12px/1.5 var(--sans); color:var(--ink3); margin:0}
.bm-item{
  display:block; width:100%; min-height:40px; padding:8px 10px; text-align:left;
  border-radius:var(--r-sm); font:13px/1.3 var(--sans); color:var(--ink);
}
.bm-item:hover{background:var(--accent-soft); color:var(--accent)}

/* Поиск по тексту (Э3, часть 2в): поле в ящике, список результатов вместо сур.
   Пока запрос короткий — ящик как обычно; при ≥ 2 знаках класс `searching` на ящике
   прячет фильтр сур, список и полосу джузов, показывая результаты. */
.filter.search{margin-bottom:2px}
.sr-list{display:none; flex:1; overflow:auto; padding:4px 6px 12px}
.drawer.searching .sura-list,
.drawer.searching .juz-strip,
.drawer.searching .filter:not(.search){display:none}
.drawer.searching .sr-list{display:block}
.sr-list h3{font:700 12px/1 var(--sans); margin:8px 8px 6px; color:var(--ink2)}
.sr-empty{font:12px/1.5 var(--sans); color:var(--ink3); margin:8px 10px}
.sr-item{
  display:block; width:100%; min-height:44px; padding:8px 10px; text-align:left;
  border-radius:var(--r-sm); color:var(--ink); border-bottom:1px solid var(--line2);
}
.sr-item:hover{background:var(--accent-soft)}
.sr-ref{display:block; font:600 11px/1.4 var(--mono); color:var(--accent); margin-bottom:2px}
.sr-snip{display:block; font:13px/1.5 var(--serif); color:var(--ink2); word-break:break-word}
.sr-snip[dir=rtl]{font-family:"Amiri",var(--serif); font-size:1.15rem; text-align:right}
.sr-snip mark{background:var(--warm-soft); color:inherit; border-radius:3px; padding:0 2px}

/* ── Колонка чтения ─────────────────────────────────────────────────── */
.doc{
  max-width:46rem; margin:0 auto; padding:18px 16px 96px;
}
.loading{color:var(--ink2); font:14px/1.6 var(--sans); padding:24px 4px}
.loaderr{color:var(--warm); font:14px/1.6 var(--sans); padding:24px 4px; white-space:pre-line}

.sura-head{margin:6px 0 4px}
.sura-head h1{
  font:700 22px/1.3 var(--sans); margin:0; display:flex; flex-wrap:wrap; gap:10px; align-items:baseline;
}
.sura-head h1 .ar{font-size:20px; color:var(--ink2)}
.sura-meta{font:500 12px/1.4 var(--mono); color:var(--ink2); margin:6px 0 0}
.sura-nav{display:flex; gap:8px; margin-top:10px; align-items:center}
.sura-nav .spacer{flex:1}
.juz-head a{color:var(--accent)}
.sura-nav button{
  height:38px; padding:0 14px; border-radius:var(--r-sm);
  border:1px solid var(--line); color:var(--ink2); font-size:13px;
}
.sura-nav button:hover:not(:disabled){background:var(--accent-soft); color:var(--accent); border-color:transparent}
.sura-nav button:disabled{opacity:.4; cursor:default}
.listen{
  height:44px; padding:0 18px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent); font-size:14px;
}
.listen:hover{filter:brightness(.97)}
.bismillah{
  margin:18px 0 6px; text-align:center;
  font-size:1.7rem; line-height:2; color:var(--ink);
}
.juz-head{
  margin:26px 0 0; font:700 13px/1.3 var(--sans); color:var(--ink2);
  display:flex; gap:8px; align-items:baseline;
}
.juz-head .n{font:600 12px/1 var(--mono); color:var(--ink2)}

/* Аят: сбоку кнопка прослушивания, номер и закладка, в теле — слои. */
.ayah{
  display:grid; grid-template-columns:52px 1fr; gap:4px 10px;
  padding:14px 6px 16px; border-bottom:1px solid var(--line2);
  border-radius:var(--r-sm);
}
.ayah-side{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:4px;
}
.play{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); color:var(--ink2); font-size:15px;
  display:inline-flex; align-items:center; justify-content:center;
}
.play:hover{background:var(--accent-soft); color:var(--accent); border-color:transparent}
.ayah.playing .play{background:var(--accent); color:var(--card); border-color:transparent}
.num{
  min-width:26px; height:22px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--accent-soft); color:var(--accent);
  font:600 11px/1 var(--mono);
}
.star,.mark,.note{
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--line); color:var(--ink3); font-size:15px;
  display:inline-flex; align-items:center; justify-content:center;
}
.star:hover,.mark:hover,.note:hover{background:var(--accent-soft); color:var(--accent); border-color:transparent}
.star.on{color:var(--warm); background:var(--warm-soft); border-color:transparent}
.mark.on{color:var(--accent); background:var(--accent-soft); border-color:transparent}
.note.on{color:var(--accent); background:var(--accent-soft); border-color:transparent}

/* Заметки (волна 150): флажок у аята, редактор под телом аята и список в ящике.
   Флажок — та же квадратная кнопка, что закладка и «выучено» (тач ≥ 44 px). */
.ayah-note{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 2px}
.ayah-note .note-text{
  flex:1 1 100%; min-height:64px; resize:vertical;
  font:15px/1.55 var(--serif); color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:8px 10px;
}
.ayah-note .note-text::placeholder{color:var(--ink3)}
.ayah-note .note-save,.ayah-note .note-del{
  min-height:44px; padding:0 16px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink2);
}
.ayah-note .note-save{background:var(--accent-soft); color:var(--accent); border-color:transparent}
.ayah-note .note-save:hover{filter:brightness(.97)}
.ayah-note .note-del:hover{background:var(--warm-soft); color:var(--warm); border-color:transparent}
.nt-list{
  border-top:1px solid var(--line); padding:10px 12px 14px;
  max-height:32vh; overflow:auto;
}
.nt-list h3{font:700 12px/1 var(--sans); margin:2px 0 8px; color:var(--ink2)}
.nt-list .nt-empty{font:12px/1.5 var(--sans); color:var(--ink3); margin:0}
.nt-item{
  display:block; width:100%; min-height:44px; padding:8px 10px; text-align:left;
  border-radius:var(--r-sm); color:var(--ink); border-bottom:1px solid var(--line2);
}
.nt-item:hover{background:var(--accent-soft)}
.nt-ref{display:block; font:600 11px/1.4 var(--mono); color:var(--accent); margin-bottom:2px}
.nt-text{display:block; font:13px/1.5 var(--serif); color:var(--ink2); white-space:pre-line; word-break:break-word}
.ayah-body{min-width:0}
.ar{
  font-family:"Amiri",var(--serif);
  direction:rtl; unicode-bidi:isolate;
  font-size:1.9rem; line-height:2.15; margin:0 0 4px; text-align:right;
}
.ar .i{display:none}
.juz-head + .ayah .ar, .ayah:first-child .ar{margin-top:2px}
.tr{
  font:italic 0.92em/1.7 var(--mono),var(--serif);
  color:var(--ink2); margin:2px 0 6px;
}
.ru{
  font:16px/1.65 var(--serif); margin:2px 0 4px;
}
.ru.sa{color:var(--ink2)}
.ru .src{
  display:block; font:600 10px/1 var(--sans); letter-spacing:.04em;
  color:var(--ink2); text-transform:none; margin-top:2px;
}

/* Режим «Разбор»: аят построчно — слово · транскрипция · глосс · корень (Э3, часть 2а).
   Строка слова — кнопка (тап играет слово с его тайминга), тач-цель ≥ 44 px. */
.parse-note{
  font:500 12px/1.55 var(--sans); color:var(--ink2);
  background:var(--card2); border:1px solid var(--line); border-left:3px solid var(--warm);
  border-radius:var(--r-sm); padding:8px 12px; margin:10px 0;
}
.words{display:flex; flex-direction:column; gap:2px; margin:2px 0 8px}
.w{
  display:grid; gap:4px 12px; align-items:baseline; width:100%;
  grid-template-columns:minmax(84px,auto) minmax(76px,0.9fr) minmax(96px,1.3fr) auto;
  min-height:44px; padding:6px 10px; text-align:left;
  border:1px solid var(--line2); border-radius:var(--r-sm);
  background:var(--card2); color:var(--ink);
}
.w:hover{background:var(--accent-soft); border-color:transparent}
.w.on{background:var(--accent-soft); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.w-ar{
  font-family:"Amiri",var(--serif); direction:rtl; unicode-bidi:isolate;
  font-size:1.5rem; line-height:1.6; text-align:right;
}
.w-tr{font:italic 0.9em/1.5 var(--mono),var(--serif); color:var(--ink2); word-break:break-word}
.w-g{font:14px/1.5 var(--serif)}
.w-r{font:600 11px/1.5 var(--mono); color:var(--ink3); white-space:nowrap; text-align:right}
.w .none{color:var(--ink3)}

/* Режим «Смысловые строки» (Э3, часть 2б): аят отрезками — вязь отрезка · пословные
   глоссы · фразовый перевод. Отрезок — кнопка: тап играет аят с его начала и
   подсвечивает отрезок целиком. */
.segments{display:flex; flex-direction:column; gap:6px; margin:2px 0 8px}
.seg{
  display:block; width:100%; text-align:left;
  padding:10px 12px; border:1px solid var(--line2); border-radius:var(--r-sm);
  background:var(--card2); color:var(--ink);
}
.seg:hover{background:var(--accent-soft); border-color:transparent}
.seg.on{background:var(--accent-soft); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.seg-ar{
  display:block; font-size:1.5rem; line-height:1.9; margin:0 0 4px;
}
.seg-gl{display:flex; flex-wrap:wrap; gap:4px 10px; margin:0 0 6px}
.gw{display:inline-flex; align-items:baseline; gap:5px; white-space:nowrap}
.gw-ar{font-family:"Amiri",var(--serif); direction:rtl; unicode-bidi:isolate; font-size:1.15rem}
.gw-g{font:13px/1.4 var(--serif); color:var(--ink2)}
.seg-p{
  display:block; font:italic 15px/1.6 var(--serif); color:var(--accent);
  border-top:1px dashed var(--line); padding-top:6px;
}

/* Скрытие слоёв тумблерами (Р-16, Р-19): без перерисовки, классом на body.
   Транслитерация трёхпозиционная: латиница (по умолчанию) → кириллица → выкл. */
.tr .cyr,.w-tr .cyr{display:none}
body.tr-cyr .tr .lat,body.tr-cyr .w-tr .lat{display:none}
body.tr-cyr .tr .cyr,body.tr-cyr .w-tr .cyr{display:inline}
body.tr-off .tr{display:none}
body.tr-off .w-tr .lat,body.tr-off .w-tr .cyr,body.tr-off .w-tr .none{display:none}
body.not-kr .ru.kr{display:none}
body.not-sa .ru.sa{display:none}

/* «Заучивание»: скрыть огласовки (показываем имлаи) и скрыть текст (тап открывает). */
body.hifz-vowels .ar .t{display:none}
body.hifz-vowels .ar .i{display:inline}
body.hifz-text .ayah .ar .t,body.hifz-text .ayah .ar .i{opacity:0}
body.hifz-text .ayah .ar{cursor:pointer}
body.hifz-text .ayah.revealed .ar .t,body.hifz-text .ayah.revealed .ar .i{opacity:1}

/* Подсветка играющего аята и переход по глубокой ссылке. */
.ayah.playing{background:var(--accent-soft)}
.ayah.flash{animation:flash 1.6s var(--ease) 1}
@keyframes flash{0%,60%{background:var(--accent-soft)} 100%{background:transparent}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ayah.flash{animation:none; background:var(--accent-soft)}
  .drawer,.scrim{transition:none}
}

/* ── Нижняя панель плеера ───────────────────────────────────────────── */
.playerbar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; align-items:center; gap:12px;
  min-height:52px; padding:6px 16px calc(6px + env(safe-area-inset-bottom));
  background:var(--card); border-top:1px solid var(--line);
  transform:translateY(102%); transition:transform .18s var(--ease);
}
.playerbar.open{transform:none}
.playerbar .what{flex:1; font:600 13px/1.35 var(--sans); color:var(--ink); min-width:0}
.playerbar .what small{display:block; font-weight:500; color:var(--ink2)}
.playerbar .stop{
  height:44px; padding:0 16px; border-radius:999px;
  background:var(--ink); color:var(--bg); font-size:13px;
}

/* ── Тост и подпись источников ──────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:72px; z-index:40;
  max-width:min(480px, 90vw); padding:10px 16px;
  background:var(--ink); color:var(--bg);
  border-radius:var(--r-sm); font:500 13px/1.5 var(--sans);
  opacity:0; pointer-events:none; transform:translate(-50%, 6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.toast.show{opacity:1; transform:translate(-50%, 0)}
.attribution{
  max-width:46rem; margin:0 auto; padding:0 16px 40px;
  font:500 11px/1.6 var(--sans); color:var(--ink2);
}
.attribution a{color:var(--ink2)}

/* ── Самопроверка (#selftest) ───────────────────────────────────────── */
.selftest{font:14px/1.7 var(--sans); max-width:46rem; margin:0 auto; padding:6px 16px 30px}
.selftest h1{font:700 20px/1.3 var(--sans); margin:8px 0 12px}
.selftest li{list-style:none; padding:3px 0 3px 26px; position:relative}
.selftest li::before{position:absolute; left:2px; font-weight:700}
.selftest li.ok::before{content:"✓"; color:var(--accent)}
.selftest li.bad::before{content:"✗"; color:var(--warm)}
.selftest li.bad{color:var(--warm)}
.selftest .total{margin-top:10px; font-weight:700}

/* ── Упражнения таджвида (Т4 замысла quran-tajweed) ──────────────────── */
/* Вкладки «Правила · Упражнения» и колода заданий. Кнопки-слова вязи крупные (тач ≥ 44 px),
   верный ответ помечен цветом и словом в подсказке — цвет не единственный носитель. */
.learn-tabs{display:flex; gap:6px; margin:0 0 12px}
.learn-tab{height:34px; padding:0 16px; border-radius:999px; border:1px solid var(--line);
  color:var(--ink2)}
.learn-tab:hover{border-color:var(--accent); color:var(--accent)}
.learn-tab.on{background:var(--accent); border-color:transparent; color:var(--card)}
.ex{margin-top:4px}
.ex-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.ex-kind{font:700 12px/1 var(--sans); letter-spacing:.04em; text-transform:uppercase; color:var(--accent)}
.ex-count{font:600 12px/1 var(--sans); color:var(--ink3)}
.ex-q{margin:12px 0 10px; font-size:15px}
.ex-ref{margin:8px 0 0; color:var(--ink3); font:12px/1.5 var(--sans)}
.ex-ayah{display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center;
  padding:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm)}
.ex-w{font-family:"Amiri",var(--serif); font-size:1.7rem; line-height:1.5; color:var(--ink);
  padding:4px 8px; border:1px solid transparent; border-radius:10px; min-height:44px}
.ex-w:hover:not(:disabled){background:var(--accent-soft); border-color:var(--accent-soft)}
.ex-w.hit,.ex-w.ok{border-color:var(--accent); background:var(--accent-soft)}
.ex-w.no{border-color:var(--warm); background:var(--warm-soft)}
.ex-w:disabled{cursor:default}
.ex-word{font-size:2.4rem; text-align:center; margin:14px 0 6px}
.ex-tr{margin:0; text-align:center; color:var(--ink2); font:13px/1.5 var(--sans)}
.ex-gl{margin:4px 0 0; text-align:center; font-size:14px}
.ex-act{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 0}
.btn{height:40px; padding:0 18px; border-radius:999px; border:1px solid var(--accent);
  background:var(--accent); color:var(--card)}
.btn:hover{opacity:.92}
.btn.ok{background:var(--card); color:var(--accent)}
.btn.ok.on{background:var(--accent); color:var(--card)}
.ex-nav{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:16px 0 0}
.ex-hint{margin:10px 0 0; min-height:20px; color:var(--ink2); font:13px/1.5 var(--sans)}
.ex-done h2{margin:6px 0 4px; font:700 20px/1.3 var(--serif)}
.ex-score{font:600 15px/1.5 var(--sans); color:var(--accent)}

/* ── Узкий экран ────────────────────────────────────────────────────── */
@media (max-width:560px){
  .pill{padding:6px 10px; gap:6px}
  .tgl{padding:5px 9px; font-size:11px}
  .toolbar{padding:6px 10px}
  .mode-btn{padding:5px 10px; font-size:11px}
  .hifz{padding:8px 10px}
  .doc{padding:12px 10px 96px}
  .ayah{grid-template-columns:44px 1fr; padding:12px 2px 14px}
  .ar{font-size:1.65rem; line-height:2.05}
  .seg-ar{font-size:1.35rem}
  .bismillah{font-size:1.5rem}
  .juz-strip{grid-template-columns:repeat(5, 1fr)}
  .learn{padding:14px 10px 96px}
  .learn-head h1{font-size:20px}
  .learn-cards{grid-template-columns:1fr}
  .ex-w{font-size:1.45rem}
  .ex-word{font-size:2rem}
}