/* Layout: боковое меню на компьютере, нижняя панель на телефоне; учебные экраны без отвлекающих элементов */
:root{
  --bg:#f6f1e6; --surface:#fffdf8; --surface-2:#f0e9da; --ink:#1c2420; --muted:#5b6862; --line:#e2d9c6;
  --emerald:#0e5c47; --emerald-ink:#0a4334; --emerald-soft:rgba(14,92,71,.10); --on-emerald:#fbf8f1;
  --gold:#a8812f; --gold-soft:rgba(176,136,52,.18); --danger:#a8432f; --danger-soft:rgba(168,67,47,.10); --ok:#2f7a4f;
  --learned:rgba(14,92,71,.11); --today:rgba(190,150,60,.22); --weak:#b5513a;
  --shadow:0 1px 2px rgba(28,36,32,.06),0 6px 20px -12px rgba(28,36,32,.25);
  --f-display:"Literata",Georgia,"Times New Roman",serif; --f-body:"Golos Text","Segoe UI",system-ui,sans-serif;
  --f-quran:"Amiri Quran","Amiri","Noto Naskh Arabic","Traditional Arabic",serif; --f-ar:"Noto Naskh Arabic","Amiri","Geeza Pro",serif;
  --r:14px; --qfs:32px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#171a19; --surface:#202423; --surface-2:#2a2f2d; --ink:#ebe6da; --muted:#a3aca7; --line:#343a38;
  --emerald:#46b08b; --emerald-ink:#7fd0b1; --emerald-soft:rgba(70,176,139,.14); --on-emerald:#0d1714;
  --gold:#d5b267; --gold-soft:rgba(213,178,103,.18); --danger:#e08a73; --danger-soft:rgba(224,138,115,.12); --ok:#6cc08f;
  --learned:rgba(70,176,139,.15); --today:rgba(213,178,103,.20); --weak:#e08a73;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -14px rgba(0,0,0,.6); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#171a19; --surface:#202423; --surface-2:#2a2f2d; --ink:#ebe6da; --muted:#a3aca7; --line:#343a38;
  --emerald:#46b08b; --emerald-ink:#7fd0b1; --emerald-soft:rgba(70,176,139,.14); --on-emerald:#0d1714;
  --gold:#d5b267; --gold-soft:rgba(213,178,103,.18); --danger:#e08a73; --danger-soft:rgba(224,138,115,.12); --ok:#6cc08f;
  --learned:rgba(70,176,139,.15); --today:rgba(213,178,103,.20); --weak:#e08a73;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -14px rgba(0,0,0,.6); color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--emerald)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.2;text-wrap:balance;margin:0}
h1{font-size:clamp(24px,4.2vw,32px)} h2{font-size:20px} h3{font-size:16px}
.muted{color:var(--muted)} .small{font-size:13px} .num{font-variant-numeric:tabular-nums}
.ar{font-family:var(--f-ar);direction:rtl;unicode-bidi:isolate}
.eyebrow{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* Каркас */
.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100%}
.side{position:sticky;top:env(safe-area-inset-top,0px);height:100vh;overflow:auto;border-inline-end:1px solid var(--line);padding:22px 14px 22px max(14px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:18px;background:var(--surface)}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px}
.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--emerald);color:var(--on-emerald);display:grid;place-items:center;font-family:var(--f-ar);font-size:20px;line-height:1}
.brand b{font-family:var(--f-display);font-size:18px;display:block;line-height:1.1}
.brand span{font-size:12px;color:var(--muted)}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-group .eyebrow{padding:0 10px 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:500}
.nav a:hover{background:var(--surface-2)}
.nav a[aria-current="page"]{background:var(--emerald-soft);color:var(--emerald-ink)}
.nav a .badge{margin-inline-start:auto}
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.who{margin-top:auto;padding:10px;border:1px solid var(--line);border-radius:12px;font-size:13px;display:grid;gap:4px}
.main{min-width:0;padding-block:26px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.bottom{display:none}
.sync{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.sync i{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.sync.ok i{background:var(--ok)} .sync.wait i{background:var(--gold)} .sync.err i{background:var(--danger)}

@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .main{padding-block:18px calc(86px + env(safe-area-inset-bottom,0px))}
  .bottom{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
  .bottom a,.bottom button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font-size:11px;text-decoration:none;color:var(--muted);background:none;border:0;border-radius:10px;position:relative}
  .bottom [aria-current="page"]{color:var(--emerald-ink);background:var(--emerald-soft)}
  .bottom .ico{width:22px;height:22px}
  .bottom .dot{position:absolute;top:3px;right:calc(50% - 18px);min-width:16px;height:16px;border-radius:8px;background:var(--gold);color:#fff;font-size:10px;line-height:16px;padding:0 4px}
  body.focus .bottom{display:none}
  body.focus .main{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}

/* Элементы */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.card.pad-lg{padding:22px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 16px;border-radius:11px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600;text-decoration:none;color:var(--ink);transition:background .15s,border-color .15s,transform .05s}
.btn:hover{background:var(--surface-2)} .btn:active{transform:translateY(1px)}
.btn.primary{background:var(--emerald);border-color:var(--emerald);color:var(--on-emerald)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.ghost{background:transparent;border-color:transparent}
.btn.danger{color:var(--danger);border-color:var(--danger-soft)}
.btn.lg{min-height:52px;font-size:16px;padding:12px 22px}
.btn.sm{min-height:34px;padding:5px 11px;font-size:13px;border-radius:9px}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.pill.none{} .pill.prog{background:var(--gold-soft);color:var(--gold)} .pill.done{background:var(--emerald-soft);color:var(--emerald-ink)} .pill.due{background:var(--danger-soft);color:var(--danger)}
.badge{min-width:20px;height:20px;border-radius:10px;padding:0 6px;font-size:11.5px;font-weight:700;line-height:20px;text-align:center;background:var(--gold-soft);color:var(--gold)}
.bar{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--emerald);border-radius:5px}
.bar.gold>i{background:var(--gold)}
.input,select.input{width:100%;min-height:42px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
label.f{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.check:last-child{border-bottom:0}
.check input{margin-top:4px;accent-color:var(--emerald);width:18px;height:18px;flex:none}
.check b{display:block;font-weight:600} .check span{font-size:13px;color:var(--muted)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:11px;padding:3px;background:var(--surface);flex-wrap:wrap;gap:2px}
.seg button{border:0;background:none;padding:6px 12px;border-radius:8px;cursor:pointer;font-weight:600;font-size:13px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--emerald);color:var(--on-emerald)}
.note{padding:12px 14px;border-radius:12px;background:var(--surface-2);font-size:13.5px;color:var(--muted)}
.note.warn{background:var(--gold-soft);color:var(--ink)}
.note.err{background:var(--danger-soft);color:var(--ink)}
.empty{text-align:center;padding:36px 18px;display:grid;gap:12px;justify-items:center}
.list{display:flex;flex-direction:column}
.li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);min-width:0}
.li:last-child{border-bottom:0}
.li .grow{flex:1;min-width:0}
.sn{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--surface-2);font-variant-numeric:tabular-nums}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;z-index:50;box-shadow:var(--shadow);max-width:calc(100% - 32px)}
@media (min-width:861px){.toast{bottom:28px}}
.sheet-bg{position:fixed;inset:0;background:rgba(10,14,12,.42);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);width:min(640px,100%);max-height:86vh;overflow:auto;border-radius:18px 18px 0 0;padding:20px max(18px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:14px}
@media (min-width:861px){.sheet-bg{align-items:center}.sheet{border-radius:18px}}

/* Главная */
.hello{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.hello .salam{font-family:var(--f-ar);font-size:20px;color:var(--gold);direction:rtl}
.today-card{display:flex;flex-direction:column;gap:12px}
.today-card .big{font-family:var(--f-display);font-size:40px;line-height:1;font-variant-numeric:tabular-nums}
.today-card .big small{font-size:18px;color:var(--muted);font-family:var(--f-body)}
.today-card.primary{background:var(--emerald);border-color:var(--emerald);color:var(--on-emerald)}
.today-card.primary .muted,.today-card.primary .eyebrow{color:color-mix(in srgb,var(--on-emerald) 72%,transparent)}
.today-card.primary .bar{background:color-mix(in srgb,var(--on-emerald) 20%,transparent)}
.today-card.primary .bar>i{background:var(--gold)}
.today-card.primary .btn{background:var(--on-emerald);color:var(--emerald-ink);border-color:transparent}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:14px}
.kv div{display:grid;gap:2px}
.kv b{font-family:var(--f-display);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.kv span{font-size:12.5px;color:var(--muted)}
.kv b.ar{justify-self:start}
.legend{display:inline-flex;align-items:center;gap:6px}.legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.heat{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.heat i{aspect-ratio:1;border-radius:4px;background:var(--surface-2);max-width:100%}
.heat i.l1{background:color-mix(in srgb,var(--emerald) 30%,var(--surface-2))}
.heat i.l2{background:color-mix(in srgb,var(--emerald) 60%,var(--surface-2))}
.heat i.l3{background:var(--emerald)}
.heat i.rest{background:repeating-linear-gradient(45deg,var(--surface-2) 0 3px,transparent 3px 6px)}

/* Текст Корана */
.quran{font-family:var(--f-quran);direction:rtl;font-size:var(--qfs);line-height:2.15;color:var(--ink);font-feature-settings:"calt","liga"}
.qline{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:.28em;padding:0 .3em;border-radius:8px;min-height:2.15em;align-items:baseline}
.qline.short{justify-content:center}
.qline.learned{background:var(--learned)} .qline.today{background:var(--today)}
.qline.weak{box-shadow:inset -3px 0 0 var(--weak)}
.qline.ctx{opacity:.5}
.ctxwrap{border-inline-start:2px dashed var(--line);margin:.1em 0;padding-inline-start:.2em}
.ctxbtn{font:600 12.5px var(--f-body);color:var(--emerald-ink);background:var(--emerald-soft);border:0;border-radius:999px;padding:5px 12px;cursor:pointer;direction:var(--udir,ltr)}
.ctxbtn:hover{filter:brightness(.97)}
.w{white-space:nowrap;cursor:default;border-radius:6px;transition:color .2s,background .2s}
.w.veil{color:transparent;background:var(--surface-2);box-shadow:inset 0 -2px 0 var(--line);cursor:pointer}
.w.peek{color:var(--gold)}
.w.sel{background:var(--gold-soft)}
.ayn{font-family:var(--f-quran);color:var(--gold);font-size:.82em;white-space:nowrap}
.cont{font-family:var(--f-body);font-size:12px;color:var(--muted);direction:var(--udir,ltr);text-align:center}
.mushaf-page{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px clamp(10px,3vw,30px);max-width:760px;margin:0 auto;width:100%}
.mushaf-page.sepia{background:color-mix(in srgb,var(--gold) 9%,var(--surface))}
.sh{display:flex;justify-content:center;margin:.2em 0}
.sh span{font-family:var(--f-ar);font-size:calc(var(--qfs)*.62);border:1.5px solid var(--gold);color:var(--emerald-ink);border-radius:999px;padding:.15em 1.4em;direction:rtl;background:var(--gold-soft)}
.basm{text-align:center}
.pgnum{text-align:center;font-size:13px;color:var(--muted);margin-top:10px;font-variant-numeric:tabular-nums}
.qwrap{overflow-x:auto}

/* Учебный экран */
.focusbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.focusbar .grow{flex:1;min-width:160px}
.stages{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.stages button{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);white-space:nowrap}
.stages button[aria-current="step"]{background:var(--emerald);border-color:var(--emerald);color:var(--on-emerald)}
.stages button.done{color:var(--emerald-ink);border-color:var(--emerald-soft)}
.study{display:flex;flex-direction:column;gap:16px}
.study .quran{padding:8px 0}
.instr{font-size:15px;color:var(--muted)}
.rate{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rate button{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 6px;cursor:pointer;display:grid;gap:2px;font-weight:700;font-size:14px}
.rate button small{font-weight:500;color:var(--muted);font-size:11.5px}
.rate .r1{border-color:var(--danger-soft);color:var(--danger)} .rate .r2{color:var(--gold)} .rate .r3{color:var(--emerald-ink)} .rate .r4{color:var(--ok)}
.rate button:hover{background:var(--surface-2)}
@media (max-width:420px){.rate{grid-template-columns:repeat(2,1fr)}}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px;font-size:13px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--gold-soft);border-color:var(--gold);color:var(--ink)}
.ref{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ref .ar{font-size:18px}

/* Программы */
.programs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px}
.prog{text-align:start;border:1.5px solid var(--line);background:var(--surface);border-radius:16px;padding:16px;cursor:pointer;display:grid;gap:6px;position:relative}
.prog .n{font-family:var(--f-display);font-size:46px;line-height:1;color:var(--emerald-ink);font-variant-numeric:tabular-nums}
.prog .n small{font-family:var(--f-body);font-size:13px;color:var(--muted);margin-inline-start:6px}
.prog b{font-size:16px}
.prog[aria-pressed="true"]{border-color:var(--emerald);box-shadow:0 0 0 3px var(--emerald-soft)}
.prog .lines{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.prog .lines i{height:3px;border-radius:2px;background:var(--gold);opacity:.75}

/* Графики, сетки */
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font:10.5px var(--f-body)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:5px}
.sgrid button{aspect-ratio:1;border-radius:8px;border:1px solid var(--line);font-size:11.5px;font-weight:700;cursor:pointer;position:relative;overflow:hidden;background:var(--surface);color:var(--ink);font-variant-numeric:tabular-nums;max-width:100%}
.sgrid button i{position:absolute;left:0;right:0;bottom:0;background:var(--emerald);opacity:.85}
.sgrid button span{position:relative}
.sgrid button.due{border-color:var(--danger)}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:4px}
.vgrid span{border-radius:6px;font-size:11px;text-align:center;padding:4px 0;background:var(--surface-2);font-variant-numeric:tabular-nums}
.vgrid span.l{background:var(--emerald-soft);color:var(--emerald-ink)} .vgrid span.d{background:var(--danger-soft);color:var(--danger)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .h{font-size:11.5px;color:var(--muted);text-align:center;font-weight:600}
.cal button{min-height:74px;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:6px;text-align:start;display:flex;flex-direction:column;gap:2px;cursor:pointer;font-size:11px;min-width:0;overflow:hidden}
.cal button .d{font-weight:700;font-size:13px}
.cal button.out{opacity:.35}
.cal button.today{border-color:var(--emerald);box-shadow:inset 0 0 0 1px var(--emerald)}
.cal button.rest{background:repeating-linear-gradient(45deg,var(--surface) 0 6px,var(--surface-2) 6px 12px)}
.cal button.miss .d{color:var(--danger)}
.cal button.sel{outline:2px solid var(--gold)}
.cal .t-new{color:var(--emerald-ink);font-weight:600} .cal .t-rev{color:var(--gold)} .cal .t-fc{color:var(--muted)}
@media (max-width:520px){.cal button{min-height:56px;font-size:10px;padding:4px}.cal .t-hide{display:none}}
.drag{cursor:grab;color:var(--muted);background:none;border:0;padding:4px}
.li.dragging{opacity:.4}
.li.over{box-shadow:0 -2px 0 var(--gold)}
.tbl{overflow-x:auto}
.tbl table{border-collapse:collapse;width:100%;font-size:14px}
.tbl th,.tbl td{text-align:start;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th{font-size:12px;color:var(--muted);font-weight:600}
.step-dots{display:flex;gap:6px}
.step-dots i{width:22px;height:4px;border-radius:2px;background:var(--line)}
.step-dots i.on{background:var(--emerald)}
.pick{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--surface)}
.pick[aria-pressed="true"]{border-color:var(--emerald);background:var(--emerald-soft)}
.loading{min-height:60vh;display:grid;place-items:center;text-align:center;gap:10px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== Выбор по джузам ===== */
.juzlist{display:flex;flex-direction:column;gap:8px}
.juz{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.juz.open{border-color:color-mix(in srgb,var(--emerald) 35%,var(--line))}
.juzhead{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 6px}
.juzbtn{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;padding:6px;border-radius:10px;cursor:pointer;color:inherit;text-align:start}
.juzbtn:hover{background:var(--surface-2)}
.juzparts{border-top:1px solid var(--line);padding:4px 10px 8px}
.jpart{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.jpart:last-child{border-bottom:0}
.jcheck{width:30px;height:30px;flex:none;border-radius:8px;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;font-weight:800;color:var(--on-emerald);cursor:pointer}
.jcheck[aria-pressed="true"]{background:var(--emerald);border-color:var(--emerald)}
@media (max-width:520px){.juzhead{flex-wrap:wrap}.juzhead .btn{margin-inline-start:46px}}

/* ===== Муташабихат ===== */
.mtext{font-family:var(--f-quran);direction:rtl;font-size:var(--qfs,26px);line-height:2.05;color:var(--ink);word-spacing:.06em}
.mtext .w{border-radius:6px;padding:0 .08em}
.w.mc{background:var(--gold-soft)}
.w.md{color:var(--emerald-ink);text-decoration:underline 2px var(--gold);text-underline-offset:.35em;font-weight:700}
.mmem{border-top:1px dashed var(--line);padding-top:8px}
.mmem.ml .small b.lc{color:var(--emerald-ink)}
.wbtn{font:inherit;font-family:var(--f-quran);font-size:inherit;line-height:1.6;background:var(--surface-2);border:1.5px solid transparent;border-radius:8px;padding:0 .25em;margin:.12em 0;cursor:pointer;color:var(--ink)}
.wbtn.wsel,.pick.wsel{border-color:var(--gold);background:var(--gold-soft)}
.wbtn.wok,.pick.wok{border-color:var(--ok);background:var(--emerald-soft)}
.wbtn.wbad,.pick.wbad{border-color:var(--danger);background:var(--danger-soft)}
.wbtn.wmiss,.pick.wmiss{border:1.5px dashed var(--ok)}
.wbtn[disabled]{cursor:default}
.pick .jcheck{color:var(--ink)}
.pick[aria-pressed="true"] .jcheck{background:var(--gold);border-color:var(--gold);color:#fff}

/* ===== Записи ===== */
.recrow{border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--surface)}
.recdot{width:12px;height:12px;border-radius:50%;background:var(--danger);animation:recpulse 1s infinite}
@keyframes recpulse{50%{opacity:.25}}
audio{max-width:100%}

/* ===== Языки интерфейса ===== */
.langsw{gap:6px}.langsw .chip{font-family:var(--f-body)}.langsw .chip[lang=ar]{font-family:"IBM Plex Sans Arabic",var(--f-body)}
.langsw.sm{margin:8px 0 4px}.langsw.sm .chip{padding:3px 9px;font-size:12px;min-height:0}
:root[lang=ar]{--f-body:"IBM Plex Sans Arabic","Golos Text","Segoe UI",system-ui,sans-serif;--f-display:"IBM Plex Sans Arabic","Literata",Georgia,serif}
:root[lang=ar] body{line-height:1.65}
:root[lang=ar] .eyebrow,:root[lang=ar] *{letter-spacing:0!important}
:root[lang=ar] .eyebrow{text-transform:none;font-size:12.5px}
:root[lang=ar] .sn-ar{display:none}
:root[dir=rtl] .ico.dir{transform:scaleX(-1)}
:root[dir=rtl] .toast{transform:translateX(50%);left:auto;right:50%}
:root[dir=rtl] [data-act=mpage] .ico.dir{transform:none}
:root[dir=rtl]{--udir:rtl}
:root[dir=rtl] .mpnav>.row{direction:ltr}

/* Hifz 2.0: язык доступен до и после загрузки JS, крупные касания, RTL. */
.instant-lang{position:fixed;z-index:100;top:max(8px,env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end;font:12px/1.3 system-ui,sans-serif;background:var(--surface);padding:7px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.instant-lang span{font-size:11px;color:var(--muted);margin-inline:6px}
.instant-lang button{cursor:pointer;border:1px solid var(--line);border-radius:8px;padding:7px 9px;background:var(--surface);color:var(--ink);min-height:34px;font-size:13px}
.instant-lang button[aria-pressed="true"]{background:var(--emerald);border-color:var(--emerald);color:var(--on-emerald)}
body:has(.app)>.instant-lang{display:none}
.global-language{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;padding:11px 14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.global-language-caption{font-size:12px;font-weight:700;color:var(--muted)}
.global-switch{display:flex;gap:5px;flex-wrap:wrap}
.global-switch .chip{font-size:14px;min-height:38px;padding:7px 13px;border:1px solid var(--line);background:var(--surface)}
.global-switch .chip[aria-pressed="true"]{background:var(--emerald)!important;color:var(--on-emerald)!important;border-color:var(--emerald)}
.assist-panel{border:1px solid var(--line);background:var(--surface);padding:20px}
.assist-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.assist-step{display:flex;gap:7px;text-align:start;flex-direction:column;align-items:flex-start;border:1px solid var(--line);border-radius:12px;min-height:118px;padding:14px;background:var(--surface-2);cursor:pointer}
.assist-step:hover{border-color:var(--emerald)}
.assist-step b{font-size:15px}
.assist-step small{color:var(--muted);font-size:12px}
.assist-number{font-weight:800;color:var(--emerald-ink);font-size:13px}
.assist-footer{gap:7px}
.audio-console{padding:20px;border-radius:16px;background:var(--surface-2);display:grid;gap:14px;text-align:center;justify-items:center}
.audio-ar{font-family:var(--f-ar);font-size:clamp(26px,4vw,38px)}
.audio-controls{justify-content:center}
.audio-error{color:var(--danger)}
[dir="rtl"] .instant-lang{left:max(10px,env(safe-area-inset-left,0px));right:auto}
[dir="rtl"] .side{padding-left:14px;padding-right:max(14px,env(safe-area-inset-right,0px))}
[dir="rtl"] .main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
[dir="rtl"] .assist-step{text-align:right;align-items:flex-start}
@media(max-width:580px){.instant-lang span{display:none}.assist-grid{grid-template-columns:1fr}.assist-step{min-height:0;display:grid;grid-template-columns:36px 1fr;gap:1px 12px;align-items:center}.assist-number{grid-row:span 2}.assist-step small{grid-column:2}.global-language{padding:8px;justify-content:center}.global-language-caption{width:100%;text-align:center;font-size:10px}.global-switch{width:100%;justify-content:center}.global-switch .chip{min-height:40px;flex:1}.assist-panel{padding:14px}}

/* HIFZ 3.0: cloud account, invitations and teacher interface */
.cloud-shortcut{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;border:1px solid var(--line,#d2d8d1);border-radius:999px;padding:5px 10px;color:inherit;text-decoration:none;font-size:.78rem;background:var(--card,#fff)}
.cloud-shortcut:hover,.cloud-shortcut:focus-visible{outline:2px solid var(--accent,#14735c);outline-offset:2px}
.global-language{flex-wrap:wrap;gap:8px}
#cloud-key,#cloud-url,#cloud-vapid,#teacher-code{direction:ltr;text-align:left;font-family:ui-monospace,monospace}
code{overflow-wrap:anywhere;user-select:all}
.card textarea.input{min-height:80px;resize:vertical}
@media(max-width:720px){.cloud-shortcut{width:100%;justify-content:center}.global-language{align-items:center}}

/* ========== HIFZ 4.0: мединский мусхаф (604 страницы / 15 печатных строк) ==========
 * Работаем исключительно с существующими проверенными словами и разметкой QPC2.
 * Граница, декоративные элементы и фон — оформление, не часть коранического текста.
 */
.madina-spread {align-items:start; padding:3px 0 20px;}
.madina-paper {
  --madina-ink:#201b15;
  --madina-green:#184b3c;
  --madina-gold:#b48f4c;
  display:flex;flex-direction:column;gap:8px;
  width:100%;max-width:750px;min-width:0;
  background:#fffdf7!important;color:var(--madina-ink)!important;
  border-radius:2px;box-shadow:0 2px 5px rgba(55,39,16,.13),0 15px 38px rgba(55,39,16,.12);
  border:5px double var(--madina-gold);padding:clamp(8px,2.6vw,22px)!important;
}
.madina-paper.sepia {background:#f7eccd!important}
.madina-pagehead,.madina-pagefoot{display:flex;justify-content:space-between;gap:8px;align-items:center;color:var(--madina-green);
 font:600 clamp(11px,1.8vw,15px)/1.6 "Amiri Quran","Amiri","Noto Naskh Arabic",serif;
 padding:0 8px;white-space:nowrap}
.madina-pagefoot{justify-content:center;gap:36px;color:var(--madina-gold);font-size:17px}
.madina-frame{position:relative;border:2px solid var(--madina-green);outline:1px solid var(--madina-gold);outline-offset:-6px;
 background:radial-gradient(ellipse at 50% -60%,rgba(189,163,102,.16),transparent 54%),#fffef9;
 padding:clamp(8px,1.9vw,19px) clamp(5px,1.55vw,15px) 12px;min-width:0}
.madina-paper.sepia .madina-frame{background:#faf0d5}
.madina-frame:before,.madina-frame:after{
 content:"❊";position:absolute;top:0;font-size:15px;line-height:18px;color:var(--madina-gold);z-index:1;
 background:#fffef9;padding:2px 3px}
.madina-frame:before{inset-inline-start:0}.madina-frame:after{inset-inline-end:0}
.madina-ornament{color:var(--madina-gold);text-align:center;font-size:13px;line-height:16px}
.madina-ornament-top{margin:-5px 0 3px;letter-spacing:.12em}
.madina-ornament-bottom{margin:6px 0 -5px}
.madina-text{color:var(--madina-ink)!important;font-family:"Amiri Quran","Amiri","Noto Naskh Arabic",serif;
 line-height:2.18!important;width:100%;max-width:100%;overflow:hidden}
.madina-text .qline{display:flex;direction:rtl;flex-flow:row nowrap!important;align-items:baseline;justify-content:space-between;
 padding:0!important;margin:0!important;min-height:2.18em!important;border-radius:2px!important;
 gap:.1em;max-width:100%;white-space:nowrap}
.madina-text .qline.short{justify-content:center;gap:.2em}
.madina-text .qline .w{white-space:nowrap;flex-shrink:0;cursor:pointer;border-radius:3px;touch-action:pan-y;user-select:none;-webkit-user-select:none;
 color:inherit;transition:background .12s}
.madina-text .qline .w:active{background:rgba(199,174,113,.38)}
.madina-text .qline .w:hover{background:rgba(199,174,113,.23)}
.madina-text .qline.today{background:rgba(222,197,125,.32)!important}
.madina-text .qline.learned{background:rgba(104,161,120,.15)!important}
.madina-text .qline.weak{box-shadow:inset -3px 0 0 #c56c41}
.madina-text .qline .w.sel{background:#ead391!important;box-shadow:inset 0 -2px 0 #ad8645}
.madina-text .ayn{color:var(--madina-green)!important;font-family:"Amiri Quran",serif;font-size:.8em;flex-shrink:0}
.madina-text .sh{margin:.25em 0!important;min-height:1.75em;align-items:center;}
.madina-text .sh span{display:block;max-width:100%;color:var(--madina-green)!important;background:transparent!important;
 border:2px double var(--madina-gold)!important;border-radius:4px!important;
 font-family:"Amiri Quran","Amiri",serif;font-size:.68em!important;
 padding:.12em 1.7em!important;line-height:1.8!important;
 box-shadow:inset 0 0 0 2px #faf0d7}
.madina-text .basm{justify-content:center;min-height:2.2em}
.madina-layoutnote{color:inherit}
@media(max-width:660px){
 .madina-spread{margin-inline:-7px!important}
 .madina-paper{border-width:3px;padding:8px!important;box-shadow:0 4px 15px rgba(55,39,16,.08)}
 .madina-frame{padding:8px 5px 10px;outline-offset:-4px}
 .madina-text{line-height:2.08!important}
 .madina-text .qline{min-height:2.08em!important;gap:0}
 .madina-ornament{font-size:10px}
 .madina-pagehead{font-size:12px;padding:0 2px}
 .madina-text .sh span{padding:.04em .7em!important}
}
@media(min-width:661px) and (max-width:1279px){.madina-paper{max-width:720px}}
@media print{
 .side,.mobbar,.madina-spread~*,.mpnav,.madina-layoutnote{display:none!important}
 .madina-paper{box-shadow:none;break-after:page;width:100%}
}

/* Tafsir as-Saadi dialog; always separate from Qur'an words. */
.sheet:has(.saadi-modal){max-height:91dvh;max-width:750px;overscroll-behavior:contain}
.saadi-modal{display:grid;gap:14px;color:var(--ink)}
.saadi-top{display:flex;align-items:start;justify-content:space-between;gap:14px}
.saadi-top h2{font-size:clamp(18px,3.4vw,24px);margin-top:4px}
.saadi-top-orn{font-family:"Amiri Quran",serif;font-size:40px;color:var(--gold);line-height:1}
.saadi-verse{font-family:"Amiri Quran","Amiri",serif;background:var(--gold-soft);border:1px solid var(--line);border-radius:12px;padding:15px;
 font-size:clamp(21px,4vw,30px);line-height:2;text-align:right;color:var(--ink)}
.saadi-verse span{color:var(--emerald-ink);white-space:nowrap}
.saadi-body{font-size:clamp(16px,2.5vw,18px);line-height:1.95;white-space:normal;max-height:43dvh;overflow:auto;padding:5px 8px;
 overflow-wrap:anywhere;overscroll-behavior:contain}
.saadi-body[lang="ar"]{font-family:"Amiri Quran","Noto Naskh Arabic",serif;font-size:clamp(20px,3.1vw,24px);line-height:1.95}
.saadi-source{font-size:12px;margin:0;overflow-wrap:anywhere}
.saadi-state{padding:35px 12px;text-align:center;color:var(--muted)}
.saadi-nav{position:sticky;bottom:0;background:var(--surface);padding:10px 0;z-index:2;border-top:1px solid var(--line)}
.saadi-lang .chip[aria-pressed="true"]{background:var(--emerald);color:var(--on-emerald);border-color:var(--emerald)}