:root {
  --bg: #0c0a08;
  --bg2: #17120d;
  --text: #f5efe7;
  --muted: #a59b8f;
  --accent: #e0a24b;        /* warm sunset amber from the cover */
  --accent-press: #c98a35;
  --card: #1c1712;
  --line: #2a231b;
  --radius: 14px;
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(120% 80% at 50% -10%, #241a12 0%, var(--bg2) 38%, var(--bg) 100%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  position: sticky; top: 0; z-index: 5;
  background: rgba(12,10,8,.72); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-weight: 800; font-size: 1.25rem; letter-spacing: .2px;
  background: linear-gradient(90deg, #f3e6d2, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.account { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.account .email { color: var(--muted); font-size: .82rem; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account input {
  background: #100d0a; border: 1px solid var(--line); color: var(--text);
  padding: 8px 10px; border-radius: 9px; font-size: .9rem; width: 160px;
}
.signin-btn, .link-btn, .share-btn, .cta-btns button, .book-card, .play-btn, .skip {
  font-family: inherit;
}
.signin-btn { background: var(--accent); color: #1a1208; border: 0; padding: 8px 14px; border-radius: 9px; font-weight: 700; cursor: pointer; }
.link-btn { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 6px 10px; border-radius: 9px; cursor: pointer; font-size: .82rem; }

/* ---------- library ---------- */
.catalog { padding: 18px 18px 60px; max-width: 1100px; margin: 0 auto; }
.catalog section h2 { font-size: 1.15rem; margin: 22px 4px 12px; }
.shelf { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.book-card {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 150px; flex: 0 0 auto; border: 0; background: none; cursor: pointer; padding: 0; text-align: left;
}
.book-card img {
  width: 150px; height: 150px; object-fit: cover; border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.5); transition: transform .15s ease;
}
.book-card:hover img { transform: translateY(-3px); }
.book-card span { color: var(--text); font-weight: 600; font-size: .92rem; margin-top: 9px; line-height: 1.2; }
.book-card small { color: var(--accent); font-size: .78rem; margin-top: 3px; font-weight: 700; }

/* ---------- player ---------- */
.player { max-width: 460px; margin: 0 auto; padding: 14px 22px 80px; }
.back { background: none; border: 0; color: var(--muted); font-size: .95rem; cursor: pointer; padding: 6px 0; }
.np { display: flex; flex-direction: column; align-items: center; text-align: center; }
.np-cover {
  width: min(78vw, 320px); aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.6); margin-top: 8px;
}
.np-badge { color: var(--accent); font-weight: 800; font-size: .78rem; letter-spacing: .8px; text-transform: uppercase; margin-top: 22px; }
.np-title { font-size: 1.5rem; font-weight: 800; margin: 8px 0 2px; line-height: 1.18; }
.np-author { color: var(--muted); font-size: 1rem; }
.np-now { color: var(--muted); font-size: .82rem; margin-top: 10px; }

.np-progress { width: 100%; margin-top: 16px; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  background: #3a3026; border-radius: 99px; outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
  background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 4px rgba(224,162,75,.18);
}
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; background: var(--accent); border-radius: 50%; }
.np-times { display: flex; justify-content: space-between; color: var(--muted); font-size: .76rem; margin-top: 7px; font-variant-numeric: tabular-nums; }

.np-transport { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 20px; }
.play-btn {
  width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: #1a1208; font-size: 1.7rem; line-height: 1;
  display: grid; place-items: center; box-shadow: 0 10px 26px rgba(224,162,75,.35);
  transition: transform .1s ease, background .1s ease;
}
.play-btn:active { transform: scale(.94); background: var(--accent-press); }
.skip {
  background: none; border: 0; color: var(--text); cursor: pointer;
  font-size: 1.5rem; display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.skip small { font-size: .6rem; color: var(--muted); margin-top: 2px; }

.np-chapter { width: 100%; margin-top: 26px; text-align: left; }
.np-chapter label, .ctl label { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
select {
  -webkit-appearance: none; appearance: none; width: 100%;
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  padding: 11px 14px; border-radius: 11px; font-size: .95rem; font-family: inherit; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23a59b8f' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center;
}

.np-controls { display: flex; align-items: flex-end; gap: 12px; width: 100%; margin-top: 16px; }
.np-controls .ctl { flex: 1; }
.share-btn {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  padding: 11px 16px; border-radius: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; align-self: flex-end;
}
.share-btn:active { background: #241c14; }

.cta { margin-top: 26px; width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.cta p { margin: 0 0 14px; color: var(--text); font-size: .95rem; line-height: 1.4; }
.cta-btns { display: flex; gap: 10px; }
.cta-btns button { flex: 1; background: var(--accent); color: #1a1208; border: 0; padding: 12px; border-radius: 10px; font-weight: 800; cursor: pointer; }
.cta-btns button:active { background: var(--accent-press); }
.buy-formats { display:inline-block; margin-top:18px; color: var(--muted); font-size:.9rem; border-bottom:1px solid var(--line); padding-bottom:2px; }
.buy-formats:hover { color: var(--accent); }
.cta-row { display:flex; gap:8px; }
.cta-row input { flex:1; background:#100d0a; border:1px solid var(--line); color:var(--text); padding:11px 12px; border-radius:10px; font-size:.95rem; }
.cta-row button { background:var(--accent); color:#1a1208; border:0; padding:11px 16px; border-radius:10px; font-weight:800; cursor:pointer; white-space:nowrap; }
.signin-msg { margin-top:12px; color: var(--accent); font-size:.88rem; }

/* ---- sign-in modal (email -> 6-digit code) ---- */
.auth-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-modal[hidden] { display:none; }
.auth-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }
.auth-card { position:relative; z-index:2; width:100%; max-width:380px; background:#15110b; border:1px solid var(--line); border-radius:18px; padding:30px 24px 26px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.auth-close { position:absolute; top:8px; right:14px; background:none; border:0; color:var(--muted); font-size:26px; cursor:pointer; line-height:1; }
.auth-logo { width:64px; height:auto; margin:0 auto 12px; display:block; }
.auth-h { font-size:1.25rem; margin:0 0 8px; }
.auth-p { color:var(--muted); font-size:.92rem; line-height:1.45; margin:0 0 16px; }
.auth-card input[type=email], .auth-card input[type=text] { width:100%; background:#100d0a; border:1px solid var(--line); color:var(--text); padding:13px 14px; border-radius:11px; font-size:1rem; text-align:center; margin-bottom:12px; }
#auth-code { letter-spacing:8px; font-size:1.3rem; font-weight:700; }
.auth-btn { width:100%; background:var(--accent); color:#1a1208; border:0; padding:13px; border-radius:11px; font-weight:800; font-size:1rem; cursor:pointer; }
.auth-btn:active { background:var(--accent-press); }
.auth-btn:disabled { opacity:.6; cursor:default; }
.auth-remember { display:flex; align-items:center; gap:8px; justify-content:center; color:var(--muted); font-size:.86rem; margin-bottom:14px; cursor:pointer; }
.auth-remember input { width:auto; margin:0; }
.auth-link { background:none; border:0; color:var(--muted); text-decoration:underline; cursor:pointer; font-size:.85rem; margin-top:12px; }
.auth-msg { color:var(--accent); font-size:.88rem; margin-top:14px; }

/* ---- end-of-free-chapter upsell ---- */
.upsell-list { list-style:none; padding:0; margin:0 0 18px; text-align:left; }
.upsell-list li { color:var(--text); font-size:.92rem; line-height:1.5; padding-left:24px; position:relative; margin-bottom:8px; }
.upsell-list li::before { content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:800; }
.auth-card .cta-btns { display:flex; flex-direction:column; gap:10px; }
/* id selector beats `.cta-btns button` so the annual option reads as an outline secondary */
#upsell-annual { background:transparent; color:var(--accent); border:1.5px solid var(--accent); }
#upsell-annual:active { background:rgba(224,162,75,.12); }
.upsell-foot { color:var(--muted); font-size:.8rem; margin:14px 0 0; }

/* ---------- header right / cart button ---------- */
.topbar-right { display:flex; align-items:center; gap:12px; }
.cart-btn { position:relative; background:var(--card); border:1px solid var(--line); color:var(--text); font-size:1.05rem; padding:7px 12px; border-radius:10px; cursor:pointer; }
.cart-count { background:var(--accent); color:#1a1208; font-size:.72rem; font-weight:800; border-radius:99px; padding:1px 7px; margin-left:4px; }

/* ---------- shared buttons ---------- */
.btn-gold { background:var(--accent); color:#1a1208; border:0; padding:11px 18px; border-radius:11px; font-weight:800; font-size:.95rem; cursor:pointer; font-family:inherit; }
.btn-gold:active { background:var(--accent-press); }
.btn-outline { background:transparent; color:var(--accent); border:1.5px solid var(--accent); padding:10px 18px; border-radius:11px; font-weight:800; font-size:.95rem; cursor:pointer; font-family:inherit; }
.btn-outline:active { background:rgba(224,162,75,.12); }

/* ---------- subscription banner ---------- */
.sub-banner { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  background:linear-gradient(120deg, #1f1710, var(--card)); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; margin:6px 4px 24px; }
.sub-copy { font-size:.98rem; line-height:1.5; max-width:560px; }
.sub-price { color:var(--accent); font-weight:800; }
.sub-btns { display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- storefront listings ---------- */
.series-h { font-size:1.2rem; margin:26px 4px 14px; }
.store-list { display:flex; flex-direction:column; gap:18px; }
.store-item { display:flex; gap:18px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.store-cover { width:150px; height:150px; flex:0 0 auto; object-fit:cover; border-radius:12px; box-shadow:0 8px 22px rgba(0,0,0,.5); cursor:pointer; }
.store-info { flex:1; min-width:0; }
.store-title { font-size:1.35rem; font-weight:800; margin:0 0 2px; line-height:1.15; }
.store-author { color:var(--muted); font-size:.9rem; margin-bottom:10px; }
.store-blurb { font-size:.95rem; line-height:1.5; margin:0 0 10px; color:var(--text); }
.store-meta { color:var(--muted); font-size:.82rem; margin-bottom:12px; }
.price-block { display:flex; flex-direction:column; gap:3px; margin-bottom:14px; }
.price-list { color:var(--muted); text-decoration:line-through; font-size:.9rem; }
.price-row { display:flex; align-items:baseline; gap:10px; }
.price-label { color:var(--muted); font-size:.85rem; min-width:120px; }
.price-sale { color:var(--accent); font-weight:800; font-size:1.25rem; }
.price-free { color:var(--text); font-weight:700; }
.owned-tag { color:var(--accent); font-weight:800; font-size:.9rem; margin-bottom:14px; }
.store-actions { display:flex; gap:10px; flex-wrap:wrap; }
.paperback-link { display:inline-block; margin-top:12px; color:var(--muted); font-size:.88rem; border-bottom:1px solid var(--line); padding-bottom:2px; }
.paperback-link:hover { color:var(--accent); }
@media (max-width:560px){ .store-item{ flex-direction:column; } .store-cover{ width:140px; height:140px; } .price-label{ min-width:100px; } }

/* ---------- cart drawer ---------- */
.cart-card { max-width:440px; text-align:left; }
.cart-items { display:flex; flex-direction:column; gap:10px; margin:8px 0 14px; max-height:46vh; overflow:auto; }
.cart-item { display:flex; align-items:center; gap:12px; }
.cart-item img { width:46px; height:46px; border-radius:8px; object-fit:cover; }
.cart-item-title { flex:1; font-size:.95rem; }
.cart-item-price { color:var(--accent); font-weight:700; }
.cart-remove { background:none; border:0; color:var(--muted); font-size:20px; cursor:pointer; line-height:1; }
.cart-empty { color:var(--muted); text-align:center; padding:18px 0; }
.cart-total-row { display:flex; justify-content:space-between; font-weight:800; font-size:1.05rem; padding:12px 0; border-top:1px solid var(--line); margin-bottom:12px; }
.cart-note { color:var(--muted); font-size:.82rem; text-align:center; margin:12px 0 0; }