/* ========== ธีมกระดาษเซเปีย ถนอมสายตา + โหมดกลางคืน ========== */
:root{
  --bg:#f2ece0; --bg2:#f8f4ea; --card:#fffdf7; --line:#e3d9c6;
  --ink:#2f2b24; --ink2:#5d564a; --muted:#857c6c;
  --green:#14553a; --green2:#1d7a52; --gold:#9a7320; --rose:#8c3b2f;
  --shadow:0 1px 2px rgba(60,48,28,.06),0 6px 20px rgba(60,48,28,.07);
  --r:16px; --fs:17px; --arfs:30px;
}
html[data-theme="dark"]{
  --bg:#14161a; --bg2:#191c21; --card:#1e2228; --line:#2e343d;
  --ink:#dfe3e6; --ink2:#b3bac2; --muted:#8b949e;
  --green:#6fd3a4; --green2:#4fbf8c; --gold:#d9b76a; --rose:#e89a8c;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Noto Sans Thai','Sarabun',system-ui,-apple-system,sans-serif;
  font-size:var(--fs);line-height:1.85;padding-bottom:76px;
}
img{max-width:100%;display:block}
a{color:var(--green2);text-decoration:none}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:var(--card);padding:8px;z-index:99}

/* ----- ฟอนต์อาหรับ: KFGQPC (วางไฟล์เองได้) → สำรอง Amiri Quran ----- */
@font-face{
  font-family:'KFGQPC';
  src:url('../fonts/UthmanicHafs.woff2') format('woff2'),
      url('../fonts/UthmanicHafs.ttf') format('truetype');
  font-display:swap;
}
.ar{
  font-family:'KFGQPC','Amiri Quran','Traditional Arabic',serif;
  font-size:var(--arfs); line-height:2.5; direction:rtl; text-align:right;
  color:var(--ink); margin:.4em 0 .2em; letter-spacing:0;
}
.ar.quran{color:var(--green);}
html[data-theme="dark"] .ar.quran{color:var(--green);}

/* ----- Topbar ----- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;
  padding:10px 12px;background:color-mix(in srgb,var(--bg2) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.brand-ar{font-family:'KFGQPC','Amiri Quran',serif;color:var(--gold);font-size:17px}
.brand-th{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-tools{display:flex;gap:6px}
.icon-btn{background:var(--card);border:1px solid var(--line);color:var(--ink);
  width:40px;height:40px;border-radius:12px;font-size:17px;cursor:pointer}
.icon-btn:active{transform:scale(.94)}

/* ----- Drawer ----- */
.drawer{position:fixed;top:0;left:-290px;width:280px;height:100%;z-index:60;
  background:var(--bg2);border-right:1px solid var(--line);overflow:auto;
  transition:left .25s ease;padding:16px 12px 90px}
.drawer.open{left:0}
.drawer-h{font-weight:700;color:var(--muted);margin:4px 8px 10px;font-size:13px}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer a{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:12px;color:var(--ink)}
.drawer a.on{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green);font-weight:700}
.nv-i{width:26px;text-align:center}
.soon{font-size:11px;color:var(--muted);font-style:normal;margin-inline-start:auto}
.drawer-f{font-size:11.5px;color:var(--muted);margin-top:18px;padding:0 10px;line-height:1.7}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50}

/* ----- Hero ----- */
.hero{position:relative;margin:0 0 6px}
.hero img{width:100%;height:210px;object-fit:cover;filter:saturate(.85) brightness(.82)}
.hero-txt{position:absolute;inset:auto 0 0 0;padding:16px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.78),transparent)}
.hero-txt h1{margin:0;font-size:21px;line-height:1.45}
.hero-txt p{margin:4px 0 0;font-size:14px;opacity:.92}

/* ----- Layout ----- */
.wrap{max-width:780px;margin:0 auto;padding:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin:12px 0;box-shadow:var(--shadow)}
.card h3{margin:0 0 10px;color:var(--green);font-size:17px}
.sec-h{max-width:780px;margin:26px auto 2px;padding:0 4px;font-size:19px;color:var(--green);
  border-inline-start:4px solid var(--green);padding-inline-start:10px}
.intro p{margin:.3em 0}
.muted{color:var(--muted);font-size:14px}
.toc ol{margin:0;padding-inline-start:20px}
.toc li{margin:4px 0}

