/* Layout idea: a quiet shelf (cover grid) that hands over to a full-screen, paged reader. */
:root{
  --bg:#F2F5F3; --surface:#FFFFFF; --ink:#15211E; --muted:#5C6A66; --line:#D9E0DC;
  --accent:#0E6B5C; --accent-ink:#FFFFFF; --gold:#B9860F; --lock:#8A4B2A; --bad:#A12B2B;
  --f-display:"Reem Kufi","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --f-ui:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  --f-naskh:"Noto Naskh Arabic","Amiri","Traditional Arabic",serif;
  --f-amiri:"Amiri","Noto Naskh Arabic","Traditional Arabic",serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0E1615; --surface:#17211F; --ink:#E4EBE8; --muted:#9AA8A3; --line:#2A3835;
    --accent:#4DBFA5; --accent-ink:#06211B; --gold:#E3B341; --lock:#E0946B; --bad:#F08A8A; color-scheme:dark;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.7}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.35}
a{color:var(--accent)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

.top{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:12px}
.brand{font-family:var(--f-display);font-weight:700;font-size:22px;color:var(--accent);background:none;border:0;padding:0;text-decoration:none}
.search{flex:1 1 180px;min-width:0}
input[type=text],input[type=search],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px;max-width:100%}
.btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:8px;padding:9px 18px;font-weight:600;text-decoration:none;display:inline-block}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
.btn.small{padding:6px 12px;font-weight:500;font-size:14px}
.btn.danger{background:transparent;color:var(--bad);border:1px solid var(--line)}
.btn[disabled]{opacity:.5;cursor:default}
.note{background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--gold);border-radius:8px;padding:12px 16px;margin:16px 0}
.note.bad{border-inline-start-color:var(--bad)}
.msg{min-height:1.7em;margin:8px 0;color:var(--muted)}
.msg.bad{color:var(--bad)}.msg.ok{color:var(--accent)}

.lib-head{padding-block:28px 14px}
.lib-head h1{font-size:28px}
.lib-head p{margin:4px 0 0;color:var(--muted);max-width:60ch}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:18px}
.chip{background:transparent;border:1px solid var(--line);border-radius:99px;padding:4px 14px;font-size:14px;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.resume{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.resume span{flex:1 1 200px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 20px;padding-bottom:56px}
.card{background:none;border:0;padding:0;text-align:start;display:flex;flex-direction:column;gap:8px}
.card b{font-weight:600;line-height:1.4}
.card small{color:var(--muted)}
.cover{aspect-ratio:2/3;border-radius:3px 8px 8px 3px;padding:14px 12px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--c1,#0E6B5C),var(--c2,#12332E));box-shadow:0 6px 16px rgba(0,0,0,.18);transition:transform .15s}
.cover::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 2px,transparent 2px 14px),
  repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 2px,transparent 2px 14px)}
.cover h3{position:relative;font-size:19px;font-weight:700}
.cover span{position:relative;font-size:12px;opacity:.9}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.card:hover .cover{transform:translateY(-3px)}
.badge{align-self:flex-start;font-size:12px;border-radius:4px;padding:0 8px;border:1px solid currentColor}
.badge.free{color:var(--accent)}.badge.paid{color:var(--lock)}.badge.own{color:var(--gold)}
.empty{color:var(--muted);padding:30px 0}

.book{display:grid;grid-template-columns:220px 1fr;gap:32px;padding-block:28px 56px;align-items:start}
.book .cover{width:100%}
.book h1{font-size:30px}
.book .by{color:var(--muted);margin:4px 0 12px}
.book p.desc{max-width:62ch;margin:14px 0 20px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.toc{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line);max-width:520px}
.toc button{width:100%;display:flex;justify-content:space-between;gap:12px;background:none;border:0;border-bottom:1px solid var(--line);padding:10px 4px;text-align:start}
.toc button:hover{color:var(--accent)}
.toc .st{font-size:13px;color:var(--muted);white-space:nowrap}
.toc .st.locked{color:var(--lock)}
@media (max-width:640px){.book{grid-template-columns:1fr}.book .cover{max-width:180px}}

