/* country flags drawn the same everywhere (Windows has no flag emoji): Twemoji flags, CC-BY 4.0 */
@font-face{font-family:"Hifzi Flags";src:url("../fonts/flags.woff2") format("woff2");unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E007F;font-display:swap}
:root{
  --bg:#f1f5f3; --surface:#ffffff; --page:#fbfbf6; --ink:#16302b; --muted:#5b716b; --line:#d5dfdb;
  --primary:#0f6b5f; --primary-ink:#ffffff; --gold:#a9781b;
  --rod:#a1396a; --moh:#275fae; --sel:#6a45ad; --kgr:#2f7d32; --kor:#b4521a; --ktl:#0e7c86; --good:#1c7f45; --warn:#9a5c00; --bad:#b33434; --soft:#e6eeeb; --hl:#fff2c9;
  --f-ui:"Hifzi Flags","Readex Pro","Segoe UI",Tahoma,sans-serif;
  --f-q:"Amiri Quran","Amiri","Geeza Pro","Traditional Arabic",serif;
  --f-d:"Aref Ruqaa","Amiri",serif;
}
/* Theme: html[data-theme=auto|light|dark] and html[data-accent=green|blue|purple|brown], set in app.js */
:root{color-scheme:light}
:root[data-accent=blue]{--primary:#1d5fa6}
:root[data-accent=purple]{--primary:#6a3fa0}
:root[data-accent=brown]{--primary:#8a5a12}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0d1615; --surface:#152220; --page:#1a2927; --ink:#e5efec; --muted:#9bafaa; --line:#2b3d39;
  --primary:#42b8a5; --primary-ink:#05201c; --gold:#e2b85c;
  --rod:#e88db6; --moh:#8ab5f2; --sel:#bda6f2; --kgr:#7fd18a; --kor:#f2a46b; --ktl:#6fd3dc; --good:#62d090; --warn:#eaab4c; --bad:#f28c8c; --soft:#1e302d; --hl:#3a3413; color-scheme:dark}
  :root:not([data-theme=light])[data-accent=blue]{--primary:#6fa8ee;--primary-ink:#061a33}
  :root:not([data-theme=light])[data-accent=purple]{--primary:#b597ee;--primary-ink:#1b0b33}
  :root:not([data-theme=light])[data-accent=brown]{--primary:#e0ad55;--primary-ink:#2a1a00}}
:root[data-theme=dark]{
  --bg:#0d1615; --surface:#152220; --page:#1a2927; --ink:#e5efec; --muted:#9bafaa; --line:#2b3d39;
  --primary:#42b8a5; --primary-ink:#05201c; --gold:#e2b85c;
  --rod:#e88db6; --moh:#8ab5f2; --sel:#bda6f2; --kgr:#7fd18a; --kor:#f2a46b; --ktl:#6fd3dc; --good:#62d090; --warn:#eaab4c; --bad:#f28c8c; --soft:#1e302d; --hl:#3a3413; color-scheme:dark}
:root[data-theme=dark][data-accent=blue]{--primary:#6fa8ee;--primary-ink:#061a33}
:root[data-theme=dark][data-accent=purple]{--primary:#b597ee;--primary-ink:#1b0b33}
:root[data-theme=dark][data-accent=brown]{--primary:#e0ad55;--primary-ink:#2a1a00}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.6;
  padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
#app{max-width:760px;margin:0 auto;padding-inline:16px;padding-block:20px 48px;display:flex;flex-direction:column;gap:18px}
h1,h2,h3,p{margin:0}
h1{font-family:var(--f-d);font-size:2.2rem;line-height:1.3;text-wrap:balance}
h2{font-size:1.25rem;font-weight:600}
h3{font-size:1rem;font-weight:600}
.muted{color:var(--muted)} .small{font-size:.875rem}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn{min-height:48px;padding:10px 18px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--ink)}
.btn.pri{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn.good{border-color:var(--good);color:var(--good)}
.btn.bad{border-color:var(--bad);color:var(--bad)}
.btn.sm{min-height:40px;padding:6px 12px;font-size:.875rem}
.btn:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.sp{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:12px}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.back{border:none;background:none;color:var(--primary);font-weight:600;min-height:44px;padding:0 4px}
.kids{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:12px}

.kid{--c:var(--primary);text-align:start;border:2px solid var(--c);background:var(--surface);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:6px;min-height:130px}
.c-pink{--c:var(--rod)} .c-blue{--c:var(--moh)} .c-purple{--c:var(--sel)} .c-green{--c:var(--kgr)} .c-orange{--c:var(--kor)} .c-teal{--c:var(--ktl)}
.dot{width:14px;height:14px;border-radius:50%;background:var(--c);flex:none}
.kidrow{padding-block:8px;border-bottom:1px solid var(--line)}
.kidrow.add{border-bottom:none;display:flex;flex-direction:column;gap:10px;padding-top:12px}
.kidrow.edit{display:flex;flex-direction:column;gap:10px}
input[type=text]{min-height:46px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);padding:6px 10px;width:100%;font-size:16px}
.seg.kidseg{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
/* home header: title on the start side, date and time on the end side */
.hero{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.lang{align-self:flex-start;border:1.5px solid var(--line);background:var(--surface);color:var(--primary);border-radius:99px;padding:4px 14px;min-height:34px;font-weight:600;font-size:.85rem}
/* the top bar (home): app and logo | date, hijri and clock | language and the owner's crown; on phones the date goes on its own line */
.appbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 14px;margin:-4px 0 14px;background:var(--surface);border:1.5px solid var(--line);border-radius:18px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand .logo{width:44px;height:44px;border-radius:11px;flex:none}
.brand h1{font-size:1.6rem;margin:0;line-height:1.1}
/* the other side: language and the crown at the very top, then the clock, then the dates one under the other */
.barside{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:0}
.barend{display:flex;align-items:center;gap:6px}
.when{display:flex;flex-direction:column;align-items:flex-end;text-align:end;font-size:.8rem;color:var(--muted);line-height:1.45}
.when b{color:var(--ink);font-weight:700}
.when .clock{color:var(--ink);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}
.turn-note{color:var(--primary);font-weight:600;min-height:1.2em}
.turn-note:empty{display:none}
.ayat .a.turn{background:var(--soft);outline:2px dashed var(--primary);outline-offset:2px}
.extlink{color:var(--primary)}
/* Quran text stays right-to-left even when the app is in English */
.ayat,.bsm,.rc,.qprompt,.opt,.ay .q,.missed,.heard,.heard-inline,.qtext{direction:rtl;unicode-bidi:isolate}
.kid b{font-family:var(--f-d);font-size:2rem;color:var(--c);line-height:1.3}
.stars{color:var(--gold);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.stars svg{width:18px;height:18px;fill:currentColor}
.task{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
button.task{text-align:start;width:100%}
.chip{font-size:.8rem;font-weight:600;padding:2px 10px;border-radius:99px;background:var(--soft);color:var(--ink);white-space:nowrap}
.chip.new{color:var(--primary)} .chip.done{color:var(--warn)} .chip.approved{color:var(--good)} .chip.redo{color:var(--bad)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.steps button{min-height:46px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);font-weight:500}
.steps button[aria-current="true"]{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.page{background:var(--page);border:1px solid var(--line);border-radius:14px;padding:18px 16px}
.ayat{font-family:var(--f-q);font-size:1.75rem;line-height:2.5;text-align:justify}
.ayat .a{border-radius:8px;cursor:pointer}
.ayat .a.on{background:var(--hl)}
.bsm{font-family:var(--f-q);font-size:1.6rem;line-height:2.4;text-align:center;color:var(--primary)}
.an{color:var(--gold)}
.player{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom,0px));background:var(--surface);border:1.5px solid var(--primary);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.player .ctl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.player label{font-size:.78rem}
.player select{min-height:40px}
.playbtn{min-width:120px}
.ay{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.ay .q{font-family:var(--f-q);font-size:1.5rem;line-height:2.3}
.ay.ok{border-color:var(--good)} .ay.no{border-color:var(--bad)}
.rc{font-family:var(--f-q);font-size:1.6rem;line-height:2.5}
.rc .w.ok{color:var(--good)} .rc .w.miss{color:var(--bad);text-decoration:underline wavy}
.rc .w.next{border-bottom:3px solid var(--primary)!important}
.rc .w.hid{color:transparent;border-bottom:2px solid var(--line);border-radius:0;user-select:none}
.heard{background:var(--soft);border-radius:10px;padding:10px 12px;min-height:48px;font-size:1.05rem}
.mic{min-height:64px;font-size:1.1rem;border-radius:99px}
.mic.on{background:var(--bad);border-color:var(--bad);color:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.75}}
@media (prefers-reduced-motion:reduce){.mic.on{animation:none}}
.qprompt{font-family:var(--f-q);font-size:1.55rem;line-height:2.3;background:var(--page);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.opt{font-family:var(--f-q);font-size:1.35rem;line-height:2.1;text-align:start;min-height:56px;padding:8px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);width:100%}
.opt.right{border-color:var(--good);background:var(--soft);color:var(--good)}
.opt.wrong{border-color:var(--bad);color:var(--bad)}
.opt .ord{font-family:var(--f-ui);font-size:.85rem;font-weight:600;color:var(--primary);margin-inline-end:8px}
.bar{height:8px;border-radius:99px;background:var(--soft);overflow:hidden}
.bar i{display:block;height:100%;background:var(--primary)}
.big{font-size:2.6rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
form.card,.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
label{font-size:.875rem;font-weight:500;display:flex;flex-direction:column;gap:4px;min-width:0}
select,input[type=range]{width:100%;min-height:40px;accent-color:var(--primary)}
select{border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);padding:6px 10px;font-size:16px}
input[type=number],input[type=password]{min-height:46px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);padding:6px 10px;width:100%;font-size:16px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.seg label{flex-direction:row;align-items:center;justify-content:center;min-height:46px;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0}
.seg label:has(input:checked){background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{flex-direction:row;align-items:center;gap:8px;min-height:44px}
.check input{width:22px;height:22px}
.note{background:var(--soft);border-radius:10px;padding:10px 12px;font-size:.875rem}
.err{color:var(--bad);font-size:.875rem}
.empty{border:1.5px dashed var(--line);border-radius:14px;padding:22px;text-align:center;color:var(--muted)}
.meta{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:.875rem;color:var(--muted)}
.missed{font-family:var(--f-q);font-size:1.15rem;color:var(--bad);line-height:2}
footer{font-size:.78rem;color:var(--muted);text-align:center}
footer a{color:inherit}
.res{display:flex;flex-direction:column;gap:6px}
.res:empty{display:none}
.pickbtn{min-height:46px;text-align:start;padding:8px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);font-weight:500}
.picked{font-size:.95rem}
input[type=search]{min-height:46px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);padding:6px 10px;width:100%;font-size:16px;-webkit-appearance:none;appearance:none}
textarea{width:100%;min-height:90px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);padding:8px 10px;font-size:14px;direction:ltr}
.steps-list{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:6px}
.pitem{align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:.95rem}
.pitem.bad{border-color:var(--bad)}
.rtl-text{direction:rtl;text-align:right}
textarea.rtl-text{font-family:var(--f-ui);font-size:16px}
.pold{align-items:flex-start;background:var(--soft);border-radius:10px;padding:8px 10px;font-size:.9rem}
.report summary{cursor:pointer;min-height:32px}
.rep{margin:6px 0 0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px}
/* kid photos */
.ava{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--c,var(--line));background:var(--soft);flex:none}
.ava.xs{width:28px;height:28px}
.ava.sm{width:56px;height:56px}
.ava.lg{width:96px;height:96px}
.empty-ava{display:inline-block}
.kidhead{display:flex;align-items:center;gap:14px}
.photo-field{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filebtn{cursor:pointer}
input[type=date]{min-height:46px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);padding:6px 10px;width:100%;font-size:16px}
/* iPhone/iPad Safari gives date and time boxes a width of their own that can stick out of the card */
input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%}
input[type=date]::-webkit-date-and-time-value{text-align:start;min-height:1.4em}
/* adhkar on the kid's page */
.dhikr{font-family:var(--f-q);font-size:1.35rem;line-height:2;text-align:center;color:var(--primary);background:var(--soft);border-radius:14px;padding:12px 14px;transition:opacity .4s;min-height:3.2em;display:flex;align-items:center;justify-content:center}
.dhikr.fade{opacity:0}
.lesson{font-size:.9rem;font-weight:600;color:var(--gold);margin-top:4px}
/* dialog before adding new tasks */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}
.modal .card{max-width:440px;width:100%;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.kdate{color:var(--gold);font-weight:600}
.ok-msg{color:var(--good);font-size:.875rem}
.linkbtn{align-self:center;border:none;background:none;color:var(--primary);text-decoration:underline}
input[type=email],input[type=tel]{min-height:46px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);padding:6px 10px;width:100%;font-size:16px}
/* parent panel */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start;border:1.5px solid var(--line);background:var(--surface);border-radius:16px;padding:16px;min-height:120px}
.tile b{font-size:1.05rem}
.ticon{font-size:1.8rem;line-height:1}
.sgroup{display:flex;flex-direction:column;gap:10px}
.sgroup>h2{border-bottom:2px solid var(--soft);padding-bottom:4px}
h3.sec{margin-top:4px}
.alert{border-inline-start:4px solid var(--bad);display:flex;flex-direction:column;gap:8px}
.alert .btn{align-self:flex-start}
/* on/off switch */
.switch{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-size:1rem;cursor:pointer;position:relative}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch i{flex:none;width:52px;height:30px;border-radius:99px;background:var(--line);position:relative;transition:background .2s}
.switch i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:inset-inline-start .2s}
.switch input:checked+i{background:var(--primary)}
.switch input:checked+i::after{inset-inline-start:25px}
.switch input:focus-visible+i{outline:3px solid var(--gold);outline-offset:2px}
/* symbol avatars and the photo picker */
.ava.emo{display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem;line-height:1;background:var(--soft)}
.ava.xs.emo{font-size:1rem}
.ava.sm.emo{font-size:2rem}
.ava.lg.emo{font-size:3.2rem}
.photo-box{display:flex;flex-direction:column;gap:10px}
.icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px}
.iconbtn{font-size:1.6rem;min-height:48px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface)}
.iconbtn.on{border-color:var(--primary);background:var(--soft)}
.bday{font-size:1.05rem;font-weight:600;text-align:center;border-inline-start:4px solid var(--gold)}
.kidhead h2{margin:0}
/* one add button in the tasks section */
.addbar{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom,0px));background:var(--bg);padding-top:6px;display:flex;flex-direction:column;gap:6px;z-index:2}
.addall{min-height:56px;font-size:1.1rem;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.pkid{min-height:34px;padding:2px 8px;font-size:14px;width:auto}
/* report document: a white page in both themes, ready for printing */
.rdoc{--rod:#a1396a;--moh:#275fae;--sel:#6a45ad;--kgr:#2f7d32;--kor:#b4521a;--ktl:#0e7c86;
  background:#fff;color:#16302b;border-radius:14px;border:1px solid #d5dfdb;padding:18px;display:flex;flex-direction:column;gap:16px;box-shadow:0 4px 18px rgba(0,0,0,.08);font-family:var(--f-ui)}
.rhead{display:flex;justify-content:space-between;align-items:center;gap:12px;background:linear-gradient(135deg,#0f6b5f,#14857a);color:#fff;border-radius:12px;padding:16px 18px}
.rhead h1{font-family:var(--f-ui);font-size:1.25rem;font-weight:600;color:#fff}
.rhead p{font-size:.85rem;opacity:.9;margin-top:4px}
.rlogo{font-family:var(--f-d);font-size:1.8rem;color:#ffe7a8;flex:none}
.rkid{border:2px solid var(--c);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px;break-inside:avoid-page}
.rkid-top{display:flex;align-items:center;gap:12px}
.rkid-top h2{font-family:var(--f-d);font-size:1.6rem;color:var(--c);line-height:1.2}
.rkid-top p{color:#5b716b;font-size:.9rem}
.rkid .ava{border-color:var(--c);background:#eef3f1}
.rstats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rstats span{background:#f1f5f3;border-radius:10px;padding:8px 6px;text-align:center;font-size:.75rem;color:#5b716b;display:flex;flex-direction:column;gap:2px}
.rstats b{font-size:1.2rem;color:#16302b}
.rstats .s-ok{background:#d8f0df}.rstats .s-done{background:#fce9c9}.rstats .s-new{background:#edeff0}
.rtable{width:100%;border-collapse:collapse;font-size:.78rem}
.rtable th{background:#0f6b5f;color:#fff;font-weight:600;padding:7px 5px;text-align:start}
.rtable td{border-bottom:1px solid #e3ebe8;padding:6px 5px;vertical-align:top}
.rtable tbody tr:nth-child(even) td{background:#f7faf9}
.rtable .num{text-align:center;white-space:nowrap}
.rchip{display:inline-block;border-radius:99px;padding:1px 8px;font-weight:600;white-space:nowrap;font-size:.72rem}
.rchip.approved{background:#d8f0df;color:#1c7f45}.rchip.done{background:#fce9c9;color:#9a5c00}.rchip.redo{background:#f8d4d4;color:#b33434}.rchip.new{background:#edeff0;color:#3d4f4a}
.rkid h3{font-size:.9rem;color:#5b716b}
.rmuted{color:#5b716b;font-size:.9rem}
.rfoot{text-align:center;font-size:.75rem;color:#5b716b;border-top:1px solid #e3ebe8;padding-top:8px}
@media (max-width:520px){.rstats{grid-template-columns:repeat(3,1fr)}.rtable{font-size:.7rem}}
@media print{
  @page{size:A4;margin:10mm}
  html,body{background:#fff!important}
  body{padding:0}
  #app{max-width:none;padding:0}
  .no-print,.modal{display:none!important}
  .rdoc{border:none;box-shadow:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rstats{grid-template-columns:repeat(5,1fr)}
  .rtable{font-size:9pt}
}
/* report preview: the same A4 pages that go into the PDF */
.rpages{display:flex;flex-direction:column;gap:14px}
.rpage{width:100%;height:auto;border-radius:6px;box-shadow:0 4px 18px rgba(0,0,0,.15);background:#fff}
/* report page: recipients and actions */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.rchip-mail{display:inline-flex;align-items:center;gap:6px;background:var(--soft);border-radius:99px;padding:4px 6px 4px 12px;font-size:.85rem}
.rchip-mail button{border:none;background:var(--surface);border-radius:50%;width:26px;height:26px;line-height:1;font-size:1rem;color:var(--bad)}
.rcp-add input{flex:1;min-width:0}
.actgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.actgrid .btn{white-space:normal;text-align:center}
details.small summary{cursor:pointer;color:var(--primary)}
.allkid{background:var(--hl);border-radius:12px;padding:10px 12px;font-weight:600}
/* mic recitation */
.rc .w.help{color:var(--warn);background:var(--hl);border-radius:6px}
.rc .an.ayok{color:var(--good);font-weight:700}
.perayah{display:flex;flex-wrap:wrap;gap:6px}
.perayah span{font-size:.8rem;border-radius:99px;padding:3px 10px;background:var(--soft)}
.perayah .good{color:var(--good)}.perayah .mid{color:var(--warn)}.perayah .low{color:var(--bad)}
/* certificates */
.lbl{display:block;font-size:.875rem;font-weight:500;margin-bottom:4px}
.cpage{border-radius:4px}
.certlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.certlist li{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px}
.certlist li:last-child{border-bottom:none;padding-bottom:0}
.designs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dchip{display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 10px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font-weight:500;text-align:start}
.dchip .sw{width:30px;height:30px;border-radius:8px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.dchip.on{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary)}
.juzgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.subjs{display:flex;flex-wrap:wrap;gap:6px}
.jz{min-height:42px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);font-weight:600}
.jz.wide{padding:6px 12px;font-weight:500;font-size:.9rem}
.dchip{font-size:.9rem}
.jz.on{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.spick{max-height:260px;overflow-y:auto;border:1.5px solid var(--line);border-radius:10px;padding:4px 10px;margin-top:6px;background:var(--bg)}
.spick .check{min-height:40px}
.picked-s{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.mt{margin-top:10px}
.btn.bio{width:100%;min-height:56px;font-size:1.05rem}
.nudge .row{margin-top:8px}
/* parent panel: settings tile, settings menu */
.tile.wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px;min-height:72px;width:100%;margin-top:12px}
.mtx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;text-align:start}
.menu{display:flex;flex-direction:column;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;overflow:hidden}
.mrow{display:flex;align-items:center;gap:14px;padding:14px 16px;min-height:68px;border:none;border-bottom:1px solid var(--line);background:none;text-align:start;width:100%}
.mrow:last-child{border-bottom:none}
.mrow .ticon{font-size:1.5rem}
.chev{color:var(--muted);font-size:1.4rem}
/* memorization map */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chipbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 14px;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);font-weight:500}
.chipbtn.on{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.mapsum{margin:0 0 4px;color:var(--muted)}
.mapsum>div:last-child{flex:1;display:flex;flex-direction:column;gap:6px}
.mapsum .big{color:var(--primary)}
.mapseg{max-width:320px}
.juzmap{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.jcell{border:1.5px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--surface);display:flex;flex-direction:column;gap:4px;min-width:0}
.jcell .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jcell.part{border-color:color-mix(in srgb,var(--good) 45%,var(--line))}
.jcell.full{border-color:var(--good);background:color-mix(in srgb,var(--good) 12%,var(--surface))}
.jcell .bar i,.progcard .bar i{background:var(--good)}
.smap{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
@media (min-width:560px){.smap{grid-template-columns:repeat(3,1fr)}.juzmap{grid-template-columns:repeat(5,1fr)}}
.scell{display:block;text-align:start;border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface);font-size:.92rem;min-height:44px;font-family:inherit;color:var(--ink)}
.scell.full{background:var(--good);border-color:var(--good);color:#fff}
.scell.part{background:color-mix(in srgb,var(--good) 18%,var(--surface));border-color:color-mix(in srgb,var(--good) 50%,var(--line))}
.scell.open{border-color:var(--warn);border-style:dashed}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.legend .lg{display:inline-block;width:14px;height:14px;border-radius:4px;border:1.5px solid var(--line);vertical-align:middle}
.legend .lg.full{background:var(--good);border-color:var(--good)}
.legend .lg.part{background:color-mix(in srgb,var(--good) 18%,var(--surface));border-color:color-mix(in srgb,var(--good) 50%,var(--line))}
.legend .lg.open{border-color:var(--warn);border-style:dashed}
.progcard{width:100%;text-align:start;cursor:pointer;color:var(--ink);font:inherit}
/* spaced review */
.revlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.revlist li{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px}
.revlist li:last-child{border-bottom:none;padding-bottom:0}
.card h3 .ava.xs{vertical-align:middle}
.mapseg{flex:1;min-width:190px}
/* kid awards */
.celebrate{display:block;width:100%;text-align:start;font:inherit;color:var(--ink);background:color-mix(in srgb,var(--gold) 18%,var(--surface));border:1.5px solid var(--gold);font-weight:600;font-size:1rem;cursor:pointer}
.celebrate .row{margin-top:8px}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (min-width:560px){.badges{grid-template-columns:repeat(4,1fr)}}
.badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:10px 6px;border-radius:14px;border:1.5px dashed var(--line);background:var(--surface);opacity:.55;filter:grayscale(1)}
.badge.got{opacity:1;filter:none;border:1.5px solid var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--surface))}
.badge .bicon{font-size:1.9rem;line-height:1.2}
.badge b{font-size:.85rem;line-height:1.3}
.kcert.new{border-color:var(--gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 40%,transparent)}
.kidlinks .progcard{display:flex;flex-direction:column;gap:6px;padding:12px;justify-content:space-between}
.recbox .row{align-items:center}
.recdot{width:14px;height:14px;border-radius:50%;background:var(--bad);animation:pulse 1s infinite}
[data-act=voice-play].playing{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
/* new release ready */
.updbar{position:fixed;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;max-width:656px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:14px;background:var(--surface);border:1.5px solid var(--primary);box-shadow:0 6px 20px rgba(0,0,0,.18);font-weight:600}
/* sync */
.choice{display:flex;align-items:center;gap:14px;width:100%;min-height:84px;padding:16px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);text-align:start;color:var(--ink);font:inherit}
.choice .ticon{font-size:2rem}
.paircode{font-size:2.4rem;font-weight:700;letter-spacing:.15em;text-align:center;color:var(--primary);margin:6px 0;font-variant-numeric:tabular-nums}
.syncchip{display:inline-block;font-size:.8rem;font-weight:600;padding:2px 10px;border-radius:99px;background:var(--soft);margin-top:4px}
.syncchip.ok{color:var(--good)} .syncchip.err{color:var(--bad)} .syncchip.offline{color:var(--warn)}
details.card>summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.qrbox{width:220px;max-width:70%;margin:8px auto;background:#fff;padding:8px;border-radius:12px}
.qrbox svg{display:block;width:100%;height:auto}
.scanbox{position:fixed;inset:0;z-index:60;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;color:#fff;text-align:center}
.scanbox video{width:100%;max-width:420px;border-radius:16px;border:3px solid var(--gold)}
.admstats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:560px){.admstats{grid-template-columns:repeat(4,1fr)}}
.admstats div{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:10px;text-align:center;display:flex;flex-direction:column}
.admstats b{font-size:1.7rem;color:var(--primary);font-variant-numeric:tabular-nums}
.certlist li.fam.blocked{opacity:.7}
code.uid{font-size:.75rem;word-break:break-all}
/* usage report */
.admstats.sm b{font-size:1.15rem;line-height:1.35}
.usebars{display:flex;align-items:flex-end;gap:3px;height:140px;padding-top:6px}
.usebars .ub{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.usebars .ub i{display:block;width:100%;max-width:26px;background:var(--primary);border-radius:6px 6px 2px 2px;min-height:0}
.usebars .ub span{font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}
.usetable{width:100%;border-collapse:collapse}
.usetable th{font-size:.8rem;color:var(--muted);font-weight:600;text-align:start;padding:6px 4px;border-bottom:1.5px solid var(--line)}
.usetable td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:middle}
.usetable tr.none td{opacity:.65}
.chip.warn{color:var(--warn)}
.phonein{display:flex;align-items:center;gap:8px;margin-top:6px}
.phonein b{flex:none;font-variant-numeric:tabular-nums}
.phonein input{flex:1;min-width:0;margin-top:0}
/* home: doors to the family area, settings and the owner's panel */
.doors{display:grid;grid-template-columns:1fr;gap:10px;margin-top:4px}
@media (min-width:640px){.doors{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.door{display:flex;align-items:center;gap:14px;padding:14px 16px;min-height:76px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);text-align:start;width:100%}
.door .ticon{font-size:1.8rem}
.door b{font-size:1.08rem}
.door.hot{border-color:var(--gold)}
.linkbtn.center{display:block;margin:6px auto 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.seg.tabs{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);margin:12px 0}
.seg.tabs .chipbtn{justify-content:center;padding:4px 8px;font-size:.9rem}
#fam-q{width:100%;margin-bottom:10px}
/* memorized: surahs, juz' and ayat, each with its own percentage */
.mapbreak{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;width:100%}
.mapbreak div,.mapbreak .mbc{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--soft);border-radius:12px;padding:8px 4px;gap:1px}
.mapbreak b{font-size:1.25rem;color:var(--primary);font-variant-numeric:tabular-nums}
.seg.tabs{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
label.radio{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;margin:8px 0;cursor:pointer}
label.radio.on{border-color:var(--primary);background:var(--soft)}
label.radio input{margin-top:4px;width:auto;min-height:0}
/* icon toolbar at the top of reports */
.toolbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:8px;margin:4px 0 14px}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:66px;padding:8px 4px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink)}
.tool span{font-size:1.45rem;line-height:1}
.tool small{font-size:.74rem;font-weight:600;text-align:center;line-height:1.2}
.tool.pri{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
/* home: the language button, and the owner's crown */
.herobar{display:flex;gap:8px;align-items:center}
.crown{border:1.5px solid var(--gold);background:var(--hl);border-radius:99px;min-height:34px;min-width:44px;padding:2px 10px;font-size:1.15rem;line-height:1}

/* wide screens (computer, iPad landscape): a wider page like دوامي for home and the parent pages */
@media (min-width:900px){
  body[data-view="home"] #app,body[data-view="parent"] #app,body[data-view="kid"] #app{max-width:1080px}
  .kids{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .doors{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
/* iPad portrait */
@media (min-width:600px) and (max-width:899px){.kid b{font-size:1.7rem}.kid{padding:14px}}
/* the 🏠 button on inner pages */
.homebtn{margin-inline-start:auto;border:1.5px solid var(--line);background:var(--surface);border-radius:99px;min-height:38px;min-width:44px;padding:2px 10px;font-size:1.05rem}
.top .homebtn+.btn,.top .btn+.homebtn{margin-inline-start:6px}
/* the owner's display preview */
.previewcard{max-width:min(1040px,calc(100vw - 24px))!important;max-height:calc(100vh - 24px);overflow:auto}
.pframe{margin:8px auto 0;border:6px solid var(--ink);border-radius:22px;overflow:hidden;background:var(--bg)}
.pframe iframe{border:0;transform-origin:top left;display:block}
[dir="rtl"] .pframe iframe{transform-origin:top right}
/* phones: the kids side by side as small squares (photo, name, open tasks, stars) */
@media (max-width:540px){
  .kids{grid-template-columns:repeat(var(--cols,3),1fr);gap:8px}
  .kid{align-items:center;text-align:center;min-height:0;padding:10px 6px;gap:3px;border-radius:16px}
  .kid>.ava{width:52px;height:52px}
  .kid>b{font-size:1.15rem;line-height:1.25;word-break:break-word}
  .kid>span:not(.kdate):not(.stars){font-size:.78rem}
  .kid>.kdate{display:none}
  .kid>.stars{font-size:.85rem}
}
/* iPad and small laptops: a little smaller so the whole home page (adhkar too) fits on the screen */
@media (min-width:600px) and (max-width:1199px){
  html{font-size:93%}
  .kid{padding:12px;min-height:0;gap:4px}
  .kid b{font-size:1.55rem}
  .ava.sm{width:50px;height:50px}
}
.crown{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;padding:3px 10px;border-radius:14px}
.crown small{font-size:.6rem;font-weight:700;color:var(--gold);margin-top:1px}
/* home: the adhkar right under the top bar on iPad and computer (a small gap); at the bottom on phones */
@media (min-width:600px) and (max-width:999px){.appbar+.dhikr,.appbar+.homecols>.homemain>.dhikr:first-child{margin-top:-26px}}
@media (min-width:1000px){.appbar+.dhikr,.appbar+.homecols{margin-top:-26px}}
@media (max-width:599px){body[data-view="home"] .homemain>.dhikr{order:1}body[data-view="home"] #app>footer{order:2}}
/* 📻 Quran radio: the station list, and the bar on the home page while a station is on */
.stations{display:grid;gap:10px}
@media (min-width:640px){.stations{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.station{display:flex;align-items:center;gap:12px;width:100%;text-align:start;padding:12px 14px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);min-height:64px}
.station .sflag{font-size:1.9rem;line-height:1}
.station .mtx{flex:1;display:flex;flex-direction:column;gap:2px}
.station .splay{font-size:1.3rem}
.station.on{border-color:var(--primary);background:var(--soft)}
.station.err{border-color:var(--bad,#c0392b)}
.radiomini{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1.5px solid var(--primary);border-radius:16px;background:var(--soft)}
.radiomini.err{border-color:var(--bad,#c0392b)}
.radiomini .rmain{flex:1;display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--ink);text-align:start;padding:2px;min-height:44px}
.radiomini .rico{font-size:1.6rem}
.radiomini .mtx{display:flex;flex-direction:column;gap:1px}
.radiomini .rbtn{min-width:44px;min-height:44px;border:1.5px solid var(--line);border-radius:99px;background:var(--surface);font-size:1.1rem}
@media (min-width:600px){.dhikr+.radiomini{margin-top:-10px}}
.task .offl{color:var(--good);font-weight:600}
.dlnote{margin:-6px 0 0}
.stations .shead{grid-column:1/-1;margin:8px 0 0;font-size:1rem;color:var(--muted)}
/* tab buttons (radio, library) */
.seg>button{min-height:44px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-weight:600;padding:4px 8px}
.seg>button.on{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.seg>button small{opacity:.8;font-weight:500}
.chip2{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:99px;padding:4px 12px;min-height:38px;font:inherit;font-size:.9rem}
.chip2.on{border-color:var(--primary);background:var(--soft);font-weight:700}
.chip2 small{color:var(--muted)}
/* a country's flag as a round badge (🎙️ when the country isn't known) */
.cflag{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--soft);font-size:1.25rem;line-height:1;flex:none;box-shadow:inset 0 0 0 1.5px var(--line)}
.cflag.big{width:48px;height:48px;font-size:1.8rem}
.cflag.sm{width:auto;height:auto;background:none;box-shadow:none;font-size:1.1rem}
/* radio stations: flag badge with the country under it, and a coloured label for station / reciter */
.station .sbadge{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px}
.station .sbadge small{font-size:.72rem;color:var(--muted);text-align:center;line-height:1.2}
.station .kind{align-self:flex-start;font-size:.72rem;font-weight:700;border-radius:99px;padding:1px 8px;margin-bottom:2px}
.station.k-station .kind{background:#dbe8fb;color:#1d4f91}
.station.k-reciter .kind{background:#dcf1e3;color:#17663a}
:root[data-theme=dark] .station.k-station .kind{background:#1d3352;color:#a9c8f5}
:root[data-theme=dark] .station.k-reciter .kind{background:#183a26;color:#9be0b4}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .station.k-station .kind{background:#1d3352;color:#a9c8f5}:root:not([data-theme=light]) .station.k-reciter .kind{background:#183a26;color:#9be0b4}}
.station.k-station{border-inline-start:5px solid #3b78c9}
.station.k-reciter{border-inline-start:5px solid #2f9a5a}
.stations{margin-top:6px}
/* 📚 the audio library */
.lsearch{width:100%;min-height:46px;border:1.5px solid var(--line);border-radius:12px;padding:8px 12px;font:inherit;background:var(--surface);color:var(--ink)}
.lrecs{display:grid;gap:8px}
@media (min-width:640px){.lrecs{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}
.lrec{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:8px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);min-height:58px;font:inherit}
.lrec .mtx,.lwho .mtx{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.lrec .tbadge{font-size:1.1rem}
.lwho{display:flex;align-items:center;gap:10px;min-width:0}
.lpick .ok{color:var(--good)}
.lpick select{font:inherit;min-height:42px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);padding:4px 8px;max-width:100%}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-top:10px}
.lgrid.juz{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.lcell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-weight:600;min-height:58px}
.lcell small{color:var(--muted);font-weight:500}
.lcell.on{border-color:var(--primary);background:var(--soft)}
.btn.big{width:100%;min-height:56px;font-size:1.1rem;margin-top:10px}
.lplayer{display:flex;flex-direction:column;gap:10px;border-color:var(--primary)}
.lctl{display:flex;justify-content:center;gap:10px}
.lctl .rbtn.big{min-width:58px;min-height:58px;font-size:1.4rem}
.lprog{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}
.lprog input{flex:1;accent-color:var(--primary)}
.lmushaf{border-radius:14px}
.lmushaf.text,.lmushaf.ayah{max-height:60vh;overflow:auto;background:var(--page);border:1px solid var(--line);padding:10px 14px}
.lmushaf .ayat .a.on{background:var(--hl);border-radius:6px}
.lmushaf .an{color:var(--primary);font-size:.85em}
.lpnav{display:flex;justify-content:center;align-items:center;gap:14px;margin-bottom:6px}
/* the real mushaf page: always on paper, whatever the theme */
.lpage{background:#fffdf5;border:1px solid #e3d9b8;border-radius:12px;padding:8px;color:#222;text-align:center;min-height:200px}
.lpage.loading{display:grid;place-items:center}
.lpage svg{width:100%;height:auto;max-height:78vh;display:block;margin:auto}
.lpage .lhl{fill:rgba(255,196,0,.35);stroke:rgba(214,150,0,.8);stroke-width:.6}
.lay{text-align:center;padding:14px 4px}
.lay-t{font-family:var(--f-q);font-size:2rem;line-height:2.2;margin:6px 0}
@media (min-width:900px){.lay-t{font-size:2.5rem}}
.radiomini.lib{border-color:var(--gold)}
/* 📖 the prophets' stories */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.scard{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);font:inherit;min-height:110px}
.scard b{font-family:var(--f-d);font-size:1.15rem;text-align:center;line-height:1.4}
.sico{font-size:2rem;line-height:1}
.sico.big{font-size:2.8rem}
.shead2{display:flex;align-items:center;gap:12px}
.stctl{gap:8px;flex-wrap:wrap;align-items:center}
.story{background:var(--page);border:1px solid var(--line);border-radius:16px;padding:14px 18px;font-size:var(--sfs,1.15rem);line-height:2}
.story .sp{margin:0 0 .7em;border-radius:8px;padding:2px 6px;transition:background .3s}
.story .sp.on{background:var(--hl)}
.slesson{margin:.6em 0 0;padding:8px 12px;border-radius:10px;background:var(--soft);font-weight:600}
.lctl .rbtn{min-width:48px;min-height:48px;border:1.5px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink);font-size:1.15rem}
.lctl .rbtn.big{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
/* ⚙️ settings beside the language button and the owner's crown */
.gear,.srchbtn{border:1.5px solid var(--line);background:var(--surface);border-radius:99px;min-height:34px;min-width:40px;padding:2px 8px;font-size:1.1rem;line-height:1}
/* the volume slider */
.vol{display:inline-flex;flex-direction:row;align-items:center;gap:6px;font-size:1.1rem}
.vol input{width:110px;accent-color:var(--primary)}
.radiomini{flex-wrap:wrap}
.radiomini .vol input{width:90px}
@media (max-width:420px){.radiomini .vol{flex-basis:100%;justify-content:center}.radiomini .vol input{width:70%}}
.lctl{flex-wrap:wrap;align-items:center}
/* the library's country folders */
.lfolders{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:10px}
.lfold{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);font:inherit}
.lfold small{color:var(--muted)}
.lfhead{margin-top:10px}
#libmodes{margin-top:10px}
.ltracks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:8px;max-height:60vh;overflow:auto}
.lcell.trk{flex-direction:row;justify-content:space-between;padding:8px 12px}
/* a story's video */
.vbox{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.vbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.vcard{display:flex;flex-direction:column;gap:6px;padding:0 0 10px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);overflow:hidden;font:inherit;font-weight:600}
.vcard img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.vcard>span{padding:0 10px}
.ftag{display:inline-block;font-size:.7rem;font-weight:700;background:var(--hl);color:var(--warn);border:1px solid var(--gold);border-radius:99px;padding:0 8px;margin-inline-start:6px;vertical-align:middle}
/* 🕋 the Umrah & Hajj guide */
.gintro{background:var(--soft);border-radius:14px;padding:12px 14px;font-weight:600;line-height:1.9}
.groute{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;padding:10px;border:1.5px dashed var(--line);border-radius:14px}
.gstop{display:flex;flex-direction:column;align-items:center;font-size:1.6rem;min-width:52px}
.gstop small{font-size:.75rem;font-weight:700;color:var(--muted)}
.garr{color:var(--muted);font-size:1.1rem}
.gsteps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:none}
.gstep{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1.5px solid var(--line);border-inline-start:6px solid var(--gc);border-radius:16px;padding:12px 14px}
.gico{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:50%;font-size:1.9rem;background:color-mix(in srgb,var(--gc) 16%,transparent)}
.gbody{flex:1;min-width:0}
.gbody h3{margin:0 0 6px;color:var(--gc)}
.gbody ul{margin:0;padding-inline-start:18px;line-height:1.9}
.gmeta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.gmeta span{font-size:.78rem;font-weight:700;background:var(--soft);border-radius:99px;padding:1px 10px}
.gdua{margin-top:8px;background:var(--hl);border-radius:12px;padding:8px 12px}
.gdua p{margin:4px 0 0;font-family:var(--f-q);font-size:1.25rem;line-height:2}
@media (min-width:900px){.gsteps{grid-template-columns:1fr 1fr}}
.gcount{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:12px;text-align:center}
.gring{position:relative;width:min(260px,70vw);aspect-ratio:1;border:0;background:none;padding:0;border-radius:50%}
.gring svg{width:100%;height:100%;transform:rotate(-90deg)}
.gtrack{fill:var(--surface);stroke:var(--line);stroke-width:10}
.gfill{fill:none;stroke:var(--primary);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .3s}
.gnum{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gnum b{font-size:3.4rem;line-height:1;color:var(--primary)}
.glbl{margin:0}
.ffams{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;margin-top:8px}
.chk{display:flex;flex-direction:row;align-items:center;gap:8px;padding:4px 0}
.chk.big{font-size:1.05rem;padding:8px 0;border-bottom:1px solid var(--line)}
.chk.big:last-child{border-bottom:0}
.chk input{width:22px;height:22px;accent-color:var(--primary)}
.frel h3{margin-top:0}
@media (max-width:520px){.gstep{flex-direction:column;gap:6px}.gico{width:46px;height:46px;font-size:1.5rem}.gbody ul{padding-inline-start:16px}}
.story .sh{font-family:var(--f-d);color:var(--primary);font-size:1.25em;margin:.9em 0 .3em;padding:2px 6px}
.story .sh:first-child{margin-top:0}
/* the owner's panel: a tile per topic */
.admtiles{margin-top:12px}
.admtiles .tile.hot{border-color:var(--gold);background:var(--hl)}
.admhead{align-items:center;gap:10px;margin:12px 0 6px}
.admhead h3{margin:0}
/* 🌟 learn your faith */
.dlist{display:grid;gap:12px}
@media (min-width:900px){.dlist{grid-template-columns:1fr 1fr}}
.dcard{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.dcard.done{border-color:var(--good);background:color-mix(in srgb,var(--good) 8%,var(--surface))}
.dt{margin:0;font-weight:700;color:var(--primary);font-size:.9rem}
.dx{margin:0;font-family:var(--f-q);font-size:1.3rem;line-height:2.1}
.dx.q{font-size:1.2rem}
.dcount{align-self:center;min-width:120px;min-height:52px;border-radius:99px;border:0;background:var(--primary);color:var(--primary-ink);font:inherit;font-weight:700;font-size:1.15rem}
.dcard.done .dcount{background:var(--good)}
.note.good{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.acard{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;min-height:90px}
.acard b{font-family:var(--f-q);font-size:1.4rem;color:var(--primary)}
.acard small{color:var(--muted)}
.acard span{font-size:.85rem;line-height:1.5}
.acard.open{border-color:var(--gold);background:var(--hl);grid-column:span 2}
.qcard .qq{font-size:1.15rem;line-height:1.9;text-align:center}
.qopts{display:grid;gap:10px;margin:10px 0}
.qopt{min-height:54px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;font-size:1.1rem;font-weight:600}
.qopt.ok{border-color:var(--good);background:color-mix(in srgb,var(--good) 18%,var(--surface))}
.qopt.no{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,var(--surface))}
.center{text-align:center}
.big{font-size:2rem;font-weight:800;margin:6px 0}
.hcard h3{margin:4px 0}
.hx{font-family:var(--f-q);font-size:1.45rem;line-height:2.1;color:var(--primary)}
.he{background:var(--soft);border-radius:12px;padding:8px 12px}
.hkids{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.hlist{display:grid;gap:6px;margin-top:10px}
@media (min-width:640px){.hlist{grid-template-columns:1fr 1fr}}
.hrow{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;text-align:start}
.hrow.on{border-color:var(--primary);background:var(--soft)}
.hrow .mtx{flex:1;display:flex;flex-direction:column}
.hn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--soft);font-weight:700;flex:none}
.gring.rk{background:var(--surface);border:10px solid var(--primary)}
.rkdots{display:flex;gap:8px}
.rkdots span{width:16px;height:16px;border-radius:50%;background:var(--line)}
.rkdots span.on{background:var(--primary)}
.qkids{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:10px 0}
.qkid{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);font:inherit}
.qkid[disabled]{opacity:.7}
.board{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.board li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.medal{font-size:1.5rem}
/* 🕌 prayer times */
.ptbar{display:block;width:100%;text-align:center;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:14px;padding:8px 12px;font:inherit}
@media (min-width:600px){.dhikr+.ptbar{margin-top:-10px}}
.pttable{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.ptrow{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);font-size:1.1rem}
.ptrow.next{border-color:var(--primary);background:var(--soft)}
.compass{display:grid;place-items:center;margin:8px auto}
.cdial{position:relative;width:200px;height:200px;border-radius:50%;border:6px solid var(--line);background:var(--surface);transition:transform .2s}
.cn{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-weight:800;color:var(--bad)}
.qarrow{position:absolute;inset:0;display:flex;justify-content:center}
.qarrow::before{content:"";position:absolute;top:30px;bottom:50%;width:4px;background:var(--primary);border-radius:2px}
.qarrow span{position:absolute;top:2px;font-size:1.6rem}
.toast{position:fixed;inset-inline:16px;bottom:20px;z-index:99;background:var(--primary);color:var(--primary-ink);padding:14px 16px;border-radius:14px;text-align:center;font-weight:700;box-shadow:0 6px 24px rgba(0,0,0,.2);transition:opacity .5s}
.toast.gone{opacity:0}
/* 🎬 the locked video player */
.ywrap{display:flex;flex-direction:column;gap:8px}
.ylock .yshield{position:absolute;inset:0;z-index:2;border:0;padding:0;margin:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:0}
.ylock .yshield .ybig{display:none;font-size:2.6rem;width:84px;height:84px;border-radius:50%;background:rgba(0,0,0,.55);align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.ylock .yshield:not(.thumb){background-image:none!important}
.ylock .yshield.cover{background-color:rgba(0,0,0,.92);background-size:cover;background-position:center}
.ylock .yshield.thumb{background-color:#000}
.ylock .yshield.cover .ybig{display:flex}
.yctl{display:flex;flex-direction:column;gap:8px}
.ybtns{display:flex;flex-wrap:wrap;gap:6px}
.yprog{display:flex;align-items:center;gap:10px}
.yprog #ytseek{flex:1;min-width:0}
.yprog .vol{margin:0;flex:0 1 160px}
.ytop{display:none}
.ywrap:fullscreen,.ywrap.yfull{background:#000;padding:0;justify-content:center}
.ywrap.yfull{position:fixed;inset:0;z-index:999}
.ywrap:fullscreen .vbox,.ywrap.yfull .vbox{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0}
/* full screen: the video fills the screen; the buttons float over it and fade away while it plays */
.ywrap.yfull .yctl,.ywrap:fullscreen .yctl{position:absolute;left:0;right:0;bottom:0;z-index:3;color:#fff;padding:28px 28px 22px;background:linear-gradient(transparent,rgba(0,0,0,.85));transition:opacity .35s}
.ywrap.yfull .ytop{display:flex;position:absolute;left:0;right:0;top:0;z-index:3;align-items:center;gap:10px;flex-wrap:wrap;color:#fff;padding:18px 28px 30px;background:linear-gradient(rgba(0,0,0,.85),transparent);transition:opacity .35s}
.ywrap.yfull .ytop .yttl{font-size:1.15rem;margin-inline-end:auto}
.ychips{display:flex;flex-wrap:wrap;gap:6px}
.ychip{border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:6px 14px;font:inherit;font-size:.9rem;cursor:pointer}
.ychip.on{background:var(--primary);border-color:var(--primary);color:var(--primary-ink,#fff)}
.ywrap.yfull.idle .yctl,.ywrap.yfull.idle .ytop{opacity:0;pointer-events:none}
.ywrap.yfull.idle{cursor:none}
.ywrap.yfull .yshield{z-index:2}
html.tv .ywrap.yfull .btn{min-height:54px;font-size:1.05rem;padding:8px 18px}
body.noscroll{overflow:hidden}
.ylock .yshield.pass{pointer-events:none;background:transparent!important}
.ylock .yshield.pass .ybig{display:none}
/* 🔍 search and 🤖 the helper */
.srbox input{width:100%;font-size:1.1rem;padding:12px 14px;border-radius:14px}
.srg{margin:16px 0 6px;font-size:.95rem;color:var(--muted)}
.srlist{display:flex;flex-direction:column;gap:6px}
.sritem{display:flex;align-items:center;gap:10px;text-align:start;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:inherit;font:inherit;cursor:pointer}
.sritem:hover,.sritem:focus-visible{border-color:var(--primary)}
.sritem b{display:block}.sritem small{display:block}
.sric{font-size:1.4rem;width:1.8em;text-align:center;flex:none}
.aschat{display:flex;flex-direction:column;gap:8px;margin:12px 0;max-height:60vh;overflow-y:auto;padding:4px}
.asmsg{max-width:88%;padding:10px 14px;border-radius:16px;line-height:1.7}
.asmsg p{margin:0 0 4px}
.asmsg.me{align-self:flex-start;background:var(--primary);color:#fff;border-end-start-radius:4px}
.asmsg.bot{align-self:flex-end;background:var(--surface);border:1px solid var(--line);border-end-end-radius:4px}
[dir=ltr] .asmsg.me{align-self:flex-end}[dir=ltr] .asmsg.bot{align-self:flex-start}
.aswrap{flex-wrap:wrap;gap:6px;margin-top:6px}
.asform{display:flex;gap:8px;position:sticky;bottom:8px}
.asform input{flex:1}
.aslog summary{cursor:pointer;font-weight:600}
/* ⏲️ the sleep timer */
.sleepb{border:1.5px solid var(--line);background:var(--surface);color:inherit;border-radius:99px;min-height:34px;padding:2px 10px;font:inherit;font-size:.9rem;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.sleepb.on{border-color:var(--primary);background:var(--primary);color:var(--primary-ink,#fff)}
.sleepb .sleept{font-variant-numeric:tabular-nums}
.sheetbg{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);color:var(--ink);width:100%;max-width:520px;border-radius:20px 20px 0 0;padding:18px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -6px 30px rgba(0,0,0,.25)}
.sheet h3{margin:0 0 6px}
.sleepopts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.sleepown{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 10px}
.sleepown label{flex:1 1 100%;font-weight:600}
.sleepown input{flex:1;min-width:0;font-size:1.05rem}
/* 🎨 the owner's icon picker */
.icopts{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.icopt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:2px solid var(--line);border-radius:16px;background:var(--surface);color:inherit;font:inherit;cursor:pointer}
.icopt img{width:84px;height:84px;border-radius:20px}
.icopt.on{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent)}
.icopt span{font-size:.85rem;text-align:center}
/* 💬 the family chat */
.chlist{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.chrow{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:inherit;font:inherit;cursor:pointer}
.chrow .chmid{flex:1;min-width:0;display:flex;flex-direction:column}
.chrow .chmid small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chrow .chend{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.chn{display:inline-flex;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--primary);color:var(--primary-ink,#fff);font-size:.75rem;align-items:center;justify-content:center;font-weight:700}
.ava.xs{width:40px;height:40px;font-size:1.4rem;flex:none}
.chhead{display:flex;align-items:center;gap:10px;margin:4px 0 8px}
.chmsgs{display:flex;flex-direction:column;gap:6px;height:min(62vh,640px);overflow-y:auto;padding:10px;border:1px solid var(--line);border-radius:16px;background:var(--page)}
.chday{align-self:center;font-size:.75rem;color:var(--muted);background:var(--surface);padding:2px 10px;border-radius:10px;margin:6px 0}
.chmsg{position:relative;max-width:82%;align-self:flex-end;background:var(--surface);border:1px solid var(--line);padding:6px 10px 4px;border-radius:14px;border-end-end-radius:4px;line-height:1.6}
.chmsg.me{align-self:flex-start;background:color-mix(in srgb,var(--primary) 16%,var(--surface));border-end-start-radius:4px;border-end-end-radius:14px}
[dir=ltr] .chmsg{align-self:flex-start}[dir=ltr] .chmsg.me{align-self:flex-end}
.chmsg p{margin:0;white-space:pre-wrap;word-break:break-word}
.chfrom{display:block;font-weight:700;color:var(--primary);font-size:.78rem}
.chmeta{display:block;font-size:.7rem;color:var(--muted);text-align:end}
.chread{color:#2a8bd6}
.chre{font-size:.8rem;border-inline-start:3px solid var(--primary);padding:2px 6px;margin-bottom:4px;opacity:.85;background:rgba(0,0,0,.04);border-radius:6px}
.chimg{display:block;max-width:100%;max-height:320px;border-radius:10px;margin:2px 0}
.chvoice{max-width:100%;height:40px}
.chacts{display:none;gap:2px;position:absolute;top:-14px;inset-inline-end:6px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1px 4px}
.chmsg:hover .chacts,.chmsg:focus-within .chacts{display:flex}
@media (hover:none){.chacts{display:flex;position:static;justify-content:flex-end;border:0;background:none;padding:0}}
.chacts button{border:0;background:none;font-size:.85rem;cursor:pointer;padding:2px}
.chform{display:flex;gap:6px;align-items:center;margin-top:8px;position:sticky;bottom:8px}
.chform input[type=text]{flex:1;min-width:0;border-radius:20px}
.chbtn{border:1.5px solid var(--line);background:var(--surface);border-radius:50%;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;flex:none}
.chsend{border-radius:50%;width:44px;height:44px;padding:0;flex:none}
.chemo{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.chemo button{font-size:1.4rem;border:0;background:none;cursor:pointer}
.chreplying{margin-top:8px;padding:6px 10px;border-inline-start:3px solid var(--primary);background:var(--surface);border-radius:8px;font-size:.85rem;display:flex;justify-content:space-between}
.chreplying button{border:0;background:none;cursor:pointer}
.chrec{display:flex;gap:8px;align-items:center;margin-top:8px;padding:8px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.chpend{margin:6px 0}
/* 🕌 the day's prayer times on home: the next one on top, the six in one row — kept short so it doesn't take the screen */
.ptwrap{display:flex;flex-direction:column;gap:4px}
.ptwrap .ptbar{padding:6px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptstrip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.ptcell{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;padding:4px 2px 3px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);text-align:center;min-width:0;line-height:1.35}
.ptcell b{font-size:.76rem;white-space:nowrap}
.ptcell span{font-size:.7rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.ptcell.next{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 14%,var(--surface))}
.ptcell.past{opacity:.6}
.pttime{display:inline-flex;align-items:center;gap:2px}
.ptbell{border:0;background:none;font-size:.62rem;line-height:1;padding:0 1px;cursor:pointer;opacity:.85}
span.ptbell{font-size:.62rem}
#ptleft{font-variant-numeric:tabular-nums}
@media (max-width:480px){.ptwrap .ptbar{font-size:.84rem;padding:6px 6px}}
@media (min-width:600px){.ptcell b{font-size:.9rem}.ptcell span{font-size:.85rem}.pttime{gap:6px}.ptbell{font-size:.8rem}}
@media (min-width:600px) and (max-width:999px),(min-width:1300px){.ptcell{flex-direction:row;justify-content:center;gap:8px;padding:6px 10px}}
/* home: on a phone everything stacks as before; on an iPad or computer the doors make one column on the right */
.homecols,.homemain,.homeside{display:contents}
@media (min-width:1000px){
  body[data-view="home"] #app{max-width:1400px}
  .homecols{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:18px;align-items:start}
  .homeside{display:block;grid-column:1;grid-row:1;position:sticky;top:12px}
  .homemain{display:flex;flex-direction:column;gap:18px;grid-column:2;grid-row:1;min-width:0}
  .homeside .doors{grid-template-columns:1fr;margin-top:0;gap:8px}
  .homeside .door{min-height:64px;padding:10px 14px}
}
/* 🎙️ the mic bar stays at the bottom of the screen while the kid recites */
.micbar{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;gap:8px;padding:8px 10px;margin-top:4px;background:var(--surface);border:1.5px solid var(--primary);border-radius:18px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.micbar .btn{flex:1;min-height:52px;font-size:1.05rem;margin:0;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.micbar .btn.help{background:#fff4d6;border-color:#e9b949;color:#7a5200}
.micbar .btn.ghost{flex:0 0 auto;min-height:44px;padding:0 12px;background:transparent}
.micdot{font-size:1.4rem;animation:micpulse 1.2s ease-in-out infinite}
@keyframes micpulse{50%{transform:scale(1.18);opacity:.7}}
@media (prefers-reduced-motion:reduce){.micdot{animation:none}}
.ctl.rng{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
:root[data-theme="dark"] .micbar .btn.help{background:#3a2f12;color:#f3d48a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .micbar .btn.help{background:#3a2f12;color:#f3d48a}}
.subopts{margin:4px 0 8px;padding-inline-start:14px;border-inline-start:3px solid var(--line)}
/* 📺 the TV: a bold ring on the button the remote is on; nothing that needs touch or installing */
html.tv :focus{outline:4px solid #f5b301 !important;outline-offset:3px;box-shadow:0 0 0 9px rgba(245,179,1,.35) !important}
html.tv [data-act="install"]{display:none}
html.tv{scroll-padding:120px 0}
/* 📿 Surah Al-Kahf on Friday */
.kahfhead{text-align:center}.kahfhead h2{margin:0 0 6px}
.kahfhadith{font-family:var(--f-q);font-size:1.3rem;line-height:2;color:var(--primary);margin:4px 0}
.kahflist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:12px}
.kahfr{display:flex;align-items:center;gap:8px;min-height:56px;padding:10px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;text-align:start;cursor:pointer}
.kahfr.on{border-color:var(--primary);background:var(--soft)}
.ywrap.yfull .btn,.ywrap.yfull .yctl button,.ywrap.yfull .yctl select{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.ywrap.yfull .btn.pri{background:var(--primary);border-color:var(--primary);color:var(--primary-ink,#fff)}
.ywrap.yfull .ybtns [data-act="yt-full"]{display:none}
/* 📚 the library player: two bars; in full screen the mushaf fills the screen and the bars float over it */
.ltopbar,.lbotbar{display:flex;flex-direction:column;gap:10px}
.lfbtns{gap:6px;flex-wrap:wrap}
.lrecpick{display:flex;flex-wrap:wrap;gap:8px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.lrecpick .ychip{color:var(--ink);border-color:var(--line);background:var(--surface)}
.lrecpick .ychip.on{background:var(--primary);color:var(--primary-ink,#fff)}
.lplayer.lfull{position:fixed;inset:0;z-index:999;border-radius:0;border:0;margin:0;padding:0;background:#0e1513;max-width:none}
.lplayer.lfull #libmushaf{position:absolute;inset:0;overflow:auto;display:flex;align-items:center;justify-content:center;border-radius:0}
.lplayer.lfull .lpage{width:auto;max-width:100%;height:100vh;border-radius:0;padding:4px 16px;display:flex;align-items:center}
.lplayer.lfull .lpage svg{max-height:calc(100vh - 12px);height:calc(100vh - 12px);width:auto}
.lplayer.lfull .lmushaf.text,.lplayer.lfull .lmushaf.ayah{max-height:none;padding:110px 8vw 150px;background:var(--page);font-size:1.25em;display:block}
.lplayer.lfull .ltopbar,.lplayer.lfull .lbotbar{position:absolute;left:0;right:0;z-index:3;padding:16px 26px;color:#fff;transition:opacity .35s}
.lplayer.lfull .ltopbar{top:0;background:linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,0))}
.lplayer.lfull .lbotbar{bottom:0;padding-top:34px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.88))}
.lplayer.lfull .ltopbar .muted{color:#ddd}
.lplayer.lfull .btn,.lplayer.lfull .rbtn{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.lplayer.lfull .seg button{background:rgba(255,255,255,.1);color:#fff}
.lplayer.lfull .seg button.on{background:var(--primary);color:var(--primary-ink,#fff)}
.lplayer.lfull .lrecpick{background:rgba(0,0,0,.6);border-color:rgba(255,255,255,.25)}
.lplayer.lfull .lrecpick .ychip{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.35)}
.lplayer.lfull .lrecpick .ychip.on{background:var(--primary);color:var(--primary-ink,#fff)}
.lplayer.lfull.idle .ltopbar,.lplayer.lfull.idle .lbotbar{opacity:0;pointer-events:none}
.lplayer.lfull.idle{cursor:none}
html.tv .lplayer.lfull .rbtn{min-width:58px;min-height:58px;font-size:1.3rem}
/* 📺 the TV's first screen: sign in or a code on one side, the QR on the other */
.tvwel{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;min-height:calc(100vh - 80px);padding:20px 40px}
.tvwel-r{display:flex;flex-direction:column;gap:14px}
.tvwel-l{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:24px}
.tvbrand{display:flex;align-items:center;gap:14px;margin-bottom:10px}.tvbrand .logo{width:72px;height:72px;border-radius:18px}.tvbrand h1{margin:0;font-size:2.4rem}
.qrbox.big{width:300px;max-width:100%;background:#fff;padding:10px;border-radius:14px}.qrbox.big svg{width:100%;height:auto;display:block}
.tvcode{font-size:2.4rem;font-weight:800;letter-spacing:.18em;margin:6px 0 0;color:var(--primary)}
@media (max-width:760px){.tvwel{grid-template-columns:1fr;padding:12px}}
/* 📺 the TV's home: rows of big tiles */
.tvsec h3{margin:6px 0 10px}
.tvtiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tvtile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:110px;padding:12px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;text-align:center;cursor:pointer}
.tvtile .tvic{font-size:1.9rem;line-height:1.1}.tvtile b{font-size:1rem}.tvtile small{color:var(--muted);font-size:.8rem}
.tvtile.on{border-color:var(--primary);background:var(--soft)}
/* 📺 lighter on a TV: no animations, shadows or blur (TV chips are slow); only the focus ring stays */
html.tv *,html.tv *::before,html.tv *::after{transition:none!important;animation:none!important;backdrop-filter:none!important;scroll-behavior:auto!important}
html.tv .card,html.tv .door,html.tv .kid,html.tv .appbar,html.tv .tvtile,html.tv .micbar{box-shadow:none}
html.tv .ywrap.yfull .yctl,html.tv .ywrap.yfull .ytop,html.tv .lplayer.lfull .ltopbar,html.tv .lplayer.lfull .lbotbar{transition:opacity .25s!important}
/* full screen: the day, the hijri date, the clock and who is reciting, top left, always on screen */
.fsinfo{display:none}
.ywrap.yfull .fsinfo,.lplayer.lfull .fsinfo{display:flex;flex-direction:column;align-items:flex-start;gap:2px;position:absolute;left:28px;top:96px;z-index:4;color:#fff;text-align:left;
  background:rgba(0,0,0,.42);border-radius:14px;padding:10px 16px;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.fsinfo .fs-day{font-size:1.15rem}.fsinfo .fs-hij{font-size:.95rem;opacity:.9}.fsinfo .fs-time{font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums}
.fsinfo .fs-who{margin-top:6px;font-size:1rem;display:flex;align-items:center;gap:6px}
.ywrap.yfull.idle .fsinfo,.lplayer.lfull.idle .fsinfo{top:24px}
/* 📚 audio only, and the English meaning under the ayat */
.lmushaf.audio{display:flex;justify-content:center}
.laudio{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 10px;text-align:center}
.laudio-ic{font-size:3.4rem}.laudio b{font-size:1.6rem}
.lplayer.lfull .laudio{height:100vh;justify-content:center;color:#fff}.lplayer.lfull .laudio b{font-size:3rem}.lplayer.lfull .laudio .muted{color:#ddd;font-size:1.3rem}
.atr{display:block;font-family:var(--f-ui);font-size:.62em;line-height:1.5;color:var(--muted);margin:2px 0 10px;text-align:left}
.lay-tr{font-family:var(--f-ui);font-size:1.05rem;line-height:1.6;color:var(--muted);text-align:center;max-width:52em;margin:10px auto 0}
.lplayer.lfull .lay-tr{font-size:1.35rem}
.ltrsw{margin:0}
/* video recitation: the kid's own camera in a small corner; the recording in a dialog */
#recprev{position:fixed;inset-inline-start:12px;bottom:84px;width:96px;height:128px;object-fit:cover;border-radius:14px;border:3px solid #e53935;z-index:60;background:#000;transform:scaleX(-1);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.vmodal video{width:100%;max-height:70vh;border-radius:12px;background:#000;margin-top:10px}
.hidewait{display:block;text-align:center;font-size:1.05rem;color:var(--muted,#666);padding:18px 6px}
.recrow .meta{margin:6px 0}
.recf{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:6px;align-items:center;padding:8px}
.recf label,.recf select,.recf .btn{width:100%;min-width:0;margin:0}
.recf select{padding-inline:6px 2px}
.recday{margin:18px 0 8px}
/* screensaver */
.ssaver{position:fixed;inset:0;z-index:1000;background:#000;overflow:hidden;cursor:none;animation:ssin .8s ease}
.ssaver.bye{opacity:0;transition:opacity .35s}
.ssimg{position:absolute;inset:0;background:#000 center/cover no-repeat;opacity:0;transition:opacity 2.2s ease}
.ssimg.show{opacity:1}
.ssimg.kb{animation:kb 22s ease-in-out both}
.ssaver .fsinfo{position:absolute;top:auto;bottom:48px;left:48px;right:auto;font-size:1.25rem;text-shadow:0 2px 10px rgba(0,0,0,.75);background:linear-gradient(90deg,rgba(0,0,0,.35),transparent);padding:12px 18px;border-radius:16px}
.ssaver .fsinfo .fs-time{font-size:2.6rem;font-weight:700;letter-spacing:.5px}
.sscred{position:absolute;right:16px;bottom:10px;color:rgba(255,255,255,.6);font-size:.72rem;text-shadow:0 1px 4px #000;direction:ltr}
@keyframes kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
@keyframes ssin{from{opacity:0}to{opacity:1}}
html.tv .ssimg.kb{animation:none}
.sspicks .ssgrp{margin:10px 0 6px;font-weight:700}
.ssrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.sspic{position:relative;display:block;border-radius:12px;overflow:hidden;border:3px solid transparent;cursor:pointer;aspect-ratio:16/9;background:#222}
.sspic img{width:100%;height:100%;object-fit:cover;display:block}
.sspic input{position:absolute;top:6px;inset-inline-start:6px;width:20px;height:20px;margin:0}
.sspic.on{border-color:var(--accent,#2e7d32)}
@media (prefers-reduced-motion:reduce){.ssimg.kb{animation:none}}
.ssaver .fsinfo{display:flex;flex-direction:column;align-items:flex-start;gap:2px;color:#fff;text-align:left;z-index:2}
/* reading a task on a wide screen: the ayat on one side, the player fixed on the other (the right, in Arabic) */
.readwrap,.readmain,.readside{display:flex;flex-direction:column;gap:18px}
@media (min-width:1000px){
  body[data-view="task"] #app{max-width:1240px}
  .readwrap{display:grid;grid-template-columns:320px minmax(0,1fr);gap:22px;align-items:start}
  .readside{grid-column:1;grid-row:1;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}
  .readmain{grid-column:2;grid-row:1}
  .readside .player{position:static;box-shadow:0 4px 14px rgba(0,0,0,.08)}
  .readside .player .ctl{grid-template-columns:1fr}
}
/* 🎧 the parent hears the recitation and marks the ayat to review: the passage as a mushaf page; tapping an ayah (or its
   number at its end) marks it «to review» */
.tchmushaf .tchay{cursor:pointer;border-radius:8px;padding:2px 2px;transition:background .15s;-webkit-tap-highlight-color:transparent}
.tchmushaf .tchay:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.tchmushaf .tchay.bad{background:color-mix(in srgb,var(--bad) 16%,transparent);box-shadow:inset 0 -2px 0 var(--bad)}
.tchmk{font:inherit;color:var(--gold,#b8860b);background:none;border:1px solid transparent;border-radius:999px;padding:0 4px;cursor:pointer;line-height:1.4}
.tchmk.bad{color:#fff;background:var(--bad);border-color:var(--bad);font-size:.85em}
.tchbar{justify-content:space-between}
.ayat .a.tchrev{background:color-mix(in srgb,var(--bad) 14%,transparent);border-radius:8px;box-shadow:inset 0 -2px 0 var(--bad)}
.tchnote b{font-size:1.05rem}
/* owner's panel: where a feature shows, and the TV home's blocks */
.frel .fwhere-l{margin:10px 0 4px}
.frel .seg.fwhere button{font-size:.85rem}
.tvblk{display:flex;width:100%;align-items:center;gap:8px;background:none;border:0;border-bottom:1px solid var(--line);padding:10px 2px;text-align:start;font:inherit;color:inherit;cursor:pointer}
.tvblk:not(.on){opacity:.6}
/* iPad upright (and other mid-size screens): the reading player stays at the bottom but slim — two short lines
   (play and the counter beside the reciter and repeat; the two options side by side) so more ayat show */
@media (min-width:600px) and (max-width:999px){
  .readside .player{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 14px}
  .readside .player>.row.sp{flex:1 1 300px;flex-wrap:nowrap;gap:10px}
  .readside .player>.ctl{flex:1 1 380px}
  .readside .player>.check{flex:1 1 220px;margin:0;min-height:0}
  .readside .player>.note{flex:1 1 100%;margin:0}
  .readside .player>.turn-note:empty,.readside .player>.err:empty{display:none}
}
/* 🔐 the app lock screen */
.lockscr{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.lockscr .logo{width:84px;height:84px;border-radius:22px}
.lockscr form{width:min(360px,100%);text-align:start}
.lockscr input{font-size:1.6rem;letter-spacing:.4em;text-align:center}
/* 📦 owner panel: publishing versions */
.pubrow ul{margin:6px 0 10px;padding-inline-start:20px}
.pubrow.live{border-color:var(--good)}
.pubrow.new{border-color:var(--primary)}
/* below the wide layout the reading wrappers don't box the player, so it stays fixed at the bottom of the screen
   (sticky inside the page) on phones and an upright iPad, wherever the kid scrolls in the surah */
@media (max-width:999px){.readwrap,.readmain,.readside{display:contents}}
/* phones: the fixed player is short — play and the counter, then the reciter and repeat side by side, then the two options */
@media (max-width:599px){
  .readside .player{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px;z-index:15}
  .readside .player>.row.sp{flex:1 1 100%;flex-wrap:nowrap;gap:8px}
  .readside .player>.row.sp .playbtn{min-height:44px;padding-inline:22px}
  .readside .player>.ctl{flex:1 1 100%;gap:6px}
  .readside .player>.ctl label{font-size:.72rem}
  .readside .player select{min-height:36px;padding-block:4px}
  .readside .player>.check{flex:1 1 40%;margin:0;min-height:0;font-size:.78rem;gap:6px}
  .readside .player>.note{flex:1 1 100%;margin:0;font-size:.78rem}
  .readside .player>.turn-note:empty,.readside .player>.err:empty{display:none}
}
/* 💳 hosting credits */
.hostbar{height:12px;border-radius:999px;background:var(--line);overflow:hidden;margin:10px 0 4px}
.hostbar i{display:block;height:100%;background:var(--good);border-radius:inherit}
.hostbar.mid i{background:#e0a100}.hostbar.bad i{background:var(--bad)}
/* 👑 the owner panel's home: numbers in one card, what needs the owner, then the topics in groups */
.admhero{padding:14px 12px 10px}
.admkpi{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.admkpi div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px;border-inline-start:1px solid var(--line)}
.admkpi div:first-child{border-inline-start:none}
.admkpi .ki{font-size:1.05rem}
.admkpi b{font-size:1.5rem;line-height:1.2;color:var(--primary);font-variant-numeric:tabular-nums}
.admkpi div>span:last-child{font-size:.78rem;color:var(--muted);line-height:1.3}
.admmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.admmeta .small{flex:1}
.admgrp{margin:20px 4px 8px;font-size:.95rem;color:var(--muted);font-weight:600}
.admtiles .mrow .chev,.admtodo .chev{color:var(--muted);font-size:1.3rem}
.admtiles .mrow.hot{background:var(--hl)}
.admtiles .mrow.hot .mtx .small{color:var(--gold)}
.admtodo{margin-top:12px;border-color:var(--gold);background:var(--hl)}
/* 🚀 releases: compact rows that open */
.relf{margin:10px 0 12px}
.relf>button{min-height:40px;font-size:.92rem}
.frow{border-bottom:1px solid var(--line)}
.frow:last-child{border-bottom:none}
.frow .mrow{border-bottom:none}
.frow.open{background:var(--soft)}
.fchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.fchip{font-size:.78rem;padding:1px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.fchip.a-owner{border-color:var(--gold);color:var(--gold)}
.fchip.a-all{border-color:var(--primary);color:var(--primary)}
.fedit{padding:0 16px 14px;display:flex;flex-direction:column;gap:8px}
.fedit>p{margin:4px 0 0}
.fedit .seg>button{min-height:40px;font-size:.9rem}
.frels .chev{color:var(--muted);font-size:1.1rem}
.fnone{padding:14px 16px;margin:0}
.tvblks{display:grid;grid-template-columns:1fr;gap:6px}
@media (min-width:560px){.tvblks{grid-template-columns:1fr 1fr}}
.recf label{display:flex;flex-direction:column;gap:3px}
.rfk{font-size:.8rem;color:var(--muted);font-weight:600;padding-inline-start:4px}
.recfold{gap:8px;margin:14px 0 0}
.recday{margin:16px 0 8px}
.recdayb{background:none;border:none;color:inherit;font:inherit;font-weight:700;padding:6px 0;display:flex;align-items:center;gap:6px;width:100%;text-align:start;cursor:pointer}
.recdayb .chev{display:inline-block;width:1.2em;text-align:center;color:var(--primary);font-size:1.1rem}
/* 🔁 spaced review: a tab per kid, tools, the juz with each surah */
.revtabs{margin:10px 0 12px}
.rbadge{display:inline-block;min-width:1.4em;padding:0 6px;border-radius:999px;background:var(--gold);color:#1b1300;font-size:.78rem;line-height:1.5}
.revtools{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.revtools label{margin:0}
.revtools select,.revtools .btn{width:100%;min-height:46px;margin:0}
.juzchip{font-size:.75rem;padding:1px 8px}
.revpick{border-color:var(--primary)}
.revh{margin-top:22px}
.relf{grid-auto-flow:row;grid-template-columns:repeat(2,1fr)}
@media (min-width:560px){.relf{grid-template-columns:repeat(4,1fr)}}
.relgrp{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;color:var(--ink)}
.relgrp .small{font-weight:400}
/* 📊 follow-up: current/old tabs, a tab per kid, folding groups */
.foltabs{margin:12px 0 8px}
.folkids{margin:0 0 8px}
.folkids>button{font-size:.92rem}
.folfold{gap:8px;margin:6px 0}
.folhead{background:none;border:none;color:inherit;font:inherit;display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;text-align:start}
.folhead b{font-size:1.1rem}
.folhead .chev{color:var(--primary);font-size:1.1rem;width:1.2em;text-align:center}
.archrow p{margin:6px 0 0;line-height:1.8}
/* ⏱️ usage report: a folding note, the period (or dates), three kinds of chart, day rows that fit a phone */
.usenote{margin:4px 0 10px}
.usenote summary{cursor:pointer;color:var(--primary);font-weight:600;list-style:none;display:flex;align-items:center;gap:6px}
.usenote summary::-webkit-details-marker{display:none}
.usenote summary::after{content:"▾";font-size:.9rem;color:var(--muted)}
.usenote[open] summary::after{content:"▴"}
.usefilt{display:flex;flex-direction:column;gap:10px}
.useper{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);margin-top:4px}
.useper>button{min-height:40px;font-size:.9rem;padding:4px}
.userange{margin-top:2px}
.usechart{margin-bottom:10px}
.usechart>button{min-height:38px;font-size:.88rem}
.usebars .ub em{font-style:normal;font-size:.66rem;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.useline{width:100%;height:auto;display:block}
.useline .ulbl{font-size:9px;fill:var(--ink)}
.useline .uday{font-size:9px;fill:var(--muted)}
.usering{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.usering svg{width:150px;height:150px;flex:0 0 auto}
.usering .ringc{font-size:11px;font-weight:700;fill:var(--ink)}
.uleg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.uleg li{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.uleg i{width:12px;height:12px;border-radius:4px;display:inline-block;flex:0 0 auto}
.ukids{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ukid{font-size:.78rem;padding:1px 8px;border-radius:999px;border:1px solid var(--c,var(--line));color:var(--c,var(--ink));white-space:nowrap}
.usedays{list-style:none;margin:0;padding:0}
.usedays li{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.usedays li:last-child{border-bottom:none}
.usedays li.none{opacity:.6;align-items:center}
.usedays .udl{min-width:0;flex:1}
.usedays .udt{white-space:nowrap;padding-top:2px}
.usedevs li>div{min-width:0;flex:1}
/* 🎧 hear them recite: memorizing / review tabs and a mark by each task */
.lstype{margin:0 0 10px}
.lstype>button{min-height:40px;font-size:.92rem}
.ltype{font-size:.75rem;padding:1px 8px;vertical-align:middle}
.ltype.rv{border-color:var(--gold);color:var(--gold)}
/* 🗺️ map: kid tabs on one line, the kids compared, and the three numbers open their view */
.mapkids{display:grid;gap:6px}
.mapkids .chipbtn{min-width:0;justify-content:center;padding:4px 8px;font-size:.92rem}
.mapkids .chipbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mapkids .ava.xs{width:26px;height:26px;flex:0 0 auto}
.mapbreak .mbc{border:1.5px solid transparent;color:inherit;font:inherit;cursor:pointer;width:100%}
.mapbreak .mbc.on{border-color:var(--primary)}
.mapcmp h3{margin:0 0 6px}
.cmpleg{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:6px;color:var(--muted)}
.cmpleg span{display:inline-flex;align-items:center;gap:4px}
.cmpleg i,.cmpb i{display:inline-block;border-radius:4px}
.cmpleg i{width:10px;height:10px}
.m0{background:var(--primary)} .m1{background:var(--gold)} .m2{background:var(--moh)}
.cmprow{display:flex;align-items:center;gap:10px;width:100%;background:none;border:1.5px solid transparent;border-radius:12px;padding:8px 6px;color:inherit;font:inherit;text-align:start;cursor:pointer}
.cmprow.on{border-color:var(--primary);background:var(--soft)}
.cmpk{display:flex;align-items:center;gap:6px;flex:0 0 32%;min-width:0}
.cmpk b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.cmpb{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.cb{display:flex;align-items:center;gap:6px}
.cb i{height:8px;flex:0 0 auto}
.cb em{font-style:normal;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
/* 👧 kids page: boys / girls / all, one line per kid, details on «View», a button for a new kid */
.kidsf{margin:4px 0 12px}
.kidsf>button{min-height:40px;font-size:.92rem}
.kidline{padding:10px 0;border-bottom:1px solid var(--line)}
.kidline:last-child{border-bottom:none}
.kidline .row.sp{flex-wrap:wrap;gap:8px}
.kidnm{display:flex;align-items:center;gap:8px;min-width:0}
.kidnm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kidbtns{gap:6px;flex-wrap:wrap}
.kidinfo{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0 2px;padding:10px 12px;background:var(--soft);border-radius:12px}
.kidinfo dt{color:var(--muted);font-size:.85rem}
.kidinfo dd{margin:0;font-weight:600}
.kidsadd{width:100%;margin-top:12px;border-style:dashed;min-height:52px}
.kidsex .seg{margin-top:4px}
/* 🎖️ certificates: the kid first, four compact «for» tabs, smaller design chips */
.certform{display:flex;flex-direction:column;gap:12px}
.ctfield{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);gap:6px}
.ctfield label{min-height:40px;font-size:.88rem;padding:2px 4px;text-align:center}
.certside .designs{grid-template-columns:repeat(4,1fr);gap:6px}
.certside .dchip{flex-direction:column;justify-content:center;min-height:0;padding:6px 4px;gap:4px;font-size:.72rem;text-align:center;line-height:1.25}
.certside .dchip .sw{width:26px;height:26px}
.certside .dchip .dn{display:block}
.certsex .btn{margin-inline-start:6px}
@media (min-width:560px){.certside .designs{grid-template-columns:repeat(8,1fr)}}
/* compact tabs: the count is a small bubble, names stay on one line; fold buttons are icons; a task is one line until opened */
.folkids>button,.foltabs>button,.revtabs>button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:40px;padding:4px 6px;font-size:.92rem}
.tcnt{display:inline-block;min-width:1.35em;margin-inline-start:5px;padding:0 5px;border-radius:999px;background:var(--soft);color:var(--muted);font-size:.72rem;line-height:1.55;font-weight:600;vertical-align:middle}
.seg>button.on .tcnt{background:rgba(0,0,0,.18);color:inherit}
.folhead .tcnt{font-size:.75rem}
.ficon{min-width:52px;min-height:44px;line-height:0;padding:4px 12px;display:inline-flex;align-items:center;justify-content:center;color:var(--primary)}
.folfold{justify-content:flex-end}
.tskhead{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;color:inherit;font:inherit;padding:2px 0;text-align:start;cursor:pointer;flex-wrap:wrap}
.tskhead .chev{color:var(--primary);width:1.1em;text-align:center}
.tskhead .chip{margin-inline-start:auto}
.task.tskc{padding-top:10px;padding-bottom:10px}
/* 🔑 the eye in password boxes; 🔔 the bell and its list */
.pwwrap{position:relative;display:block}
.pwwrap input{padding-inline-end:46px;width:100%}
.pweye{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.1rem;min-width:40px;min-height:40px;cursor:pointer;line-height:1}
.bell{position:relative}
.bdot{position:absolute;top:-6px;inset-inline-end:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--bad);color:#fff;font-size:.68rem;font-weight:700;line-height:18px;text-align:center}
.inbox{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.inbox li{border:1.5px solid var(--line);border-radius:14px;background:var(--surface)}
.inbox li.new{border-color:var(--primary)}
.inrow{display:flex;flex-direction:column;gap:3px;width:100%;background:none;border:none;color:inherit;font:inherit;text-align:start;padding:12px 14px;cursor:pointer}
.recbar{flex-wrap:wrap;gap:6px;margin:0 0 6px}
.recbar .folfold{margin:0}
.certside{display:flex;flex-direction:column;gap:12px}
.certside #cpage{margin:0}
.certgrid{display:flex;flex-direction:column;gap:18px}
@media (min-width:900px){
  body[data-view="parent"][data-psec="certs"] #app{max-width:min(1600px,calc(100vw - 32px))}
  .certgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:start}
  .certside{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
}
.codebk{display:flex;flex-direction:column;gap:6px;border:2px solid var(--bad,#b33434)}
.codebk p{margin:0}
.movebox{display:flex;flex-direction:column;gap:6px;border:2px solid var(--primary)}
.movebox p{margin:0}
.movebox .btn{align-self:flex-start}