/* ----- Steps ----- */
.step-list{list-style:none;margin:0;padding:0}
.step-list li{display:flex;gap:12px;padding:12px 0;border-top:1px dashed var(--line)}
.step-list li:first-child{border-top:0}
.num{flex:0 0 28px;height:28px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:700}
html[data-theme="dark"] .num{color:#10241b}
.step-list b{color:var(--ink);display:block;margin-bottom:2px}
.step-list p{margin:0;color:var(--ink2);font-size:15.5px}
.proof{display:inline-block;margin-top:6px;font-size:12.5px;color:var(--gold);
  background:color-mix(in srgb,var(--gold) 12%,transparent);padding:3px 9px;border-radius:999px}

/* ----- Revelation cards ----- */
.ayah{border-inline-start:4px solid var(--green)}
.hadith{border-inline-start:4px solid var(--gold)}
.dua{border-inline-start:4px solid var(--green2)}
.rev-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:4px}
.tag{font-size:12px;padding:2px 10px;border-radius:999px;color:#fff;font-weight:700}
.tag.q{background:var(--green)} .tag.h{background:var(--gold)} .tag.d{background:var(--green2)}
html[data-theme="dark"] .tag{color:#10241b}
.ref{font-size:13px;color:var(--muted)}
.grade{font-size:12px;color:var(--rose);margin-inline-start:auto}
.tr{font-size:15px;color:var(--ink2);font-style:italic;margin:.2em 0 .6em}
.rev-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.btn{background:var(--green);color:#fff;border:0;padding:9px 15px;border-radius:999px;
  font-family:inherit;font-size:14px;cursor:pointer}
html[data-theme="dark"] .btn{color:#0f2019}
.btn.ghost{background:transparent;color:var(--green);border:1px solid var(--green)}
.btn:active{transform:scale(.96)}
.btn.playing{background:var(--gold)}
.meaning{margin-top:12px;padding:12px;border-radius:12px;
  background:color-mix(in srgb,var(--green) 8%,transparent);font-size:15.5px}
.meaning small{display:block;margin-top:8px;color:var(--muted);font-size:12px}

/* ----- Callouts ----- */
.callout{max-width:780px;margin:12px auto;padding:14px 16px;border-radius:var(--r);font-size:15.5px}
.callout b{display:block;margin-bottom:5px}
.callout p{margin:0;color:var(--ink2)}
.note {background:color-mix(in srgb,var(--green2) 12%,var(--card));border:1px solid var(--line)}
.warn {background:color-mix(in srgb,var(--rose) 11%,var(--card));border:1px solid color-mix(in srgb,var(--rose) 30%,var(--line))}
.fatwa{background:color-mix(in srgb,var(--gold) 11%,var(--card));border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line))}
.fatwa small{display:block;margin-top:8px;color:var(--muted);font-size:12.5px}

/* ----- Table ----- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:430px}
th,td{padding:10px;border:1px solid var(--line);text-align:start;vertical-align:top}
th{background:color-mix(in srgb,var(--green) 13%,var(--card));color:var(--green);font-weight:700}
tr:nth-child(even) td{background:color-mix(in srgb,var(--line) 22%,transparent)}

/* ----- Gallery / tiles ----- */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:12px 0}
.gallery figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.gallery img{height:150px;width:100%;object-fit:cover}
.gallery figcaption{padding:9px 11px;font-size:13px;color:var(--ink2)}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 12px;text-align:center;box-shadow:var(--shadow);color:var(--ink)}
.tile .t-i{font-size:28px;display:block}
.tile .t-t{font-weight:600;font-size:14.5px;display:block;margin-top:6px}
.tile.dim{opacity:.62}
.tile .soon{display:block;font-size:11px;color:var(--muted);margin-top:3px}

/* ----- Quiz & games ----- */
.q-opt{display:block;width:100%;text-align:start;margin:7px 0;padding:12px 14px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--line);color:var(--ink);font-family:inherit;font-size:15.5px;cursor:pointer}
.q-opt.ok{background:color-mix(in srgb,var(--green2) 26%,var(--card));border-color:var(--green2)}
.q-opt.no{background:color-mix(in srgb,var(--rose) 22%,var(--card));border-color:var(--rose)}
.q-exp{margin-top:10px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--gold) 13%,transparent);font-size:14.5px}
.q-bar{height:7px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:14px}
.q-fill{height:100%;width:0;background:var(--green2);transition:width .35s}
.q-score{text-align:center;font-weight:700;color:var(--green);margin:10px 0 0}
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.mem-c{aspect-ratio:3/4;border-radius:12px;border:1px solid var(--line);background:var(--green);
  color:#fff;display:grid;place-items:center;text-align:center;padding:4px;font-size:13px;cursor:pointer;
  transition:transform .18s}
