:root{
  --bg:#07051a;--bg2:#120c33;--card:rgba(255,255,255,.06);--card-line:rgba(255,255,255,.12);
  --text:#f2f0ff;--muted:#a9a3d6;--accent:#8b5cff;--accent2:#22d3ee;--ok:#2ecc71;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Poppins',system-ui,sans-serif;background:radial-gradient(ellipse at top,var(--bg2),var(--bg) 60%);color:var(--text);min-height:100vh;overflow-x:hidden}
#bg3d{position:fixed;inset:0;z-index:0;pointer-events:none}
.page{position:relative;z-index:1}

/* Hero */
.hero{text-align:center;padding:90px 16px 40px;perspective:900px}
.hero h1{font-size:clamp(2.2rem,6vw,4.2rem);margin:0;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(90deg,#fff,var(--accent2),var(--accent),#fff);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 8s linear infinite, float 6s ease-in-out infinite}
.hero p{color:var(--muted);font-size:1.1rem;margin:14px auto 26px;max-width:560px}
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.badge{background:var(--card);border:1px solid var(--card-line);backdrop-filter:blur(8px);border-radius:99px;padding:7px 14px;font-size:.85rem}
@keyframes shine{to{background-position:300% 0}}
@keyframes float{0%,100%{transform:translateY(0) rotateX(8deg)}50%{transform:translateY(-10px) rotateX(-4deg)}}

/* Filters */
.filters{max-width:1200px;margin:0 auto;padding:0 16px 18px;display:flex;flex-direction:column;gap:12px}
.search{width:100%;max-width:520px;margin:0 auto;padding:13px 18px;border-radius:99px;border:1px solid var(--card-line);background:rgba(10,8,30,.7);color:var(--text);font:inherit;backdrop-filter:blur(8px)}
.search:focus{outline:2px solid var(--accent)}
.cats{display:flex;gap:8px;padding-bottom:4px;justify-content:center;flex-wrap:wrap}
.cat{background:var(--card);border:1px solid var(--card-line);color:var(--text);border-radius:99px;padding:7px 14px;font-size:.85rem;cursor:pointer;white-space:nowrap;box-shadow:none}
.cat.on{background:linear-gradient(135deg,var(--accent),#5b3bd6);border-color:transparent}

/* Grid of 3D books */
main{max-width:1200px;margin:0 auto;padding:10px 16px 60px;display:grid;gap:34px 22px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.item{display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;transform:translateY(30px);animation:rise .7s forwards}
@keyframes rise{to{opacity:1;transform:none}}
.stage{perspective:1000px;width:170px;height:240px;margin:6px 0 18px;cursor:pointer}
.book{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(-28deg) rotateX(6deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.stage:hover .book{transform:rotateY(-8deg) rotateX(2deg) translateZ(20px)}
.face{position:absolute;inset:0;border-radius:3px 8px 8px 3px}
.front{transform:translateZ(14px);padding:18px 16px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;overflow:hidden;background-size:cover;background-position:center;
  box-shadow:inset 6px 0 10px rgba(0,0,0,.35),0 20px 40px rgba(0,0,0,.45)}
.front::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.28) 0%,transparent 35%,transparent 70%,rgba(255,255,255,.08));pointer-events:none}
.front .ct{font-weight:800;font-size:1.05rem;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.front .ca{font-size:.72rem;opacity:.85;text-transform:uppercase;letter-spacing:.08em}
.front .ck{font-size:.65rem;background:rgba(0,0,0,.25);padding:3px 8px;border-radius:99px;align-self:flex-start}
.spine{width:28px;left:-14px;transform:rotateY(-90deg);border-radius:3px;filter:brightness(.7)}
.pages{left:auto;right:-14px;width:28px;transform:rotateY(90deg);background:repeating-linear-gradient(#f4f1e8 0 2px,#d9d4c4 2px 3px);border-radius:2px}
.back{transform:translateZ(-14px);filter:brightness(.55)}
.feat{position:absolute;top:-10px;right:-10px;transform:translateZ(30px);background:linear-gradient(135deg,#ffd166,#ff9f43);color:#3a2100;font-size:.7rem;font-weight:700;padding:4px 8px;border-radius:99px}
.item h3{margin:0 0 4px;font-size:1rem}
.item small{color:var(--muted)}
.buy{display:flex;align-items:center;gap:12px;margin-top:10px}
.price{font-weight:800;font-size:1.15rem}

button,.btn{background:linear-gradient(135deg,var(--accent),#5b3bd6);color:#fff;border:0;border-radius:10px;padding:10px 18px;font-size:.95rem;cursor:pointer;text-decoration:none;display:inline-block;font-family:inherit;
  box-shadow:0 6px 20px rgba(139,92,255,.35);transition:transform .15s,box-shadow .15s}
button:hover,.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(139,92,255,.5)}
button:disabled{opacity:.6;transform:none}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px}
footer{position:relative;z-index:1;text-align:center;color:var(--muted);padding:26px 16px;font-size:.88rem;border-top:1px solid var(--card-line)}
footer a{color:var(--muted)}

/* Payment window */
.modal{position:fixed;inset:0;background:rgba(3,2,12,.7);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}
.modal[hidden]{display:none}
.sheet{background:linear-gradient(160deg,#1b1546,#100c2b);border:1px solid var(--card-line);color:var(--text);border-radius:18px;padding:24px;width:100%;max-width:440px;max-height:92vh;overflow:auto;position:relative;
  animation:pop .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:perspective(800px) rotateX(18deg) scale(.92)}}
.sheet h2{margin:0 0 6px}
.close{position:absolute;top:10px;right:12px;background:none;box-shadow:none;color:var(--muted);font-size:1.6rem;padding:0 6px}
.muted{color:var(--muted);font-size:.9rem}
.opts{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.opt{display:block;text-align:center;border-radius:10px;padding:13px;font-size:1rem}
.copy{display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.3);border-radius:10px;padding:8px 10px;margin:6px 0 12px}
.copy code{flex:1;word-break:break-all;font-size:.88rem}
.copy button{padding:6px 10px;font-size:.82rem;box-shadow:none}
.qr{display:block;margin:6px auto 10px;width:180px;height:180px;background:#fff;border-radius:10px}
#txid{width:100%;padding:11px;border-radius:10px;border:1px solid var(--card-line);background:rgba(0,0,0,.35);color:var(--text);margin-top:6px;font-family:monospace}

/* Success page */
.center{max-width:520px;margin:12vh auto;text-align:center;padding:30px 20px;background:var(--card);border:1px solid var(--card-line);border-radius:18px;backdrop-filter:blur(10px);position:relative;z-index:1}
.center a{color:var(--accent2)}
.center .btn{color:#fff}

@media (max-width:520px){
  .hero{padding-top:60px}
  main{grid-template-columns:repeat(2,1fr);gap:26px 10px}
  .stage{width:130px;height:185px}
  .front{padding:12px 10px}
  .front .ct{font-size:.85rem}
  .buy{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.item{opacity:1;transform:none}}

/* Book details window */
.sheet:has(.detail-head){max-width:620px}
.detail-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:6px}
.detail-head h2{margin:8px 0 4px}
.detail-head .badge{display:inline-block}
.mini-cover{flex:0 0 96px;height:136px;border-radius:4px 8px 8px 4px;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:10px;font-size:.72rem;font-weight:800;line-height:1.2;box-shadow:inset 5px 0 8px rgba(0,0,0,.35),0 12px 26px rgba(0,0,0,.45);transform:perspective(500px) rotateY(-14deg)}
.sheet h3{margin:18px 0 6px;font-size:1rem}
.sheet p{line-height:1.6}
.toc,.learn{margin:0;padding-left:20px;line-height:1.7}
.learn li{margin-bottom:6px;color:var(--muted)}
button.ghost{background:transparent;border:1px solid var(--card-line);box-shadow:none}
button.ghost:hover{background:var(--card)}
@media (max-width:520px){.detail-head{flex-direction:column}.mini-cover{flex-basis:auto;width:96px}}

/* Stop the store from scrolling behind an open window */
body.locked{overflow:hidden}
.modal{overscroll-behavior:contain}
.sheet{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* Top bar with sign in / sign up */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;
  background:rgba(7,5,26,.55);backdrop-filter:blur(12px);border-bottom:1px solid var(--card-line)}
.logo{color:var(--text);text-decoration:none;font-weight:800;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth{display:flex;gap:8px;align-items:center;flex-shrink:0}
.auth button{padding:8px 14px;font-size:.88rem}
.hello{color:var(--muted);font-size:.88rem}
.hero{padding-top:60px}
.form label{display:block;font-size:.85rem;color:var(--muted);margin:12px 0 4px}
.form input{width:100%;padding:11px;border-radius:10px;border:1px solid var(--card-line);background:rgba(0,0,0,.35);color:var(--text);font:inherit}
.form input:focus{outline:2px solid var(--accent)}
.err{color:#ff7a93;font-size:.9rem;min-height:1em}
.sheet a{color:var(--accent2)}
.lib{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.lib-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(0,0,0,.25);border-radius:10px;padding:10px 12px}
.lib-row .btn{padding:8px 12px;font-size:.85rem}
@media (max-width:520px){.hello{display:none}.topbar{padding:10px 12px}.auth button{padding:7px 10px;font-size:.8rem}}

/* Mega Deal banner */
.mega{position:relative;max-width:1100px;margin:0 auto 34px;padding:28px 30px;border-radius:22px;display:flex;gap:34px;align-items:center;overflow:hidden;
  background:linear-gradient(120deg,rgba(255,77,109,.28),rgba(139,92,255,.32) 50%,rgba(34,211,238,.22));border:1px solid rgba(255,255,255,.18);
  box-shadow:0 20px 60px rgba(139,92,255,.25);backdrop-filter:blur(10px)}
.mega[hidden]{display:none}
.mega::before{content:'';position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.08),transparent 30%);animation:spin 10s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.mega-stack{position:relative;flex:0 0 190px;height:170px;perspective:800px}
.mega-book{position:absolute;bottom:0;left:calc(var(--i) * 30px);width:92px;height:132px;border-radius:3px 7px 7px 3px;background-size:cover;
  transform:rotateY(-25deg) rotateZ(calc((var(--i) - 2) * 4deg));box-shadow:inset 5px 0 8px rgba(0,0,0,.35),0 14px 28px rgba(0,0,0,.5);
  animation:bob 4s ease-in-out infinite;animation-delay:calc(var(--i) * .3s)}
@keyframes bob{50%{translate:0 -8px}}
.mega-text{position:relative}
.mega-tag{display:inline-block;background:linear-gradient(135deg,#ffd166,#ff6b6b);color:#3a0d00;font-weight:800;font-size:.75rem;letter-spacing:.08em;padding:5px 12px;border-radius:99px}
.mega h2{margin:10px 0 6px;font-size:clamp(1.4rem,3.2vw,2.1rem);line-height:1.15}
.mega p{color:var(--text);opacity:.85;margin:0 0 12px}
.mega-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.mega-price s{color:var(--muted);font-size:1.1rem}
.mega-price b{font-size:2.2rem}
.save{background:#2ecc71;color:#05290f;font-weight:800;font-size:.8rem;padding:4px 10px;border-radius:99px}
.mega-actions{display:flex;gap:10px;flex-wrap:wrap}
.dl-list{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto;text-align:left;margin:14px 0}
.dl-list a.btn{padding:6px 12px;font-size:.82rem}
@media (max-width:720px){.mega{flex-direction:column;text-align:center;margin:0 16px 30px;padding:22px 18px}.mega-stack{flex-basis:auto;width:190px;height:150px}.mega-price,.mega-actions{justify-content:center}}
a.btn.ghost{background:transparent;border:1px solid var(--card-line);box-shadow:none;color:var(--text)}
a.btn.ghost:hover{background:var(--card)}
.savebox{margin-top:20px;padding:16px;border-radius:14px;background:rgba(46,204,113,.1);border:1px solid rgba(46,204,113,.35);text-align:left;line-height:1.5}
.savebox .btn{margin:4px 6px 0 0}
.okmsg{background:rgba(46,204,113,.15);color:#7ee2a8;padding:10px 12px;border-radius:10px}
.binance-opt{background:linear-gradient(135deg,#f0b90b,#c99400);color:#1e1600;box-shadow:0 6px 20px rgba(240,185,11,.3)}

/* Email code steps */
.mail-ico{width:64px;height:64px;margin:4px auto 10px;border-radius:20px;display:grid;place-items:center;font-size:30px;
  background:linear-gradient(145deg,rgba(139,92,255,.35),rgba(34,211,238,.2));box-shadow:0 12px 30px rgba(139,92,255,.3)}
.code-in{text-align:center;font-size:30px!important;letter-spacing:12px;font-weight:800;font-family:Consolas,Menlo,monospace!important;padding:14px!important;margin-top:10px}