.book-card {
  position:relative; display:grid; grid-template-rows:auto 1fr; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; overflow:hidden; box-shadow:0 12px 32px rgba(120, 60, 18, .07);
}
.book-card::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:0 22px 56px rgba(120, 60, 18, .15); opacity:0; transition:opacity .16s ease; }
.book-card:hover { transform:translateY(-4px); transition:transform .15s ease; }
.book-card:hover::after { opacity:1; }
.book-card__cover { aspect-ratio:2/3; background:#f3f4f6; overflow:hidden; position:relative; }
.book-card__cover img { width:100%; height:100%; object-fit:cover; filter:none; mix-blend-mode:normal; opacity:1; }
.book-card__tag { position:absolute; left:10px; bottom:10px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.92); color:#7c2d12; font-weight:900; font-size:.75rem; }
.book-card .save-button { position:absolute; top:10px; right:10px; background:rgba(255,255,255,.9); color:#7c2d12; border:0; z-index:2; }
.save-button.is-saved { color:#d72e67; animation:heart-pop .2s ease; }
.save-button.is-error { animation:shake .38s ease; }
.book-card__body { padding:var(--space-4); display:grid; gap:var(--space-2); align-content:start; }
.book-card h3 { margin:0; font-size:var(--h3); line-height:1.15; overflow-wrap:anywhere; }
.book-card p { margin:0; }
.rating { color:#f97316; font-size:.9rem; letter-spacing:0; }
.rating span { color:var(--muted); font-weight:800; margin-left:4px; }
.modal { border:0; background:transparent; padding:0; width:min(620px,calc(100% - 24px)); }
.modal::backdrop { background:rgba(5,10,9,.52); backdrop-filter:blur(8px); }
.modal__panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-md); transform:scale(.96); opacity:0; transition:transform .2s ease, opacity .2s ease; }
.modal[open] .modal__panel { transform:scale(1); opacity:1; }
.modal__panel--small { max-width:430px; margin:auto; }
.modal__close { position:absolute; top:14px; right:14px; }
.modal__actions { display:flex; justify-content:flex-end; gap:var(--space-3); margin-top:var(--space-5); }
.format-grid { display:grid; gap:var(--space-3); margin:var(--space-4) 0; }
.format-card { border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-4); background:var(--surface-soft); text-align:left; min-height:112px; display:grid; gap:var(--space-2); }
.format-card.is-done { border-color:var(--success); }
.toast-region { position:fixed; right:16px; bottom:88px; z-index:2000; display:grid; gap:var(--space-2); pointer-events:none; }
.toast { background:var(--text); color:var(--bg); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); box-shadow:var(--shadow-md); transform:translateY(10px); opacity:0; animation:toast-in .22s ease forwards; pointer-events:auto; }
.install-banner { position:fixed; left:16px; right:16px; bottom:86px; z-index:1900; display:flex; align-items:center; gap:var(--space-3); justify-content:space-between; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-md); border-radius:var(--radius-md); padding:var(--space-3); }
.google-button { width:260px; height:52px; border-radius:999px; border:1px solid var(--line); background:#fff; color:#1f1f1f; display:grid; place-items:center; position:relative; overflow:hidden; transition:transform .15s ease, clip-path .25s ease; }
.google-button__idle,.google-button__loader,.google-button__success { grid-area:1/1; display:flex; align-items:center; gap:10px; transition:opacity .15s ease, transform .15s ease; }
.google-button__loader,.google-button__success { opacity:0; transform:scale(.9); }
.google-button.is-loading { pointer-events:none; clip-path:inset(0 104px round 999px); }
.google-button.is-loading .google-button__idle { opacity:0; transform:scale(.9); }
.google-button.is-loading .google-button__loader { opacity:1; transform:scale(1); }
.google-dot { width:7px; height:7px; border-radius:99px; background:#1f1f1f; animation:dot-pulse .7s ease infinite alternate; }
.google-dot:nth-child(2){animation-delay:.12s}.google-dot:nth-child(3){animation-delay:.24s}
.google-button.is-success .google-button__loader,.google-button.is-success .google-button__idle { opacity:0; }
.google-button.is-success .google-button__success { opacity:1; transform:scale(1); color:var(--success); }
.google-button.is-error { animation:shake .4s ease; border-color:var(--danger); }
@keyframes heart-pop { 50%{transform:scale(1.2)} }
@keyframes shake { 20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)} }
@keyframes dot-pulse { to{opacity:.35; transform:translateY(-4px)} }
@keyframes toast-in { to{opacity:1; transform:translateY(0)} }
@media (min-width:768px){.format-grid{grid-template-columns:1fr 1fr}.toast-region{bottom:24px}.install-banner{left:auto; width:420px; bottom:24px}}