.mem-c .face{display:none}
.mem-c.flip,.mem-c.done{background:var(--card);color:var(--ink)}
.mem-c.flip .face,.mem-c.done .face{display:block}
.mem-c.flip .back,.mem-c.done .back{display:none}
.mem-c.done{opacity:.55}
.mem-c .face.arab{font-family:'KFGQPC','Amiri Quran',serif;font-size:19px;direction:rtl}
.mem-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.mem-stat{font-size:14px;color:var(--muted)}
.ord-pool,.ord-slot{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:7px}
.ord-pool li,.ord-slot li{background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;font-size:15px;cursor:pointer}
.ord-slot{min-height:40px;border:1px dashed var(--line);border-radius:12px;padding:8px}
.ord-slot li{background:color-mix(in srgb,var(--green) 12%,var(--card))}
.ord-msg{font-weight:700;margin-top:8px}
.flash-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 16px;text-align:center;min-height:150px;cursor:pointer;margin:12px 0}
.flash-card .hint{color:var(--muted);font-size:13px}

/* ----- Tabbar ----- */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:45;display:flex;
  background:color-mix(in srgb,var(--bg2) 95%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;text-align:center;padding:9px 2px 10px;font-size:11.5px;color:var(--muted)}
.tabbar a.on{color:var(--green);font-weight:700}
.tabbar i{display:block;font-style:normal;font-size:19px;margin-bottom:1px}

