/* ===== Ashara Masahif Reader — Islam Teaching theme ===== */
:root{
  --navy:#0a1731;
  --navy-2:#060f22;
  --navy-3:#13244a;
  --line:rgba(255,255,255,.08);
  --orange:#f7941d;
  --orange-2:#e07c06;
  --orange-soft:rgba(247,148,29,.14);
  --txt:#e8ecf5;
  --muted:#93a0bb;
  --stage:#eceef3;
  --stage-2:#e2e5ec;
  --ink:#1b2236;
  --sb-w:320px;
  --top-h:58px;
  --bot-h:68px;
  --radius:10px;
  --ui:"Roboto Condensed",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ar:"Amiri","Traditional Arabic",serif;
  --brand:"Berkshire Swash",Georgia,serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--ui);background:var(--navy-2);color:var(--txt);overflow:hidden;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
[hidden]{display:none!important}

.app{display:flex;height:100%;height:100dvh}

/* ---------- Sidebar ---------- */
.sidebar{width:var(--sb-w);flex:none;background:var(--navy);display:flex;flex-direction:column;border-right:1px solid var(--line);z-index:30;transition:transform .28s ease, margin .28s ease}
.app.sb-hidden .sidebar{margin-left:calc(var(--sb-w) * -1)}
.sb-head{height:var(--top-h);display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 16px;background:var(--navy-2);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;min-width:0}
.brand-mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#2a1a05,#0b0703);border:1px solid rgba(247,148,29,.45);color:var(--orange)}
.brand-mark svg{width:18px;height:18px}
.brand-mark img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.brand-text{font-family:var(--brand);font-size:21px;color:var(--orange);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.book-card{position:relative;display:flex;gap:14px;padding:16px;border-bottom:1px solid var(--line)}
.book-cover{width:62px;height:82px;flex:none;border-radius:6px;display:grid;place-items:center;
  background:linear-gradient(145deg,#1d3a2a,#0f2318);border:2px solid #b8913a;box-shadow:inset 0 0 0 3px #0f2318,inset 0 0 0 4px #b8913a,0 6px 16px rgba(0,0,0,.35)}
.book-cover span{font-family:var(--ar);color:#e6c36a;font-size:17px;font-weight:700}
.book-meta{min-width:0;padding-right:62px;display:flex;flex-direction:column;gap:2px}
.book-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.book-title{font-weight:700;font-size:17px;color:#fff;line-height:1.2}
.book-ar{font-family:var(--ar);font-size:16px;color:#e6c36a;line-height:1.5;text-align:left}
.link-btn{display:inline-flex;align-items:center;gap:6px;color:var(--orange);font-size:14px;margin-top:4px;align-self:flex-start}
.link-btn svg{width:16px;height:16px}
.link-btn:hover{text-decoration:underline}
.page-badge{position:absolute;right:14px;top:14px;background:var(--orange-soft);color:var(--orange);border:1px solid rgba(247,148,29,.35);font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:4px}

.tabs{display:flex;margin:14px 16px 10px;border:1px solid rgba(247,148,29,.55);border-radius:8px;overflow:hidden}
.tab{flex:1;padding:9px 0;font-size:14.5px;white-space:nowrap;color:#dfe5f1;transition:background .15s}
.tab:hover{background:rgba(255,255,255,.04)}
.tab.active{background:var(--orange);color:#fff;font-weight:700}

.search{margin:0 16px 8px;display:flex;align-items:center;gap:8px;background:var(--navy-3);border:1px solid var(--line);border-radius:8px;padding:0 10px;color:var(--muted)}
.search svg{width:16px;height:16px}
.search input{flex:1;background:none;border:0;outline:0;padding:9px 0;color:#fff;min-width:0}
.search input::placeholder{color:var(--muted)}

.list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:#2b3b62 transparent}
.row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 16px;border-bottom:1px solid var(--line);color:#dfe5f1;transition:background .12s}
.row:hover{background:rgba(255,255,255,.04)}
.row.active{background:var(--orange-soft);box-shadow:inset 3px 0 0 var(--orange)}
.row .num{width:24px;color:var(--muted);font-size:13px;text-align:right}
.row .name{flex:1;min-width:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .ar{font-family:var(--ar);color:#cfd6e6;font-size:16px}
.row .type{width:18px;height:18px}
.row .type.mk{color:#e6c36a}
.row .type.md{color:#4ade80}
.row .pg{min-width:30px;text-align:right;color:var(--muted);font-size:13px}
.row .del{opacity:.5;padding:4px}
.row .del:hover{opacity:1;color:#ff8a8a}
.row .del svg{width:16px;height:16px}
.empty{padding:28px 20px;color:var(--muted);text-align:center;line-height:1.5;font-size:15px}

/* setup */
.setup{border-top:2px solid var(--orange);padding:12px 16px 16px;background:var(--navy-2);display:flex;flex-direction:column;gap:8px}
.setup-title{font-weight:700;color:var(--orange)}
.setup-note{margin:0;color:var(--muted);font-size:13px;line-height:1.4}
.setup-row{display:flex;gap:8px}
.setup select{flex:1;min-width:0;background:var(--navy-3);border:1px solid var(--line);border-radius:6px;padding:6px;color:#fff}
.setup textarea{width:100%;background:#050b18;border:1px solid var(--line);border-radius:6px;color:#9fe0b0;font:12px/1.4 ui-monospace,Consolas,monospace;padding:8px;resize:vertical}

.scrim{display:none}

/* ---------- Buttons ---------- */
.icon-btn{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:8px;color:inherit;transition:background .15s,color .15s;text-decoration:none}
.icon-btn:hover{background:rgba(127,140,170,.16)}
.icon-btn.on{color:var(--orange)}
.icon-btn.on svg{fill:currentColor}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--orange);color:#fff;border-radius:8px;padding:9px 16px;font-weight:700;text-decoration:none;box-shadow:0 4px 14px rgba(247,148,29,.3);transition:background .15s,transform .1s}
.btn:hover{background:var(--orange-2)}
.btn:active{transform:translateY(1px)}
.btn.sm{padding:7px 10px;font-size:13px;box-shadow:none;flex:1}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.btn svg{width:18px;height:18px}

/* ---------- Main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--stage)}
.topbar{height:var(--top-h);flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--navy);color:#fff;border-bottom:1px solid var(--line);z-index:5}
.tb-titles{flex:1;min-width:0;line-height:1.15}
.tb-surah{font-size:19px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-surah .ar{font-family:var(--ar);font-weight:400;color:#e6c36a;margin-left:8px}
.tb-sub{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-actions{display:flex;align-items:center;gap:2px}
.back-btn{margin-left:8px;padding:8px 14px}

/* ---------- Stage / pages ---------- */
.stage{position:relative;flex:1;min-height:0;overflow:hidden;background:radial-gradient(ellipse at center,var(--stage) 0%,var(--stage-2) 100%)}
.viewer{position:absolute;inset:0;overflow:auto;outline:0;scrollbar-width:thin;touch-action:pan-x pan-y}
.viewer.grab{cursor:grab}
.viewer.grabbing{cursor:grabbing}
.viewer.draw{cursor:crosshair;touch-action:none}
.viewer.erase{cursor:cell;touch-action:none}
.viewer.fxmode{cursor:none;touch-action:none}
.spread{min-width:100%;min-height:100%;width:max-content;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;padding:22px 28px;gap:0;margin:0 auto}
.page{position:relative;background:#fff;box-shadow:0 1px 2px rgba(10,23,49,.08),0 10px 30px rgba(10,23,49,.14);flex:none;user-select:none;-webkit-user-select:none}
.spread.two .page.r{border-radius:0 3px 3px 0}
.spread.two .page.l{border-radius:3px 0 0 3px}
.spread.two .page.r::after{content:"";position:absolute;inset:0 auto 0 0;width:28px;background:linear-gradient(90deg,rgba(0,0,0,.10),transparent);pointer-events:none}
.spread.two .page.l::after{content:"";position:absolute;inset:0 0 0 auto;width:28px;background:linear-gradient(270deg,rgba(0,0,0,.10),transparent);pointer-events:none}
.page canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.page .ink{z-index:2}
.page .pnum{position:absolute;bottom:-26px;left:0;right:0;text-align:center;font-size:13px;color:#6b7590;font-weight:700}
.page .spin{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.page .spin::before{content:"";width:34px;height:34px;border-radius:50%;border:3px solid rgba(247,148,29,.2);border-top-color:var(--orange);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spread.turn-next{animation:turnN .22s ease}
.spread.turn-prev{animation:turnP .22s ease}
@keyframes turnN{from{opacity:.35;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes turnP{from{opacity:.35;transform:translateX(18px)}to{opacity:1;transform:none}}

.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:8}

.edge{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:84px;display:grid;place-items:center;color:var(--navy);background:rgba(255,255,255,.55);border-radius:10px;opacity:0;transition:opacity .2s,background .2s;z-index:6}
.stage:hover .edge{opacity:.8}
.edge:hover{opacity:1;background:#fff}
.edge-l{left:10px}.edge-r{right:10px}
.edge svg{width:26px;height:26px}

.zoombox{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:2px;background:var(--navy);color:#fff;border-radius:10px;padding:3px;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:9}
.zoombox .icon-btn{width:36px;height:36px}
.zoombox svg{width:18px;height:18px}
.zoom-val{min-width:46px;text-align:center;font-size:13px;color:var(--muted)}

.msg{position:absolute;inset:0;display:grid;place-items:center;padding:24px;z-index:9;text-align:center}
.msg .box{max-width:460px;background:var(--navy);color:var(--txt);border-radius:14px;padding:28px;box-shadow:0 20px 50px rgba(0,0,0,.3);line-height:1.5}
.msg h3{margin:0 0 8px;color:var(--orange);font-size:20px}
.msg code{background:#050b18;padding:2px 6px;border-radius:4px;font-size:13px;color:#9fe0b0}
.msg .bar{height:6px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden;margin-top:14px}
.msg .bar i{display:block;height:100%;width:30%;background:var(--orange);border-radius:6px;animation:load 1.2s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}

.toast{position:absolute;left:50%;top:16px;transform:translate(-50%,-20px);background:var(--navy);color:#fff;padding:9px 16px;border-radius:8px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:20;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Bottom bar ---------- */
.bottombar{height:var(--bot-h);flex:none;display:flex;align-items:center;gap:8px;padding:0 10px;background:#fff;border-top:1px solid #dde1ea;color:var(--ink);position:relative;z-index:10}
.nav-btn{display:flex;align-items:center;gap:4px;font-size:16px;padding:10px 12px;border-radius:8px;color:var(--ink);white-space:nowrap}
.nav-btn:hover{background:#f1f3f7;color:var(--orange-2)}
.bb-center{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:14px}
.tools{display:flex;align-items:center;gap:2px}
.tool{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:54px;padding:6px 4px;border-radius:8px;color:#3a4460;font-size:11.5px;transition:background .12s,color .12s}
.tool:hover{background:#f1f3f7}
.tool.active{background:var(--orange-soft);color:var(--orange-2)}
.tool svg{width:21px;height:21px}
.sep{width:1px;height:30px;background:#dde1ea;margin:0 6px}
.swatches{display:flex;gap:5px;padding:0 6px;transition:opacity .15s}
.swatches.dim,.sizes.dim{opacity:.45}
.sizes{display:flex;align-items:center;gap:2px;padding:0 4px;transition:opacity .15s}
.sz{width:26px;height:30px;display:grid;place-items:center;border-radius:7px}
.sz:hover{background:#f1f3f7}
.sz i{display:block;width:var(--d);height:var(--d);border-radius:50%;background:var(--ink,#3a4460)}
.sz.active{background:var(--orange-soft);box-shadow:inset 0 0 0 1.5px var(--orange)}
body.night .sz:hover{background:rgba(255,255,255,.06)}
body.night .sz i{box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.trace-prog{display:flex;align-items:center;gap:6px;font-size:13px;color:#cfd6e6;margin-top:4px}
.trace-prog svg{width:15px;height:15px;color:var(--orange)}
.trace-prog b{color:#fff}
.spread.hide-ink canvas.ink{visibility:hidden}
.page{-webkit-touch-callout:none}
.viewer.draw .page,.viewer.erase .page{touch-action:none}
.sw{width:20px;height:20px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff,0 0 0 3px #cfd5e2;transition:transform .12s}
.sw.active{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--navy);transform:scale(1.08)}
.pager{display:flex;align-items:center;gap:4px;color:var(--ink)}
.goto{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:14px;color:#5a6480}
.goto input{width:56px;text-align:center;padding:7px 4px;border:1px solid #d3d8e3;border-radius:7px;background:#f7f8fb;color:var(--ink);font-weight:700;outline:0}
.goto input:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.tools-toggle{display:none}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:50;background:rgba(3,8,20,.62);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px;animation:fade .18s ease}
@keyframes fade{from{opacity:0}}
.modal-card{width:min(860px,100%);max-height:90vh;display:flex;flex-direction:column;background:var(--navy);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 22px 12px}
.modal-kicker{color:var(--orange);font-family:var(--brand);font-size:18px}
.modal-head h2{margin:2px 0 0;font-size:24px;color:#fff}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;padding:10px 22px 24px;overflow-y:auto}
.bk{display:flex;gap:12px;align-items:center;text-align:left;padding:12px;border-radius:12px;background:var(--navy-3);border:1px solid var(--line);transition:border-color .15s,transform .15s,background .15s}
.bk:hover{border-color:rgba(247,148,29,.6);transform:translateY(-2px)}
.bk.active{border-color:var(--orange);background:linear-gradient(135deg,rgba(247,148,29,.16),var(--navy-3))}
.bk .book-cover{width:46px;height:60px}
.bk .book-cover span{font-size:13px}
.bk .t{font-weight:700;color:#fff;font-size:16px}
.bk .a{font-family:var(--ar);color:#e6c36a;font-size:15px}
.bk .n{font-size:12px;color:var(--muted)}

/* ---------- Night mode ---------- */
body.night .main{--stage:#0f1a31;--stage-2:#081023}
body.night .page{background:#1a1a1a;box-shadow:0 10px 30px rgba(0,0,0,.5)}
body.night .page canvas.pdf{filter:brightness(.82) contrast(1.05) sepia(.12)}
body.night .page .pnum{color:#8a95b0}
body.night .bottombar{background:var(--navy);border-top-color:var(--line);color:var(--txt)}
body.night .nav-btn,body.night .pager,body.night .goto{color:var(--txt)}
body.night .nav-btn:hover,body.night .tool:hover{background:rgba(255,255,255,.06)}
body.night .tool{color:#c4cde0}
body.night .goto input{background:var(--navy-3);border-color:var(--line);color:#fff}
body.night .sep{background:var(--line)}
body.night .sw{box-shadow:0 0 0 2px var(--navy),0 0 0 3px #3a4a70}
body.night .sw.active{box-shadow:0 0 0 2px var(--navy),0 0 0 4px #fff}
body.night #darkBtn{color:var(--orange)}

/* ---------- Full screen ---------- */
.app.full .sidebar{margin-left:calc(var(--sb-w) * -1)}
.app.full .topbar{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1560px) and (min-width:901px){
  .tool span{display:none}
  .tool{min-width:40px;padding:8px}
}
@media (max-width:1180px){
  .nav-btn span{display:none}
  .sizes .sz{width:22px}
}
@media (max-width:900px){
  :root{--sb-w:300px;--top-h:54px;--bot-h:60px}
  .sidebar{position:fixed;inset:0 auto 0 0;height:100%;transform:translateX(-100%);box-shadow:20px 0 50px rgba(0,0,0,.4)}
  .app.sb-open .sidebar{transform:none}
  .app.sb-hidden .sidebar{margin-left:0}
  .scrim{display:block;position:fixed;inset:0;background:rgba(3,8,20,.5);z-index:25;opacity:0;pointer-events:none;transition:opacity .25s}
  .app.sb-open .scrim{opacity:1;pointer-events:auto}
  .back-btn span{display:none}
  .back-btn{padding:0;width:40px;height:40px;box-shadow:none;background:transparent;color:var(--orange);margin-left:0}
  .edge{display:none}
  .spread{padding:14px 10px 30px}
  .zoombox{bottom:10px;right:10px}
  .zoombox #fitH,.zoombox #fitW{display:none}
  .tools-toggle{display:inline-grid}
  .tools{position:absolute;left:8px;right:8px;bottom:calc(var(--bot-h) + 8px);background:#fff;border-radius:14px;padding:8px;box-shadow:0 12px 40px rgba(10,23,49,.28);flex-wrap:wrap;justify-content:center;gap:4px;opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s}
  body.night .tools{background:var(--navy-3)}
  .tools.open{opacity:1;pointer-events:auto;transform:none}
  .tools .sep{display:none}
  .swatches{justify-content:center;padding:6px 0 2px;order:10}
  .sizes{order:11;padding:6px 0 2px}
  .sizes .sz{width:34px;height:34px}
  .sw{width:26px;height:26px}
  .tool span{display:block;font-size:10.5px}
  .tool{min-width:52px}
  .bb-center{gap:6px}
  .goto > span:first-child{display:none}
  .goto input{width:50px}
  #viewBtn{display:none}
}
@media (max-width:520px){
  .tb-actions #darkBtn{display:none}
}
@media (max-width:420px){
  .tb-actions #shareBtn{display:none}
  .tb-surah{font-size:17px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}