/* ── Categories dropdown nav ── */
.nav-dropdown { position:relative; }
.nav-dd-btn { background:none; border:none; color:var(--muted); font-weight:800; font-size:.92rem; cursor:pointer; padding:0; display:flex; align-items:center; gap:4px; transition:color .15s; }
.nav-dd-btn:hover,.nav-dd-btn[aria-expanded="true"] { color:var(--primary-strong); }
.nav-dd-panel {
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:220px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:var(--space-2);
  display:grid; gap:2px; opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease; z-index:200;
}
.nav-dd-panel.is-open { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav-dd-panel a { display:block; padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); color:var(--muted); font-weight:700; font-size:.88rem; transition:background .12s, color .12s; }
.nav-dd-panel a:hover { background:var(--surface-soft); color:var(--primary-strong); }

/* ── Plans pricing grid ── */
.plans-grid { display:grid; gap:var(--space-4); margin-top:var(--space-6); }
.plan-card {
  position:relative; background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--space-6) var(--space-5);
  display:grid; gap:var(--space-4); align-content:start;
  transition:transform .18s ease, box-shadow .18s ease;
}
.plan-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.plan-card--popular { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary),transparent 80%); }
.plan-card--best { border-color:#d97706; box-shadow:0 0 0 3px rgba(217,119,6,.15); }
.plan-badge { display:inline-block; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; padding:4px 12px; border-radius:99px; background:var(--primary); color:#fff; margin-bottom:var(--space-2); }
.plan-badge--gold { background:linear-gradient(135deg,#f59e0b,#d97706); }
.plan-name { font-size:1.3rem; font-weight:900; }
.plan-price { line-height:1; }
.plan-price__amount { font-size:clamp(2.4rem,6vw,3.5rem); font-weight:900; color:var(--primary-strong); }
.plan-price__period { font-size:.95rem; color:var(--muted); font-weight:700; }
.plan-features { list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2); }
.plan-features li { display:flex; align-items:center; gap:var(--space-2); color:var(--muted); font-size:.92rem; }
.plan-features li::before { content:"✓"; color:var(--success); font-weight:900; flex-shrink:0; }
@media (min-width:640px) { .plans-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px) { .plans-grid { grid-template-columns:repeat(3,1fr); } }

/* ── Audiobook Player ── */
.player-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-md); display:grid; gap:var(--space-5); }
.player-meta { display:flex; gap:var(--space-5); align-items:center; }
.player-cover { border-radius:var(--radius-md); object-fit:cover; box-shadow:var(--shadow-sm); flex-shrink:0; }
.player-time-bar { display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-3); align-items:center; font-size:.85rem; color:var(--muted); font-weight:700; }
.player-seek { width:100%; accent-color:var(--primary); cursor:pointer; height:6px; border-radius:99px; }
.player-controls { display:flex; align-items:center; justify-content:center; gap:var(--space-5); flex-wrap:wrap; }
.player-btn { background:var(--surface-soft); border:1px solid var(--line); border-radius:50%; width:52px; height:52px; display:grid; place-items:center; cursor:pointer; color:var(--text); transition:transform .14s ease, background .14s ease; }
.player-btn:hover { transform:scale(1.1); background:var(--primary); color:#fff; }
.player-btn--play { width:68px; height:68px; background:linear-gradient(135deg,var(--primary),var(--primary-strong)); color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(249,115,22,.3); }
.player-btn--play:hover { transform:scale(1.08); }
.player-speed { display:flex; flex-direction:column; align-items:center; gap:2px; }
.player-speed-select { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); padding:4px 8px; font-size:.85rem; cursor:pointer; }

/* ── Badge Picker (profile page) ── */
.badge-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:var(--space-3); }
.badge-option { border:2px solid var(--line); border-radius:var(--radius-md); padding:var(--space-3); text-align:center; cursor:pointer; transition:border-color .15s, transform .15s; }
.badge-option:hover { border-color:var(--primary); transform:translateY(-2px); }
.badge-option.is-selected { border-color:var(--primary); background:color-mix(in srgb,var(--primary),transparent 90%); }
.badge-option img { width:48px; height:48px; border-radius:50%; object-fit:cover; margin:0 auto 4px; display:block; }
.badge-option span { font-size:.72rem; font-weight:700; color:var(--muted); display:block; overflow-wrap:anywhere; }

/* ── Book card dual CTAs ── */
.book-cta-group { display:grid; gap:var(--space-2); margin-top:var(--space-2); }
.book-cta-group .button { font-size:.82rem; min-height:38px; }
.btn-unlock { background:var(--surface-soft); border:1px solid var(--line); color:var(--text); }
.btn-unlocked { background:color-mix(in srgb,var(--success),transparent 88%); border:1px solid var(--success); color:var(--success); pointer-events:none; }
.btn-no-sub { opacity:.7; }

/* ── Star rating widget ── */
.star-rating { display:flex; gap:2px; cursor:pointer; }
.star-rating .star { font-size:1.2rem; color:#ddd; transition:color .1s; }
.star-rating .star.is-active,.star-rating .star.is-hover { color:#f97316; }

/* ── Free badge on book card ── */
.tag-free { background:linear-gradient(135deg,var(--success),#166534); color:#fff; }
.tag-bestseller { background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; }