@media(min-width:860px){
  .hero img{height:300px}
  .topbar{justify-content:center}
}
@media print{.topbar,.tabbar,.drawer,.rev-tools,.scrim{display:none!important}
  .meaning{display:block!important}body{background:#fff;padding:0}}

#toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%) translateY(16px);
  max-width:92%;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;
  font-size:14px;line-height:1.6;box-shadow:var(--shadow);z-index:90;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;text-align:center}
#toast.show{opacity:.96;transform:translateX(-50%) translateY(0)}
.hero img,.gallery img{background:linear-gradient(135deg,#14553a,#1d7a52)}

.divider{max-width:780px;margin:22px auto;text-align:center;color:var(--gold);
  font-family:'KFGQPC','Amiri Quran',serif;font-size:26px;opacity:.65}
.quote{border-inline-start:4px solid var(--gold);font-style:italic}
.quote footer{margin-top:8px;font-style:normal;color:var(--muted);font-size:14px}
.tbl-hint{margin:8px 0 0;font-size:12px;color:var(--muted);text-align:center}
@media(min-width:760px){.tbl-hint{display:none}}
.src-note{background:transparent;box-shadow:none;border-style:dashed}
.src-note small{color:var(--muted);font-size:12px;line-height:1.8;display:block}

/* แถบเมนูด้านล่างแบบเลื่อนได้ */
.tabbar{
  display:flex;
  overflow-x:auto;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; /* ซ่อน scrollbar บน Firefox */
}
.tabbar::-webkit-scrollbar{display:none} /* ซ่อน scrollbar บน Chrome/Safari */
.tabbar a{
  flex:0 0 auto;
  min-width:62px;
  padding:8px 6px 10px;
}

/* ========== ค้นหา ========== */
.search-box{display:flex;gap:8px;align-items:center}
.search-box input[type=search]{flex:1;min-width:0;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:16px}
.search-box input[type=search]:focus{outline:2px solid var(--green2);outline-offset:1px}
.drawer-search{padding:0 14px 10px}
.drawer-search input{width:100%;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chip{padding:6px 12px;border-radius:999px;background:var(--green-soft);color:var(--green2);
  font-size:14px;text-decoration:none;border:1px solid var(--line)}
.chip:hover{background:var(--green2);color:#fff}
.res-count{max-width:780px;margin:14px auto 6px;color:var(--muted);font-size:14px}
.card.res{display:block;text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s}
.card.res:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.12)}
.res-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.res-path{font-size:12px;color:var(--muted)}
.res-ar{font-size:calc(var(--arfs) - 6px);margin:6px 0;line-height:2}
.res-tr{font-size:13px;color:var(--muted);margin:2px 0}
.res-body{font-size:14px;line-height:1.85;margin:6px 0 4px}
.res-ref{color:var(--muted);font-size:12px}
mark{background:#ffe9a8;color:inherit;padding:0 2px;border-radius:3px}
[data-theme=dark] mark{background:#6b5a1f;color:#fff}

/* ========== คลังดุอาอฺ ========== */
.card.dua.now{outline:3px solid var(--gold);outline-offset:2px}
.star-badge{font-style:normal;font-size:12px;margin-inline-start:6px;letter-spacing:-2px}
.star-sum{font-size:15px}
.ql-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:10px}
.ql{display:flex;align-items:center;gap:10px;padding:14px;border-radius:14px;
  background:var(--green-soft);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.ql span{font-size:22px}
.ql:hover{background:var(--green2);color:#fff}
.ord-msg.ok{color:var(--green2);font-weight:700}
.ord-msg.bad{color:var(--rose);font-weight:700}
.print-bar{text-align:center;margin:18px auto 8px}

/* ========== โหมดพิมพ์เอกสาร A4 ========== */
@media print{
  @page{size:A4;margin:16mm 14mm}
  html{--fs:12pt;--arfs:19pt}
  body{background:#fff!important;color:#000!important}
  .topbar,.tabbar,.drawer,.scrim,.skip,.rev-tools,.print-bar,
  #toast,.quiz,.mem-grid,.gallery,.chips-card,.search-box,.ql-grid,
  .btn,.icon-btn{display:none!important}
  .hero{height:auto!important}
  .hero img{display:none!important}
  .hero-txt{position:static!important;color:#000!important;padding:0!important;background:none!important}
  .hero-txt h1{font-size:20pt;margin:0 0 4pt}
  main{padding:0!important}
  .wrap{max-width:none!important;padding:0!important}
  .card,.callout,figure{box-shadow:none!important;border:1px solid #bbb!important;
    break-inside:avoid;page-break-inside:avoid;margin:0 0 8pt!important;padding:8pt!important;
    background:#fff!important;border-radius:4pt!important}
  .meaning{display:block!important;border-top:1px dashed #999;margin-top:6pt;padding-top:6pt}
  .meaning[hidden]{display:block!important}
  .sec-h{page-break-after:avoid;font-size:14pt;border-left:3pt solid #000;padding-left:6pt}
  .ar{line-height:2.1!important}
  table{width:100%;border-collapse:collapse;font-size:10pt}
  th,td{border:1px solid #999!important;padding:4pt!important}
  a{color:#000!important;text-decoration:none!important}
  .toc{display:none!important}
}



#duaPlayAll.on{background:#b4546a;border-color:#b4546a;color:#fff}
.card.now{outline:3px solid #c9a227;outline-offset:2px}
#seqCount:empty{display:none}



/* Quiz styles */
.q-num { color: #888; font-size: 0.9rem; margin-bottom: 6px; }
.q-text { font-size: 1.15rem; font-weight: 600; margin: 0 0 14px; line-height: 1.5; }
.q-options { display: flex; flex-direction: column; gap: 8px; }
.q-opt {
  display: block; width: 100%; text-align: left;
  padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--line, #ccc);
  background: var(--card, #fff); color: inherit;
  font: inherit; cursor: pointer; transition: 0.15s;
}
.q-opt:hover:not(:disabled) { background: var(--green-soft, #e5f1ea); }
.q-opt.ok { background: #d9f2e3; border-color: #3a9d68; }
.q-opt.no { background: #f8dde3; border-color: #b4546a; }
.q-opt:disabled { cursor: default; opacity: 0.95; }
.q-explain {
  margin-top: 14px; padding: 12px 14px;
  background: #f7f7f2; border-radius: 10px;
  font-size: 0.95rem; line-height: 1.5;
}
.q-next { margin-top: 16px; }
.q-bar { height: 6px; background: #e5e5e0; border-radius: 99px; margin: 16px 0 8px; overflow: hidden; }
.q-fill { height: 100%; background: var(--green, #1f5f43); width: 0; transition: width 0.3s; }
.q-score { font-size: 0.9rem; color: #666; min-height: 1.3em; }