:root{
  --bg:#0f1020;
  --bg2:#171933;
  --card:#1c1f3d;
  --card-hover:#242850;
  --ink:#f3f1e7;
  --muted:#9aa0c3;
  --accent:#f4c430;      /* gold */
  --accent2:#5b8cff;     /* blue */
  --marker:#ffe14d;      /* highlight marker */
  --marker-glow:rgba(255,225,77,.55);
  --done:#7c83b0;
  --line:#2c2f57;
  --good:#43d17a;
  /* semantic panel/surface tokens (switch with theme) */
  --bg-grad:radial-gradient(1200px 700px at 50% -10%,#232653 0%,#0f1020 60%);
  --panel:#12142c;
  --panel2:#161832;
  --canvas-bg:#0c0e20;
  --bar-bg:rgba(20,22,46,.96);
  --modal-bg:linear-gradient(180deg,#1e2143,#181a35);
  --play-bg:radial-gradient(circle at 30% 30%,#2b2f5c,#1a1d3a);
  --grid:rgba(255,255,255,.12);
  --font-torah:"TaameyFrankCLM","Frank Ruhl Libre","Times New Roman",serif;
}
:root[data-theme="light"]{
  --bg:#f4efe1;
  --bg2:#ece5d3;
  --card:#fffdf7;
  --card-hover:#f6f0e1;
  --ink:#241f14;
  --muted:#726a54;
  --accent:#bd8f24;      /* gold, darker for contrast on light */
  --accent2:#2f66d6;     /* blue */
  --marker:#ffe14d;
  --marker-glow:rgba(220,170,30,.45);
  --done:#a99f88;
  --line:#ded4bd;
  --good:#2a9d5b;
  --bg-grad:radial-gradient(1200px 700px at 50% -10%,#fdfaf0 0%,#efe8d6 60%);
  --panel:#f6f1e2;
  --panel2:#efe9d8;
  --canvas-bg:#fbf8ef;
  --bar-bg:rgba(255,253,247,.97);
  --modal-bg:linear-gradient(180deg,#fffdf7,#f5efe0);
  --play-bg:radial-gradient(circle at 30% 30%,#ffffff,#efe6cf);
  --grid:rgba(0,0,0,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg-grad) fixed;
  color:var(--ink);
  font-family:"Assistant","Segoe UI",system-ui,sans-serif;
  direction:rtl;
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}
.wrap{max-width:940px;margin:0 auto;
  padding:calc(18px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 90px calc(16px + env(safe-area-inset-left))}

/* header */
header.top{text-align:center;padding:18px 10px 8px}
header.top .kicker{color:var(--accent);letter-spacing:.14em;font-size:.82rem;font-weight:700}
header.top h1{margin:.25em 0 .1em;font-size:1.6rem;font-weight:800}
/* studentSub = the child's reading title — the main heading under the logo:
   deliberately BIGGER + BOLDER than the parasha/aliyah ref line below it. */
header.top .sub{color:var(--ink);font-size:1.4rem;font-weight:800;margin-top:6px;line-height:1.3}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* logo / hero */
.hero-wrap{display:flex;justify-content:center;margin:4px 0 2px}
.hero-img{height:158px;width:auto;max-width:84%;object-fit:contain;animation:heroIn .6s ease both}
.hero-dark{filter:drop-shadow(0 8px 22px rgba(0,0,0,.45))}
.hero-light{filter:drop-shadow(0 8px 18px rgba(60,50,20,.18))}
@keyframes heroIn{from{transform:translateY(-10px) scale(.96)}to{transform:none}}
/* theme-aware show/hide (used by header + splash) */
.hero-dark{display:block}
.hero-light{display:none}
:root[data-theme="light"] .hero-dark{display:none}
:root[data-theme="light"] .hero-light{display:block}
@media(max-width:560px){ .hero-img{height:132px} }

/* splash */
.splash{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:var(--bg-grad);transition:opacity .5s ease}
.splash.hide{opacity:0;pointer-events:none}
.splash-logo{height:210px;width:auto;max-width:80%;animation:splashPulse 1.5s ease-in-out infinite alternate}
@keyframes splashPulse{from{transform:scale(.99)}to{transform:scale(1.03)}}
@media(max-width:560px){ .splash-logo{height:170px} }
.ref-badge{display:inline-block;margin-top:8px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:5px 14px;color:var(--muted);font-size:.9rem}

/* toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:18px 0 8px}
.btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  background:var(--card);color:var(--ink);border:1px solid var(--line);
  padding:9px 16px;border-radius:12px;font-size:.98rem;font-weight:600;transition:.15s;
}
.btn:hover{background:var(--card-hover);border-color:var(--accent2)}
.btn.primary{background:linear-gradient(180deg,#ffd451,#f4b400);color:#1a1400;border-color:#f4b400}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}
.btn.on{background:var(--accent2);border-color:var(--accent2);color:#fff}
.speed-group{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.speed-group button{background:transparent;border:0;color:var(--muted);padding:9px 12px;cursor:pointer;font-weight:600;font-size:.92rem}
.speed-group button.on{background:var(--accent2);color:#fff}

.hint{text-align:center;color:var(--muted);font-size:.86rem;margin:4px 0 14px}

/* verses */
.verses{display:flex;flex-direction:column;gap:12px}
.verse{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px 16px 16px 18px;transition:.15s;
}
.verse.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(244,196,48,.25),0 10px 30px rgba(0,0,0,.35)}
.verse .num{flex:0 0 auto;min-width:34px;text-align:center;color:var(--accent);font-weight:800;
  font-size:1.05rem;margin-top:6px;font-family:var(--font-torah)}
.play{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;border:1px solid var(--line);
  background:var(--play-bg);transition:.15s;margin-top:2px;
}
.play:hover{border-color:var(--accent);transform:scale(1.06)}
.play svg{width:20px;height:20px;fill:var(--accent)}
.verse.active .play{background:linear-gradient(180deg,#ffd451,#f4b400);border-color:#f4b400}
.verse.active .play svg{fill:#1a1400}
.text{
  font-family:var(--font-torah);
  font-size:1.7rem;line-height:2.15;flex:1;padding-top:2px;letter-spacing:.2px;
}
.text .w{border-radius:6px;padding:2px 3px;transition:background .08s,color .08s;cursor:pointer;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.text .w.hl{
  background:var(--marker);
  color:#1a1400;box-shadow:0 0 14px var(--marker-glow),0 0 0 2px var(--marker);border-radius:5px;
}
.text .w.past{color:var(--done)}
.vbody{flex:1;min-width:0}
.recbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;
  padding-top:12px;border-top:1px dashed var(--line)}
.minibtn{cursor:pointer;user-select:none;font-size:.85rem;font-weight:600;
  padding:6px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel2);color:var(--muted);transition:.15s;white-space:nowrap}
.minibtn:hover{border-color:var(--accent2);color:var(--ink)}
.minibtn.play-full-btn{background:var(--accent);color:#1a1400;border-color:var(--accent);font-weight:700}
.minibtn.play-full-btn:hover{filter:brightness(1.08);color:#1a1400}
.minibtn.rec-btn{color:#ff9a9a;border-color:#5a2a2a}
.minibtn.rec-btn:hover{background:#2a1414;border-color:#ff6b6b;color:#ffd0d0}
.minibtn.rec-stop{background:#ff4d4d;color:#fff;border-color:#ff4d4d;animation:recpulse 1s infinite}
.minibtn.mine-btn{color:var(--accent);border-color:#4a411d}
.minibtn.mine-btn:hover{border-color:var(--accent);color:#ffe9a8}
.minibtn.del-btn:hover{border-color:#ff6b6b;color:#ff9a9a}
.minibtn.share-btn{color:#25d366;border-color:#1f5f3a}
.minibtn.share-btn:hover{background:#0f2a1a;border-color:#25d366;color:#8ff0b5}
.minibtn.cmp-btn{color:var(--accent2);border-color:#25406b}
.minibtn.cmp-btn:hover{border-color:var(--accent2);color:#bcd0ff}
.rec-timer{color:#ff6b6b;font-weight:700;font-variant-numeric:tabular-nums}
@keyframes recpulse{50%{opacity:.5}}

.cmp-result{margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.cmp-head{display:flex;justify-content:space-between;align-items:center;color:var(--accent2);font-weight:700;font-size:.9rem;margin-bottom:6px}
.cmp-x{cursor:pointer;color:var(--muted)}
.cmp-x:hover{color:#ff6b6b}
.cmp-rows{display:flex;flex-direction:column;gap:4px;font-size:.92rem}
.cmp-row>span{color:var(--muted)}
.cmp-row b.good{color:var(--good)}
.cmp-row b.warn{color:#ffcf6b}
.cmp-sub{color:var(--muted);font-size:.82rem}
.cmp-caption{color:var(--muted);font-size:.8rem;margin-top:10px;margin-bottom:2px}
.cmp-canvas{width:100%;height:90px;margin-top:4px;background:var(--canvas-bg);border-radius:8px;display:block}
.cmp-canvas.pitch{height:110px}
.cmp-legend{font-size:.8rem;color:var(--muted);margin-top:5px}
.cmp-legend .dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-inline-start:4px}
.cmp-legend .dot.o{background:var(--accent)}
.cmp-legend .dot.u{background:var(--accent2)}
.cmp-loading{color:var(--muted);font-size:.9rem;padding:6px 0}
.text .w.wgood{border-bottom:3px solid var(--good)}
.text .w.wok{border-bottom:3px solid #ffcf6b}
.text .w.woff{border-bottom:3px solid #ff6b6b}
.cmp-sub .wg{color:var(--good)}
.cmp-sub .wo{color:#ffcf6b}
.cmp-sub .wb{color:#ff6b6b}

@media(max-width:560px){
  .text{font-size:1.4rem;line-height:2.05}
  .play{width:40px;height:40px}
  header.top h1{font-size:1.3rem}
  .minibtn{font-size:.8rem;padding:6px 10px}
}

/* separate short recording box */
.extra{margin:22px 0 6px;background:var(--bg2);border:1px dashed var(--line);border-radius:14px;padding:14px 16px;
  display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.extra .lbl{color:var(--muted);font-size:.95rem}

/* image */
details.img{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 14px}
details.img summary{cursor:pointer;color:var(--accent2);font-weight:700;padding:6px 0}
details.img img{max-width:100%;border-radius:10px;margin-top:10px;background:#fff}

/* sync editor */
.editor{margin-top:20px;background:var(--panel);border:1px solid var(--accent2);border-radius:16px;padding:16px;display:none}
.editor.show{display:block}
.editor h3{margin:.1em 0 .6em;color:var(--accent2)}
.editor .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0}
.editor select,.editor input[type=number]{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:.95rem}
.editor .big{font-size:1.05rem;font-weight:700}
.rec-status{color:var(--accent);font-weight:700}
.editor textarea{width:100%;height:120px;background:var(--canvas-bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px;font-family:monospace;font-size:.8rem;direction:ltr}
.pill{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:.82rem;color:var(--muted)}
.warn-nosync{background:#3a2a12;border:1px solid #6b4d1e;color:#ffd88a;border-radius:12px;padding:10px 14px;margin:10px 0;font-size:.9rem;text-align:center}
:root[data-theme="light"] .warn-nosync{background:#fbefcf;border-color:#e3c778;color:#7a5a12}

/* styled modal dialogs */
.modal-ov{position:fixed;inset:0;background:rgba(6,7,18,.66);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal-box{background:var(--modal-bg);border:1px solid var(--line);
  border-radius:18px;max-width:400px;width:100%;padding:24px 22px 18px;box-shadow:0 24px 70px rgba(0,0,0,.55);
  transform:translateY(12px) scale(.96);opacity:.6;transition:transform .18s,opacity .18s;text-align:center}
.modal-ov.show .modal-box{transform:none;opacity:1}
.modal-box.danger{border-color:#7a3030}
.modal-icon{font-size:2.1rem;line-height:1;margin-bottom:8px}
.modal-title{font-weight:800;font-size:1.12rem;margin-bottom:8px;color:var(--ink)}
.modal-msg{color:var(--ink);font-size:1rem;line-height:1.55;margin-bottom:20px}
.modal-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.modal-btn{cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-weight:700;font-size:.98rem;padding:10px 22px;border-radius:12px;transition:.15s;min-width:100px;font-family:inherit}
.modal-btn:hover{background:var(--card-hover)}
.modal-btn.cancel{background:transparent}
.modal-btn.ok{background:linear-gradient(180deg,#ffd451,#f4b400);color:#1a1400;border-color:#f4b400}
.modal-btn.ok:hover{filter:brightness(1.06)}
.modal-btn.ok.danger{background:linear-gradient(180deg,#ff6f6f,#e23b3b);color:#fff;border-color:#e23b3b}

footer{text-align:center;color:var(--muted);font-size:.8rem;margin-top:30px}

/* floating now-playing bar */
.nowbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));background:var(--bar-bg);
  border:1px solid var(--line);border-radius:14px;padding:10px 16px;display:none;align-items:center;gap:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);backdrop-filter:blur(6px);z-index:50}
.nowbar.show{display:flex}
.nowbar .stop,.nowbar .pausebtn{cursor:pointer;user-select:none;font-weight:700;
  padding:5px 13px;border-radius:999px;border:1px solid;transition:.15s;line-height:1.5}
.nowbar .stop{color:#ff6b6b;border-color:rgba(255,107,107,.45)}
.nowbar .stop:hover{border-color:#ff6b6b;background:rgba(255,107,107,.12)}
.nowbar .pausebtn{color:var(--accent);border-color:rgba(244,196,48,.45);min-width:82px;text-align:center}
.nowbar .pausebtn:hover{border-color:var(--accent);background:rgba(244,196,48,.12)}
.nowbar .np{font-size:.9rem;color:var(--muted)}
.nowbar .np b{color:var(--accent)}

/* ===== reading levels: fonts + continuous (scroll) mode ===== */
/* Self-hosted fonts (GPL + font-exception) that fully render nikud AND
   ta'amei ha-miqra identically on every device.
   "TorahStam" is a CUSTOM font we built: authentic square STA"M scribal
   consonants (Culmus StamAshkenaz — the real Torah-scroll ktav) with the
   nikud+taamim outlines grafted in from Culmus Taamey and positioned by the
   base font's own GPOS anchors. It looks like Guttman Stam but is free and
   renders the marks everywhere (the plain StamAshkenaz ships those glyphs
   EMPTY, which is why phones showed consonants only).
   "TaameyFrankCLM" = Frank-Ruhl look + marks for level 1 (Google's Frank Ruhl
   Libre has no cantillation glyphs). */
@font-face{
  font-family:"TorahStam";
  src:url('fonts/TorahStamAshkenaz.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:"TaameyFrankCLM";
  src:url('fonts/TaameyFrankCLM-Medium.ttf') format('truetype');
  font-display:swap;
}
/* levels 2-4: STA"M / Torah-scroll stack. TorahStam first so every device
   (phone, PC, future students) sees the SAME correct rendering; "Guttman Stam"
   kept only as a safety fallback if TorahStam ever fails to load. */
.verses[data-level="2"] .text,
.verses[data-level="3"] .text,
.verses[data-level="4"] .text{
  font-family:"TorahStam","Guttman Stam","Frank Ruhl Libre",serif;
  line-height:2.05;
}
/* level 4: continuous scroll, reading/exam mode (no verse chrome, no per-verse tools) */
.verses[data-level="4"]{display:block;text-align:justify;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.verses[data-level="4"] .verse{display:inline;background:transparent;border:0;box-shadow:none;padding:0;margin:0}
.verses[data-level="4"] .verse.active{box-shadow:none}
.verses[data-level="4"] .verse .play,
.verses[data-level="4"] .verse .num,
.verses[data-level="4"] .recbar,
.verses[data-level="4"] .cmp-result{display:none}
.verses[data-level="4"] .vbody{display:inline}
.verses[data-level="4"] .text{display:inline;font-size:1.55rem;line-height:2.25}

/* level selector buttons */
.level-group{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.level-group button{background:transparent;border:0;border-inline-start:1px solid var(--line);color:var(--muted);
  padding:9px 13px;cursor:pointer;font-weight:700;font-size:.9rem;font-family:inherit}
.level-group button:first-child{border-inline-start:0}
.level-group button.on{background:var(--accent2);color:#fff}

/* level 4: whole-passage record & compare bar */
.level4bar{display:none;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px auto 0;max-width:940px}
#level4result{max-width:940px;margin:12px auto 0}

/* current-level title above the passage */
.level-title{text-align:center;margin:2px 0 14px;font-size:1.05rem;color:var(--ink);font-weight:700}
.level-title b{color:var(--accent)}