/* ============================================================
   Lumina — Interactive App Demo
   ============================================================ */
:root{
  --gold:#E2A001; --gold-deep:#c8890a; --gold-soft:#d8b25a;
  --cream:#FAF6EE; --cream-2:#F4ECDB; --cream-3:#EFE3C9; --border-gold:#ecdcbd;
  --ink:#1c1c20; --ink-2:#25252a; --body:#54545b; --muted:#86868d; --faint:#a9a9b0;
  --line:#ededf0; --line-2:#f5f5f7; --white:#fff; --black:#0d0d0f;
  --blue:#5664c7; --blue-deep:#3a458f; --purple:#7b54c7; --purple-deep:#5a3a9c;
  --green:#2f9e6f; --red:#d9534f;
  --font:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --radius:16px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
html,body{height:100%}
body{font-family:var(--font);color:var(--ink);background:#ece6da;-webkit-font-smoothing:antialiased;line-height:1.5}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
.gi{width:20px;height:20px;flex:none}

/* ---------- Stage (page outside the phone) ---------- */
.stage{min-height:100%;display:flex;flex-direction:column;
  background:
    radial-gradient(60% 50% at 50% 0%,rgba(226,160,1,.10),transparent 60%),
    radial-gradient(50% 40% at 90% 10%,rgba(86,100,199,.06),transparent),
    #ece6da;}
.demo-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(16px,4vw,40px);flex-wrap:wrap}
.demo-brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.demo-brand .mk{width:30px;height:27px}
.demo-brand small{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-top:-2px}
.demo-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.demo-hint{font-size:12.5px;color:var(--body);background:#fff;border:1px solid var(--border-gold);border-radius:999px;padding:7px 14px}
.demo-hint b{color:var(--gold-deep)}
.demo-select{font-size:13px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--border-gold);border-radius:999px;padding:8px 14px;cursor:pointer}
.demo-restart{font-size:13px;font-weight:600;color:#fff;background:var(--ink);border-radius:999px;padding:9px 16px;display:inline-flex;gap:7px;align-items:center;transition:transform .2s var(--ease)}
.demo-restart:hover{transform:translateY(-1px)}
.stage-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 16px 30px;gap:14px}

/* ---------- Device ---------- */
.device{position:relative;width:min(390px,94vw);height:min(818px,84vh);
  background:#0b0b0d;border-radius:46px;padding:11px;
  box-shadow:0 2px 4px rgba(0,0,0,.4),0 40px 80px -24px rgba(20,18,12,.55),inset 0 0 2px 1px rgba(255,255,255,.12);}
.device::after{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);width:104px;height:26px;background:#0b0b0d;border-radius:0 0 16px 16px;z-index:30}
.viewport{position:relative;width:100%;height:100%;background:#fff;border-radius:36px;overflow:hidden;display:flex;flex-direction:column}
.cap{font-size:12px;color:var(--muted)}
.cap b{color:var(--ink-2)}

/* ---------- Status bar ---------- */
.statusbar{height:40px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;font-size:13px;font-weight:700;color:var(--ink);z-index:20;position:relative;background:transparent}
.statusbar .si{display:flex;align-items:center;gap:6px}
.statusbar .si .gi{width:16px;height:14px}
.viewport.dark-status .statusbar{color:#f3efe6}

/* ---------- Screens / router ---------- */
.screens{position:relative;flex:1;overflow:hidden}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;
  opacity:0;visibility:hidden;transform:translateX(18px);pointer-events:none;
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s}
.screen.active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.screen.leaving-left{transform:translateX(-14px)}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{width:0}
.pad{padding:16px 18px}
.gap{height:14px}
.bottom-space{height:90px}

/* ---------- Top bar (push screens) ---------- */
.topbar{flex:none;display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line);z-index:10}
.topbar .ic-btn{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--ink)}
.topbar .ic-btn:hover{background:var(--cream-2)}
.topbar .tt{font-weight:700;font-size:15px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .actions{display:flex;gap:2px}

/* ---------- Section headers ---------- */
.sec{padding:6px 18px 2px}
.sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:11px}
.sec-head h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
.sec-head .sub{font-size:12px;color:var(--muted);margin-top:1px}
.sec-head .see{color:var(--gold-deep);display:grid;place-items:center;width:30px;height:30px;border-radius:50%}
.sec-head .see:hover{background:var(--cream-2)}

/* ---------- Search bar ---------- */
.searchbar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:11px 16px;color:var(--faint);font-size:13.5px;box-shadow:0 1px 2px rgba(20,18,12,.04)}
.searchbar .gi{width:17px;height:17px;color:var(--muted)}

