:root{
  --bg1:#fbf6ec; --bg2:#efe3cf;
  --wood:#6b4329; --wood-dark:#4a2d1a; --wood-light:#8a5a38;
  --shelf1:#caa274; --shelf2:#b98a57;
  --cream:#f7f1e6; --ink:#2b2420; --accent:#b5774a; --danger:#b3473a;
  --label:#4a2d1a;
  --font-display:'Georgia','Times New Roman',serif;
  --shelf-h: 168px; --cover-w: 104px; --spine-angle: 0deg;
}
/* per-theme display fonts */
html[data-theme="fantasy"]  { --font-display:'Cinzel',serif; }
html[data-theme="dragons"]  { --font-display:'Pirata One','Cinzel',serif; }
html[data-theme="romance"]  { --font-display:'Dancing Script',cursive; }
html[data-theme="darkromance"]{ --font-display:'Cinzel Decorative','Cinzel',serif; }
html[data-theme="scifi"]    { --font-display:'Orbitron',sans-serif; }
html[data-theme="western"]  { --font-display:'Rye','Georgia',serif; }
html[data-theme="dystopian"]{ --font-display:'Special Elite',monospace; }
/* themed illustrated background (SVG scenes) */
body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-repeat:no-repeat;background-position:center bottom;background-size:cover;opacity:.55; }
html[data-theme="fantasy"]   body::before{ background-image:url("themes/fantasy.svg"); }
html[data-theme="dragons"]   body::before{ background-image:url("themes/dragons.svg"); }
html[data-theme="romance"]   body::before{ background-image:url("themes/romance.svg"); }
html[data-theme="darkromance"] body::before{ background-image:url("themes/darkromance.svg"); }
html[data-theme="scifi"]     body::before{ background-image:url("themes/scifi.svg"); }
html[data-theme="western"]   body::before{ background-image:url("themes/western.svg"); }
html[data-theme="dystopian"] body::before{ background-image:url("themes/dystopian.svg"); }
html[data-theme="mystery"]    body::before{ background-image:url("themes/mystery.svg"); }
html[data-theme="horror"]     body::before{ background-image:url("themes/horror.svg"); }
html[data-theme="nonfiction"] body::before{ background-image:url("themes/nonfiction.svg"); }
html[data-theme="cozy"]       body::before{ background-image:url("themes/cozy.svg"); }
html[data-theme="ocean"]      body::before{ background-image:url("themes/ocean.svg"); }
html[data-theme="steampunk"]  body::before{ background-image:url("themes/steampunk.svg"); }
html[data-theme="poetry"]     body::before{ background-image:url("themes/poetry.svg"); }
html[data-theme="thriller"]   body::before{ background-image:url("themes/thriller.svg"); }
/* painted photographic backgrounds (override the SVG scenes) */
html[data-theme="classic"]     body::before{ background-image:url("themes/classic.jpg"); }
html[data-theme="fantasy"]     body::before{ background-image:url("themes/fantasy.jpg"); }
html[data-theme="dragons"]     body::before{ background-image:url("themes/dragons.jpg"); }
html[data-theme="romance"]     body::before{ background-image:url("themes/romance.jpg"); }
html[data-theme="darkromance"] body::before{ background-image:url("themes/darkromance.jpg"); }
html[data-theme="scifi"]       body::before{ background-image:url("themes/scifi.jpg"); }
html[data-theme="western"]     body::before{ background-image:url("themes/western.jpg"); }
html[data-theme="dystopian"]   body::before{ background-image:url("themes/dystopian.jpg"); }
html[data-theme="mystery"]     body::before{ background-image:url("themes/mystery.jpg"); }
html[data-theme="horror"]      body::before{ background-image:url("themes/horror.jpg"); }
html[data-theme="nonfiction"]  body::before{ background-image:url("themes/nonfiction.jpg"); }
html[data-theme="cozy"]        body::before{ background-image:url("themes/cozy.jpg"); }
html[data-theme="ocean"]       body::before{ background-image:url("themes/ocean.jpg"); }
html[data-theme="steampunk"]   body::before{ background-image:url("themes/steampunk.jpg"); }
html[data-theme="poetry"]      body::before{ background-image:url("themes/poetry.jpg"); }
html[data-theme="thriller"]    body::before{ background-image:url("themes/thriller.jpg"); }
html[data-theme="animals"]      body::before{ background-image:url("themes/animals.jpg"); }
html[data-theme="chibi"]        body::before{ background-image:url("themes/chibi.jpg"); }
html[data-theme="graphicnovel"] body::before{ background-image:url("themes/graphicnovel.jpg"); }
html[data-theme="artsy"]        body::before{ background-image:url("themes/artsy.jpg"); }
html[data-theme="manga"]        body::before{ background-image:url("themes/manga.jpg"); }
/* let the themed scene subtly show through the shelves (safe fallback keeps them opaque) */
@supports (background: color-mix(in srgb, red, blue)){
  .shelf{ background:linear-gradient(180deg, color-mix(in srgb, var(--shelf1) 55%, transparent), color-mix(in srgb, var(--shelf2) 55%, transparent)); }
}
/* ---- Themes ---- */
html[data-theme="fantasy"]{ --bg1:#eef5ea;--bg2:#d7e6d0;--wood:#2f5d43;--wood-dark:#1e3d2c;--wood-light:#3f7a58;--shelf1:#6b9c7d;--shelf2:#568a68;--accent:#c9a227;--label:#1e3d2c; }
html[data-theme="dragons"]{ --bg1:#2a2422;--bg2:#171312;--wood:#3a2320;--wood-dark:#241413;--wood-light:#4d2f2a;--shelf1:#3b2d2a;--shelf2:#2c2320;--accent:#e2542a;--label:#f0d8c8; }
html[data-theme="romance"]{ --bg1:#fdeff2;--bg2:#f6d9e0;--wood:#8a4a5e;--wood-dark:#6a3547;--wood-light:#a85f74;--shelf1:#e0a9b8;--shelf2:#d492a4;--accent:#d1567f;--label:#6a3547; }
html[data-theme="darkromance"]{ --bg1:#241419;--bg2:#120a0d;--wood:#2a1620;--wood-dark:#170b10;--wood-light:#3a1f2b;--shelf1:#2c1620;--shelf2:#1c0e15;--accent:#b03a5b;--label:#e8d0d8; }
html[data-theme="scifi"]{ --bg1:#101826;--bg2:#0a0f18;--wood:#16283f;--wood-dark:#0d1826;--wood-light:#21395a;--shelf1:#1c3350;--shelf2:#152740;--accent:#22c1d6;--label:#cfe6f5; }
html[data-theme="western"]{ --bg1:#f3e6d0;--bg2:#e4cba3;--wood:#6e4a2b;--wood-dark:#4c3119;--wood-light:#8a6338;--shelf1:#c79a63;--shelf2:#b5854e;--accent:#a8482a;--label:#4c3119; }
html[data-theme="dystopian"]{ --bg1:#3a3d3b;--bg2:#26302b;--wood:#3b423f;--wood-dark:#262b29;--wood-light:#4b534f;--shelf1:#4a534e;--shelf2:#3a423e;--accent:#c9962a;--label:#e6e8e5; }
html[data-theme="mystery"]{ --bg1:#2b3a3f;--bg2:#1a2529;--wood:#243237;--wood-dark:#151d20;--wood-light:#33454b;--shelf1:#33474d;--shelf2:#26363b;--accent:#c9a24a;--label:#dfe6e5;--font-display:'Playfair Display',serif; }
html[data-theme="horror"]{ --bg1:#1c1315;--bg2:#0e0809;--wood:#2a1518;--wood-dark:#170a0c;--wood-light:#3a1d21;--shelf1:#2c1618;--shelf2:#1c0e10;--accent:#a51e22;--label:#e8d5d5;--font-display:'Creepster',cursive; }
html[data-theme="nonfiction"]{ --bg1:#f2f0ea;--bg2:#e3ddd0;--wood:#4a4a44;--wood-dark:#33332e;--wood-light:#5f5f57;--shelf1:#b9b3a4;--shelf2:#a49d8c;--accent:#3a6ea5;--label:#33332e;--font-display:'Libre Baskerville',serif; }
html[data-theme="cozy"]{ --bg1:#f4efe1;--bg2:#e6ddc6;--wood:#7a6a4a;--wood-dark:#5a4d34;--wood-light:#948248;--shelf1:#c3b58c;--shelf2:#b0a072;--accent:#c07a4a;--label:#5a4d34;--font-display:'Caveat',cursive; }
html[data-theme="ocean"]{ --bg1:#144b5a;--bg2:#0a2e3a;--wood:#123e4a;--wood-dark:#0a2831;--wood-light:#1c5563;--shelf1:#1a5563;--shelf2:#123e4a;--accent:#3fd0c9;--label:#cdeef0;--font-display:'Quicksand',sans-serif; }
html[data-theme="steampunk"]{ --bg1:#e9dcc0;--bg2:#d3c09a;--wood:#6b4a2a;--wood-dark:#4a3218;--wood-light:#8a6338;--shelf1:#b08d5a;--shelf2:#9a7742;--accent:#b5651d;--label:#4a3218;--font-display:'IM Fell English',serif; }
html[data-theme="poetry"]{ --bg1:#f3f0f5;--bg2:#e4dced;--wood:#6a5a72;--wood-dark:#4d4054;--wood-light:#82708c;--shelf1:#b7a9c0;--shelf2:#a495af;--accent:#8a6fa8;--label:#4d4054;--font-display:'Cormorant Garamond',serif; }
html[data-theme="thriller"]{ --bg1:#1e2024;--bg2:#0f1113;--wood:#24272b;--wood-dark:#141618;--wood-light:#33373c;--shelf1:#2a2e33;--shelf2:#1c1f23;--accent:#d1332e;--label:#e2e4e6;--font-display:'Oswald',sans-serif; }
html[data-theme="animals"]{ --bg1:#f4ecd8;--bg2:#e0cfa8;--wood:#7a5a3a;--wood-dark:#573f28;--wood-light:#977049;--shelf1:#cdae74;--shelf2:#bb975c;--accent:#e08a2a;--label:#573f28;--font-display:'Quicksand',sans-serif; }
html[data-theme="chibi"]{ --bg1:#fdeef6;--bg2:#f7d9ea;--wood:#c98bb0;--wood-dark:#9c5f88;--wood-light:#e0a6c8;--shelf1:#f4bcd9;--shelf2:#eba2c9;--accent:#ff6fae;--label:#7a3f61;--font-display:'Quicksand',sans-serif; }
html[data-theme="graphicnovel"]{ --bg1:#e2eff7;--bg2:#c2ddec;--wood:#2b5a6e;--wood-dark:#1c3f4e;--wood-light:#3d7690;--shelf1:#79aec4;--shelf2:#5f97ae;--accent:#ef8b3c;--label:#eef6fb;--font-display:'Oswald',sans-serif; }
html[data-theme="artsy"]{ --bg1:#f6f2e8;--bg2:#e7ded0;--wood:#5f5a6a;--wood-dark:#454150;--wood-light:#807a8c;--shelf1:#c3b7cc;--shelf2:#b0a1bd;--accent:#7a5cd6;--label:#454150;--font-display:'Caveat',cursive; }
html[data-theme="manga"]{ --bg1:#f4f2ee;--bg2:#e2ded6;--wood:#242424;--wood-dark:#0e0e0e;--wood-light:#3c3c3c;--shelf1:#3a3a3a;--shelf2:#242424;--accent:#e23b3b;--label:#f2f0ec;--font-display:'Oswald',sans-serif; }
/* Legibility: these light-artwork themes had DARK section fonts that blended into the background art.
   Lighten the section-font colour (--label); the text-shadow above keeps it readable over light spots too. */
html[data-theme="classic"], html[data-theme="western"], html[data-theme="nonfiction"],
html[data-theme="cozy"], html[data-theme="steampunk"], html[data-theme="fantasy"],
html[data-theme="romance"], html[data-theme="animals"], html[data-theme="chibi"],
html[data-theme="artsy"], html[data-theme="graphicnovel"], html[data-theme="poetry"]{ --label:#f6efdf; }
/* Romance's backdrop is light, so its pale label washes out — use dark rose text with a white glow */
html[data-theme="romance"]{ --label:#5a2733; }
/* Applies only to text sitting DIRECTLY on the artwork. .series-edit and .slot-empty
   are deliberately excluded: they now have their own dark surface, so dark rose text
   would be unreadable inside them. (.book-title was also dropped — that class does not
   exist anywhere in the app, so it never matched anything.) */
html[data-theme="romance"] .series-title,
html[data-theme="romance"] .book .label,
html[data-theme="romance"] .series-name,
html[data-theme="romance"] .shelf-name{ color:#5a2733;
  text-shadow:0 0 4px rgba(255,255,255,.95), 0 0 9px rgba(255,255,255,.8), 0 1px 2px rgba(255,255,255,.85); }
/* Manga has a light background, so its near-white label was invisible — use a dark red from its palette */
html[data-theme="manga"]{ --label:#9e1f1f; }
/* Manga's Oswald label reads thin — render it truly bold so the red pops */
/* Same exclusion as romance: the bold + white glow is for the dark-red text that sits
   on manga's light artwork. Inside the dark pills it produced white-on-white glow — so
   .series-edit and .slot-empty opt out and keep the plain pill treatment. */
html[data-theme="manga"] .series-title,
html[data-theme="manga"] .book .label,
html[data-theme="manga"] .shelf-name{ font-weight:700;
  text-shadow:0 0 4px rgba(255,255,255,.95), 0 0 9px rgba(255,255,255,.65); }
/* Small-caps shelf labels — true capital letters render larger, so mixed source
   capitalization (Hunt vs hunt) always looks uniform */
.series-title, .tab .tab-txt, .sort-pill,
#themeSheet .sheet-head h3{ font-variant: small-caps; }
/* Manga: brighten + white-glow the footer links so they pop over the busy bottom art */
html[data-theme="manga"] .app-foot{ opacity:.95; }
html[data-theme="manga"] .app-foot a{ font-weight:700;
  text-shadow:0 0 4px rgba(255,255,255,.95), 0 0 9px rgba(255,255,255,.65); }
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
/* Lock out accidental horizontal scroll/overscroll so the app never drifts off-center.
   overflow-x:clip avoids creating a scroll container (keeps the sticky header working);
   older browsers fall back to hidden. */
html,body{ overflow-x:hidden; overflow-x:clip; overscroll-behavior-x:none; max-width:100%; }
/* Always reserve the vertical scrollbar's space so switching to a short view (e.g. Series)
   doesn't change the width and shift the centered layout sideways. */
html{ scrollbar-gutter: stable; }
body{
  font-family:"Georgia","Times New Roman",serif;
  color:var(--ink);
  background:
    radial-gradient(120% 60% at 50% 0%, var(--bg1) 0%, var(--bg2) 100%) fixed;
  padding-bottom:calc(env(safe-area-inset-bottom) + 104px);   /* clears the centered Add-Book FAB, incl. notch safe-area */
}
.hidden{display:none !important;}
.acct-tour-row{ text-align:center; margin-top:14px; padding-top:13px; border-top:1px solid #e0d3ba; }
/* Account danger zone — permanent deletion */
.acct-danger{ text-align:center; margin-top:14px; padding-top:12px; border-top:1px solid #e0d3ba; }
.link-btn.danger{ color:#b3261e; opacity:.9; }
#acctDelConfirm{ text-align:left; margin-top:10px; }
.danger-text{ color:#b3261e; }
.btn.danger-btn{ background:#b3261e; color:#fff; border:1px solid #8f1d17; }
/* extra bottom padding so the links clear the fixed "add book" FAB; opacity 1 + glow so they read on any theme backdrop */
.app-foot{ text-align:center; padding:20px 10px calc(env(safe-area-inset-bottom) + 92px); font-size:12.5px; opacity:1; }
.app-foot a{ color:#3a2f28; font-weight:700; text-decoration:none; margin:0 6px;
  text-shadow:0 0 3px #fff, 0 0 7px rgba(255,255,255,.95), 0 1px 2px rgba(255,255,255,.9); }
.app-foot a:hover{ text-decoration:underline; }
.foot-social{ display:flex; justify-content:center; gap:12px; margin-top:9px; }
.foot-social a{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; margin:0;
  background:rgba(255,255,255,.92); box-shadow:0 1px 4px rgba(0,0,0,.3); transition:transform .15s; text-shadow:none; }
.foot-social a:hover{ transform:translateY(-2px); text-decoration:none; }
.foot-social svg{ width:19px; height:19px; display:block; }

/* Top bar — scrolls away with the page (not pinned) for a cleaner mobile feel */
.topbar{
  position:relative;z-index:20;
  background:linear-gradient(180deg,var(--wood-light),var(--wood));
  color:var(--cream);
  padding:calc(env(safe-area-inset-top) + 10px) 14px 12px;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.topbar h1{font-size:26px;letter-spacing:.5px;font-weight:700;font-family:var(--font-display);}
.brandbar{ display:flex; flex-direction:column; align-items:center; gap:3px; margin-bottom:9px; }
/* Logo wordmark in the header — soft cream glow keeps the black-and-gold legible on any theme */
.brand-logo-img{ height:40px; width:auto; max-width:88%; display:block;
  filter: drop-shadow(0 0 5px rgba(247,240,225,.85)) drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
/* ── Header banner: the ACTIVE THEME'S OWN ARTWORK, with one fixed wordmark ────────
   Replaces the single dark-academia mobs-banner.jpg, which could only ever suit the
   dark wood themes and read as a foreign object on the pale ones. The lockup never
   changes (so the brand stays consistent across all 53 themes and every future one);
   only the art behind it and the accent hairlines vary.
   Costs no new images — the theme background is already downloaded for body::before,
   so this reuses a cached file and drops 143KB from the page. It's also now real <h1>
   text rather than a picture of text, which gives the app the heading it never had.
   Falls back to the original banner if a theme somehow has no --theme-bg. */
.brand-banner{ position:relative; display:block; width:100%; height:118px; margin:0;
  border-radius:9px; overflow:hidden; box-shadow:0 5px 16px rgba(0,0,0,.4);
  background-image:var(--theme-bg, url("mobs-banner.jpg"));
  background-size:cover; background-position:center 38%; }
.brand-banner::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.66)); }
.bb-lock{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; }
.bb-m{ font-family:'Cinzel',serif; font-weight:600; font-size:31px; line-height:1;
  letter-spacing:.24em; text-indent:.24em; color:#fbf4e6;
  text-shadow:0 2px 12px rgba(0,0,0,.9), 0 0 30px rgba(0,0,0,.55); }
.bb-rule{ display:flex; align-items:center; gap:11px; }
.bb-rule i{ height:1px; width:34px; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.bb-sub{ font-family:'Cinzel',serif; font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent); text-shadow:0 1px 6px rgba(0,0,0,.9); white-space:nowrap; }
@media (max-width:420px){
  .brand-banner{ height:96px; }
  .bb-m{ font-size:25px; }
  .bb-rule i{ width:24px; }
  .bb-sub{ font-size:9px; letter-spacing:.24em; }
}
.brand-logo{ background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:700;
  font-size:18px; letter-spacing:2px; padding:3px 11px; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,.28); }
.brand-name{ font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--cream);
  letter-spacing:.2em; text-align:center; line-height:1.05; opacity:.94; margin-top:2px;
  text-shadow:0 1px 2px rgba(0,0,0,.45); }
.coll-title{ background:transparent;border:none;color:var(--cream);font-family:var(--font-display);
  font-size:22px;font-weight:700;letter-spacing:.5px;cursor:pointer;padding:2px 0 0;text-align:left;
  flex:1;min-width:0;line-height:1.15;overflow-wrap:break-word;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.coll-list{ display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto;margin:6px 0; }
.coll-row{ display:flex;align-items:center;gap:4px;border:1px solid #e0d3ba;border-radius:12px;padding:3px 6px;background:#fffdf8; }
.coll-row.active{ border-color:var(--accent);box-shadow:0 0 0 1px var(--accent); }
.coll-pick{ flex:1;display:flex;align-items:center;gap:10px;background:transparent;border:none;font-family:inherit;
  font-size:16px;color:var(--ink);cursor:pointer;text-align:left;padding:8px 6px; }
.coll-ic{ font-size:20px;flex:0 0 auto; }
.coll-nm{ flex:1;font-weight:700; }
.coll-ct{ font-size:12px;color:#7a6a4a;background:#efe3cf;border-radius:20px;padding:2px 9px;flex:0 0 auto; }
/* Choose-shelves-to-share sheet */
.share-toolbar{ display:flex; justify-content:flex-end; margin:2px 0 8px; }
.share-toolbar .btn{ font-size:12.5px; padding:5px 12px; }
.share-list{ display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow:auto; }
.share-pick{ display:flex; align-items:center; gap:10px; text-align:left; width:100%;
  background:#fffdf8; border:1px solid #e0d3ba; border-radius:12px; padding:11px 12px; font:inherit; font-size:15px; color:var(--ink); cursor:pointer; }
.share-pick.on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.share-ck{ flex:0 0 20px; width:20px; height:20px; border-radius:6px; border:1.5px solid #c9b48f;
  display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff; }
.share-pick.on .share-ck{ background:var(--accent); border-color:var(--accent); }
.share-nm{ flex:1; font-weight:600; }
/* New-library sheet: name + emoji picker (compact so it fits with no scrollbar) */
.nl-body{ display:block; }   /* NOT the flex .sheet-body — this content stacks vertically */
.nl-preview{ text-align:center; font-size:32px; line-height:1; margin:0 0 7px; }
.nl-name{ width:100%; box-sizing:border-box; font:inherit; font-size:16px; padding:9px 12px;
  border:1px solid #e0d3ba; border-radius:11px; background:#fffdf8; color:var(--ink); }
.nl-lbl{ margin:11px 0 6px; font-size:12.5px; font-weight:700; color:#7a6a4a; }
.nl-grid{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:5px; }
.nl-emoji{ font-size:18px; line-height:1.2; padding:5px 0; min-width:0; border:1px solid #e0d3ba; border-radius:9px;
  background:#fffdf8; cursor:pointer; transition:transform .08s ease; }
.nl-emoji:hover{ transform:scale(1.12); }
.nl-emoji.on{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); background:#fff; }
.nl-own{ display:flex; align-items:center; justify-content:center; margin-top:11px; font-size:12.5px; color:#7a6a4a; }
.nl-own-in{ font-size:18px; width:56px; text-align:center; padding:4px; margin-left:8px;
  border:1px solid #e0d3ba; border-radius:9px; background:#fffdf8; }
/* Library ✎ rename / 🗑 delete — same transparent-text problem the shelf buttons had.
   Given the matching pill surface, and 🗑 now reads as destructive (it was visually
   identical to rename, which is a bad look for the button that deletes a library). */
.coll-mini{ display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.22);border-radius:999px;
  color:#fff;font-size:15px;cursor:pointer;opacity:1;
  min-width:34px;min-height:34px;padding:0 9px;
  text-shadow:0 1px 2px rgba(0,0,0,.6); }
.coll-mini:active{ background:rgba(0,0,0,.68); }
.coll-mini.danger{ background:rgba(150,28,20,.62); border-color:rgba(255,180,170,.4); }
.coll-mini.danger:active{ background:rgba(150,28,20,.8); }
.book-zoom{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  padding:24px; cursor:pointer; animation:zoomIn .18s ease; }
@keyframes zoomIn{ from{ opacity:0; } to{ opacity:1; } }
.zoom-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  width:100%; scrollbar-width:none; }
.zoom-track::-webkit-scrollbar{ display:none; }
.zoom-slide{ flex:0 0 100%; scroll-snap-align:center; display:flex; align-items:center; justify-content:center; }
.zoom-slide img{ max-width:86vw; max-height:74vh; border-radius:8px; object-fit:contain; box-shadow:0 24px 60px rgba(0,0,0,.7); }
.zoom-noimg{ font-size:84px; }
.zoom-close{ position:absolute; top:calc(env(safe-area-inset-top) + 14px); right:16px; z-index:2;
  width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; font-size:18px; cursor:pointer; display:none; }
.book-zoom.multi .zoom-close{ display:block; }
.zoom-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; display:none;
  width:48px; height:48px; border-radius:50%; border:none; background:rgba(0,0,0,.5);
  color:#fff; font-size:30px; line-height:1; cursor:pointer; box-shadow:0 2px 12px rgba(0,0,0,.5); }
.zoom-nav:hover{ background:rgba(0,0,0,.7); }
.zoom-prev{ left:calc(50% - 150px); }
.zoom-next{ right:calc(50% - 150px); }
.book-zoom.multi .zoom-nav{ display:block; }
.book-zoom.multi{ cursor:default; }
.zoom-count{ display:block; margin-top:6px; font-size:13px; color:rgba(255,255,255,.78); }
.zoom-cap{ color:#fff; text-align:center; font-size:15px; max-width:90vw; line-height:1.3; }
.zoom-cap .zt{ display:block; font-weight:700; font-size:18px; margin-bottom:2px; }
.zoom-hint{ color:rgba(255,255,255,.55); font-size:12px; letter-spacing:.5px; }
.editions{ margin-top:14px; }
.editions-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
  font-weight:700; color:var(--ink); font-size:14px; }
.mini-btn{ padding:5px 10px; font-size:13px; }
.editions-row{ display:flex; gap:10px; overflow-x:auto; padding:12px 6px 4px; -webkit-overflow-scrolling:touch; }
.ed-item{ flex:0 0 auto; width:76px; text-align:center; position:relative; }
.ed-item img{ width:76px; height:112px; object-fit:cover; border-radius:5px; background:#ded3c0;
  box-shadow:0 3px 8px rgba(0,0,0,.3); cursor:pointer; }
.ed-note{ font-size:10px; color:#6b5a48; margin-top:4px; line-height:1.2; word-break:break-word; }
/* Cover-thumbnail controls. These were 20x20px circles at opposite corners of a 76px
   thumb: 🗑 deletes the cover, ⭐ makes it the display cover, and there is no undo in
   the app. Now 28px with an invisible 8px hit-area halo (::before), so they look almost
   the same but are far harder to hit by accident thumb-first on a phone. */
.ed-del{ position:absolute; top:-6px; right:-6px; background:var(--danger); color:#fff; border:none;
  border-radius:50%; width:28px; height:28px; font-size:14px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 5px rgba(0,0,0,.35); }
.ed-star{ position:absolute; top:-6px; left:-6px; background:#caa24a; color:#3a2b10; border:none;
  border-radius:50%; width:28px; height:28px; font-size:14px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 5px rgba(0,0,0,.3); }
.ed-del::before,.ed-star::before{ content:''; position:absolute; inset:-8px; border-radius:50%; }
.ed-display{ position:absolute; top:-7px; left:50%; transform:translateX(-50%); background:#caa24a; color:#3a2b10;
  font-size:9.5px; font-weight:800; padding:2px 8px; border-radius:20px; box-shadow:0 2px 5px rgba(0,0,0,.3); white-space:nowrap; }
.ed-item.main img{ outline:2px solid #caa24a; outline-offset:1px; }
.ed-badge{ position:absolute; bottom:3px; right:2px; min-width:16px; height:16px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; padding:0 4px; line-height:1;
  background:#fbf7ef; color:#2b2018; font-size:9.5px; font-weight:800; border-radius:20px;
  box-shadow:0 0 0 1.4px #caa24a, 0 1px 4px rgba(0,0,0,.5); }
/* On a spine (which now touches its neighbor) keep the ×N badge fully inside the book's own width */
.spine .ed-badge{ bottom:24px; left:50%; right:auto; transform:translateX(-50%); }
.search{
  width:100%;margin-top:10px;border:none;border-radius:10px;padding:10px 12px;font-size:16px;
  background:rgba(255,255,255,.92);color:var(--ink);font-family:inherit;   /* 16px min — prevents iOS auto-zoom on focus */
}
/* Book-themed bookmark tabs: word + small icon on a wood ribbon with a notched tail;
   the active bookmark lifts up in the accent colour. Wraps to centered rows like index tabs. */
.tabs{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:5px;margin-top:12px;padding:0;background:none;}
.tab{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;
  border:none;cursor:pointer;padding:5px 8px 12px;min-width:48px;
  font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.01em;color:var(--cream);
  background:linear-gradient(180deg,var(--wood-light),var(--wood-dark));opacity:.9;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);   /* bookmark tail notch */
  box-shadow:0 3px 6px rgba(0,0,0,.28);transition:transform .14s,opacity .14s,background .14s;}
/* wide/decorative theme fonts need a smaller tab label so the 6 bookmarks don't blow up the header */
html[data-theme="western"] .tab, html[data-theme="dragons"] .tab, html[data-theme="horror"] .tab,
html[data-theme="scifi"] .tab, html[data-theme="dystopian"] .tab, html[data-theme="fantasy"] .tab,
html[data-theme="darkromance"] .tab, html[data-theme="mystery"] .tab, html[data-theme="steampunk"] .tab,
html[data-theme="romance"] .tab, html[data-theme="cozy"] .tab, html[data-theme="artsy"] .tab,
html[data-theme="poetry"] .tab{ font-size:9.5px; min-width:44px; padding:5px 6px 11px; }
.tab .tab-ico{line-height:1;}
.tab .tab-ico img{display:block;width:15px;height:15px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));}
.tab .tab-txt{display:block;line-height:1;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.5);}
.tab:hover{opacity:1;}
.tab.active{opacity:1;color:#fff;transform:translateY(-3px);
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000));
  box-shadow:0 7px 12px rgba(0,0,0,.42);}
/* Cover cropper */
.crop-sheet{ position:fixed; inset:0; z-index:80; background:#0e0d0c; display:flex; flex-direction:column; }
.crop-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; color:#efe7d6;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px; font-size:15px; font-weight:600; }
.crop-stage{ flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; touch-action:none; }
#cropImg{ max-width:100%; max-height:100%; display:block; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.crop-box{ position:absolute; border:2px solid #fff; box-shadow:0 0 0 9999px rgba(0,0,0,.6); cursor:move; touch-action:none; box-sizing:border-box; }
.crop-h{ position:absolute; width:26px; height:26px; background:#fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.5); touch-action:none; }
.crop-h.tl{ left:-13px; top:-13px; } .crop-h.tr{ right:-13px; top:-13px; }
.crop-h.bl{ left:-13px; bottom:-13px; } .crop-h.br{ right:-13px; bottom:-13px; }
.crop-foot{ display:flex; justify-content:center; padding:14px 16px calc(env(safe-area-inset-bottom) + 16px); }
.crop-foot .btn{ min-width:220px; }
.crop-tools{ display:flex; align-items:center; justify-content:center; gap:10px; padding:10px 16px 0; }
.crop-tool{ width:44px; height:44px; flex:0 0 auto; border-radius:11px; border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.10); color:#efe7d6; font-size:20px; line-height:1; cursor:pointer; touch-action:manipulation; }
.crop-tool:active{ background:rgba(255,255,255,.22); }
.crop-fine{ flex:1 1 auto; max-width:230px; accent-color:#bf7a4a; height:30px; }
/* Share-image preview popup */
.share-prev{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:18px;}
.share-prev-box{background:#fff;border-radius:16px;padding:14px;max-width:94vw;max-height:90vh;display:flex;flex-direction:column;gap:10px;box-shadow:0 12px 40px rgba(0,0,0,.5);}
.share-prev-img{max-width:100%;max-height:66vh;object-fit:contain;border-radius:8px;display:block;margin:0 auto;}
.share-prev-hint{text-align:center;font-size:13px;color:#6b5a48;}
.share-prev-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.share-prev-btns .btn{flex:0 0 auto;}
/* the popup box is white, so ghost buttons (Facebook/X/Close) need dark text — not the theme's light --cream */
.share-prev-btns .btn.ghost{ background:#efe6d5; color:#4a3a28; border:1px solid #d9c8a9; }
.share-prev-btns .btn.ghost:hover{ background:#e6d9c2; }
/* Journal / Stats switch (they share one tab) */
.ins-toggle{display:flex;justify-content:center;gap:8px;margin:2px 0 12px;}
.ins-btn{border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.82);color:var(--ink);
  border-radius:16px;padding:7px 18px;font-size:13.5px;font-family:inherit;cursor:pointer;}
.ins-btn.on{background:var(--accent);color:#fff;font-weight:700;border-color:transparent;box-shadow:0 2px 6px rgba(0,0,0,.2);}
/* Search in the Series view: keep the whole series visible, dim non-matches, glow the match */
.search-dim{ opacity:.32; filter:grayscale(.5); transition:opacity .15s; }
.search-hit{ box-shadow:0 0 0 2px var(--accent), 0 0 12px 2px rgba(0,0,0,.45); border-radius:3px; z-index:3; }
.log-dates{ display:flex; gap:10px; flex-wrap:wrap; margin:2px 0 10px; }
.log-dates label{ flex:1 1 140px; display:flex; flex-direction:column; gap:4px; font-size:13px; color:#6b5a48; }
.log-dates input{ border:1px solid #d8c7a8; border-radius:8px; padding:9px 10px; font-size:16px; font-family:inherit; background:#fffdf8; color:var(--ink); }
.sheet-head-btns{ display:flex; gap:8px; align-items:center; }
.series-add-controls{ display:flex; gap:8px; margin:2px 0 8px; }
.search-row{display:flex;gap:8px;margin-bottom:10px;}
.search-row input{flex:1;border:1px solid #d8c7a8;border-radius:8px;padding:10px;font-size:16px;font-family:inherit;background:#fffdf8;color:var(--ink);}
/* ---------- Rapid Scan (handheld scanner) ---------- */
.scanmode-card .scanmode-fmt{margin:2px 0 12px;}
.scanmode-input{width:100%;box-sizing:border-box;border:2px solid var(--accent);border-radius:12px;
  padding:16px 14px;font-size:20px;font-family:inherit;background:#fffdf8;color:var(--ink);
  text-align:center;letter-spacing:1px;outline:none;}
.scanmode-input::placeholder{color:#b09a7e;letter-spacing:0;}
.scanmode-hint{font-size:12.5px;color:#7a6a56;margin:8px 2px 12px;line-height:1.4;text-align:center;}
.scanmode-stat{font-size:13px;color:#6b5a48;text-align:center;margin-bottom:10px;}
.scanmode-stat b{color:var(--accent);}
.scanmode-list{max-height:46vh;overflow:auto;-webkit-overflow-scrolling:touch;}
.scanmode-row{display:flex;gap:11px;align-items:center;padding:8px 4px;border-bottom:1px solid #ece0c9;
  animation:scanrowin .18s ease;}
@keyframes scanrowin{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.scanmode-rc{width:38px;height:57px;flex:0 0 38px;border-radius:3px;background:#ded3c0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;}
.scanmode-rc img{width:100%;height:100%;object-fit:cover;display:block;}
.scanmode-ri{min-width:0;flex:1;}
.scanmode-rt{font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scanmode-ra{font-size:12.5px;color:#6b5a48;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scanmode-rb{margin-left:auto;font-size:20px;padding-left:6px;flex:0 0 auto;}
.scanmode-row.ok .scanmode-rb{color:#3f7d5a;}
.scanmode-row.dup{opacity:.8;}
.scanmode-row.miss{opacity:.72;}
.scanmode-row.miss .scanmode-rb{color:#b5563f;}
.scanmode-row.pending .scanmode-rt{color:#9a866c;}
.find-results{max-height:58vh;overflow:auto;}
.find-result{display:flex;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid #ece0c9;cursor:pointer;}
.find-result img{width:44px;height:66px;object-fit:cover;border-radius:3px;background:#ded3c0;flex:0 0 44px;}
.find-result .fr-t{font-weight:700;font-size:15px;color:var(--ink);line-height:1.2;}
.find-result .fr-a{font-size:13px;color:#6b5a48;}
.find-result .fr-add{margin-left:auto;font-size:24px;color:var(--accent);padding-left:6px;}
.hunt-add-btn{width:100%;margin:4px 0 14px;}
.titlebar{ display:flex; align-items:center; gap:8px; }
.head-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.theme-btn{ background:rgba(255,255,255,.22);border:none;border-radius:10px;font-size:20px;
  width:40px;height:40px;line-height:1;cursor:pointer;flex:0 0 auto; }
/* profile button holds an <img> (not an emoji) — flex-center it so it sits dead center.
   The inline display:none in the HTML keeps it hidden until app.js reveals it (web only). */
#profileBtn{ display:inline-flex; align-items:center; justify-content:center; padding:0; }
#acctBtn.on{background:rgba(120,220,140,.4);}
.acct-tabs{display:flex;gap:8px;margin:0 0 12px;}
.acct-tab{flex:1;padding:9px 10px;border:1px solid #e0d3ba;background:#fffdf8;border-radius:9px;
  font-family:inherit;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;}
.acct-tab.active{border-color:var(--accent);background:var(--accent);color:#fff;}
.lookup-status.err{background:#f6d6d0;color:#7a241a;}
.acct-forgot-row{margin:2px 0 10px;text-align:right;}
.link-btn{background:none;border:none;padding:0;font-family:inherit;font-size:14px;color:var(--accent);
  text-decoration:underline;cursor:pointer;}
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.theme-card{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:12px;
  border:2px solid #e0d3ba;border-radius:12px;background:#fffdf8;cursor:pointer;font-family:inherit;}
.theme-card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);}
.tc-sw{display:flex;gap:4px;}
.tc-sw i{width:26px;height:26px;border-radius:6px;display:block;}
.tc-name{font-size:15px;font-weight:700;color:var(--ink);}
.btn{
  border:none;border-radius:10px;padding:10px 14px;font-size:15px;cursor:pointer;
  font-family:inherit;background:#e9dcc6;color:var(--ink);transition:transform .05s ease,filter .15s;
}
.btn:active{transform:scale(.96);}
.btn.ghost{background:rgba(255,255,255,.18);color:var(--cream);}
.btn.primary{background:var(--accent);color:#fff;font-weight:700;}
.btn.danger{background:var(--danger);color:#fff;}

/* Shelves */
#shelfRoot{padding:8px 10px 0;}
.series-title{
  margin:18px 6px 6px;font-size:18px;font-weight:700;color:var(--label);font-family:var(--font-display);
  text-shadow:0 1px 3px rgba(0,0,0,.55);   /* keeps the section font legible over busy background art */
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;   /* one clean line — the name truncates, count never wraps */
}
.series-badge{font-size:12px;font-weight:700;background:#e7d6bd;color:var(--wood-dark);
  padding:2px 8px;border-radius:20px;flex:0 0 auto;white-space:nowrap;}   /* count stays intact on its own, never chopped */
/* long names shrink to a single line with an ellipsis instead of wrapping under the count */
.series-name,.shelf-name{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Custom display-shelf headers: the shelf NAME is the star — show it IN FULL and drop the
   action buttons to their own row beneath it (these shelves are the app's centerpiece). */
.series-title.shelf-head{ flex-wrap:wrap; align-items:center; }
.shelf-head .shelf-name{ flex:1 1 auto; white-space:normal; overflow:visible; text-overflow:clip; }
.shelf-head .shelf-actions{ flex:1 1 100%; display:flex; flex-wrap:wrap; gap:6px 8px; margin-top:6px; }
.shelf-head .shelf-actions .series-edit{ margin-left:0; }   /* pack buttons left on their own row */
/* Shelf/series action buttons (＋ books · 🎨 Arrange · ✨ Decorate · 📸 · 🗑).
   These used to be transparent text in var(--label) at opacity .8, which vanished
   completely on the pale photo themes (poetry, chibi, artsy…). Give them their own
   surface rather than a per-theme colour patch: readable on ANY artwork, light or
   dark, with no allowlist to keep in sync. Also takes them from ~21px to 34px tall —
   this row includes the destructive 🗑 delete-shelf button. */
.series-edit{margin-left:auto;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.22);border-radius:999px;
  color:#fff;font-size:13px;font-family:inherit;cursor:pointer;opacity:1;
  padding:7px 12px;min-height:34px;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.6);}
.series-edit:active{ background:rgba(0,0,0,.68); }
.shelf{
  position:relative;display:flex;flex-wrap:wrap;gap:31px 0;   /* row-gap 31; spines touch edge-to-edge (0 column gap) like a real shelf */
  padding:16px 3px 0;align-items:flex-end;align-content:flex-start;perspective:1000px;   /* minimal side gap so books meet the frame */
  background:linear-gradient(180deg, color-mix(in srgb,#4c2f1e 55%,transparent), color-mix(in srgb,#38200f 55%,transparent));
  margin-bottom:22px;
  box-shadow:0 10px 18px rgba(74,45,26,.28);
  /* Clean wooden bookcase frame wrapping the shelf (uniform edges → stretches with no distortion) */
  border-style:solid; border-color:transparent; border-width:24px 18px 16px 18px;
  border-image:url("shelf-frame.png") 9.1% 8.4% 6.6% 8.6% stretch;
}
/* Library shelves stay flexbox (needed for the pull-a-book-off-the-shelf animation).
   balanceShelves() adds a little left padding so full rows sit centered while a partial
   last row still lines up on the left, under the rows above. */
.bookcase-top{ display:none; }   /* the image frame supplies the top now */
.shelf::after{ display:none; }   /* frame base + wood-board ledges replace the CSS bottom ledge */
.shelf::after{ /* the wooden ledge */
  content:"";position:absolute;left:0;right:0;bottom:0;height:18px;
  background:linear-gradient(180deg,var(--wood-light),var(--wood-dark));
  border-radius:0 0 6px 6px;box-shadow:0 6px 10px rgba(0,0,0,.3);
}
/* Bookcase crown / cornice sitting atop the shelves */
.bookcase-top{ position:relative; height:24px; margin:0 0 1px; border-radius:9px 9px 2px 2px;
  background:linear-gradient(180deg, var(--wood-light), var(--wood) 55%, var(--wood-dark));
  box-shadow:0 7px 11px rgba(0,0,0,.32), inset 0 2px 0 rgba(255,255,255,.30), inset 0 -4px 6px rgba(0,0,0,.30); }
.bookcase-top::before{ content:""; position:absolute; left:0; right:0; top:-6px; height:12px; border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--wood-light) 82%,#fff), var(--wood));
  box-shadow:0 3px 5px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.45); }
.bookcase-top::after{ content:""; position:absolute; left:12px; right:12px; bottom:4px; height:4px; border-radius:2px;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.30) 0 3px, transparent 3px 7px); }
/* Per-row wooden ledge: added by JS (placeLedges) under every wrapped row EXCEPT the
   bottom one, which rests on the frame base like a real bookcase. Works on book AND
   decor shelves, and adds a fresh ledge whenever content wraps to a new row. */
.shelf > *:not(.row-ledge){ position:relative; z-index:1; }
.row-ledge{
  position:absolute; left:0; right:0; height:53px; z-index:0; pointer-events:none;
  background:url("shelf-ledge.png?v=2") 0 -128px / 100% 181px no-repeat;
}
.book{
  width:var(--cover-w);margin-bottom:26px;cursor:pointer;position:relative;
  transition:transform .12s ease;
}
.book:active{transform:translateY(-4px);}
.book .cover{
  width:100%;height:152px;border-radius:3px 6px 6px 3px;object-fit:cover;
  background:#ded3c0;display:block;
  box-shadow: -3px 4px 8px rgba(0,0,0,.35), inset 2px 0 0 rgba(255,255,255,.25);
}
.book .spine-fallback{
  width:100%;height:152px;border-radius:3px 6px 6px 3px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:8px;font-size:12px;font-weight:700;color:#fff;line-height:1.2;
  box-shadow:-3px 4px 8px rgba(0,0,0,.35);
}
/* Book titles sit directly on the theme artwork with no surface behind them, so they
   need their own halo. Applied to ALL themes rather than a hand-kept allowlist (the
   existing one has drifted twice). Romance and manga use dark text on pale art and
   override this with a white glow at higher specificity — they are unaffected. */
.book .label{font-size:11px;margin-top:6px;text-align:center;color:var(--label);
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.55);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* Empty slot placeholder: the dashed outline was drawn in var(--label), so on the pale
   themes the whole placeholder vanished — not just its text. Fixed light-on-dark. */
.slot-empty{
  width:34px;flex:0 0 34px;height:150px;margin-bottom:0;border-radius:2px 3px 3px 2px;
  border:2px dashed rgba(255,255,255,.5);background:rgba(0,0,0,.28);
  display:flex;align-items:center;justify-content:center;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  font-size:11px;text-align:center;padding:2px;writing-mode:vertical-rl;
}

/* Empty state */
.empty{text-align:center;padding:60px 20px;color:var(--label);text-shadow:0 1px 3px rgba(0,0,0,.4);}
.empty-art{font-size:64px;}
.empty h2{margin:10px 0 6px;}

/* FAB */
.fab{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 18px);z-index:30;
  background:var(--accent);color:#fff;border:none;border-radius:30px;
  padding:15px 26px;font-size:17px;font-weight:700;font-family:inherit;
  box-shadow:0 8px 20px rgba(120,70,40,.5);cursor:pointer;
}
.fab:active{transform:translateX(-50%) scale(.96);}

/* Overlay (scanner) */
.overlay{position:fixed;inset:0;z-index:50;background:#0d0b09;color:var(--cream);
  display:flex;flex-direction:column;}
.overlay-head{display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;font-size:15px;}
.reader{flex:1;position:relative;overflow:hidden;}
.reader video,.reader canvas{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.overlay-foot{padding:16px;display:flex;justify-content:center;}

/* Sheets / modals */
.sheet{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);
  display:flex;align-items:flex-end;justify-content:center;}
.sheet-card{
  width:100%;max-width:520px;background:var(--cream);
  border-radius:18px 18px 0 0;padding:16px 16px calc(env(safe-area-inset-bottom) + 16px);
  max-height:92vh;                                          /* fallback for old browsers */
  max-height:calc(100dvh - env(safe-area-inset-top) - 12px);/* fit the VISIBLE viewport so the header isn't cut off behind the URL bar/notch */
  overflow:auto;box-shadow:0 -8px 30px rgba(0,0,0,.3);
}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.sheet-head h3{font-size:21px;font-family:var(--font-display);}
.sheet-head .btn.ghost{background:#e6d8c0;color:var(--ink);}
/* ghost buttons inside popups need dark text (cream-on-cream was invisible) */
.sheet-card .btn.ghost{background:#e6d8c0;color:var(--ink);}
.photo-btn{background:#e6d8c0;color:var(--ink);}
.lookup-status{padding:8px 10px;border-radius:8px;background:#efe2cb;font-size:14px;margin-bottom:10px;}
.sheet-body{display:flex;gap:14px;}
.cover-preview{flex:0 0 120px;}
.cover-preview img{width:120px;height:180px;object-fit:cover;border-radius:4px;
  background:#ded3c0;box-shadow:-3px 4px 10px rgba(0,0,0,.3);display:block;}
.photo-btn{width:120px;margin-top:8px;font-size:13px;padding:8px 6px;
  background:#e6d8c0;color:var(--ink);}
/* Missing-cover state: placeholder image + highlighted "Read the cover" prompt */
.cover-preview img.empty{content:'';background:#efe6d4 url("themes/classic.svg") center/60% no-repeat;
  border:2px dashed #c9b78f;}
/* placeholder shown in the detail preview when a book has no cover art yet (pre-orders / unannounced) */
.cover-preview{position:relative;}
.cover-preview.no-cover img{visibility:hidden;}
.cover-preview.no-cover::after{content:"No cover yet";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:10px;border-radius:4px;box-shadow:-3px 4px 10px rgba(0,0,0,.3);
  font-weight:800;text-transform:uppercase;letter-spacing:.5px;font-size:12.5px;line-height:1.3;color:#7a6550;
  background:repeating-linear-gradient(135deg,#eae1d0,#eae1d0 7px,#e1d6c0 7px,#e1d6c0 14px);}
.cover-preview.no-cover.soon::after{content:"Cover coming soon";color:#3f63d6;
  background:repeating-linear-gradient(135deg,#e6eafb,#e6eafb 7px,#d7ddf7 7px,#d7ddf7 14px);}
.photo-btn.wanted{background:var(--accent);color:#fff;font-weight:700;
  animation:coverPulse 1.4s ease-in-out infinite;}
.photo-btn.offer{background:#d9c39c;color:var(--ink);font-weight:700;border:1px solid #b89a68;}
@keyframes coverPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0);}50%{box-shadow:0 0 0 4px rgba(120,90,60,.28);}}
.cover-missing{width:120px;margin-top:8px;font-size:12px;line-height:1.35;color:#7a4a24;
  background:#fbe4cf;border:1px solid #e6c79b;border-radius:8px;padding:8px;}
.fields{flex:1;display:flex;flex-direction:column;gap:10px;}
.fields label{display:flex;flex-direction:column;font-size:13px;color:#6b5a48;gap:4px;}
.fields input, .fields select{border:1px solid #d8c7a8;border-radius:8px;padding:9px 10px;font-size:16px;
  font-family:inherit;color:var(--ink);background:#fffdf8;}   /* 16px min — prevents iOS auto-zoom on focus */
.sort-bar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:center;padding:2px 6px 10px;}
.sort-label{flex-basis:100%;width:100%;text-align:center;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;color:var(--cream);opacity:.9;
  text-shadow:0 1px 3px rgba(0,0,0,.55);padding:0 0 5px;}   /* own row above the pills */
.sort-pill{flex:1 1 0;min-width:0;text-align:center;border:1px solid rgba(0,0,0,.12);border-radius:16px;padding:6px 8px;font-size:12px;
  font-family:inherit;background:rgba(255,255,255,.82);color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sort-pill.on{background:var(--accent);color:#fff;font-weight:700;border-color:transparent;}
.sort-drop{ border:1px solid rgba(0,0,0,.12); border-radius:16px; padding:7px 14px; font-size:13px;
  font-family:inherit; background:rgba(255,255,255,.85); color:var(--ink); cursor:pointer; font-weight:700; white-space:nowrap; }
.sort-drop:hover{ background:#fff; }
.genre-bar{display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none;padding:2px 6px 12px;}
.sort-bar::-webkit-scrollbar,.genre-bar::-webkit-scrollbar{display:none;}
.sort-bar.dragging,.genre-bar.dragging{cursor:grabbing;}
.sort-bar.dragging .sort-pill,.genre-bar.dragging .genre-pill{cursor:grabbing;}
.genre-pill{flex:0 0 auto;border:1px solid rgba(0,0,0,.12);border-radius:16px;padding:6px 13px;font-size:13px;
  font-family:inherit;background:rgba(255,255,255,.82);color:var(--ink);cursor:pointer;white-space:nowrap;}
.genre-pill.on{background:var(--accent);color:#fff;font-weight:700;border-color:transparent;}
.genre-pill.genre-autotag{background:rgba(201,162,75,.16);border-color:rgba(201,162,75,.55);border-style:dashed;font-weight:600;}
.fields .row{display:flex;gap:10px;}
.fields .row label{flex:1;}
.hint{color:#a08a6f;font-weight:400;}
.sheet-foot{display:flex;gap:10px;margin-top:16px;}
.sheet-foot .btn{flex:1;}
.detail-fields{justify-content:flex-start;}
.d-title{font-size:20px;font-weight:700;}
.d-authors{color:#6b5a48;}
.d-series{color:var(--accent);font-weight:700;}
.d-isbn{font-size:12px;color:#a08a6f;}
.tbr-toggle{width:100%;margin-top:16px;background:#7a5a9e;color:#fff;font-weight:700;}
.tbr-toggle.on{background:#3f7d5a;}
.tbr-badge{position:absolute;top:-6px;right:-4px;background:#7a5a9e;color:#fff;font-size:10px;
  font-weight:700;padding:2px 7px;border-radius:20px;box-shadow:0 2px 5px rgba(0,0,0,.3);}
.book{position:relative;}

/* ---- Spine bookshelf ---- */
.spine{
  position:relative; width:var(--spine-w,34px); flex:0 0 var(--spine-w,34px); height:var(--spine-h,150px); margin-bottom:0;   /* size set per-book (binding+pages); row spacing via shelf row-gap */
  align-self:flex-end;   /* varied heights sit on the shelf floor, not float mid-air */
  cursor:pointer; border-radius:2px 3px 3px 2px;
  background-color:#8a6a4a; background-size:cover; background-position:center;
  transform:rotateY(calc(-1 * var(--spine-angle))); transform-origin:right center;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), width .35s cubic-bezier(.2,.7,.3,1),
             flex-basis .35s cubic-bezier(.2,.7,.3,1), height .35s, margin .35s, box-shadow .3s;
  box-shadow:-2px 3px 7px rgba(0,0,0,.45), inset -4px 0 7px rgba(0,0,0,.4), inset 3px 0 3px rgba(255,255,255,.12);
}
/* A real, scanned spine photo replaces the generated title/colour */
.spine.has-spine .sp-title-rot, .spine.has-spine .sp-caption{ display:none; }
/* Scanned spine/edge: tile width is set to the PHOTO's true aspect ratio, so cover fills it with
   zero distortion (no stretch). Never use 100% 100% here — that squashes the art. */
.spine.has-spine{ background-size:cover; background-position:center; }
/* "Flip to decorative edges" view: real edge photos fill the tile; the rest show a cream page-block */
.spine.edge-mode .sp-title-rot, .spine.edge-mode .sp-caption{ display:none; }
/* Stacked book flipped to its edge: the edge photo (shot vertically) is rotated 90° so the pattern
   runs HORIZONTALLY like a real book lying on its side — filled with object-fit, never stretched. */
.book-flat.edge-mode{ overflow:hidden; }
.book-flat .bf-edge{ position:absolute; top:50%; left:50%;
  width:var(--slab-h); height:var(--slab-w);                 /* pre-rotation portrait; rotate makes it fill the slab */
  transform:translate(-50%,-50%) rotate(90deg); object-fit:cover; display:block; }
.book-flat .bf-edge.spineface{ transform:translate(-50%,-50%) rotate(-90deg); }   /* spine is on the opposite side from the fore-edge */
.spine.edge-blank, .book-flat.edge-blank{
  background-color:#efe7d2;
  background-image:
    repeating-linear-gradient(90deg, rgba(120,96,60,.16) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #e5d9bd, #f7f0dd 48%, #e0d3b4);
  box-shadow:-2px 3px 7px rgba(0,0,0,.35), inset -3px 0 6px rgba(120,96,60,.28), inset 3px 0 3px rgba(255,255,255,.5);
}
/* Lying flat: page lines run HORIZONTALLY (book on its side), and the depth shading moves to top/bottom */
.book-flat.edge-blank{
  background-image:
    repeating-linear-gradient(0deg, rgba(120,96,60,.16) 0 1px, transparent 1px 3px),
    linear-gradient(0deg, #e5d9bd, #f7f0dd 48%, #e0d3b4);
  box-shadow:0 2px 5px rgba(0,0,0,.35), inset 0 -3px 6px rgba(120,96,60,.28), inset 0 3px 3px rgba(255,255,255,.5);
}
#edgeBtn.on{ background:#bf7a4a; color:#fff; box-shadow:0 0 0 2px rgba(191,122,74,.4); }
/* Decorative-edge type chips (feeds the future Spine API) */
.dse-types{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:8px 2px 0; }
.dse-types-lbl{ font-size:11.5px; color:#8a7a68; margin-right:2px; }
.dse-type{ font-size:11.5px; padding:3px 9px; border-radius:20px; border:1px solid #d9c9ab; background:#fffdf8; color:#6b5a48; cursor:pointer; }
.dse-type.on{ background:#bf7a4a; color:#fff; border-color:#bf7a4a; }
/* Detail sheet: scan spine + sprayed edges (prototype) */
.d-spine{ margin:12px 0 2px; }
.dse-head{ font-weight:700; font-size:13px; color:#6b5a48; margin:0 2px 8px; }
.dse-beta{ font-size:10px; background:rgba(0,0,0,.12); border-radius:8px; padding:1px 6px; margin-left:5px; opacity:.7; font-weight:600; text-transform:uppercase; }
.dse-row{ display:flex; gap:12px; }
.dse-slot{ flex:1; position:relative; border-radius:9px; min-height:120px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; background:rgba(0,0,0,.05); border:1px dashed rgba(0,0,0,.22); cursor:pointer; font:inherit; color:#6b5a48; padding:8px; text-align:center; }
.dse-slot.filled{ border:none; background:none; padding:0; }
.dse-empty:hover{ background:rgba(0,0,0,.09); }
.dse-ic{ font-size:26px; }
.dse-lbl{ font-size:11px; margin-top:5px; }
.dse-img{ width:100%; height:150px; object-fit:cover; border-radius:9px; display:block; }
.dse-del{ position:absolute; top:5px; right:5px; background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:50%;
  width:22px; height:22px; line-height:20px; text-align:center; cursor:pointer; font-size:12px; padding:0; }
.dse-slot.filled .dse-lbl{ position:absolute; bottom:6px; left:0; right:0; color:#fff; margin:0; text-shadow:0 1px 3px rgba(0,0,0,.85); }
.dse-shared{ position:absolute; top:5px; left:5px; background:rgba(0,0,0,.55); border-radius:50%; width:22px; height:22px; line-height:22px; text-align:center; font-size:12px; }
.dse-mine{ position:absolute; top:5px; right:5px; background:rgba(191,122,74,.94); color:#fff; border:none; border-radius:10px; padding:3px 8px; font-size:10.5px; cursor:pointer; }
.dse-tip{ font-size:11.5px; color:#8a7a68; margin:8px 2px 0; line-height:1.4; font-style:italic; }
/* Crop overlay (spine/edge photos) — explicit positioning so the stage always has a real height */
.secrop-ov{ position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.94); }
.secrop-ov.hidden{ display:none; }
.secrop-title{ position:absolute; top:0; left:0; right:0; height:46px; line-height:46px; color:#fff; text-align:center; font-weight:700; font-size:15px; }
.secrop-stage{ position:absolute; top:48px; bottom:64px; left:10px; right:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; touch-action:none; background:#000; }
.secrop-stage img{ max-width:100%; max-height:100%; display:block; -webkit-user-drag:none; user-select:none; pointer-events:none; }
.secrop-box{ position:absolute; border:2px solid #fff; box-shadow:0 0 0 4000px rgba(0,0,0,.5); box-sizing:border-box; cursor:move; touch-action:none; }
.secrop-h{ position:absolute; width:26px; height:26px; background:#fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.6); touch-action:none; }
.secrop-h.tl{ left:-13px; top:-13px; cursor:nwse-resize; }
.secrop-h.tr{ right:-13px; top:-13px; cursor:nesw-resize; }
.secrop-h.bl{ left:-13px; bottom:-13px; cursor:nesw-resize; }
.secrop-h.br{ right:-13px; bottom:-13px; cursor:nwse-resize; }
.secrop-bar{ position:absolute; bottom:0; left:0; right:0; height:64px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 14px; }
.secrop-hint{ color:#bbb; font-size:11.5px; text-align:center; flex:1; }
.spine .sp-title{
  position:absolute; inset:0; overflow:hidden; border-radius:inherit;
  background:linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,.5));
}
.spine .sp-title-rot{
  position:absolute; top:50%; left:50%; width:146px; height:30px;
  transform:translate(-50%,-50%) rotate(-90deg);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.spine .sp-title-rot span{
  display:block; max-width:146px; text-align:center; white-space:normal; word-break:break-word;
  font-family:'Quicksand','Segoe UI',system-ui,sans-serif;   /* easier to read than the serif at spine size */
  font-size:11px; font-weight:700; color:#fff; line-height:1.12;
  text-shadow:0 1px 3px rgba(0,0,0,.95);
}
.spine.pulled{
  width:104px; flex-basis:104px; height:158px; margin-bottom:0;
  transform:rotateY(0deg) translateY(-14px); z-index:10;
  box-shadow:0 16px 30px rgba(0,0,0,.55);
}
.spine.pulled .sp-title{ opacity:0; }
.sp-caption{
  display:none; position:absolute; left:0; right:0; bottom:0; border-radius:0 0 3px 3px;
  background:linear-gradient(0deg, rgba(0,0,0,.82), transparent);
  color:#fff; font-size:10px; padding:16px 4px 5px; text-align:center; line-height:1.15;
  font-family:'Quicksand','Segoe UI',system-ui,sans-serif;
}
.spine.pulled .sp-caption{ display:block; }
.sp-info{
  position:absolute; top:5px; right:5px; width:24px; height:24px; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff; font-size:13px; display:none;
  align-items:center; justify-content:center; z-index:3;
}
.spine.pulled .sp-info{ display:flex; }
.sp-tbr{ position:absolute; top:3px; left:3px; z-index:2; padding:1px 3px; border-radius:3px;
  background:linear-gradient(180deg,#ffe390,#e3ad3c); color:#4a2d05;
  font-size:7.5px; font-weight:800; letter-spacing:.3px; line-height:1.25;
  box-shadow:0 1px 2px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.45);
  text-shadow:0 1px 0 rgba(255,255,255,.3); }
/* "SOON" badge on Hunt spines that aren't out yet */
.sp-soon{ position:absolute; top:3px; left:3px; z-index:3; padding:1px 3px; border-radius:3px;
  background:linear-gradient(180deg,#7ea8ff,#3f63d6); color:#fff;
  font-size:7.5px; font-weight:800; letter-spacing:.3px; line-height:1.25;
  box-shadow:0 1px 2px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.5);
  text-shadow:0 1px 1px rgba(0,0,0,.4); }
/* "Coming soon" pill under a search result */
.find-result .fr-soon{ display:inline-block; margin-top:4px; padding:1px 8px; border-radius:10px;
  background:linear-gradient(180deg,#7ea8ff,#3f63d6); color:#fff; font-size:11.5px; font-weight:700;
  box-shadow:0 1px 2px rgba(0,0,0,.25); }
/* Release line in the Hunt detail sheet */
.h-release{ font-size:14px; font-weight:800; color:#3f63d6; margin:2px 0 0;
  background:rgba(63,99,214,.10); border:1px solid rgba(63,99,214,.25); border-radius:9px;
  padding:5px 10px; display:inline-block; }
/* Dashboard hunt row when upcoming */
.dash-item.hunt-item.soon{ box-shadow:inset 0 0 0 1.5px rgba(63,99,214,.35); }
.dash-item .soon-lbl{ color:#3f63d6; font-weight:700; }
/* Manual release-date picker in the Hunt detail sheet */
.reldate-row{ margin-top:9px; font-size:12.5px; color:#6b5a48; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.reldate-input{ font:inherit; font-size:12.5px; padding:3px 7px; border:1px solid rgba(0,0,0,.22); border-radius:7px; background:#fff; color:#222; }
/* Log sheet: per-day view (what's on this day + remove + still-reading quick-add) */
.logday-sec{ font-weight:700; font-size:12.5px; color:#6b5a48; margin:12px 2px 6px; }
.logday-list{ display:flex; flex-direction:column; gap:6px; }
.logday-row{ display:flex; align-items:center; gap:9px; background:rgba(0,0,0,.045); border-radius:9px; padding:6px 8px; }
.logday-row img{ width:26px; height:39px; object-fit:cover; border-radius:3px; flex:none; }
.logday-row .cal-emoji{ font-size:20px; }
.logday-t{ flex:1; font-size:13.5px; line-height:1.25; }
.logday-del{ background:none; border:none; color:#c0392b; font-size:15px; cursor:pointer; padding:4px 7px; border-radius:6px; flex:none; }
.logday-del:hover{ background:rgba(192,57,43,.12); }
.logday-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.logday-chip{ display:flex; align-items:center; gap:7px; background:var(--accent); color:#fff; border:none; border-radius:18px;
  padding:5px 13px 5px 6px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; max-width:100%; }
.logday-chip img{ width:22px; height:33px; object-fit:cover; border-radius:3px; flex:none; }
.logday-chip span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.logday-chip-emoji{ font-size:16px; }
.logday-chip:hover{ filter:brightness(1.07); }
.hunt-cover-edit{ display:flex; flex-direction:column; align-items:stretch; gap:8px; margin:12px 0 2px; }
.hunt-cover-edit input{ width:100%; padding:8px 10px; border:1px solid rgba(0,0,0,.22); border-radius:8px; background:#fff; color:#222; font:inherit; font-size:13px; }
.hunt-cover-btn{ align-self:flex-start; padding:9px 18px; border:none; border-radius:8px; background:var(--accent); color:#fff; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.hunt-cover-btn:hover{ filter:brightness(1.06); }
.hunt-cover-btn.ready{ animation:huntReady 1.15s ease-in-out infinite; }
@keyframes huntReady{ 0%,100%{ transform:scale(1); filter:brightness(1); } 50%{ transform:scale(1.07); filter:brightness(1.15); } }
.hunt-cover-status{ font-size:12.5px; color:#6b5a48; margin:1px 2px 0; line-height:1.4; }
.reldate-clear{ background:none; border:none; color:#c0392b; font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; padding:0; }
@media(min-width:560px){ :root{--cover-w:120px;} .book .cover,.book .spine-fallback{height:176px;} }
/* slots must match the 150px spine height so the per-row shelf ledge lines up (no doubled shelf) */
/* On a big screen: centered phone-width column with the SHARP artwork behind the shelves,
   plus a big soft BLURRED wash of the same artwork filling the whole window (no dead space). */
@media (min-width: 640px){
  /* sides: a clean themed color wash (picks up each theme's palette) */
  html{ background: radial-gradient(130% 90% at 50% 12%, var(--wood-light), var(--wood-dark)) fixed; }
  body{ max-width:480px; margin:0 auto; min-height:100vh; background:transparent;   /* let the art show through */
    box-shadow:0 0 0 1px rgba(0,0,0,.3), 0 0 90px rgba(0,0,0,.55); }
  body::before{ left:calc(50% - 240px); right:auto; width:480px; transform:none; }   /* sharp art column */
}

/* ---- Desktop dashboard side panels (only when there's room in the gutters) ---- */
.dash{ display:none; }
@media (min-width:1200px){
  /* The Archive tab now shows on desktop too (it was hidden back when the journal was only a sidebar card). */
  /* absolute (not fixed) + no inner scroll => the panels scroll WITH the page as one piece */
  .dash{ display:block; position:absolute; top:24px; width:300px; z-index:5;
    overflow-x:hidden; padding:2px; }
  .dash-left{  right:calc(50% + 264px); }
  .dash-right{ left:calc(50% + 264px); }
  .dash-card{ background:color-mix(in srgb, var(--cream) 92%, transparent); color:var(--ink);
    border-radius:14px; padding:14px 14px 16px; margin-bottom:16px;
    box-shadow:0 6px 22px rgba(0,0,0,.30); border:1px solid rgba(0,0,0,.08); }
  .dash-card-h{ font-family:var(--font-display); font-size:16px; color:var(--wood-dark);
    margin-bottom:11px; display:flex; align-items:center; gap:6px; }
  .dash-count{ background:var(--accent); color:#fff; border-radius:10px; font-size:12px;
    font-weight:700; padding:1px 8px; margin-left:auto; }
  .dash-stats{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .dash-stat{ background:rgba(0,0,0,.05); border-radius:10px; padding:9px 11px;
    display:flex; flex-direction:column; }
  .dash-num{ font-size:23px; font-weight:800; color:var(--wood-dark); line-height:1; }
  .dash-lbl{ font-size:10.5px; opacity:.7; margin-top:4px; text-transform:uppercase; letter-spacing:.05em; }
  .dash-libs{ display:flex; flex-direction:column; gap:6px; }
  .dash-lib{ text-align:left; background:rgba(0,0,0,.05); border:none; border-radius:9px;
    padding:9px 11px; font:inherit; font-size:14px; color:var(--ink); cursor:pointer;
    display:flex; gap:8px; align-items:center; }
  .dash-lib:hover{ background:rgba(0,0,0,.1); }
  .dash-lib.on{ background:var(--accent); color:#fff; font-weight:700; }
  .dash-list{ display:flex; flex-direction:column; gap:8px; }
  .dash-item{ display:flex; gap:10px; align-items:center; text-align:left; width:100%;
    background:rgba(0,0,0,.05); border:none; border-radius:9px; padding:6px 8px;
    cursor:pointer; font:inherit; color:var(--ink); }
  .dash-item:hover{ background:rgba(0,0,0,.1); }
  .dash-item img{ width:30px; height:44px; object-fit:cover; border-radius:3px;
    flex:0 0 auto; box-shadow:0 1px 3px rgba(0,0,0,.35); background:rgba(0,0,0,.08); }
  /* cover thumbnail cell with a graceful "no art yet" placeholder for pre-orders / unannounced covers */
  .dash-cover{ position:relative; width:30px; height:44px; flex:0 0 auto; border-radius:3px; overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.35); background:rgba(0,0,0,.08); }
  .dash-cover img{ position:relative; z-index:2; display:block; width:30px; height:44px; object-fit:cover; box-shadow:none; border-radius:0; background:none; }
  .cover-ph{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; text-align:center;
    padding:2px; font-size:6.5px; line-height:1.12; font-weight:800; letter-spacing:.2px; text-transform:uppercase; color:#7a6550;
    background:repeating-linear-gradient(135deg,#eae1d0,#eae1d0 4px,#e1d6c0 4px,#e1d6c0 8px); }
  .cover-ph.soon{ color:#3f63d6;
    background:repeating-linear-gradient(135deg,#e6eafb,#e6eafb 4px,#d7ddf7 4px,#d7ddf7 8px); }
  .dash-item-t{ display:flex; flex-direction:column; font-size:13px; line-height:1.25; overflow:hidden; }
  .dash-item-t small{ opacity:.65; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dash-empty{ font-size:12.5px; opacity:.7; line-height:1.45; }
  .hunt-buy{ margin-left:auto; flex:0 0 auto; }
  .hunt-more{ display:flex; flex-direction:column; gap:8px; }
  .hunt-toggle{ width:100%; margin-top:8px; background:rgba(0,0,0,.05); border:none; border-radius:8px;
    padding:7px; font:inherit; font-size:12.5px; font-weight:700; color:var(--wood-dark); cursor:pointer; }
  .hunt-toggle:hover{ background:rgba(0,0,0,.1); }
}

/* Reading streak poster / banner */
.poster{ background:linear-gradient(150deg, var(--wood-light), var(--wood-dark)); color:#fff;
  border-radius:16px; padding:18px 16px 16px; text-align:center; margin-bottom:16px;
  box-shadow:0 6px 22px rgba(0,0,0,.35); position:relative; overflow:hidden; }
.poster-flame{ font-size:30px; line-height:1; filter:drop-shadow(0 2px 6px rgba(255,150,40,.5)); }
.poster-row{ display:flex; align-items:center; justify-content:center; margin-top:6px; }
.poster-stat{ flex:1; }
.poster-div{ width:1px; align-self:stretch; background:rgba(255,255,255,.25); margin:6px 4px; }
.poster-num{ font-size:33px; font-weight:800; line-height:1; font-family:var(--font-display); }
.poster-label{ font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; opacity:.85; margin-top:4px; white-space:nowrap; }
.poster-dots{ display:flex; justify-content:center; gap:6px; margin:13px 0 11px; }
.poster-dot{ width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.22); }
.poster-dot.on{ background:#ffd27a; box-shadow:0 0 8px rgba(255,210,122,.75); }
.poster-dot.today{ outline:2px solid rgba(255,255,255,.85); outline-offset:2px; }
.poster-stats{ font-size:11.5px; opacity:.88; }
/* Reading-goal ring */
.poster-goal{ display:flex; align-items:center; gap:12px; justify-content:center; margin-top:13px; cursor:pointer; border-radius:12px; padding:4px; }
.poster-goal:hover{ background:rgba(255,255,255,.1); }
.goal-ring{ width:62px; height:62px; flex:0 0 auto; }
.goal-track{ fill:none; stroke:rgba(255,255,255,.22); stroke-width:7; }
.goal-fill{ fill:none; stroke:#ffd27a; stroke-width:7; stroke-linecap:round; transform:rotate(-90deg); transform-origin:center; transition:stroke-dasharray .5s ease; }
.goal-num-t{ fill:#fff; font-size:20px; font-weight:800; text-anchor:middle; }
.goal-den-t{ fill:rgba(255,255,255,.72); font-size:9px; text-anchor:middle; }
.poster-goal-txt{ font-size:12.5px; color:rgba(255,255,255,.92); text-align:left; line-height:1.35; }
.poster-goal-txt b{ font-size:17px; }
.poster-goal-txt small{ opacity:.75; }
.poster-goal-set{ display:block; width:100%; margin-top:13px; background:rgba(255,255,255,.14); color:#fff;
  border:none; border-radius:10px; padding:9px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.poster-goal-set:hover{ background:rgba(255,255,255,.22); }

/* Edition carousel page dots */
.zoom-dots{ display:none; gap:7px; }
.book-zoom.multi .zoom-dots{ display:flex; }
.zoom-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); transition:background .2s; }
.zoom-dot.on{ background:#fff; }

/* "Already on shelves" in book detail */
.d-shelves{ margin-top:5px; display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.d-shelves:empty{ display:none; }
.d-shelf-lead{ font-size:12px; opacity:.6; }
.d-shelf-chip{ background:rgba(0,0,0,.06); border-radius:12px; padding:2px 9px; font-size:12px; font-weight:600; color:var(--wood-dark); }

.poster-tap{ cursor:pointer; border-radius:10px; transition:background .15s; }
.poster-tap:hover{ background:rgba(255,255,255,.14); }
.poster-tap:active{ background:rgba(255,255,255,.22); }

/* Affiliate "buy" card */
.buy-list{ display:flex; flex-direction:column; gap:8px; }
.buy-row{ display:flex; gap:10px; align-items:center; background:rgba(0,0,0,.04); border-radius:9px; padding:6px 8px; }
.buy-row img{ width:30px; height:44px; object-fit:cover; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.35); flex:0 0 auto; }
.buy-info{ flex:1; overflow:hidden; }
.buy-t{ font-size:13px; line-height:1.2; margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.buy-links{ display:flex; gap:6px; }
.buy-btn{ display:inline-block; text-decoration:none; font-size:12px; font-weight:700;
  border-radius:14px; padding:4px 12px; color:#fff; cursor:pointer; }
.buy-btn:hover{ filter:brightness(1.08); }
.buy-az{ background:#e0912a; }
.buy-shop{ background:#3a7d5a; }
.buy-cta{ display:block; text-align:center; margin-top:12px; padding:9px; }
.buy-note{ font-size:11px; opacity:.6; margin-top:11px; line-height:1.4; font-style:italic; }
.fr-author{ cursor:pointer; text-decoration:underline; text-decoration-style:dotted; }
.fr-author:hover{ color:var(--accent); }
.fr-series{ opacity:.85; }

/* The Archive — lifetime reading record (stats strip + full read list) */
.journal-sub{ font-size:.8rem; opacity:.72; margin:-6px 0 12px; color:var(--ink); }
.arc-stats{ display:flex; gap:10px; margin:4px 0 14px; flex-wrap:wrap; }
.arc-stat{ flex:1; min-width:78px; background:rgba(128,128,128,.16); border-radius:12px; padding:10px 6px; text-align:center; color:var(--ink); }
.arc-stat b{ display:block; font-size:1.5rem; line-height:1.15; font-weight:800; }
.arc-stat span{ font-size:.72rem; opacity:.75; }
.arc-stars{ color:#e6b422; font-size:.78rem; white-space:nowrap; margin-left:auto; align-self:center; }
.arc-all .cal-row-t small{ opacity:.7; }
.arc-listhead{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.arc-sort{ font:inherit; font-size:.74rem; background:rgba(128,128,128,.2); border:0; border-radius:999px; padding:4px 11px; color:var(--ink); cursor:pointer; white-space:nowrap; }
.arc-group{ font-weight:800; font-size:.82rem; opacity:.9; margin:10px 2px 3px; color:var(--wood-dark); }
.arc-expand{ display:block; width:100%; margin:9px 0 2px; padding:9px; border:0; border-radius:10px; background:rgba(128,128,128,.16); color:var(--ink); font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; }
.arc-expand:hover, .arc-sort:hover{ background:rgba(128,128,128,.28); }

/* Goodreads CSV import */
.gr-import{ margin:12px 0 4px; text-align:center; }
.gr-or{ opacity:.5; font-size:.8rem; margin:6px 0; }
.gr-hint{ margin-top:8px; text-align:left; }
.gr-shelves{ display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.gr-shelf{ display:flex; align-items:center; gap:8px; background:rgba(128,128,128,.14); border-radius:10px; padding:9px 12px; font-size:.92rem; cursor:pointer; }
.gr-shelf b{ font-weight:800; }
.gr-add{ width:100%; }

/* Reading journal when shown as a full tab (main area, phone + desktop) */
.journal-view{ background:color-mix(in srgb, var(--cream) 90%, transparent); border-radius:16px;
  padding:16px 16px 20px; margin:2px 0 18px; box-shadow:0 4px 16px rgba(0,0,0,.18); color:var(--ink); }
.journal-h{ font-family:var(--font-display); font-size:19px; color:var(--wood-dark); margin-bottom:12px; }

/* ---- Reading journal calendar (used inside the dashboard card) ---- */
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cal-title{ font-weight:700; font-size:14px; color:var(--wood-dark); }
.cal-nav{ background:rgba(0,0,0,.06); border:none; border-radius:7px; width:26px; height:26px;
  cursor:pointer; font-size:16px; line-height:1; color:var(--ink); }
.cal-nav:hover{ background:rgba(0,0,0,.13); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-dow{ text-align:center; font-size:9.5px; opacity:.5; padding:1px 0; font-weight:700; }
.cal-cell{ position:relative; aspect-ratio:1/1; border:none; border-radius:6px;
  background:rgba(0,0,0,.045); cursor:pointer; padding:2px; display:flex; flex-direction:column;
  align-items:center; font:inherit; color:var(--ink); overflow:hidden; }
.cal-cell.empty{ background:transparent; cursor:default; }
.cal-cell:not(.empty):hover{ background:rgba(0,0,0,.11); }
.cal-cell.has{ background:color-mix(in srgb, var(--accent) 20%, transparent); }
.cal-cell.today{ outline:2px solid var(--accent); outline-offset:-2px; }
.cal-d{ font-size:9.5px; opacity:.6; align-self:flex-start; line-height:1; padding-left:1px; }
.cal-books{ display:flex; gap:1px; margin-top:1px; flex-wrap:wrap; justify-content:center; align-items:center; }
.cal-books img{ width:11px; height:15px; object-fit:cover; border-radius:1.5px; box-shadow:0 1px 2px rgba(0,0,0,.45); }
.cal-emoji{ font-size:11px; line-height:1; }
.cal-more{ font-size:8px; opacity:.7; font-weight:700; }
.cal-count{ margin:13px 0 7px; font-weight:700; font-size:13px; color:var(--wood-dark); }
.cal-section{ margin:14px 0 7px; font-weight:700; font-size:12px; color:var(--wood-dark);
  text-transform:uppercase; letter-spacing:.04em; }
/* Pulse the "Currently reading" heading when you jump to it from the Reading stat */
@keyframes readingPulse {
  0%   { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
         background:color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { box-shadow:0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent);
         background:transparent; }
}
.reading-flash{ animation:readingPulse 1.6s ease-out; border-radius:8px; }
/* Book synopsis on the detail page */
.d-desc{ margin:12px 2px 2px; }
.d-desc-h{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--wood-dark); opacity:.7; margin-bottom:4px; }
.d-desc-t{ font-size:13.5px; line-height:1.5; color:var(--ink); opacity:.92;
  max-height:200px; overflow-y:auto; }
/* Bright, obvious "Done" button on the book detail sheet (the safe action next to Remove) */
#detailDone, #detailClose{ background:#22c55e; color:#fff; border:none; font-weight:800;
  box-shadow:0 2px 8px rgba(34,197,94,.35); }
#detailDone:hover, #detailClose:hover{ filter:brightness(1.06); }
.cal-row.reading{ background:color-mix(in srgb, var(--accent) 13%, rgba(0,0,0,.04)); }
.cal-finish{ background:var(--accent); color:#fff; border:none; border-radius:14px; padding:4px 10px;
  font:inherit; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; flex:0 0 auto; }
.cal-finish:hover{ filter:brightness(1.07); }
.cal-books img.r{ box-shadow:0 0 0 2px var(--accent); }
/* status toggle in the log sheet */
.log-status{ display:flex; gap:6px; margin:12px 0 2px; }
.log-status button{ flex:1; background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.12);
  border-radius:20px; padding:9px 10px; font:inherit; font-size:13px; cursor:pointer; color:var(--ink); }
.log-status button.on{ background:var(--accent); color:#fff; border-color:transparent; font-weight:700; }
.cal-log-today{ width:100%; background:var(--accent); color:#fff; border:none; border-radius:9px;
  padding:9px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; margin-bottom:9px; }
.cal-log-today:hover{ filter:brightness(1.06); }
.cal-list{ display:flex; flex-direction:column; gap:6px; }
.cal-row{ display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.045); border-radius:8px; padding:5px 7px; }
.cal-check{ color:#3a9d5d; font-weight:800; font-size:13px; }
.cal-row img{ width:22px; height:31px; object-fit:cover; border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.4); }
.cal-row-t{ display:flex; flex-direction:column; font-size:12.5px; line-height:1.2; overflow:hidden; flex:1; }
.cal-row-t small{ opacity:.6; font-size:10.5px; }
.cal-del{ background:none; border:none; color:var(--ink); opacity:.35; cursor:pointer; font-size:12px; padding:2px 4px; }
.cal-del:hover{ opacity:1; color:var(--danger); }

/* ---- Log-a-book sheet (works on any screen) ---- */
.log-results{ display:flex; flex-direction:column; gap:6px; max-height:52vh; overflow:auto; margin-top:12px; }
.log-pick{ display:flex; align-items:center; gap:11px; text-align:left; background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.07); border-radius:10px; padding:7px 9px; cursor:pointer; font:inherit; color:var(--ink); }
.log-pick:hover{ background:rgba(0,0,0,.08); }
.log-pick img{ width:30px; height:43px; object-fit:cover; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.4); flex:0 0 auto; }
.log-pick span{ display:flex; flex-direction:column; font-size:14px; line-height:1.25; }
.log-pick small{ opacity:.6; font-size:12px; }

/* Format / source picker + tags */
.log-fmt{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 2px; }
.log-fmt button{ background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.12); border-radius:20px;
  padding:7px 13px; font:inherit; font-size:13px; cursor:pointer; color:var(--ink); }
.log-fmt button.on{ background:var(--accent); color:#fff; border-color:transparent; font-weight:700; }
.fmt-tag{ font-size:10px; font-weight:700; border-radius:20px; padding:2px 7px; white-space:nowrap;
  background:rgba(0,0,0,.09); color:var(--wood-dark); flex:0 0 auto; }
.fmt-audio{   background:#e7d8f5; color:#5a3a86; }
.fmt-library{ background:#d9ecd9; color:#2e6b3a; }
.fmt-ebook{   background:#d6e8fb; color:#245e94; }
.d-format{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }
.dfmt-label{ font-size:11.5px; opacity:.55; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-right:2px; }
.dfmt-chip{ background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.12); border-radius:16px;
  padding:5px 10px; font:inherit; font-size:12.5px; cursor:pointer; color:var(--ink); }
.dfmt-chip:hover{ background:rgba(0,0,0,.1); }
.dfmt-chip.on{ background:var(--accent); color:#fff; border-color:transparent; font-weight:700; }
.dbind-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; width:100%; margin-top:4px; }
.dbind-chip{ background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.12); border-radius:16px;
  padding:5px 10px; font:inherit; font-size:12.5px; cursor:pointer; color:var(--ink); }
.dbind-chip:hover{ background:rgba(0,0,0,.1); }
.dbind-chip.on{ background:var(--accent); color:#fff; border-color:transparent; font-weight:700; }

/* Format picker chips in the add/edit sheet */
.fmt-pick{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.fmt-pick button{ background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.14); border-radius:20px;
  padding:7px 12px; font:inherit; font-size:13px; cursor:pointer; color:var(--ink); }
.fmt-pick button.on{ background:var(--accent); color:#fff; border-color:transparent; font-weight:700; }

/* Little format badge on a book spine (Kindle / Audio / Library) */
.sp-formats{ position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  display:flex; justify-content:center; flex-wrap:wrap; gap:2px; max-width:calc(100% - 2px); pointer-events:none; }
.sp-format{ font-size:9.5px; line-height:1; background:#fbf7ef; border-radius:7px;
  padding:1.5px 4px; box-shadow:0 0 0 1.1px #caa24a, 0 1px 3px rgba(0,0,0,.55); }
/* "Completed" badge (top-right) + detail toggle */
.sp-completed{ position:absolute; top:4px; right:4px; background:#2e9e5b; color:#fff;
  font-size:10px; font-weight:800; width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.55); }
.sp-rating{ position:absolute; top:4px; left:4px; background:rgba(0,0,0,.62); color:#f2b825;
  font-size:9.5px; font-weight:800; border-radius:6px; padding:1px 4px; box-shadow:0 1px 3px rgba(0,0,0,.55); }
/* 5-star rating on the book detail page */
.d-rating{ display:flex; align-items:center; gap:8px; margin:10px 2px 6px; flex-wrap:wrap; }
.rate-label{ font-size:12px; opacity:.65; font-weight:700; }
.rate-stars{ display:inline-flex; gap:3px; }
.rate-star{ font-size:24px; line-height:1; color:rgba(0,0,0,.18); cursor:pointer; transition:transform .1s, color .1s; }
.rate-star.on{ color:#f2b825; }
.rate-star:hover{ transform:scale(1.15); }
.rate-clear{ background:none; border:none; color:var(--ink); opacity:.4; cursor:pointer; font-size:13px; padding:2px 5px; }
.rate-clear:hover{ opacity:1; color:var(--danger); }
@keyframes rateNudge{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
.rate-nudge{ animation:rateNudge 1.4s ease-in-out infinite; transform-origin:left center; }
.rate-nudge .rate-label{ color:var(--accent); opacity:1; }
.rate-nudge .rate-star:not(.on){ color:#f2b825; opacity:.45; }   /* invite the empty stars in gold while nudging */
/* Started / finished dates on the detail page */
.d-dates{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 2px 2px; }
.d-date{ display:flex; flex-direction:column; gap:3px; font-size:11.5px; font-weight:700; opacity:.8; }
.d-date input{ font:inherit; font-size:13px; padding:5px 8px; border:1px solid rgba(0,0,0,.16); border-radius:8px; background:#fff; color:#2b2420; }
.completed-toggle{ width:100%; margin-top:8px; background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.12); color:var(--ink); }
.completed-toggle.on{ background:#2e9e5b; color:#fff; border-color:transparent; }

/* "Adding to: <library>" label on the add/search/import sheets */
.adding-to{ font-size:12.5px; font-weight:700; color:var(--wood-dark); background:rgba(0,0,0,.06);
  border-radius:8px; padding:6px 11px; margin:8px 0 2px; display:inline-block; }

/* Copy-to-library picker */
.copy-toggle{ width:100%; margin-top:8px; background:rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.12); color:var(--ink); }
.buy-amazon{ display:block; box-sizing:border-box; text-align:center; text-decoration:none;
  background:linear-gradient(180deg,#ffce7a,#f2a13c); color:#3d2600; font-weight:700; border:none; }
.buy-amazon:hover{ filter:brightness(1.04); }
.copy-libs{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.copy-lib{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.1); border-radius:10px;
  padding:11px 13px; font:inherit; font-size:15px; color:var(--ink); cursor:pointer; }
.copy-lib:hover{ background:rgba(0,0,0,.1); }
.copy-lib span{ font-size:20px; line-height:1; }
.copy-has{ margin-left:auto; opacity:.6; font-size:11.5px; font-weight:600; }

/* "Done" close button (clearer + bigger tap target than a tiny ✕) */
.done-btn{ background:var(--accent); color:#fff; border:none; border-radius:16px;
  padding:7px 16px; font-weight:700; font-size:14px; cursor:pointer; }
.done-btn:active{ transform:scale(.96); }

/* Toast confirmation */
.toast{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 84px);
  transform:translateX(-50%) translateY(10px); background:rgba(30,25,20,.95); color:#fff;
  padding:10px 18px; border-radius:22px; font-size:14px; font-weight:600; z-index:80;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  box-shadow:0 6px 20px rgba(0,0,0,.45); max-width:80vw; text-align:center; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Quick add-to-shelf context menu */
.spine{ -webkit-touch-callout:none; }
.book-menu{ position:fixed; z-index:70; width:214px; max-height:62vh; overflow:auto;
  background:var(--cream); color:var(--ink); border-radius:12px; padding:10px;
  box-shadow:0 12px 36px rgba(0,0,0,.45); border:1px solid rgba(0,0,0,.12); }
.bm-title{ font-family:var(--font-display); font-size:14px; color:var(--wood-dark); margin:0 2px 8px; }
.bm-actions{ display:flex; flex-direction:column; gap:4px; margin-bottom:9px; padding-bottom:9px; border-bottom:1px solid rgba(0,0,0,.1); }
.bm-sub{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; opacity:.55; margin:0 2px 6px; }
.bm-list{ display:flex; flex-direction:column; gap:4px; }
.bm-item{ display:flex; align-items:center; gap:8px; text-align:left; background:rgba(0,0,0,.05);
  border:none; border-radius:8px; padding:9px 10px; font:inherit; font-size:14px; color:var(--ink); cursor:pointer; }
.bm-item:hover{ background:rgba(0,0,0,.1); }
.bm-item.on{ background:color-mix(in srgb, var(--accent) 20%, transparent); font-weight:700; }
.bm-check{ width:15px; flex:0 0 auto; color:#2e9e5b; font-weight:800; }
.bm-empty{ font-size:12.5px; opacity:.6; padding:4px 2px 8px; }
.bm-new{ width:100%; margin-top:8px; background:var(--accent); color:#fff; border:none; border-radius:8px;
  padding:9px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }

/* Lending badge on the spine */
.sp-lent{ position:absolute; bottom:5px; left:4px; font-size:11px; background:#c9962a; color:#fff;
  border-radius:6px; padding:0 3px; box-shadow:0 1px 3px rgba(0,0,0,.5); }

/* Stats view */
.stats-view{ display:flex; flex-direction:column; gap:14px; padding:4px 2px 20px; }
.stats-card{ background:color-mix(in srgb, var(--cream) 92%, transparent); color:var(--ink);
  border-radius:14px; padding:14px 16px; box-shadow:0 4px 16px rgba(0,0,0,.18); }
.stats-h{ font-family:var(--font-display); font-size:16px; color:var(--wood-dark); margin-bottom:12px; }
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(66px,1fr)); gap:10px; }
.stats-box{ display:flex; flex-direction:column; align-items:center; background:rgba(0,0,0,.05); border-radius:10px; padding:10px 6px; }
.stats-num{ font-size:24px; font-weight:800; color:var(--wood-dark); line-height:1; }
.stats-lbl{ font-size:10.5px; opacity:.65; margin-top:4px; text-transform:uppercase; letter-spacing:.03em; text-align:center; }
.stat-row{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.stat-label{ flex:0 0 40%; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stat-bar{ flex:1; height:9px; background:rgba(0,0,0,.08); border-radius:5px; overflow:hidden; }
.stat-fill{ display:block; height:100%; background:var(--accent); border-radius:5px; }
.stat-count{ flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--wood-dark); min-width:20px; text-align:right; }
.stats-note{ margin-top:8px; font-size:12.5px; opacity:.7; }

/* Decorated shelf: flat/stacked books + decoration figures */
.shelf-decor .book-stack{ display:flex; flex-direction:column-reverse; gap:2px; margin-bottom:0; align-self:flex-end; }
.book-flat{ position:relative; width:108px; height:26px; border-radius:3px; cursor:pointer;
  background-color:#8a6a4a; background-size:cover; background-position:center; overflow:hidden;
  box-shadow:0 2px 4px rgba(0,0,0,.4), inset 0 -3px 5px rgba(0,0,0,.35), inset 0 2px 2px rgba(255,255,255,.15);
  display:flex; align-items:center; }
.bf-title{ width:100%; font-size:9.5px; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.9);
  padding:0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.12)); }
/* Face-out book: standing with the cover facing the viewer (bookstore display). 150px tall = matches spines & ledges. */
.face-book{ position:relative; width:100px; height:150px; flex:0 0 auto; align-self:flex-end; cursor:pointer;
  border-radius:2px 5px 5px 2px; overflow:hidden; background:#c9b78f center/cover no-repeat;
  box-shadow:-3px 4px 9px rgba(0,0,0,.45), inset 4px 0 5px rgba(0,0,0,.32), inset -2px 0 2px rgba(255,255,255,.12); }
.face-book .fb-cover{ width:100%; height:100%; object-fit:cover; display:block; }
.face-book .fb-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:8px; font-size:12px; font-weight:700; color:#fff; line-height:1.2; }
.shelf-decor.arranging .face-book{ cursor:grab; }
.shelf-fig{ font-size:46px; line-height:1; margin-bottom:0; align-self:flex-end; user-select:none;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
/* Bundled Twemoji SVG figures — identical on every device */
img.fig-img{ display:block; pointer-events:none; }
.shelf-fig img.fig-img{ height:46px; width:auto; }
.shelf-fig img.fig-real{ height:66px; }            /* realistic objects: keep aspect, a touch larger for presence */
.fig-pick img.fig-img{ height:26px; width:auto; max-width:100%; margin:0 auto; object-fit:contain; }
.decor-fig img.fig-img{ height:26px; width:auto; max-width:44px; object-fit:contain; margin:0 auto; }
/* Tap a decoration in the picker -> a big preview so you can see what you're choosing (phone + PC) */
.fig-preview{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:1000; }
.fig-preview-card{ background:#fffaf1; color:#3b2a1e; border-radius:18px; padding:22px 26px; display:flex; flex-direction:column; align-items:center; gap:14px; box-shadow:0 12px 44px rgba(0,0,0,.35); max-width:82vw; }
.fig-preview-img{ display:flex; align-items:center; justify-content:center; min-height:190px; }
.fig-preview-img img.fig-img{ max-height:190px; max-width:74vw; height:auto; width:auto; object-fit:contain; }
.fig-preview-add{ background:var(--accent,#8a5a2b); color:#fff; border:0; border-radius:12px; padding:11px 26px; font-size:1rem; font-weight:600; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.fig-preview-add:active{ transform:translateY(1px); }
.fig-preview-hint{ color:#8a7663; font-size:.8rem; }
/* On-shelf arrange mode: drag books/figures directly on the shelf */
/* touch-action:auto keeps the page scrollable; a long-press (JS) picks a book up to drag */
.shelf-decor.arranging{ touch-action:auto; outline:2px dashed color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:3px; }
.shelf-decor.arranging *{ touch-action:auto; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.shelf-decor.arranging .spine, .shelf-decor.arranging .book-stack, .shelf-decor.arranging .shelf-fig{ cursor:grab; }
.sh-dragging{ opacity:.72; position:relative; z-index:6; }
.series-edit.on{ background:var(--accent); color:#fff; border-radius:8px; }
/* Draw the eye to the Decorate button when you arrive at your shelves */
@keyframes decoratePulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
.decorate-btn:not(.on){ animation:decoratePulse 1.2s ease-in-out 3; transform-origin:center; }
/* Stacked display mode on the main collection (flat books piled) */
.book-stack{ display:flex; flex-direction:column-reverse; gap:2px; align-self:flex-end; }
.fig-palette{ display:block; margin:8px 0 4px; max-height:230px; overflow:auto; }
.fig-group-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:#8a7a64; margin:10px 2px 4px; }
.fig-group-label:first-child{ margin-top:2px; }
.fig-group{ display:flex; flex-wrap:wrap; gap:6px; }
.fig-pick{ font-size:22px; width:40px; height:40px; border:1px solid rgba(0,0,0,.1); border-radius:9px;
  background:rgba(0,0,0,.04); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden; padding:2px; box-sizing:border-box; }
.fig-pick:hover{ background:rgba(0,0,0,.1); }
/* Shelf signs are wide (sign-shaped), so they get their own roomy, legible cells */
.fig-group-wide{ gap:8px; }
.fig-pick-wide{ width:84px; height:48px; }
.fig-pick-wide img.fig-img{ height:34px; max-width:76px; }
.decor-fig{ font-size:26px; width:48px; text-align:center; flex:0 0 auto; overflow:hidden; }
.reorder-row .reorder-t small{ display:block; font-size:10.5px; opacity:.55; }
.reorder-btn.rot{ background:color-mix(in srgb, var(--accent) 20%, rgba(0,0,0,.08)); }
.drag-handle{ cursor:grab; font-size:19px; color:var(--wood-dark); opacity:.45; padding:0 3px;
  touch-action:none; user-select:none; flex:0 0 auto; }
.drag-handle:active{ cursor:grabbing; }
.reorder-row.dragging{ opacity:.75; background:color-mix(in srgb, var(--accent) 16%, rgba(0,0,0,.05)); }

/* Reorder sheet */
.reorder-list{ display:flex; flex-direction:column; gap:6px; max-height:60vh; overflow:auto; margin-top:8px; }
.reorder-row{ display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.04); border-radius:9px; padding:6px 8px; cursor:grab; }
.reorder-row:active{ cursor:grabbing; }
.reorder-row img{ width:26px; height:38px; object-fit:cover; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.reorder-t{ flex:1; font-size:13.5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.reorder-btn{ width:34px; height:34px; border:none; border-radius:8px; background:rgba(0,0,0,.08); font-size:15px; cursor:pointer; color:var(--ink); flex:0 0 auto; }
.reorder-btn:disabled{ opacity:.3; cursor:default; }

/* Backup buttons in the sync sheet */
.sync-backup{ display:flex; gap:8px; margin:10px 0 2px; }
.sync-backup .btn{ flex:1; }

/* Build-a-shelf view */
.shelves-head{ padding:4px 6px 12px; }
/* First thing a new user sees on an empty shelf — was opacity:.6 with no surface,
   so it faded into the artwork exactly when it matters most. */
.shelf-empty-hint{ padding:6px 12px 16px; font-size:13px; opacity:1; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 9px rgba(0,0,0,.5); }
.shelf-name{ cursor:pointer; }
#shelfPickSearch{ margin-bottom:6px; }

/* Add-book chooser */
.add-choices{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.add-choice{ display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.09); border-radius:12px;
  padding:14px 16px; cursor:pointer; font:inherit; color:var(--ink); }
.add-choice:hover{ background:rgba(0,0,0,.08); }
.add-choice span{ font-size:26px; flex:0 0 auto; line-height:1; }
.add-choice strong{ font-size:16px; display:block; }
.add-choice small{ font-size:12.5px; opacity:.65; }

/* Bulk import sheet */
.import-text{ width:100%; min-height:120px; resize:vertical; border-radius:10px;
  border:1px solid rgba(0,0,0,.18); padding:10px 12px; font:inherit; font-size:14px;
  margin-top:10px; background:#fff; color:#2b2420; }
.import-results{ display:flex; flex-direction:column; gap:6px; max-height:44vh; overflow:auto; margin-top:10px; }
.import-count{ font-size:12px; opacity:.7; font-weight:700; margin-bottom:2px; }
.import-row{ display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.04);
  border-radius:9px; padding:6px 9px; cursor:pointer; }
.import-row img{ width:28px; height:40px; object-fit:cover; border-radius:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.35); flex:0 0 auto; }
.import-row input{ width:17px; height:17px; flex:0 0 auto; }
.import-t{ display:flex; flex-direction:column; font-size:13.5px; line-height:1.25; overflow:hidden; }
.import-t small{ opacity:.6; font-size:11.5px; }
.import-row.owned{ opacity:.55; }
.series-num{ font-size:12px; font-weight:800; color:var(--wood-dark); min-width:26px; text-align:right; flex:0 0 auto; }

/* Find-other-editions cover grid */
.edfind-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(98px,1fr)); gap:12px; max-height:60vh; overflow:auto; margin-top:12px; }
.edfind-cell{ position:relative; border:none; background:none; padding:0; cursor:pointer; text-align:center; }
.edfind-cell img{ width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.35); display:block; }
.edfind-cap{ display:block; margin-top:5px; font-size:10.5px; line-height:1.3; color:var(--ink); }
.edfind-cap b{ display:block; font-weight:700; }
.edfind-cap span{ display:block; opacity:.6; }
.edfind-badge{ position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:var(--accent); color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.45); }
.edfind-cell.added{ outline:2px solid #2e9e5b; border-radius:8px; }
.edfind-cell.added .edfind-badge{ background:#2e9e5b; }
/* These five set their artwork straight onto body::before and never declared the
   variable, so anything else wanting the theme art (the header banner) couldn't reach
   it. Same images, just exposed the same way as the other 48. */
html[data-theme="artsy"]{ --theme-bg:url("themes/artsy.jpg"); }
html[data-theme="chibi"]{ --theme-bg:url("themes/chibi.jpg"); }
html[data-theme="animals"]{ --theme-bg:url("themes/animals.jpg"); }
html[data-theme="manga"]{ --theme-bg:url("themes/manga.jpg"); }
html[data-theme="graphicnovel"]{ --theme-bg:url("themes/graphicnovel.jpg"); }
/* theme artwork as a CSS var, reused by the ambient wash above */
html[data-theme="classic"]{ --theme-bg:url("themes/classic.jpg"); }
html[data-theme="fantasy"]{ --theme-bg:url("themes/fantasy.jpg"); }
html[data-theme="dragons"]{ --theme-bg:url("themes/dragons.jpg"); }
html[data-theme="romance"]{ --theme-bg:url("themes/romance.jpg"); }
html[data-theme="darkromance"]{ --theme-bg:url("themes/darkromance.jpg"); }
html[data-theme="scifi"]{ --theme-bg:url("themes/scifi.jpg"); }
html[data-theme="western"]{ --theme-bg:url("themes/western.jpg"); }
html[data-theme="dystopian"]{ --theme-bg:url("themes/dystopian.jpg"); }
html[data-theme="mystery"]{ --theme-bg:url("themes/mystery.jpg"); }
html[data-theme="horror"]{ --theme-bg:url("themes/horror.jpg"); }
html[data-theme="nonfiction"]{ --theme-bg:url("themes/nonfiction.jpg"); }
html[data-theme="cozy"]{ --theme-bg:url("themes/cozy.jpg"); }
html[data-theme="ocean"]{ --theme-bg:url("themes/ocean.jpg"); }
html[data-theme="steampunk"]{ --theme-bg:url("themes/steampunk.jpg"); }
html[data-theme="poetry"]{ --theme-bg:url("themes/poetry.jpg"); }
html[data-theme="thriller"]{ --theme-bg:url("themes/thriller.jpg"); }
/* --- Dragon Castle (new theme mock) --- */
html[data-theme="dragoncastle"]{ --font-display:'Cinzel',serif; --bg1:#1c1815;--bg2:#14100e;--wood:#3a2c22;--wood-dark:#241a14;--wood-light:#503d2e;--shelf1:#3a2e26;--shelf2:#2a2019;--accent:#e0812a;--label:#f0e2d0; --theme-bg:url("themes/dragoncastle.jpg"); }
html[data-theme="dragoncastle"] body::before{ background-image:url("themes/dragoncastle.jpg"); background-size:cover; background-position:center; }
/* --- Celestial Glade --- */
html[data-theme="celestialglade"]{ --font-display:'Cinzel',serif; --bg1:#112738;--bg2:#0b1a2b;--wood:#243b3f;--wood-dark:#162a2e;--wood-light:#345056;--shelf1:#23383e;--shelf2:#172a30;--accent:#4fd6dc;--label:#e6f4f2; --theme-bg:url("themes/celestialglade.jpg"); }
html[data-theme="celestialglade"] body::before{ background-image:url("themes/celestialglade.jpg"); background-size:cover; background-position:center; }
/* --- Steampunk Library --- */
html[data-theme="steampunklibrary"]{ --font-display:'IM Fell English',serif; --bg1:#3a2c1c;--bg2:#241a10;--wood:#5c4326;--wood-dark:#3a2917;--wood-light:#7a5a34;--shelf1:#4a3620;--shelf2:#352514;--accent:#c78a3c;--label:#f2e4cc; --theme-bg:url("themes/steampunklibrary.jpg"); }
html[data-theme="steampunklibrary"] body::before{ background-image:url("themes/steampunklibrary.jpg"); background-size:cover; background-position:center; }
/* --- Witchy Apothecary --- */
html[data-theme="witchyapothecary"]{ --font-display:'Cinzel Decorative',serif; --bg1:#14130f;--bg2:#0d0c0a;--wood:#2e2820;--wood-dark:#1c1813;--wood-light:#3e362a;--shelf1:#2a2a22;--shelf2:#1c1c16;--accent:#b07bd0;--label:#ece3e8; --theme-bg:url("themes/witchyapothecary.jpg"); }
html[data-theme="witchyapothecary"] body::before{ background-image:url("themes/witchyapothecary.jpg"); background-size:cover; background-position:center; }
/* --- Winter Cabin --- */
html[data-theme="snowywintercabin"]{ --font-display:'Caveat',cursive; --bg1:#2a2018;--bg2:#1a130d;--wood:#5a4230;--wood-dark:#3a2a1c;--wood-light:#75563a;--shelf1:#4a3626;--shelf2:#33251a;--accent:#e0913f;--label:#f2e6d4; --theme-bg:url("themes/snowywintercabin.jpg"); }
html[data-theme="snowywintercabin"] body::before{ background-image:url("themes/snowywintercabin.jpg"); background-size:cover; background-position:center; }
/* --- Silver Sanctum --- */
html[data-theme="moltensilverpool"]{ --font-display:'Cormorant Garamond',serif; --bg1:#1b1815;--bg2:#110f0d;--wood:#33302a;--wood-dark:#201d19;--wood-light:#47423a;--shelf1:#302c26;--shelf2:#211e1a;--accent:#c8a85e;--label:#ece5d6; --theme-bg:url("themes/moltensilverpool.jpg"); }
html[data-theme="moltensilverpool"] body::before{ background-image:url("themes/moltensilverpool.jpg"); background-size:cover; background-position:center; }
/* Readability: these photo backgrounds have bright patches where light text fades out.
   Give the section text a strong DARK halo so it reads over both bright AND dark spots. */
html[data-theme="dragoncastle"]     :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="celestialglade"]   :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="steampunklibrary"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="witchyapothecary"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="snowywintercabin"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="moltensilverpool"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty){
  text-shadow:0 0 4px rgba(0,0,0,.94), 0 0 10px rgba(0,0,0,.82), 0 1px 3px rgba(0,0,0,.96); }

/* ===== Themed typography: buttons share each theme's display font (matches the headers) ===== */
button{ font-family:var(--font-display); }
.btn, .fab, .tab, .done-btn, .link-btn, .acct-tab, .coll-pick, .theme-card,
.series-edit, .sort-pill, .genre-pill,
.fmt-pick button, .log-fmt button, .log-status button{
  font-family:var(--font-display);
}

/* ===== First-run guided tour ===== */
.tour{ position:fixed; inset:0; z-index:90; pointer-events:auto; }
.tour.tour-dim{ background:rgba(18,13,9,.72); }
.tour-spot{ position:fixed; border-radius:14px; box-shadow:0 0 0 9999px rgba(18,13,9,.72);
  transition:left .28s, top .28s, width .28s, height .28s; pointer-events:none; }
.tour-pop{ position:fixed; width:min(320px, calc(100vw - 24px)); background:var(--cream); color:var(--ink);
  border-radius:16px; padding:16px 16px 12px; box-shadow:0 16px 44px rgba(0,0,0,.5); pointer-events:auto; z-index:91; }
.tour-x{ position:absolute; top:8px; right:8px; width:30px; height:30px; border:none; border-radius:50%;
  background:rgba(0,0,0,.09); color:var(--wood-dark); font-size:15px; line-height:1; cursor:pointer; z-index:2;
  display:flex; align-items:center; justify-content:center; }
.tour-x:hover{ background:rgba(0,0,0,.18); }
/* Guest → account nudge popup */
.nudge{ position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(18,13,9,.6); }
.nudge.hidden{ display:none; }
.nudge-card{ background:var(--cream); color:var(--ink); border-radius:18px; padding:26px 22px 22px; width:min(360px,100%); text-align:center; box-shadow:0 20px 54px rgba(0,0,0,.5); }
.nudge-emoji{ font-size:42px; line-height:1; }
.nudge-card h3{ font-family:var(--font-display); font-size:22px; color:var(--wood-dark); margin:10px 0 8px; }
.nudge-card p{ font-size:14.5px; line-height:1.5; color:#4a3a2a; }
.nudge-actions{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.tour-pop h3{ font-family:var(--font-display); font-size:19px; margin-bottom:6px; color:var(--wood-dark); }
.tour-pop p{ font-size:14px; line-height:1.45; }
.tour-dots{ display:flex; gap:6px; justify-content:center; margin:12px 0 10px; }
.tour-dots i{ width:7px; height:7px; border-radius:50%; background:rgba(0,0,0,.22); }
.tour-dots i.on{ background:var(--accent); }
.tour-foot{ display:flex; align-items:center; gap:8px; }
.tour-foot .btn{ padding:8px 16px; }

/* ===== Beta disclaimer banner ===== */
.beta-banner{ display:flex; align-items:center; gap:10px; margin:0; padding:calc(env(safe-area-inset-top) + 9px) 14px 9px;
  background:#fbe9c8; border:none; border-bottom:1px solid #e6c79b; border-radius:0; color:#6b4a1f;
  font-size:13px; line-height:1.35; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.beta-banner strong{ color:#8a5a1f; }
.beta-x{ margin-left:auto; flex:0 0 auto; background:transparent; border:none; font-size:22px; line-height:1;
  color:#6b4a1f; opacity:.55; cursor:pointer; padding:0 2px; }
.beta-x:hover{ opacity:1; }

/* "Look" toggle in the theme picker */
.look-toggle{ display:flex; align-items:center; gap:8px; margin:0 0 14px; justify-content:center; flex-wrap:wrap; }
.look-label{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; opacity:.6; }
.look-opt{ border:1px solid rgba(0,0,0,.15); border-radius:16px; padding:7px 15px; font:inherit; font-size:13px;
  font-weight:700; background:rgba(0,0,0,.04); color:var(--ink); cursor:pointer; }
.look-opt.on{ background:var(--accent); color:#fff; border-color:transparent; }

/* ("Modern" look removed — the app is always the cozy wooden-shelf look now.) */

/* Themed side-panel artwork in the gutters (wide screens). Drop art/side-<theme>.jpg to fill these. */
.side-art{ position:fixed; top:0; bottom:0; width:min(32vw,420px); z-index:0; pointer-events:none;
  /* cover (not contain) so the panel's background fills top-to-bottom — no letterbox band */
  background-repeat:no-repeat; background-size:cover; opacity:.92; display:none;
  /* Fade only the INNER edge so the panel dissolves toward the shelves. Gentle now:
     mostly solid, with just the last sliver fading. */
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 82%,transparent 100%);
          mask-image:linear-gradient(to right,#000 0,#000 82%,transparent 100%); }
.side-art-left{ left:0; background-position:left center; }
.side-art-right{ right:0; background-position:right center; transform:scaleX(-1); }
/* Mystery's raven sits near the top, so anchor its art to the top (never crop the raven). */
html[data-theme="mystery"] .side-art-left{ background-position:left top; }
html[data-theme="mystery"] .side-art-right{ background-position:right top; }
@media(min-width:1080px){ .side-art{ display:block; } }

/* ===== Immersive themed backdrop — ALL themes =====
   The themed scene goes full-strength and fills the middle column top-to-bottom; the shelves
   and header turn see-through so everything sits ON the art, with scrims + text-shadows
   keeping text legible. (Remove this whole block to revert.) */
body::before{ opacity:1; background-position:center; }
.shelf{ background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.16)); }
.book-title, .shelf-name{ text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.6); }
.topbar{ background:linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.10));
  box-shadow:none; text-shadow:0 1px 3px rgba(0,0,0,.85); }
/* ===== END immersive backdrop ===== */

/* ===== Auto-generated photo themes ===== */
html[data-theme="aliencity"]{ --font-display:'Orbitron',sans-serif; --bg1:#1c1a1a;--bg2:#121111;--wood:#363333;--wood-dark:#232221;--wood-light:#504c4c;--shelf1:#333130;--shelf2:#222020;--accent:#d48749;--label:#f0e8dd; --theme-bg:url("themes/aliencity.jpg"); }
html[data-theme="aliencity"] body::before{ background-image:url("themes/aliencity.jpg"); background-size:cover; background-position:center; opacity:.5; }
html[data-theme="autumncafe"]{ --font-display:'Caveat',cursive; --bg1:#231a13;--bg2:#17110c;--wood:#3f3429;--wood-dark:#2a221b;--wood-light:#5d4d3f;--shelf1:#3b3128;--shelf2:#28211b;--accent:#d48c49;--label:#f0e8dd; --theme-bg:url("themes/autumncafe.jpg"); }
html[data-theme="autumncafe"] body::before{ background-image:url("themes/autumncafe.jpg"); background-size:cover; background-position:center; }
html[data-theme="celestialnightsky"]{ --font-display:'Cinzel',serif; --bg1:#131523;--bg2:#0c0e17;--wood:#2a2d3f;--wood-dark:#1b1e2a;--wood-light:#3f445c;--shelf1:#282b3b;--shelf2:#1b1d27;--accent:#4962d4;--label:#f0e8dd; --theme-bg:url("themes/celestialnightsky.jpg"); }
html[data-theme="celestialnightsky"] body::before{ background-image:url("themes/celestialnightsky.jpg"); background-size:cover; background-position:center; }
html[data-theme="classiclibrarynight"]{ --font-display:'Libre Baskerville',serif; --bg1:#251a10;--bg2:#18110a;--wood:#433326;--wood-dark:#2c2119;--wood-light:#614c3a;--shelf1:#3e3025;--shelf2:#292019;--accent:#d48c49;--label:#f0e8dd; --theme-bg:url("themes/classiclibrarynight.jpg"); }
html[data-theme="classiclibrarynight"] body::before{ background-image:url("themes/classiclibrarynight.jpg"); background-size:cover; background-position:center; }
html[data-theme="cottagenook"]{ --font-display:'Caveat',cursive; --bg1:#211c15;--bg2:#15120d;--wood:#3c362c;--wood-dark:#28231d;--wood-light:#595043;--shelf1:#39332b;--shelf2:#26221c;--accent:#d49949;--label:#f0e8dd; --theme-bg:url("themes/cottagenook.jpg"); }
html[data-theme="cottagenook"] body::before{ background-image:url("themes/cottagenook.jpg"); background-size:cover; background-position:center; opacity:.5; }
html[data-theme="darkacademiastudy"]{ --font-display:'IM Fell English',serif; --bg1:#251a10;--bg2:#18110a;--wood:#433326;--wood-dark:#2c2119;--wood-light:#614c3a;--shelf1:#3e3025;--shelf2:#292019;--accent:#d48949;--label:#f0e8dd; --theme-bg:url("themes/darkacademiastudy.jpg"); }
html[data-theme="darkacademiastudy"] body::before{ background-image:url("themes/darkacademiastudy.jpg"); background-size:cover; background-position:center; }
html[data-theme="darkportal"]{ --font-display:'Cinzel Decorative','Cinzel',serif; --bg1:#221b13;--bg2:#16110d;--wood:#3e342a;--wood-dark:#29221c;--wood-light:#5b4e40;--shelf1:#3a3229;--shelf2:#27211b;--accent:#d48c49;--label:#f0e8dd; --theme-bg:url("themes/darkportal.jpg"); }
html[data-theme="darkportal"] body::before{ background-image:url("themes/darkportal.jpg"); background-size:cover; background-position:center; }
html[data-theme="darksnakepit"]{ --font-display:'Cinzel Decorative','Cinzel',serif; --bg1:#201915;--bg2:#15100e;--wood:#3c312d;--wood-dark:#27201d;--wood-light:#584a44;--shelf1:#382f2b;--shelf2:#261f1d;--accent:#d47449;--label:#f0e8dd; --theme-bg:url("themes/darksnakepit.jpg"); }
html[data-theme="darksnakepit"] body::before{ background-image:url("themes/darksnakepit.jpg"); background-size:cover; background-position:center; }
html[data-theme="dragontreasure"]{ --font-display:'Cinzel',serif; --bg1:#251b10;--bg2:#18110a;--wood:#433426;--wood-dark:#2c2319;--wood-light:#614e3a;--shelf1:#3e3225;--shelf2:#292119;--accent:#d49249;--label:#f0e8dd; --theme-bg:url("themes/dragontreasure.jpg"); }
html[data-theme="dragontreasure"] body::before{ background-image:url("themes/dragontreasure.jpg"); background-size:cover; background-position:center; }
html[data-theme="enchantedglade"]{ --font-display:'Cinzel',serif; --bg1:#171f1d;--bg2:#0f1413;--wood:#2f3a37;--wood-dark:#1f2624;--wood-light:#475552;--shelf1:#2d3634;--shelf2:#1e2423;--accent:#49d4b7;--label:#f0e8dd; --theme-bg:url("themes/enchantedglade.jpg"); }
html[data-theme="enchantedglade"] body::before{ background-image:url("themes/enchantedglade.jpg"); background-size:cover; background-position:center; }
html[data-theme="flyingunicorns"]{ --font-display:'Dancing Script',cursive; --bg1:#1c191c;--bg2:#121012;--wood:#363236;--wood-dark:#242124;--wood-light:#504b51;--shelf1:#333034;--shelf2:#222022;--accent:#d46449;--label:#f0e8dd; --theme-bg:url("themes/flyingunicorns.jpg"); }
html[data-theme="flyingunicorns"] body::before{ background-image:url("themes/flyingunicorns.jpg"); background-size:cover; background-position:center; opacity:.44; }
html[data-theme="gildedcages"]{ --font-display:'Cinzel Decorative','Cinzel',serif; --bg1:#1f1b17;--bg2:#14110f;--wood:#3a352f;--wood-dark:#26231f;--wood-light:#554e46;--shelf1:#37322d;--shelf2:#24211e;--accent:#d49349;--label:#f0e8dd; --theme-bg:url("themes/gildedcages.jpg"); }
html[data-theme="gildedcages"] body::before{ background-image:url("themes/gildedcages.jpg"); background-size:cover; background-position:center; opacity:.5; }
html[data-theme="gothicparlor"]{ --font-display:'Cinzel Decorative','Cinzel',serif; --bg1:#251610;--bg2:#180e0a;--wood:#432e26;--wood-dark:#2c1e19;--wood-light:#61453a;--shelf1:#3e2c25;--shelf2:#291d19;--accent:#d47a49;--label:#f0e8dd; --theme-bg:url("themes/gothicparlor.jpg"); }
html[data-theme="gothicparlor"] body::before{ background-image:url("themes/gothicparlor.jpg"); background-size:cover; background-position:center; }
html[data-theme="messengers"]{ --font-display:'Cinzel',serif; --bg1:#1c1b19;--bg2:#121110;--wood:#363432;--wood-dark:#242221;--wood-light:#514e4b;--shelf1:#343230;--shelf2:#222120;--accent:#d49249;--label:#f0e8dd; --theme-bg:url("themes/messengers.jpg"); }
html[data-theme="messengers"] body::before{ background-image:url("themes/messengers.jpg"); background-size:cover; background-position:center; opacity:.44; }
html[data-theme="meteorshower"]{ --font-display:'Orbitron',sans-serif; --bg1:#121723;--bg2:#0c0f17;--wood:#292f3f;--wood-dark:#1b1f2a;--wood-light:#3f475d;--shelf1:#282d3b;--shelf2:#1b1e28;--accent:#4970d4;--label:#f0e8dd; --theme-bg:url("themes/meteorshower.jpg"); }
html[data-theme="meteorshower"] body::before{ background-image:url("themes/meteorshower.jpg"); background-size:cover; background-position:center; }
html[data-theme="northernlightssky"]{ --font-display:'Quicksand',sans-serif; --bg1:#131b23;--bg2:#0c1116;--wood:#2a343f;--wood-dark:#1b2229;--wood-light:#3f4e5c;--shelf1:#29323b;--shelf2:#1b2127;--accent:#4992d4;--label:#f0e8dd; --theme-bg:url("themes/northernlightssky.jpg"); }
html[data-theme="northernlightssky"] body::before{ background-image:url("themes/northernlightssky.jpg"); background-size:cover; background-position:center; }
html[data-theme="ottercity"]{ --font-display:'Quicksand',sans-serif; --bg1:#1b1a1c;--bg2:#121112;--wood:#353336;--wood-dark:#232123;--wood-light:#4f4c50;--shelf1:#333033;--shelf2:#222022;--accent:#d49149;--label:#f0e8dd; --theme-bg:url("themes/ottercity.jpg"); }
html[data-theme="ottercity"] body::before{ background-image:url("themes/ottercity.jpg"); background-size:cover; background-position:center; }
html[data-theme="scifipod"]{ --font-display:'Orbitron',sans-serif; --bg1:#161b20;--bg2:#0e1114;--wood:#2e343b;--wood-dark:#1e2227;--wood-light:#454d57;--shelf1:#2c3237;--shelf2:#1d2125;--accent:#499fd4;--label:#f0e8dd; --theme-bg:url("themes/scifipod.jpg"); }
html[data-theme="scifipod"] body::before{ background-image:url("themes/scifipod.jpg"); background-size:cover; background-position:center; }
html[data-theme="seasidewindow"]{ --font-display:'Cormorant Garamond',serif; --bg1:#1e1c18;--bg2:#13120f;--wood:#393630;--wood-dark:#252420;--wood-light:#545148;--shelf1:#35342e;--shelf2:#24221f;--accent:#d49849;--label:#f0e8dd; --theme-bg:url("themes/seasidewindow.jpg"); }
html[data-theme="seasidewindow"] body::before{ background-image:url("themes/seasidewindow.jpg"); background-size:cover; background-position:center; opacity:.44; }
html[data-theme="spicyromance"]{ --font-display:'Dancing Script',cursive; --bg1:#221614;--bg2:#160e0d;--wood:#3e2e2b;--wood-dark:#291e1c;--wood-light:#5b4541;--shelf1:#3a2c29;--shelf2:#271d1c;--accent:#d46149;--label:#f0e8dd; --theme-bg:url("themes/spicyromance.jpg"); }
html[data-theme="spicyromance"] body::before{ background-image:url("themes/spicyromance.jpg"); background-size:cover; background-position:center; }
html[data-theme="springgarden"]{ --font-display:'Caveat',cursive; --bg1:#1f1a17;--bg2:#14110f;--wood:#3a332f;--wood-dark:#26221f;--wood-light:#554c46;--shelf1:#36312d;--shelf2:#24201e;--accent:#d47a49;--label:#f0e8dd; --theme-bg:url("themes/springgarden.jpg"); }
html[data-theme="springgarden"] body::before{ background-image:url("themes/springgarden.jpg"); background-size:cover; background-position:center; opacity:.44; }
html[data-theme="standingstones"]{ --font-display:'Cinzel',serif; --bg1:#1e1b17;--bg2:#13110f;--wood:#393430;--wood-dark:#252220;--wood-light:#544e48;--shelf1:#36322e;--shelf2:#24211f;--accent:#d48a49;--label:#f0e8dd; --theme-bg:url("themes/standingstones.jpg"); }
html[data-theme="standingstones"] body::before{ background-image:url("themes/standingstones.jpg"); background-size:cover; background-position:center; opacity:.44; }
html[data-theme="stonebridge"]{ --font-display:'Cinzel',serif; --bg1:#1a1b1b;--bg2:#111112;--wood:#343435;--wood-dark:#222323;--wood-light:#4d4e4f;--shelf1:#313232;--shelf2:#212121;--accent:#d48a49;--label:#f0e8dd; --theme-bg:url("themes/stonebridge.jpg"); }
html[data-theme="stonebridge"] body::before{ background-image:url("themes/stonebridge.jpg"); background-size:cover; background-position:center; }
html[data-theme="vikingvillage"]{ --font-display:'IM Fell English',serif; --bg1:#1e1a18;--bg2:#13110f;--wood:#383330;--wood-dark:#252220;--wood-light:#534d48;--shelf1:#35312e;--shelf2:#24211f;--accent:#d48749;--label:#f0e8dd; --theme-bg:url("themes/vikingvillage.jpg"); }
html[data-theme="vikingvillage"] body::before{ background-image:url("themes/vikingvillage.jpg"); background-size:cover; background-position:center; }
html[data-theme="wolfpack"]{ --font-display:'Oswald',sans-serif; --bg1:#171b1f;--bg2:#0f1114;--wood:#2f343a;--wood-dark:#1f2226;--wood-light:#464d55;--shelf1:#2d3137;--shelf2:#1e2124;--accent:#498bd4;--label:#f0e8dd; --theme-bg:url("themes/wolfpack.jpg"); }
html[data-theme="wolfpack"] body::before{ background-image:url("themes/wolfpack.jpg"); background-size:cover; background-position:center; }
html[data-theme="wyverns"]{ --font-display:'Pirata One','Cinzel',serif; --bg1:#1d1b18;--bg2:#131110;--wood:#373431;--wood-dark:#242220;--wood-light:#524d4a;--shelf1:#34312f;--shelf2:#23211f;--accent:#d49249;--label:#f0e8dd; --theme-bg:url("themes/wyverns.jpg"); }
html[data-theme="wyverns"] body::before{ background-image:url("themes/wyverns.jpg"); background-size:cover; background-position:center; opacity:.5; }
html[data-theme="darkfantasy"]{ --font-display:'Cinzel Decorative','Cinzel',serif; --bg1:#1a1210;--bg2:#0f0a09;--wood:#331f1c;--wood-dark:#201312;--wood-light:#4a2c28;--shelf1:#2e1c1a;--shelf2:#1e1210;--accent:#bf3a2e;--label:#f0e8dd; --theme-bg:url("themes/darkfantasy.jpg"); }
html[data-theme="darkfantasy"] body::before{ background-image:url("themes/darkfantasy.jpg"); background-size:cover; background-position:center; }
/* Readability halo for the auto-generated photo themes */
html[data-theme="aliencity"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="autumncafe"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="celestialnightsky"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="classiclibrarynight"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="cottagenook"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="darkacademiastudy"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="darkportal"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="darksnakepit"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="dragontreasure"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="enchantedglade"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="flyingunicorns"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="gildedcages"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="gothicparlor"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="messengers"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="meteorshower"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="northernlightssky"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="ottercity"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="scifipod"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="seasidewindow"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="spicyromance"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="springgarden"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="standingstones"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="stonebridge"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="vikingvillage"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="wolfpack"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="wyverns"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty),
html[data-theme="darkfantasy"] :is(.coll-title,.series-title,.series-name,.shelf-name,.series-edit,.slot-empty,.book-title,.book .label,.empty){ text-shadow:0 0 4px rgba(0,0,0,.94), 0 0 10px rgba(0,0,0,.82), 0 1px 3px rgba(0,0,0,.96); }


#sheetExtras{ margin:4px 0 2px; }

/* Password visibility toggle (eye icon) — added per tester feedback */
.pw-wrap{position:relative;display:block}
.pw-wrap>input{width:100%;padding-right:42px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:17px;line-height:1;padding:4px;opacity:.7}
.pw-eye:hover{opacity:1}