.page{padding-block:28px 56px;max-width:720px}
.page h1{font-size:28px;margin-bottom:12px}
.page h2{font-size:20px;margin:28px 0 10px}
.form{display:flex;flex-direction:column;gap:12px;max-width:380px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted)}
.form label input,.form label select,.form label textarea{color:var(--ink);font-size:16px}
.tbl-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:start;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-weight:500;white-space:nowrap}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{font-size:12px;border-radius:99px;padding:1px 10px;border:1px solid currentColor;white-space:nowrap}
.pill.pending{color:var(--gold)}.pill.paid{color:var(--accent)}.pill.rejected{color:var(--bad)}

#reader{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;
  --r-bg:var(--surface);--r-ink:var(--ink);--r-soft:var(--muted);--r-line:var(--line);
  background:var(--r-bg);color:var(--r-ink);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#reader.t-sepia{--r-bg:#F0E2C6;--r-ink:#3A2D1D;--r-soft:#7A6649;--r-line:#DCCBA8}
#reader.t-night{--r-bg:#0A0E0D;--r-ink:#C6D0CC;--r-soft:#7F8D88;--r-line:#232D2A}
.r-bar{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--r-line);font-size:14px}
.r-bar.bottom{border-bottom:0;border-top:1px solid var(--r-line);justify-content:space-between}
.r-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--r-soft);text-align:center}
.r-btn{background:none;border:1px solid var(--r-line);border-radius:8px;padding:6px 12px;color:var(--r-ink);white-space:nowrap}
.r-btn[disabled]{opacity:.35;cursor:default}
.r-info{color:var(--r-soft);text-align:center;font-variant-numeric:tabular-nums;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:3px;background:var(--r-line)}
.bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}
.stage{flex:1;min-height:0;position:relative;display:flex;justify-content:center;padding:26px 22px}
#flow{flex:0 1 620px;min-width:0;overflow:hidden;column-gap:40px;column-fill:auto;font-family:var(--f-naskh);font-size:20px;line-height:2}
#flow h2{font-size:1.5em;margin:.2em 0 1em;break-after:avoid;color:var(--r-ink)}
#flow p{margin:0;text-align:justify;text-indent:1.6em;orphans:2;widows:2}
#flow p:first-of-type{text-indent:0}
#flow p.ctr,#flow p.sep{text-align:center;text-indent:0}
#flow p.sep{margin:.6em 0;color:var(--r-soft)}
#flow p.bd{font-weight:700;text-indent:0}
#flow .end{text-align:center;text-indent:0;color:var(--r-soft);margin-top:1.4em;font-family:var(--f-ui);font-size:.7em}
.lockbox{font-family:var(--f-ui);font-size:16px;line-height:1.8;border:1px solid var(--r-line);border-radius:10px;padding:22px;margin-top:6vh;break-inside:avoid}
.lockbox h3{font-size:20px;margin-bottom:8px}
.lockbox p{text-indent:0!important;text-align:start!important;color:var(--r-soft)}
.lockbox .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.wm{position:absolute;inset:0;overflow:hidden;pointer-events:none;display:flex;flex-wrap:wrap;gap:70px 50px;align-content:center;justify-content:center;opacity:.07;transform:rotate(-24deg) scale(1.5);font-size:13px;color:var(--r-ink)}
.zone{position:absolute;inset-block:0;width:28%;background:none;border:0;padding:0;cursor:pointer}
.zone.next{left:0}.zone.prev{right:0}
.panel{position:absolute;top:50px;z-index:3;background:var(--r-bg);color:var(--r-ink);border:1px solid var(--r-line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.25);padding:14px;width:min(320px,calc(100% - 28px));max-height:70%;overflow:auto}
#pToc{inset-inline-start:14px}#pSet{inset-inline-end:14px}
.panel h4{margin:0 0 8px;font-family:var(--f-ui);font-size:13px;color:var(--r-soft);font-weight:500}
.panel .row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.opt{flex:1;background:none;border:1px solid var(--r-line);border-radius:8px;padding:6px 8px;color:var(--r-ink)}
.opt[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.panel .toc{margin:0;border-color:var(--r-line)}
.panel .toc button{border-color:var(--r-line);color:var(--r-ink)}
.panel .toc .cur{color:var(--accent);font-weight:600}

dialog{border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:24px;width:min(520px,calc(100% - 32px))}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog h2{font-size:22px;margin-bottom:12px}
.choice{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px;cursor:pointer}
.choice span{flex:1}.choice b{font-variant-numeric:tabular-nums;white-space:nowrap}
.choice small{display:block;color:var(--muted)}

@media print{body>*{display:none!important}body::after{content:"الطباعة غير متاحة لهذا المحتوى.";display:block;padding:40px;font-size:20px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}