/* ---------- Book covers ---------- */
.cover{border-radius:10px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  padding:10px;color:#fff;box-shadow:0 6px 16px -8px rgba(20,18,12,.5)}
.cover .ct{font-size:11px;font-weight:800;line-height:1.18;text-shadow:0 1px 4px rgba(0,0,0,.45);letter-spacing:-.01em}
.cover .ck{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;opacity:.85;margin-bottom:auto}
.cover .pct{position:absolute;top:8px;right:8px;font-size:9px;font-weight:800;color:#1c1407;background:var(--gold);padding:2px 7px;border-radius:999px}
.cover .strip{position:absolute;left:0;bottom:0;height:4px;background:var(--gold)}
.cv1{background:linear-gradient(155deg,#3a4a63,#1f2a3c)} .cv2{background:linear-gradient(155deg,#7a5c2e,#4a3415)}
.cv3{background:linear-gradient(155deg,#5a6e57,#33402f)} .cv4{background:linear-gradient(155deg,#7d5a6b,#3f2935)}
.cv5{background:linear-gradient(155deg,#436a72,#243f44)} .cv6{background:linear-gradient(155deg,#8a6a3a,#5c4420)}
.cv7{background:linear-gradient(155deg,#56507e,#2f2b4d)} .cv8{background:linear-gradient(155deg,#6a4848,#3c2424)}
.col1{background:linear-gradient(135deg,#caa15a,#8a6326)} .col2{background:linear-gradient(135deg,#8a96e0,#46509c)}
.col3{background:linear-gradient(135deg,#7fb0a6,#3f6b62)} .col4{background:linear-gradient(135deg,#b98aa0,#6e4a5e)}

/* ---------- Horizontal rail ---------- */
.rail{display:flex;gap:13px;overflow-x:auto;padding:2px 18px 6px;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{height:0}
.rail-item{width:104px;flex:none;scroll-snap-align:start}
.rail-item .cover{width:104px;height:146px}
.rail-item .bt{font-size:11.5px;font-weight:700;margin-top:7px;line-height:1.25;color:var(--ink)}
.rail-item .ba{font-size:10.5px;color:var(--muted);margin-top:1px}

/* ---------- Hero banner ---------- */
.hero-wrap{padding:8px 18px 0}
.hero{position:relative;height:150px;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:20px;color:#fff}
.hero .ck{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;opacity:.9}
.hero h3{font-size:22px;font-weight:800;margin-top:4px;letter-spacing:-.02em;text-shadow:0 1px 6px rgba(0,0,0,.25)}
.hero p{font-size:12.5px;opacity:.92;margin-top:3px}
.hero .hbtn{margin-top:11px;align-self:flex-start;background:#fff;color:#1c1407;font-size:12px;font-weight:700;padding:7px 14px;border-radius:999px}
.dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--cream-3);display:block;transition:all .2s}
.dots i.on{width:18px;background:var(--gold);border-radius:6px}

/* ---------- Chips ---------- */
.chips{display:flex;gap:9px;overflow-x:auto;padding:2px 18px 4px}
.chips::-webkit-scrollbar{height:0}
.chip{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--body);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;transition:all .2s var(--ease)}
.chip .gi{width:15px;height:15px;color:var(--gold-deep)}
.chip:hover{border-color:var(--border-gold)}
.chip.on{background:var(--gold);color:#1c1407;border-color:var(--gold)}
.chip.on .gi{color:#1c1407}

/* ---------- Collection cards ---------- */
.col-rail{display:flex;gap:13px;overflow-x:auto;padding:2px 18px 6px}
.col-rail::-webkit-scrollbar{height:0}
.col-card{flex:none;width:208px;height:118px;border-radius:16px;overflow:hidden;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:#fff}
.col-card .ck{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;opacity:.85;margin-bottom:auto}
.col-card h4{font-size:18px;font-weight:800;letter-spacing:-.02em;text-shadow:0 1px 6px rgba(0,0,0,.3)}
.col-card p{font-size:11px;opacity:.92}

/* ---------- 2-col grid ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 13px;padding:4px 18px}
.grid-item .cover{width:100%;aspect-ratio:3/4.2}
.grid-item .bt{font-size:12px;font-weight:700;margin-top:7px;line-height:1.25}
.grid-item .ba{font-size:10.5px;color:var(--muted);margin-top:1px}
.grid-item .meta{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:10px;color:var(--muted)}
.grid-item .meta .gi{width:11px;height:11px;color:var(--gold)}

/* ---------- Stars ---------- */
.stars{display:inline-flex;gap:1px;color:var(--gold)}
.stars .gi{width:13px;height:13px}
.stars .off{color:var(--cream-3)}

/* ---------- Tier badge ---------- */
.tier-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px}
.tier-badge .gi{width:11px;height:11px}
.t-Standard{background:var(--cream-2);color:var(--gold-deep)}
.t-Premium{background:#e7eaff;color:var(--blue-deep)}
.t-Platinum{background:#efe7ff;color:var(--purple-deep)}
.t-Free{background:#eef0f2;color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14px;
  border-radius:999px;padding:13px 20px;transition:transform .2s var(--ease),background-color .2s,box-shadow .2s}
.btn:active{transform:scale(.98)}
.btn-gold{background:var(--gold);color:#1c1407;box-shadow:0 8px 20px -10px rgba(226,160,1,.7)}
.btn-gold:hover{background:var(--gold-deep)}
.btn-dark{background:var(--ink);color:#fff}
.btn-outline{border:1.5px solid var(--border-gold);color:var(--ink-2);background:#fff}
.btn-outline:hover{background:var(--cream)}
.btn-ghost{color:var(--gold-deep)}
.btn-block{display:flex;width:100%}
.btn-sm{padding:8px 14px;font-size:12.5px}

/* ---------- Bottom nav ---------- */
.bnav{flex:none;display:flex;justify-content:space-around;align-items:center;padding:8px 6px 12px;background:#fff;border-top:1px solid var(--line)}
.bnav-item{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--faint);padding:2px 10px;border-radius:12px}
.bnav-item .gi{width:22px;height:22px}
.bnav-item.on{color:var(--gold-deep)}
.viewport.no-tabbar .bnav{display:none}

/* ---------- Auth ---------- */
.auth{flex:1;display:flex;flex-direction:column;justify-content:center;padding:30px 26px;background:linear-gradient(180deg,var(--cream),#fff 40%)}
.auth .logo{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:26px}
.auth .logo .mk{width:58px;height:52px}
.auth .logo b{font-size:26px;font-weight:800;letter-spacing:-.02em}
.auth .logo span{font-size:12px;color:var(--muted)}
.field{margin-bottom:13px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--body);margin-bottom:6px}
.field .inp{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px}
.field .inp:focus-within{border-color:var(--gold)}
.field .inp .gi{width:17px;height:17px;color:var(--muted)}
.field .inp input{border:0;outline:0;width:100%;font-size:14px;background:transparent}
.auth .row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;margin:6px 2px 18px}
.auth .row a{color:var(--gold-deep);font-weight:600}
.auth .alt{text-align:center;font-size:13px;color:var(--muted);margin-top:18px}
.auth .alt a{color:var(--gold-deep);font-weight:700}
.divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:11px;margin:18px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.social{display:flex;gap:10px}
.social .sbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--line);border-radius:12px;padding:11px;font-size:13px;font-weight:600}

/* ---------- Book detail ---------- */
.detail-hero{padding:18px;background:linear-gradient(180deg,var(--cream),#fff);display:flex;gap:16px}
.detail-hero .cover{width:118px;height:166px;flex:none}
.detail-hero .dh-r{flex:1;display:flex;flex-direction:column}
.detail-hero h2{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.18}
.detail-hero .by{font-size:13px;color:var(--body);margin-top:4px}
.detail-hero .by b{color:var(--gold-deep)}
.detail-hero .rate{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12px;color:var(--muted)}
.detail-hero .chips-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:10px}
.series-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--gold-deep);background:var(--cream-2);border-radius:999px;padding:5px 11px}
.series-chip .gi{width:13px;height:13px}
.detail-actions{display:flex;gap:9px;padding:4px 18px 14px}
.act{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px;border:1px solid var(--line);border-radius:13px;font-size:11px;font-weight:600;color:var(--body)}
.act .gi{width:19px;height:19px;color:var(--ink-2)}
.act.on{border-color:var(--gold);background:var(--cream);color:var(--gold-deep)}
.act.on .gi{color:var(--gold-deep)}
.block{padding:6px 18px 10px;border-top:1px solid var(--line-2)}
.block h4{font-size:14px;font-weight:700;margin-bottom:7px}
.block p{font-size:13px;color:var(--body);line-height:1.6}
.readmore{color:var(--gold-deep);font-weight:600;font-size:12.5px;margin-top:6px;display:inline-block}
.statline{display:flex;gap:10px;padding:10px 18px}
.statbox{flex:1;background:var(--cream);border:1px solid var(--border-gold);border-radius:12px;padding:11px;text-align:center}
.statbox .v{font-size:15px;font-weight:800}
.statbox .k{font-size:10px;color:var(--muted);margin-top:2px}
.review{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--line-2)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--cream-2);color:var(--gold-deep);display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.review .rv-top{display:flex;align-items:center;justify-content:space-between}
.review .nm{font-size:13px;font-weight:700}
.review .dt{font-size:10.5px;color:var(--faint)}
.review p{font-size:12.5px;color:var(--body);margin-top:4px;line-height:1.55}
.detail-cta{flex:none;display:flex;gap:10px;align-items:center;padding:12px 16px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(20,18,12,.3)}
.detail-cta .price{flex:none}
.detail-cta .price .p{font-size:16px;font-weight:800}
.detail-cta .price .s{font-size:10px;color:var(--muted)}

/* ---------- Reader ---------- */
#scr-reader .screen,#scr-reader{background:#fff}
.reader{flex:1;display:flex;flex-direction:column;transition:background-color .3s}
.reader-bar{flex:none;display:flex;align-items:center;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line)}
.reader-bar .ic-btn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.reader-bar .tt{flex:1;font-size:12.5px;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.reader-body{flex:1;overflow-y:auto;padding:22px 24px 30px;--rfs:15px;--rlh:1.8}
.reader-body h1{font-size:17px;font-weight:800;text-align:center;letter-spacing:.02em}
.reader-body h2{font-size:15px;font-weight:700;text-align:center;margin-top:4px;margin-bottom:12px}
.reader-body h3{font-size:14px;font-weight:700;text-align:center;margin:14px 0 8px}
.reader-body p{font-family:var(--serif);font-size:var(--rfs);line-height:var(--rlh);margin-bottom:11px;text-align:justify}
.reader-body.ff-sans p{font-family:var(--font)}
.reader-body .reflead{text-align:center;color:var(--blue);border-bottom:1px dotted var(--blue);font-size:13px;display:inline-block;margin:0 auto 10px;font-family:var(--font)}
.vref{color:var(--blue);border-bottom:1px dotted var(--blue);font-family:var(--font);font-weight:600;cursor:pointer}
.reader-foot{flex:none;padding:10px 18px 14px;border-top:1px solid var(--line)}
.seek{height:5px;background:var(--cream-3);border-radius:5px;position:relative}
.seek>i{position:absolute;left:0;top:0;height:100%;background:var(--gold);border-radius:5px;transition:width .25s var(--ease)}
.seek .capm{position:absolute;top:-3px;width:2px;height:11px;background:var(--gold-deep);border-radius:2px}
.seek .knob{position:absolute;top:50%;transform:translate(-50%,-50%);width:13px;height:13px;border-radius:50%;background:#fff;border:2.5px solid var(--gold);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .25s var(--ease)}
.reader-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);margin-top:9px}
.sample-chip{font-size:9px;font-weight:800;color:#1c1407;background:var(--gold);padding:3px 9px;border-radius:999px}
/* reader themes */
.reader.theme-light{background:#fff;color:#222}
.reader.theme-sepia{background:#f4ecd8;color:#4a3f2a}
.reader.theme-sepia .reader-bar,.reader.theme-sepia .reader-foot{border-color:#e3d6b8}
.reader.theme-sepia .seek{background:#e3d6b8}
.reader.theme-dark{background:#1a1a1e;color:#d9d6cf}
.reader.theme-dark .reader-bar,.reader.theme-dark .reader-foot{border-color:#2c2c33}
.reader.theme-dark .reader-bar .tt{color:#9a9aa2}
.reader.theme-dark .seek{background:#33333b}
.reader.theme-dark .ic-btn{color:#d9d6cf}
/* verse popup */
.vpop-mask{position:absolute;inset:0;background:rgba(20,18,12,.28);display:flex;align-items:center;justify-content:center;padding:24px;z-index:40;
  opacity:0;visibility:hidden;transition:opacity .25s}
.vpop-mask.show{opacity:1;visibility:visible}
.vpop{background:#fff;border:1px solid var(--border-gold);border-radius:16px;padding:16px 17px;width:100%;max-width:300px;box-shadow:0 30px 60px -20px rgba(20,18,12,.5);transform:scale(.94);transition:transform .25s var(--ease)}
.vpop-mask.show .vpop{transform:none}
.vpop h5{font-size:14px;font-weight:800;color:var(--gold-deep);display:flex;align-items:center;gap:7px;margin-bottom:9px}
.vpop .vline{display:flex;gap:8px;font-size:13px;line-height:1.55;color:var(--ink-2);margin-bottom:6px}
.vpop .vline sup{color:var(--gold-deep);font-weight:800;font-size:10px}
.vpop .vtr{font-size:11px;color:var(--muted);margin-top:8px}
.vpop .vclose{display:block;width:100%;text-align:right;color:var(--gold-deep);font-weight:800;font-size:13px;margin-top:10px}
/* bottom sheets */
.sheet-mask{position:absolute;inset:0;background:rgba(20,18,12,.28);z-index:45;opacity:0;visibility:hidden;transition:opacity .28s}
.sheet-mask.show{opacity:1;visibility:visible}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:22px 22px 0 0;padding:18px 18px 24px;
  transform:translateY(102%);transition:transform .32s var(--ease);box-shadow:0 -20px 50px -20px rgba(20,18,12,.4)}
.sheet-mask.show .sheet{transform:none}
.sheet .grab{width:42px;height:5px;border-radius:5px;background:var(--cream-3);margin:0 auto 14px}
.sheet h4{font-size:15px;font-weight:800;margin-bottom:12px}
.setting{margin-bottom:16px}
.setting .lbl{font-size:12px;font-weight:600;color:var(--body);margin-bottom:8px;display:flex;justify-content:space-between}
.theme-opts{display:flex;gap:10px}
.theme-opt{flex:1;height:44px;border-radius:12px;border:2px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:700}
.theme-opt.tl{background:#fff;color:#222} .theme-opt.ts{background:#f4ecd8;color:#4a3f2a} .theme-opt.td{background:#1a1a1e;color:#eee}
.theme-opt.on{border-color:var(--gold)}
.stepper{display:flex;align-items:center;gap:10px}
.stepper button{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);font-size:18px;font-weight:700;color:var(--ink-2)}
.stepper .val{flex:1;text-align:center;font-size:13px;font-weight:700}
.font-opts{display:flex;gap:10px}
.font-opt{flex:1;padding:10px;border:2px solid var(--line);border-radius:12px;text-align:center;font-size:13px;font-weight:700}
.font-opt.serif{font-family:var(--serif)}
.font-opt.on{border-color:var(--gold)}
/* paywall sheet */
.paywall{text-align:center}
.paywall .pw-ic{width:54px;height:54px;border-radius:50%;background:var(--cream-2);color:var(--gold-deep);display:grid;place-items:center;margin:0 auto 12px}
.paywall .pw-ic .gi{width:26px;height:26px}
.paywall h4{font-size:17px;margin-bottom:6px}
.paywall p{font-size:13px;color:var(--body);margin-bottom:16px;line-height:1.55}

/* ---------- My Books list ---------- */
.listrow{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.listrow .cover{width:54px;height:76px;flex:none;border-radius:7px}
.listrow .lr-r{flex:1;min-width:0}
.listrow .badge-row{margin-bottom:3px}
.listrow .lt{font-size:13.5px;font-weight:700;line-height:1.25}
.listrow .la{font-size:11.5px;color:var(--muted);margin-top:2px}
.listrow .prog-line{height:4px;background:var(--cream-3);border-radius:4px;margin-top:9px;overflow:hidden}
.listrow .prog-line>i{display:block;height:100%;background:var(--gold);border-radius:4px}
.listrow .pl-txt{font-size:10.5px;color:var(--muted);margin-top:5px}
.listrow .lr-act{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;flex:none}
.dl-btn{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--gold-deep);border:1px solid var(--gold);border-radius:999px;padding:5px 11px}
.dl-btn.done{color:var(--green);border-color:#bfe6d3;background:#f0faf5}
.dl-btn .gi{width:13px;height:13px}
.trash{color:var(--red);width:34px;height:34px;display:grid;place-items:center;border-radius:9px}
.trash:hover{background:#fdeceb}

/* ---------- Profile ---------- */
.profile-head{padding:22px 18px;background:linear-gradient(180deg,var(--cream),#fff);display:flex;align-items:center;gap:14px}
.profile-head .avatar{width:62px;height:62px;font-size:22px}
.profile-head .ph-r .nm{font-size:18px;font-weight:800}
.profile-head .ph-r .em{font-size:12.5px;color:var(--muted);margin-top:1px}
.profile-head .ph-r .ms{margin-top:6px}
.group-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:18px 18px 8px}
.menu{background:#fff}
.menu-row{display:flex;align-items:center;gap:13px;padding:14px 18px;border-top:1px solid var(--line-2)}
.menu-row:first-child{border-top:0}
.menu-row .m-ic{width:36px;height:36px;border-radius:10px;background:var(--cream-2);color:var(--gold-deep);display:grid;place-items:center}
.menu-row .m-ic .gi{width:18px;height:18px}
.menu-row .m-t{flex:1}
.menu-row .m-t b{font-size:14px;font-weight:600;display:block}
.menu-row .m-t small{font-size:11.5px;color:var(--muted)}
.menu-row .m-r{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.menu-row .chev{color:var(--faint)}
.menu-row.logout{color:var(--red);justify-content:center;font-weight:700;font-size:14px;margin-top:18px;border-top:0}
.switch{width:42px;height:25px;border-radius:999px;background:var(--cream-3);position:relative;transition:background .2s;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .2s}
.switch.on{background:var(--gold)}
.switch.on::after{left:20px}

/* ---------- Forms (edit profile) ---------- */
.form-field{padding:14px 18px;border-top:1px solid var(--line-2)}
.form-field label{font-size:11.5px;color:var(--muted);display:block;margin-bottom:5px}
.form-field .v{font-size:14px;font-weight:600}
.form-field input,.form-field select{width:100%;font-size:14px;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;outline:0}
.form-field input:focus{border-color:var(--gold)}

/* ---------- Payment rows ---------- */
.pay-row{display:flex;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.pay-row .p-ic{width:38px;height:38px;border-radius:10px;background:var(--cream-2);color:var(--gold-deep);display:grid;place-items:center;flex:none}
.pay-row .p-m{flex:1}
.pay-row .p-d{font-size:13px;font-weight:600}
.pay-row .p-s{font-size:11px;color:var(--muted);margin-top:1px}
.pay-row .p-a{text-align:right}
.pay-row .p-a .amt{font-size:13.5px;font-weight:800}
.pay-row .p-a .ok{font-size:10px;color:var(--green);font-weight:700}

/* ---------- Subscription ---------- */
.tier-card{margin:14px 18px;border:1.5px solid var(--line);border-radius:18px;overflow:hidden}
.tier-card.best{border-color:var(--gold);box-shadow:0 14px 30px -18px rgba(226,160,1,.5)}
.tier-top{padding:16px 16px 14px}
.tier-top .tn{display:flex;align-items:center;gap:9px}
.tier-top .tn h3{font-size:18px;font-weight:800}
.tier-top .best-badge{margin-left:auto;font-size:9px;font-weight:800;color:#1c1407;background:var(--gold);padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
.tier-top .tg{font-size:12px;color:var(--muted);margin-top:4px}
.tdot{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:none}
.tdot .gi{width:16px;height:16px}
.tdot.g{background:linear-gradient(150deg,#f0cd7a,#e2a001)} .tdot.b{background:linear-gradient(150deg,#8a96e0,#5664c7)} .tdot.p{background:linear-gradient(150deg,#a98ae0,#7b54c7)}
.feature{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--body);padding:5px 16px}
.feature .gi{width:16px;height:16px;flex:none;margin-top:1px}
.feature.g .gi{color:var(--gold-deep)} .feature.b .gi{color:var(--blue)} .feature.p .gi{color:var(--purple)}
.dur-list{padding:10px 14px 16px}
.dur-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:13px;margin-top:9px}
.dur-row .dm{font-size:13px;font-weight:700}
.dur-row .dp{font-size:12px;color:var(--body)}
.dur-row .save{font-size:9.5px;font-weight:700;color:var(--green);background:#eef9f3;padding:2px 7px;border-radius:999px;margin-left:6px}
.dur-row .sub-btn{margin-left:auto;font-size:12px;font-weight:700;padding:8px 15px;border-radius:999px;color:#fff;flex:none}
.dur-row .sub-btn.g{background:var(--gold);color:#1c1407} .dur-row .sub-btn.b{background:var(--blue)} .dur-row .sub-btn.p{background:var(--purple)}

/* ---------- Search ---------- */
.search-head{padding:12px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.search-head .sbx{flex:1;display:flex;align-items:center;gap:9px;background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:10px 14px}
.search-head .sbx input{border:0;background:transparent;outline:0;width:100%;font-size:13.5px}
.search-head .sbx .gi{width:16px;height:16px;color:var(--muted)}
.sug{padding:11px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:11px;font-size:13px}
.sug .gi{width:15px;height:15px;color:var(--faint)}
.result{display:flex;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line-2)}
.result .cover{width:44px;height:62px;flex:none;border-radius:6px}
.result .rt{font-size:13.5px;font-weight:700}
.result .ra{font-size:11.5px;color:var(--muted);margin-top:2px}
.result .rm{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted);margin-top:5px}
.result .rm .gi{width:11px;height:11px;color:var(--gold)}

/* ---------- Empty state ---------- */
.empty{padding:50px 30px;text-align:center;color:var(--muted)}
.empty .gi{width:46px;height:46px;color:var(--cream-3);margin:0 auto 12px}
.empty b{display:block;color:var(--ink-2);font-size:15px;margin-bottom:4px}
.empty p{font-size:12.5px}

/* ---------- Toast ---------- */
.toast{position:absolute;left:50%;bottom:96px;transform:translate(-50%,16px);z-index:60;
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;padding:11px 18px;border-radius:999px;
  display:flex;align-items:center;gap:8px;opacity:0;visibility:hidden;transition:all .3s var(--ease);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.toast .gi{width:15px;height:15px;color:var(--gold)}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---------- Offline banner ---------- */
.offline{display:flex;align-items:center;gap:8px;background:var(--ink-2);color:#fff;font-size:11.5px;padding:7px 18px}
.offline .gi{width:14px;height:14px;color:var(--gold)}

/* ---------- Responsive ---------- */
@media (max-width:440px){
  .demo-hint{display:none}
  .device{width:96vw;height:86vh}
}
@media (max-height:720px){
  .device{height:90vh}
}