:root{--accent:#E8A33D;--cover:#241d34;--bg1:#171220;--bg2:#0f0b17;--ui:#cfc7e0;--ui2:#8f86a8;--panel:#1a1527;--paper:#fbf8f3;--edge:rgba(255,255,255,.08)}
[data-theme=light]{--bg1:#f1ece2;--bg2:#e4ddcf;--ui:#2a2338;--ui2:#6a6080;--panel:#fbf8f3;--edge:rgba(0,0,0,.1)}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans Malayalam","Noto Sans",Roboto,sans-serif;color:var(--ui);
  background:radial-gradient(900px 520px at 50% 40%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),linear-gradient(180deg,var(--bg1),var(--bg2));
  display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#top{height:44px;flex:none;display:flex;align-items:baseline;justify-content:center;gap:10px;padding:14px 16px 0;white-space:nowrap;overflow:hidden}
#ttl{font-size:14px;font-weight:650;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis}
#auth{font-size:12px;color:var(--ui2)}
#stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
#wrap{position:relative;transition:transform .95s cubic-bezier(.4,.1,.2,1)}
#book{position:relative;z-index:2;touch-action:none;-webkit-user-select:none;user-select:none}
.bd{position:absolute;top:-9px;bottom:-9px;z-index:0;transition:opacity .5s;
  background:linear-gradient(155deg,var(--cover),color-mix(in srgb,var(--cover),#000 48%));
  box-shadow:0 36px 48px -14px rgba(0,0,0,.7),0 10px 18px rgba(0,0,0,.4),inset 0 0 0 1px var(--edge)}
.bd.l{left:-9px;right:50%;border-radius:7px 0 0 7px}.bd.r{left:50%;right:-9px;border-radius:0 7px 7px 0}
.single .bd.l{display:none}.single .bd.r{left:-7px;right:-7px;top:-7px;bottom:-7px;border-radius:7px}
.edge{position:absolute;top:2px;bottom:2px;z-index:1;width:2px;transition:width .6s,opacity .5s;background:repeating-linear-gradient(90deg,#f4eee1 0 1px,#c6bba5 1px 2px)}
.edge.l{right:100%;border-radius:2px 0 0 2px}.edge.r{left:100%;border-radius:0 2px 2px 0}
.single .edge,.single .spine{display:none}
.spine{position:absolute;left:50%;top:0;bottom:0;width:7%;margin-left:-3.5%;z-index:3;pointer-events:none;transition:opacity .5s;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.2) 44%,rgba(0,0,0,.33) 50%,rgba(0,0,0,.2) 56%,transparent)}
.off{opacity:0}
.page{background:var(--paper);overflow:hidden;position:relative}
.page img{width:100%;height:100%;display:block;object-fit:contain;-webkit-user-drag:none;user-select:none;opacity:0;transition:opacity .25s}
.page img.in{opacity:1}
.page::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%),#efe9dc;background-size:200% 100%;animation:sh 1.2s linear infinite;z-index:0}
.page img{position:relative;z-index:1}
@keyframes sh{from{background-position:120% 0}to{background-position:-120% 0}}
.page::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,rgba(60,40,10,.2),rgba(60,40,10,0) 9%)}
.page.left::after{background:linear-gradient(270deg,rgba(60,40,10,.2),rgba(60,40,10,0) 9%)}
.page.hard::after{background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(255,255,255,.06) 4%,rgba(0,0,0,0) 8%)}
.page.hard.left::after{background:linear-gradient(270deg,rgba(0,0,0,.5),rgba(255,255,255,.06) 4%,rgba(0,0,0,0) 8%)}
#loading{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transition:opacity .4s}
#loading i{width:34px;height:34px;border-radius:50%;border:3px solid color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--accent);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
#progress{height:3px;flex:none;background:color-mix(in srgb,var(--ui) 12%,transparent)}
#progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s}
#bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));position:relative;
  background:color-mix(in srgb,var(--panel) 78%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.grp{display:flex;align-items:center;gap:2px;flex:1}.grp:last-child{justify-content:flex-end}.grp.mid{justify-content:center;flex:none;gap:6px}
#bar button,.x,#zbar button{width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--ui);display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .15s}
#bar button:hover,.x:hover,#zbar button:hover{background:color-mix(in srgb,var(--ui) 12%,transparent)}
#bar button:active,.x:active{transform:scale(.92)}
#bar button:disabled{opacity:.3;cursor:default}
#bar button svg,.x svg,#zbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#bar button:focus-visible,.x:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#bar button.on{color:var(--accent)}
#bPrev,#bNext{background:var(--accent)!important;color:#1a1625!important;width:48px!important}
#bPrev:hover,#bNext:hover{filter:brightness(1.08)}
#pg{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ui2);min-width:84px;justify-content:center}
#pgIn{width:46px;height:34px;border-radius:9px;border:1px solid color-mix(in srgb,var(--ui) 22%,transparent);background:transparent;color:var(--ui);text-align:center;font:inherit;font-size:14px}
#extras{display:flex;gap:2px}#bMore{display:none}
@media (max-width:640px){
  #bMore{display:grid}
  #extras{display:none;position:absolute;right:8px;bottom:calc(100% + 6px);background:var(--panel);border-radius:14px;padding:4px;box-shadow:0 14px 34px rgba(0,0,0,.5);border:1px solid var(--edge);flex-direction:row}
  #extras.open{display:flex}
  #bFull{display:none}
  #pg{min-width:70px}
}
.panel{position:fixed;inset:0;z-index:20;background:color-mix(in srgb,var(--bg2) 94%,transparent);backdrop-filter:blur(8px);overflow:auto;padding:max(14px,env(safe-area-inset-top)) 14px 24px}
.panel[hidden],#zoom[hidden]{display:none}
.ph{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:980px;margin:0 auto 14px}
.ph b{font-size:15px}.ph input{flex:1;height:46px;border-radius:12px;border:1px solid color-mix(in srgb,var(--ui) 24%,transparent);background:var(--panel);color:var(--ui);padding:0 14px;font:inherit;font-size:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;max-width:980px;margin:0 auto}
.grid button{border:0;background:none;color:var(--ui);cursor:pointer;text-align:center;font-size:12px;padding:0}
.grid img{width:100%;display:block;border-radius:5px;box-shadow:0 8px 18px -8px rgba(0,0,0,.6);background:#fff;aspect-ratio:var(--ratio)}
.grid button.cur img{outline:3px solid var(--accent)}.grid span{display:block;margin-top:6px;color:var(--ui2)}
.res{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.res button{text-align:left;border:1px solid var(--edge);background:var(--panel);color:var(--ui);border-radius:12px;padding:12px 14px;cursor:pointer;font:inherit;font-size:14px;line-height:1.5}
.res button b{color:var(--accent)}.res small{display:block;color:var(--ui2);margin-bottom:2px;font-size:11px;letter-spacing:.08em}
.res p{color:var(--ui2);text-align:center;margin-top:30px}
#zoom{position:fixed;inset:0;z-index:30;background:#0b0810;touch-action:none}
#zview{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none}
#zimg{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;user-select:none}
#zbar{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:rgba(26,21,39,.92);border-radius:16px;padding:6px;border:1px solid rgba(255,255,255,.1);color:#cfc7e0}
#zbar button{color:#cfc7e0}#zcap{font-size:13px;min-width:64px;text-align:center}
#toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translate(-50%,16px);background:#1a1527;color:#fff;padding:10px 16px;border-radius:12px;font-size:13px;opacity:0;pointer-events:none;transition:.3s;z-index:40;border:1px solid rgba(255,255,255,.12)}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){#wrap,.edge,.bd,#progress i{transition:none}.page::before{animation:none}}

/* corner peel hint (ours, drawn on top of the book; never touches the engine) */
.peel{position:absolute;top:0;z-index:4;pointer-events:none;width:0;height:0;transition:opacity .35s;--u:#cdc6b6;--f:#fdfaf4}
.peel.r{right:0;transform-origin:100% 0;animation:peelb 2.8s ease-in-out infinite}.peel.l{left:0;transform-origin:0 0;animation:peelb 2.8s ease-in-out .9s infinite}
@keyframes peelb{0%,100%{transform:scale(1)}50%{transform:scale(1.32)}}
.peel i{position:absolute;inset:0}
.peel.r .und{background:linear-gradient(45deg,rgba(0,0,0,.38),rgba(0,0,0,0) 62%),var(--u);clip-path:polygon(0 0,100% 0,100% 100%)}
.peel.r .flp{background:linear-gradient(45deg,rgba(0,0,0,.28),rgba(255,255,255,.55) 40%,rgba(0,0,0,0) 90%),var(--f);clip-path:polygon(0 0,100% 100%,0 100%);filter:drop-shadow(2px -2px 3px rgba(0,0,0,.4))}
.peel.l .und{background:linear-gradient(135deg,rgba(0,0,0,.38),rgba(0,0,0,0) 62%),var(--u);clip-path:polygon(0 0,100% 0,0 100%)}
.peel.l .flp{background:linear-gradient(135deg,rgba(0,0,0,.28),rgba(255,255,255,.55) 40%,rgba(0,0,0,0) 90%),var(--f);clip-path:polygon(100% 0,0 100%,100% 100%);filter:drop-shadow(-2px -2px 3px rgba(0,0,0,.4))}
.peel.off{opacity:0}
@media (prefers-reduced-motion:reduce){.peel{animation:none}}

/* ---- phones: the page fills the screen; controls are an overlay (tap the middle) ---- */
body.mobile{background:var(--cover);padding:0}
body.mobile #stage{position:fixed;inset:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body.mobile .bd,body.mobile .edge,body.mobile .spine{display:none}
body.mobile .page img{object-fit:cover}
body.mobile.fit .page img{object-fit:contain}
body.mobile #top{position:fixed;top:0;left:0;right:0;z-index:15;height:auto;padding:calc(10px + env(safe-area-inset-top)) 14px 22px;background:linear-gradient(rgba(0,0,0,.7),transparent);transform:translateY(-110%);transition:transform .28s;pointer-events:none;color:#fff}
body.mobile.ui #top{transform:none}
body.mobile #bar{position:fixed;left:0;right:0;bottom:3px;z-index:16;transform:translateY(115%);transition:transform .28s;background:rgba(18,13,28,.88)}
body.mobile.ui #bar{transform:none}
body.mobile #progress{position:fixed;left:0;right:0;bottom:0;z-index:17;height:3px;background:rgba(255,255,255,.15)}
body.mobile #toast{bottom:calc(96px + env(safe-area-inset-bottom))}

/* ---- glass controls (glassmorphism) ---- */
:root{--glass:rgba(255,255,255,.13);--glass-b:rgba(255,255,255,.30);--glass-hi:rgba(255,255,255,.55)}
[data-theme=light]{--glass:rgba(255,255,255,.55);--glass-b:rgba(255,255,255,.8);--glass-hi:#fff}
#bar,#zbar,#extras,#toast,.peelbtn{background:var(--glass)!important;backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--glass-b);box-shadow:0 12px 36px rgba(0,0,0,.35),inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 rgba(255,255,255,.06)}
#bar{border-radius:26px;margin:0 auto 14px;width:calc(100% - 24px);max-width:760px;padding:6px 10px;color:#fff}
[data-theme=light] #bar{color:var(--ink,#1a1625)}
#bar button{color:inherit;border-radius:50%;width:42px;height:42px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
#bar button:hover{background:rgba(255,255,255,.2)}
#bPrev,#bNext{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 88%,#fff),color-mix(in srgb,var(--accent) 62%,transparent))!important;color:#1a1625!important;border:1px solid rgba(255,255,255,.55)!important;width:46px!important;height:46px;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.7)}
#bar button:disabled{opacity:.28}
#pgIn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:inherit;border-radius:12px}
#pg{color:inherit;opacity:.9}
#extras{border-radius:20px}
#zbar{border-radius:22px;color:#fff}#zbar button{border-radius:50%;background:rgba(255,255,255,.08)}
#toast{color:#fff;border-radius:16px}
.panel{background:color-mix(in srgb,var(--bg2) 55%,transparent);backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%)}
.ph input{background:var(--glass);border:1px solid var(--glass-b);color:#fff;backdrop-filter:blur(12px)}
.res button{background:var(--glass);border:1px solid var(--glass-b);color:#fff;backdrop-filter:blur(12px)}
[data-theme=light] .panel,[data-theme=light] .ph input,[data-theme=light] .res button{color:var(--ink,#1a1625)}
body.mobile #bar{left:12px;right:12px;width:auto;bottom:calc(14px + env(safe-area-inset-bottom));margin:0;transform:translateY(160%)}
body.mobile.ui #bar{transform:none}
body.mobile #top{background:linear-gradient(rgba(0,0,0,.55),transparent)}
body.mobile #ttl{background:var(--glass);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);border:1px solid var(--glass-b);box-shadow:inset 0 1px 0 var(--glass-hi);border-radius:999px;padding:6px 14px;max-width:70vw}
body.mobile #auth{display:none}
@media (max-width:640px){#bar{padding:6px 8px}#bar button{width:40px;height:40px}#bPrev,#bNext{width:44px!important;height:44px}}

/* dark frosted glass: readable on light AND dark pages */
:root,[data-theme=light]{--glass:rgba(24,18,40,.50);--glass-b:rgba(255,255,255,.24);--glass-hi:rgba(255,255,255,.38)}
#bar,[data-theme=light] #bar,#zbar,#toast,#extras{color:#fff}
#bar button,[data-theme=light] #bar button{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.2)}
#bPrev:disabled,#bNext:disabled{filter:saturate(.3)}
.panel,[data-theme=light] .panel{color:#fff}
[data-theme=light] .ph input,[data-theme=light] .res button{color:#fff}
body.mobile #ttl{color:#fff}

/* ---- WhatsApp button, tappable page areas, "My list" sheet ---- */
#bWa{color:#4ade80}#bWa svg{stroke:#4ade80}
#bWa:not([hidden]){display:grid}
#bMark{position:relative}
.bdg{position:absolute;top:1px;right:1px;min-width:17px;height:17px;border-radius:9px;background:var(--accent);color:#1a1625;font:700 10px/17px ui-sans-serif,system-ui,sans-serif;place-items:center;padding:0 4px;font-style:normal;display:none}
.hs{position:absolute;z-index:4;display:block;border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:rgba(37,211,102,.35)}
.hs:focus-visible{outline:3px solid #25d366;outline-offset:2px}
.msheet{position:fixed;inset:0;z-index:35}.msheet[hidden]{display:none}
.msh-bg{position:absolute;inset:0;background:rgba(5,3,10,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.msh{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(560px,100%);max-height:88vh;overflow:auto;border-radius:26px 26px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom));
  background:rgba(24,18,40,.78);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid var(--glass-b);border-bottom:0;box-shadow:0 -20px 50px rgba(0,0,0,.5),inset 0 1px 0 var(--glass-hi);color:#fff;animation:shup .28s ease-out}
@keyframes shup{from{transform:translate(-50%,40px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.msh .x{color:#fff}
.sh-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.sh-h b{font-size:17px}
.msh .tabs{display:flex;gap:8px;margin-bottom:12px}
.msh .tabs button{flex:1;height:40px;border-radius:12px;border:1px solid var(--glass-b);background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:14px;cursor:pointer}
.msh .tabs button.on{background:var(--accent);color:#1a1625;border-color:transparent;font-weight:700}
.pg1{font-size:14px;opacity:.75;margin-bottom:10px}
.mk3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.mk{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:16px;border:1px solid var(--glass-b);background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:13px;line-height:1.25;cursor:pointer;text-align:center;transition:transform .12s,background .15s}
.mk:active{transform:scale(.96)}
.mk .ic{font-size:24px;line-height:1}
.mk.want.on{background:#1f9d62;border-color:#6ee7a8}.mk.like.on{background:#c98a1d;border-color:#f6d58f}.mk.skip.on{background:#b0405e;border-color:#f3a4b8}
.qty{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:14px}
.qty button{width:40px;height:40px;border-radius:50%;border:1px solid var(--glass-b);background:rgba(255,255,255,.1);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.qn{min-width:34px;text-align:center;font-size:20px;font-weight:700}
.msh textarea,.msh input{width:100%;border-radius:14px;border:1px solid var(--glass-b);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:16px;padding:12px 14px;resize:none;margin-bottom:10px}
.msh textarea:disabled{opacity:.55}
.msh ::placeholder{color:rgba(255,255,255,.55)}
.msh .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.msh .two input{margin-bottom:0}
.privacy{font-size:12px;opacity:.7;margin:10px 0 12px;line-height:1.45}
.okmsg{background:rgba(31,157,98,.25);border:1px solid #6ee7a8;border-radius:12px;padding:10px 12px;font-size:14px;margin-bottom:12px}
.empty{opacity:.75;font-size:14px;margin:6px 0 14px;line-height:1.5}
.sh-f{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.sh-f .primary{flex:1 1 100%;height:50px;border-radius:16px;border:0;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 92%,#fff),color-mix(in srgb,var(--accent) 70%,#a60));color:#1a1625;font:inherit;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 40%,transparent)}
.sh-f .primary.send{background:linear-gradient(145deg,#34d27b,#16a34a);color:#04210f;box-shadow:0 8px 22px rgba(34,197,94,.35)}
.sh-f .primary:disabled{opacity:.4;box-shadow:none;cursor:default}
.sh-f .ghost{flex:1;height:42px;border-radius:14px;border:1px solid var(--glass-b);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:14px;cursor:pointer}
.lst{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.lst .row{display:grid;grid-template-columns:44px 1fr 34px;gap:10px;align-items:center;padding:8px;border-radius:14px;border:1px solid var(--glass-b);background:rgba(255,255,255,.06);cursor:pointer}
.lst .row img{width:44px;border-radius:5px;display:block;background:#fff}
.lst .meta{display:flex;flex-direction:column;gap:2px;min-width:0}.lst .meta b{font-size:14px}.lst .meta em{font-style:normal;font-size:12px;opacity:.75;overflow-wrap:anywhere}
.lst .tg{font-size:13px}.lst .row.want .tg{color:#6ee7a8}.lst .row.like .tg{color:#f6d58f}.lst .row.skip .tg{color:#f3a4b8}
.lst .rm{width:34px;height:34px;border-radius:50%;border:1px solid var(--glass-b);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
body.sheetopen #bar{pointer-events:none}
@media (max-width:640px){#bar button{width:38px;height:38px}#bPrev,#bNext{width:42px!important;height:42px}#pg{min-width:58px}#pgIn{width:40px}}
@media (max-width:380px){#pgTot{display:none}#pg{min-width:44px}}

/* phone bar: 8 controls must fit 360px wide screens */
@media (max-width:640px){
  #bar{padding:6px 6px}
  #bar button{width:35px;height:35px}
  #bar button svg{width:20px;height:20px}
  #bPrev,#bNext{width:40px!important;height:40px}
  .grp.mid{gap:3px}
  #pg{min-width:50px;gap:3px}
  #pgIn{width:38px;height:32px;font-size:13px}
  #pgTot{font-size:11px}
  .bdg{top:0;right:0}
}
@media (max-width:380px){#pgTot{display:none}#pg{min-width:40px}}

@media (max-width:340px){#bThumbs,#bSound{display:none!important}}