/* ---------- Base ---------- */
/* Anything with the `hidden` attribute must truly be hidden. Without this !important rule,
   the display:flex on .modal-back / .auth-view overrides [hidden] and leaves invisible
   full-screen overlays on top of the page, blocking every click. */
[hidden]{display:none !important;}
:root{
  --bg:#f6f4ef; --card:#ffffff; --ink:#2b2622; --muted:#8a8178;
  --accent:#c2703d; --accent-dark:#a85c2d; --line:#e7e1d8;
  --green:#4c8a5a; --blue:#4a7aa8; --gold:#e0a500;
  --shadow:0 2px 10px rgba(60,45,30,.08);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit; cursor:pointer}
input,select,textarea{font-family:inherit; font-size:14px}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:16px;
  padding:12px 24px; background:var(--card);
  border-bottom:1px solid var(--line); box-shadow:var(--shadow);
}
.brand{font-size:20px; font-weight:700; cursor:pointer; white-space:nowrap}
.brand span{background:linear-gradient(90deg,var(--accent),#8a5a3a);-webkit-background-clip:text;background-clip:text;color:transparent}
.search-wrap{flex:1; max-width:520px; margin:0 auto}
.search-wrap input{
  width:100%; padding:10px 16px; border:1px solid var(--line);
  border-radius:24px; background:var(--bg); outline:none;
}
.search-wrap input:focus{border-color:var(--accent)}
.btn-primary{
  background:var(--accent); color:#fff; border:none;
  padding:10px 18px; border-radius:24px; font-weight:600; font-size:14px;
  white-space:nowrap; transition:background .15s;
}
.btn-primary:hover{background:var(--accent-dark)}

/* ---------- Stats ---------- */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px; padding:22px 24px; max-width:1100px; margin:0 auto;
}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; box-shadow:var(--shadow); text-align:center;
}
.stat .n{font-size:30px; font-weight:800; line-height:1; color:var(--accent)}
.stat .l{font-size:13px; color:var(--muted); margin-top:6px}

/* ---------- Tabs ---------- */
.tabs{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:0 24px 14px; max-width:1100px; margin:0 auto;
}
.tab{
  background:transparent; border:1px solid var(--line); color:var(--ink);
  padding:8px 16px; border-radius:22px; font-size:14px; font-weight:500;
}
.tab:hover{background:#fff}
.tab.active{background:var(--ink); color:#fff; border-color:var(--ink)}
.sort-wrap{margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px}
.sort-wrap select{padding:7px 10px; border-radius:18px; border:1px solid var(--line); background:#fff}

/* ---------- Grid ---------- */
.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:20px; padding:8px 24px 60px; max-width:1100px; margin:0 auto;
}
.book{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; box-shadow:var(--shadow); cursor:pointer;
  transition:transform .15s, box-shadow .15s; position:relative;
}
.book:hover{transform:translateY(-4px); box-shadow:0 10px 22px rgba(60,45,30,.14)}
.book .cover{
  aspect-ratio:2/3; width:100%; object-fit:cover; background:#e9e3da; display:block;
}
.book .cover.no{display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; text-align:center; padding:12px}
.book .info{padding:10px 12px 14px}
.book .t{font-weight:700; font-size:14px; line-height:1.25; margin:0 0 3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.book .a{font-size:12px; color:var(--muted); margin:0 0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.book .stars{color:var(--gold); font-size:13px; letter-spacing:1px; min-height:16px}
.badge{
  position:absolute; top:8px; left:8px; font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:12px; color:#fff; backdrop-filter:blur(2px);
}
.badge.reading{background:var(--blue)}
.badge.read{background:var(--green)}
.badge.want{background:#9a8f82}
.fav-flag{position:absolute; top:8px; right:8px; font-size:15px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}

.empty{
  text-align:center; color:var(--muted); padding:70px 20px; max-width:520px; margin:0 auto;
}
.empty h3{color:var(--ink)}

/* ---------- Modals ---------- */
.modal-back{
  position:fixed; inset:0; background:rgba(40,30,20,.5);
  display:flex; align-items:flex-start; justify-content:center;
  padding:40px 16px; z-index:50; overflow:auto;
}
.modal{
  background:var(--card); width:100%; max-width:560px; border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.3); padding:22px 24px 26px;
}
.review-modal{max-width:600px}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.modal-head h2{margin:0; font-size:20px}
.x{background:none; border:none; font-size:18px; color:var(--muted)}
.x:hover{color:var(--ink)}

/* Add-book search */
.add-search input{width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:12px; outline:none}
.add-search input:focus{border-color:var(--accent)}
.add-search .hint{display:block; font-size:12px; color:var(--muted); margin-top:6px}
.search-results{display:flex; flex-direction:column; gap:6px; margin:14px 0; max-height:320px; overflow:auto}
.sr{
  display:flex; gap:12px; padding:8px; border:1px solid var(--line);
  border-radius:10px; cursor:pointer; align-items:center;
}
.sr:hover{background:var(--bg); border-color:var(--accent)}
.sr img,.sr .noimg{width:40px; height:60px; object-fit:cover; border-radius:4px; background:#e9e3da; flex-shrink:0; font-size:9px; display:flex; align-items:center; justify-content:center; color:var(--muted)}
.sr .srt{font-weight:600; font-size:14px}
.sr .sra{font-size:12px; color:var(--muted)}
.searching{color:var(--muted); font-size:13px; padding:10px 4px}

.manual{margin-top:8px; border-top:1px solid var(--line); padding-top:12px}
.manual summary{cursor:pointer; color:var(--accent); font-weight:600; font-size:14px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0}
.form-grid label{display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:4px}
.form-grid input{padding:8px 10px; border:1px solid var(--line); border-radius:8px; color:var(--ink)}

.shelf-pick{display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px; margin:8px 0 14px}
.shelf-pick.tight{margin:6px 0 0; gap:10px}
.shelf-pick label{display:flex; align-items:center; gap:4px; cursor:pointer}

/* Review modal */
.review-top{display:flex; gap:16px; margin-bottom:14px}
.rv-cover{width:96px; height:144px; object-fit:cover; border-radius:8px; background:#e9e3da; flex-shrink:0}
.rv-info{flex:1; display:flex; flex-direction:column; gap:8px}
.rv-title-input{font-size:18px; font-weight:700; border:none; border-bottom:1px solid transparent; padding:2px 0; outline:none; color:var(--ink); background:transparent}
.rv-title-input:focus,.rv-author-input:focus{border-bottom:1px solid var(--accent)}
.rv-author-input{border:none; border-bottom:1px solid transparent; padding:2px 0; outline:none; color:var(--muted); background:transparent}
.rv-meta{display:flex; gap:8px; flex-wrap:wrap}
.rv-meta input{padding:5px 8px; border:1px solid var(--line); border-radius:7px; color:var(--ink)}
.rating-row{display:flex; align-items:center; gap:14px; margin:6px 0 12px; flex-wrap:wrap}
.stars-input{font-size:26px; color:#d9d2c8; letter-spacing:3px; user-select:none}
.stars-input span{cursor:pointer; transition:transform .1s}
.stars-input span:hover{transform:scale(1.15)}
.stars-input span.on{color:var(--gold)}
.fav-toggle{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:4px; cursor:pointer}
.review-text{width:100%; min-height:150px; padding:12px; border:1px solid var(--line); border-radius:12px; resize:vertical; outline:none; line-height:1.5}
.review-text:focus{border-color:var(--accent)}
.review-date-row{display:flex; align-items:center; gap:10px; margin-top:12px; font-size:13px; color:var(--muted)}
.review-date-row input{padding:7px 10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fff}
.review-actions{display:flex; align-items:center; gap:10px; margin-top:14px}
.review-actions .spacer{flex:1}
.btn-danger{background:#fff; color:#c04a4a; border:1px solid #eccaca; padding:9px 14px; border-radius:22px; font-weight:600}
.btn-danger:hover{background:#fbeaea}
.btn-share{background:#fff; color:var(--blue); border:1px solid #cfe0ee; padding:9px 14px; border-radius:22px; font-weight:600}
.btn-share:hover{background:#eef4fa}
.btn-share.on{background:var(--blue); color:#fff; border-color:var(--blue)}
.share-link{margin-top:12px; padding:10px 12px; background:var(--bg); border-radius:10px; font-size:13px; word-break:break-all; display:flex; gap:8px; align-items:center}
.share-link a{color:var(--accent)}
.share-link button{background:var(--ink); color:#fff; border:none; padding:5px 10px; border-radius:8px; font-size:12px}

/* Toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:11px 20px; border-radius:24px;
  font-size:14px; z-index:100; box-shadow:0 6px 20px rgba(0,0,0,.25);
}

/* ---------- Public share page ---------- */
.share-page{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; background:var(--bg)}
.share-card{background:#fff; max-width:640px; width:100%; border-radius:20px; box-shadow:0 20px 60px rgba(60,45,30,.18); overflow:hidden; display:flex; flex-wrap:wrap}
.share-cover{width:220px; object-fit:cover; background:#e9e3da}
.share-cover.no-cover{display:flex; align-items:center; justify-content:center; color:var(--muted); min-height:300px}
.share-body{flex:1; min-width:260px; padding:28px}
.share-body h1{margin:0 0 4px; font-size:26px}
.share-author{color:var(--muted); margin:0 0 12px}
.share-stars{color:var(--gold); font-size:24px; letter-spacing:3px; margin-bottom:16px}
.share-review{line-height:1.65; white-space:pre-wrap; color:var(--ink)}
.share-foot{display:inline-block; margin-top:22px; color:var(--accent); text-decoration:none; font-weight:600}

/* ---------- Auth screen ---------- */
.auth-view{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:linear-gradient(135deg,#f6f4ef,#efe6da)}
.auth-card{background:#fff; width:100%; max-width:400px; border-radius:20px; padding:32px 30px;
  box-shadow:0 20px 60px rgba(60,45,30,.18); text-align:center}
.auth-brand{font-size:26px; font-weight:800; color:var(--accent)}
.auth-tag{color:var(--muted); font-size:14px; margin:8px 0 22px}
.auth-tabs{display:flex; background:var(--bg); border-radius:12px; padding:4px; margin-bottom:18px}
.auth-tab{flex:1; background:none; border:none; padding:9px; border-radius:9px; font-weight:600; color:var(--muted)}
.auth-tab.active{background:#fff; color:var(--ink); box-shadow:var(--shadow)}
.auth-form{display:flex; flex-direction:column; gap:12px}
.auth-form input{padding:12px 14px; border:1px solid var(--line); border-radius:12px; outline:none}
.auth-form input:focus{border-color:var(--accent)}
.btn-primary.wide{width:100%; padding:12px}
.auth-err{margin-top:14px; color:#c04a4a; font-size:13px; background:#fbeaea; padding:10px; border-radius:10px}

/* ---------- Main nav ---------- */
.mainnav{display:flex; gap:4px; flex:1; justify-content:center}
.navbtn{background:none; border:none; padding:9px 16px; border-radius:20px; font-size:15px; font-weight:600; color:var(--muted)}
.navbtn:hover{background:var(--bg); color:var(--ink)}
.navbtn.active{background:var(--ink); color:#fff}
.user-menu{display:flex; align-items:center; gap:10px}
.whoami{font-size:13px; color:var(--ink); font-weight:600; white-space:nowrap}
.btn-ghost{background:none; border:1px solid var(--line); color:var(--muted); padding:8px 12px; border-radius:20px; font-size:13px}
.btn-ghost:hover{background:var(--bg); color:var(--ink)}

.view{max-width:1100px; margin:0 auto}
.view-head{padding:24px 24px 6px}
.view-head h1{margin:0; font-size:26px}
.view-sub{color:var(--muted); margin:6px 0 0}
.search-row{padding:0 24px 6px; max-width:560px; margin:0 auto}
.search-row input{width:100%; padding:10px 16px; border:1px solid var(--line); border-radius:24px; background:#fff; outline:none}
.search-row input:focus{border-color:var(--accent)}
.loading{text-align:center; color:var(--muted); padding:50px}

/* ---------- Discover ---------- */
.rec-section{padding:8px 24px 18px}
.rec-section h3{margin:14px 0 12px; font-size:18px}
.rec-row{display:flex; gap:16px; overflow-x:auto; padding-bottom:8px}
.rec-card{position:relative; flex:0 0 150px; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
.rec-card .cover{aspect-ratio:2/3; width:100%; object-fit:cover; background:#e9e3da}
.rec-card .cover.no{display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; text-align:center; padding:10px}
.rec-rating{position:absolute; top:6px; left:6px; background:rgba(0,0,0,.6); color:var(--gold); font-size:11px; padding:2px 6px; border-radius:10px}
.rec-info{padding:8px 10px 10px; display:flex; flex-direction:column; gap:4px; flex:1}
.rec-info .t{font-weight:700; font-size:13px; margin:0; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rec-info .a{font-size:11px; color:var(--muted); margin:0}
.rec-who{font-size:11px; color:var(--blue); margin-top:auto}
.btn-add-want{margin-top:6px; background:var(--bg); border:1px solid var(--line); color:var(--accent); font-weight:600; font-size:12px; padding:6px; border-radius:8px}
.btn-add-want:hover{background:var(--accent); color:#fff; border-color:var(--accent)}

/* ---------- Community ---------- */
.members-strip{display:flex; gap:12px; overflow-x:auto; padding:6px 24px 14px}
.member-chip{flex:0 0 auto; display:flex; gap:10px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 14px; cursor:pointer; box-shadow:var(--shadow)}
.member-chip:hover{border-color:var(--accent)}
.avatar{width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700}
.mname{font-weight:700; font-size:14px}
.mmeta{font-size:12px; color:var(--muted)}
.review-feed{padding:6px 24px 60px; display:flex; flex-direction:column; gap:12px}
.rf-item{display:flex; gap:14px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:var(--shadow); cursor:pointer}
.rf-item:hover{border-color:var(--accent)}
.rf-cover{width:56px; height:84px; object-fit:cover; border-radius:6px; background:#e9e3da; flex-shrink:0}
.rf-cover.no{display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--muted); text-align:center; padding:4px}
.rf-body{flex:1; min-width:0}
.rf-title{font-weight:700}
.rf-author{color:var(--muted); font-size:13px}
.rf-stars{color:var(--gold); font-size:14px; margin:4px 0}
.rf-by{color:var(--muted); font-size:12px; letter-spacing:0}
.rf-text{margin:6px 0 0; font-size:14px; line-height:1.5; color:var(--ink)}

/* Read-only view modal */
.vm-title{font-size:20px; font-weight:700}
.vm-author{color:var(--muted); margin:2px 0 8px}
.vm-by{color:var(--blue); font-size:13px; margin-top:6px}
.vm-review{line-height:1.65; white-space:pre-wrap; margin-top:14px}
.share-stars.small{font-size:18px; color:var(--gold)}
.member-books{display:flex; flex-direction:column; gap:14px; max-height:60vh; overflow:auto}
.mb-row{display:flex; gap:12px}
.mb-row img,.mb-no{width:50px; height:75px; object-fit:cover; border-radius:5px; background:#e9e3da; flex-shrink:0; font-size:9px; display:flex; align-items:center; justify-content:center; color:var(--muted); text-align:center; padding:3px}
.mb-t{font-weight:700}
.mb-a{color:var(--muted); font-size:13px}
.badge.inline{position:static; display:inline-block; margin-left:6px}

/* ---------- Stats charts ---------- */
.stats-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:0 24px 60px}
.panel{background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow)}
.panel h3{margin:0 0 16px}
.year-chart{display:flex; flex-direction:column; gap:12px}
.bar-row{display:flex; align-items:center; gap:12px}
.bar-label{width:54px; font-size:13px; font-weight:600; color:var(--ink); flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar-track{flex:1; height:22px; background:var(--bg); border-radius:11px; overflow:hidden}
.bar-fill{height:100%; background:linear-gradient(90deg,var(--accent),#d98a55); border-radius:11px; transition:width .5s}
.bar-fill.g{background:linear-gradient(90deg,var(--blue),#6b9fc9)}
.bar-val{width:70px; font-size:13px; color:var(--muted); text-align:right; flex-shrink:0}
.share-by{color:var(--muted); font-size:13px; margin-top:14px}

@media(max-width:760px){ .stats-grid{grid-template-columns:1fr} }
@media(max-width:560px){
  .form-grid{grid-template-columns:1fr}
  .topbar{flex-wrap:wrap}
  .mainnav{order:3; width:100%; overflow-x:auto}
}

/* =======================================================================
   BOOK-THEMED SKIN (v5) — warm parchment + leather, serif typography.
   Appended last so it re-skins the app without touching the layout above.
   ======================================================================= */
:root{
  --bg:#e6d8bd; --card:#fbf5e9; --ink:#3a2b1e; --muted:#8a7860;
  --accent:#9c4a2f; --accent-dark:#7c381f; --line:#e2d4ba; --gold:#c39a3f;
  --green:#5c7c4a; --blue:#4a6d8c;
  --paper:radial-gradient(circle at 28% 18%, rgba(255,255,255,.55), transparent 55%),
          linear-gradient(178deg,#fcf7ec 0%,#f4ead4 100%);
  --leather:linear-gradient(175deg,#5c3a22,#432a18);
}
body{
  font-family:'Lora',Georgia,'Times New Roman',serif;
  background-color:#dccdae;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.28), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(110,72,36,.10), transparent 45%);
}
h1,h2,h3,.brand,.auth-brand{font-family:'Playfair Display',Georgia,serif;}

/* Leather header with a gold rule */
.topbar{background:var(--leather); border-bottom:3px solid var(--gold);
  box-shadow:0 4px 14px rgba(40,25,10,.35);}
.brand{color:#f3e6cf;}
.brand span{background:none;-webkit-text-fill-color:var(--gold); color:var(--gold);}
.navbtn{color:#e8d8be;}
.navbtn:hover{background:rgba(255,255,255,.12); color:#fff;}
.navbtn.active{background:var(--gold); color:#3a2b1e;}
.whoami{color:#f2e7d2;}
.btn-ghost{color:#e8d8be; border-color:rgba(255,255,255,.28);}
.btn-ghost:hover{background:rgba(255,255,255,.12); color:#fff;}
.btn-primary{box-shadow:0 2px 8px rgba(120,56,31,.35);}

/* Parchment cards + serif headings */
.book,.panel,.rf-item,.member-chip,.stat{background:var(--paper);}
.view-head h1{font-size:30px; letter-spacing:.3px;}
.view-head.center{text-align:center;}
.auth-card{background:var(--paper);}
.auth-brand{font-size:28px;}
.book .t,.rf-title,.mb-t,.vm-title,.share-body h1{font-family:'Playfair Display',Georgia,serif;}

/* =========== The Discover flip-book =========== */
.discover-book-wrap{max-width:900px; margin:6px auto 40px; padding:0 20px;}
.flipbook{
  position:relative; display:flex; height:560px; margin:0 auto;
  border-radius:5px 12px 12px 5px;
  box-shadow:0 34px 64px -20px rgba(40,25,10,.55), 0 6px 14px rgba(40,25,10,.25);
}
/* Leather cover peeking out behind the pages */
.fb-cover-edge{position:absolute; left:-12px; top:-8px; bottom:-8px; width:34px;
  background:var(--leather); border-radius:8px 0 0 8px; z-index:0;
  box-shadow:inset -6px 0 10px rgba(0,0,0,.4);}
.flipbook::after{content:""; position:absolute; right:-8px; top:-6px; bottom:-6px; width:16px;
  background:var(--leather); border-radius:0 10px 10px 0; z-index:0;}

.fb-left,.fb-right{position:relative; flex:1 1 50%; background:var(--paper); overflow:hidden;}
.fb-left{border-radius:4px 0 0 4px; box-shadow:inset -22px 0 34px -22px rgba(60,40,15,.5);}
.fb-right{border-radius:0 8px 8px 0; box-shadow:inset 22px 0 34px -22px rgba(60,40,15,.5);
  perspective:2400px;}
.fb-spine{position:absolute; left:50%; top:0; bottom:0; width:3px; transform:translateX(-1.5px);
  background:linear-gradient(90deg,rgba(60,40,15,.35),rgba(60,40,15,.05),rgba(60,40,15,.35)); z-index:9;}

/* Decorative left page */
.fb-left-inner{height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:34px 30px;}
.fb-ribbon{font-size:22px; color:var(--gold);}
.fb-left-title{font-family:'Playfair Display',serif; font-weight:900; font-size:38px;
  line-height:1.02; color:var(--accent-dark); margin-top:10px;}
.fb-summary{margin-top:26px; width:100%; max-width:250px;}
.fb-sum-line{margin:12px 0; font-size:15px; color:var(--ink);}
.fb-sum-line span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--muted); margin-bottom:2px;}
.fb-sum-empty{color:var(--muted); font-style:italic; line-height:1.6;}
.fb-flourish{margin-top:28px; font-size:26px; color:var(--gold);}

/* Right page content */
.fb-page-content,.fb-turn-face{position:absolute; inset:0;}
.fb-page-inner{height:100%; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:30px 30px 26px; overflow:auto;}
.fb-chapter{font-family:'Playfair Display',serif; font-style:italic; font-size:13px;
  text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin-bottom:16px;}
.fb-book-cover{width:150px; height:225px; object-fit:cover; border-radius:3px;
  box-shadow:0 12px 24px rgba(40,25,10,.4);}
.fb-book-cover.no{display:flex; align-items:center; justify-content:center; text-align:center;
  padding:12px; color:#fff; font-family:'Playfair Display',serif; font-size:15px;
  background:linear-gradient(150deg,#9c4a2f,#5c3a22);}
.fb-book-title{font-family:'Playfair Display',serif; font-weight:700; font-size:24px;
  line-height:1.2; margin-top:18px; color:var(--ink);}
.fb-book-author{color:var(--muted); font-style:italic; margin-top:4px;}
.fb-stars{color:var(--gold); font-size:22px; letter-spacing:2px; margin-top:10px;}
.fb-who{color:var(--blue); font-size:14px; margin-top:8px;}
.fb-reason{font-style:italic; color:var(--ink); margin-top:12px; max-width:300px; line-height:1.5;}
.fb-add{margin-top:auto; background:var(--accent); color:#fff; border:none; font-family:'Lora',serif;
  font-weight:600; font-size:15px; padding:11px 22px; border-radius:26px; cursor:pointer;
  box-shadow:0 3px 10px rgba(120,56,31,.4);}
.fb-add:hover{background:var(--accent-dark);}
.fb-empty{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px; color:var(--muted);}
.fb-empty-mark{font-size:40px; color:var(--gold);}
.fb-empty h3{color:var(--ink); margin:10px 0 6px;}

/* The turning page */
.fb-turn{position:absolute; inset:0; transform-origin:left center; transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.42,.12,.22,1); z-index:8;}
.fb-turn-face{backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden;
  background:var(--paper); border-radius:0 8px 8px 0;}
.fb-front{transform:rotateY(0deg); box-shadow:inset 22px 0 34px -22px rgba(60,40,15,.5);}
.fb-back{transform:rotateY(180deg); box-shadow:inset 22px 0 34px -22px rgba(60,40,15,.5);}
.fb-turn.dir-next{transform:rotateY(0deg);}
.fb-turn.dir-next.go{transform:rotateY(-180deg);}
.fb-turn.dir-prev{transform:rotateY(-180deg);}
.fb-turn.dir-prev.go{transform:rotateY(0deg);}

/* Page-curl corner hint */
.fb-corner{position:absolute; right:0; bottom:0; width:54px; height:54px; cursor:pointer; z-index:7;
  background:linear-gradient(135deg,transparent 48%,rgba(90,58,34,.18) 50%,rgba(90,58,34,.28));
  border-radius:0 0 8px 0; transition:width .18s,height .18s;}
.fb-corner:hover{width:74px; height:74px;}

/* Controls */
.fb-controls{display:flex; align-items:center; justify-content:center; gap:22px; margin-top:26px;}
.fb-btn{font-family:'Playfair Display',serif; background:var(--leather); color:#f3e6cf;
  border:1px solid rgba(0,0,0,.2); padding:11px 22px; border-radius:26px; font-size:16px; cursor:pointer;
  box-shadow:0 3px 10px rgba(40,25,10,.3);}
.fb-btn:hover:not(:disabled){filter:brightness(1.12);}
.fb-btn:disabled{opacity:.3; cursor:default;}
.fb-num{font-style:italic; color:var(--muted); min-width:130px; text-align:center; font-size:15px;}

@media(max-width:680px){
  .flipbook{height:520px;}
  .fb-left{display:none;}
  .fb-right{border-radius:6px;}
  .flipbook::after{display:none;}
}

/* =======================================================================
   v6 — Series, bigger community profiles, more playful colours & flip-book
   ======================================================================= */
:root{
  --c-coral:#e2674f; --c-teal:#2f9e8f; --c-plum:#8e5aa8; --c-mustard:#d99a2b;
  --c-berry:#c6427e; --c-sky:#3f86c4;
}
/* Playful shelf badges */
.badge.want{background:linear-gradient(135deg,#e88a3c,#e2674f);}
.badge.reading{background:linear-gradient(135deg,#3f9dc4,#2f8f9e);}
.badge.read{background:linear-gradient(135deg,#63b05a,#4c8a5a);}

/* Colour-pop stat tiles (rotating top accent) */
.stat{border-top:4px solid var(--c-coral);}
.stats .stat:nth-child(2){border-top-color:var(--c-teal);}
.stats .stat:nth-child(3){border-top-color:var(--c-mustard);}
.stats .stat:nth-child(4){border-top-color:var(--c-plum);}
.stats .stat:nth-child(5){border-top-color:var(--c-berry);}
.stats .stat:nth-child(6){border-top-color:var(--c-sky);}
.stat .n{background:linear-gradient(135deg,var(--accent),var(--c-berry));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.book:hover{box-shadow:0 12px 26px rgba(198,66,126,.20);}

/* ---- Add Book/Series mode tabs ---- */
.add-mode-tabs{display:flex; gap:8px; background:var(--bg); padding:5px; border-radius:14px; margin-bottom:14px;}
.add-mode{flex:1; background:none; border:none; padding:10px; border-radius:10px; font-weight:700;
  font-family:'Playfair Display',serif; font-size:15px; color:var(--muted);}
.add-mode.active{background:#fff; color:var(--accent); box-shadow:var(--shadow);}

/* ---- Series search results (checkbox list) ---- */
.series-results{display:flex; flex-direction:column; gap:6px; margin:12px 0; max-height:300px; overflow:auto;}
.sr-check{cursor:pointer;}
.sr-check input{width:18px; height:18px; accent-color:var(--accent); flex-shrink:0;}
.series-add-bar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-top:1px solid var(--line); padding-top:12px;}
.series-count{color:var(--muted); font-size:14px; font-style:italic;}

/* ---- Series card on the shelf (boxed-set look) ---- */
.series-card .series-stack{position:relative;}
.series-card .series-stack > span{position:absolute; top:0; left:0; right:0; bottom:0; border-radius:0;
  background:linear-gradient(135deg,#b06a3d,#7c381f);}
.series-card .series-stack > span:nth-child(1){transform:translate(7px,-6px); filter:brightness(.8);}
.series-card .series-stack > span:nth-child(2){transform:translate(3px,-3px); filter:brightness(.9);}
.series-card .cover{position:relative; z-index:2;}
.series-badge{position:absolute; top:8px; right:8px; z-index:3; background:linear-gradient(135deg,var(--c-plum),var(--c-berry));
  color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.25);}
.series-card .fav-flag{top:34px;}

/* ---- Series review modal ---- */
.series-cover-stack{position:relative; width:110px; height:150px; flex-shrink:0;}
.series-cover-stack img,.series-cover-stack .sr-nocov{position:absolute; width:96px; height:144px; object-fit:cover;
  border-radius:6px; box-shadow:0 6px 14px rgba(40,25,10,.35);
  top:calc(var(--n) * 5px); left:calc(var(--n) * 8px); transform:rotate(calc(var(--n) * 3deg - 3deg));
  border:2px solid #fff;}
.series-cover-stack .sr-nocov{display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(150deg,var(--c-plum),var(--c-berry)); color:#fff; font-size:11px; padding:8px;}
.series-name-big{font-family:'Playfair Display',serif; font-weight:700; font-size:22px; color:var(--ink);}
.series-sub{color:var(--c-plum); font-weight:700; font-size:13px; margin:4px 0;}
.series-shelf-note{font-size:12px; color:var(--muted); font-style:italic;}
.series-books-box{margin:14px 0 4px; border:1px solid var(--line); border-radius:12px; padding:10px 14px;}
.series-books-box summary{cursor:pointer; font-weight:600; color:var(--accent);}
.series-books-list{margin-top:10px; display:flex; flex-direction:column; gap:8px; max-height:220px; overflow:auto;}
.sb-row{display:flex; align-items:center; gap:10px;}
.sb-n{width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-weight:700;}
.sb-row img,.sb-no{width:32px; height:48px; object-fit:cover; border-radius:4px; background:#e9e3da; flex-shrink:0;}
.sb-t{font-weight:600; font-size:14px;}
.sb-a{font-size:12px; color:var(--muted);}

/* ---- Community: bigger profile cards showcasing a cover ---- */
.members-strip{gap:16px; padding:10px 24px 20px;}
.member-card{flex:0 0 190px; background:var(--paper); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; cursor:pointer; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s;}
.member-card:hover{transform:translateY(-4px); box-shadow:0 12px 24px rgba(60,45,30,.18);}
.member-cover{width:100%; height:150px; object-fit:cover; display:block; background:#e9e3da;}
.member-cover.no{display:flex; align-items:center; justify-content:center; text-align:center; padding:14px;
  color:#fff; font-family:'Playfair Display',serif; background:linear-gradient(150deg,var(--c-sky),var(--c-plum));}
.member-info{padding:14px; text-align:center; position:relative;}
.avatar.big{width:52px; height:52px; font-size:22px; margin:-40px auto 8px; border:3px solid var(--paper);
  position:relative; z-index:2; box-shadow:0 3px 8px rgba(0,0,0,.25);}
.member-card:nth-child(3n+1) .avatar.big{background:var(--c-coral);}
.member-card:nth-child(3n+2) .avatar.big{background:var(--c-teal);}
.member-card:nth-child(3n+3) .avatar.big{background:var(--c-plum);}
.member-info .mname{font-family:'Playfair Display',serif; font-weight:700; font-size:17px;}
.member-info .mmeta{font-size:12px; color:var(--muted); margin-top:4px;}

/* Series flavour in the community feed */
.rf-item.is-series{border-left:4px solid var(--c-plum);}
.rf-series-tag{background:linear-gradient(135deg,var(--c-plum),var(--c-berry)); color:#fff; font-size:11px;
  font-weight:700; padding:2px 8px; border-radius:10px; white-space:nowrap;}
.vm-series-tag{display:inline-block; background:linear-gradient(135deg,var(--c-plum),var(--c-berry)); color:#fff;
  font-size:12px; font-weight:700; padding:3px 10px; border-radius:12px; margin-bottom:8px;}

/* Series on the public share page */
.share-series-tag{display:inline-block; background:linear-gradient(135deg,var(--c-plum),var(--c-berry)); color:#fff;
  font-size:13px; font-weight:700; padding:4px 12px; border-radius:14px; margin-bottom:10px;}
.share-series-list{margin:14px 0; padding-left:20px; color:var(--ink); line-height:1.7;}

/* ---- Flip-book: more interactive ---- */
.fb-page-content{cursor:pointer;}
.fb-left{cursor:pointer;}
.fb-corner{background:linear-gradient(135deg,transparent 46%,rgba(195,154,63,.35) 48%,rgba(124,56,31,.5));
  box-shadow:-3px -3px 8px rgba(0,0,0,.12) inset;}
.fb-corner::after{content:"❯"; position:absolute; right:8px; bottom:4px; color:#fff; font-size:13px; opacity:.85;}
.fb-corner:hover{width:82px; height:82px;}
.fb-btn{background:linear-gradient(135deg,#5c3a22,#432a18);}
.fb-btn:hover:not(:disabled){background:linear-gradient(135deg,var(--accent),#5c3a22);}

/* =======================================================================
   v8 — "I'm not a robot" check, recommended-by-age, book trivia game
   ======================================================================= */

/* ---- I'm not a robot ---- */
.robot-check{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; cursor:pointer; user-select:none;}
.robot-box{width:26px; height:26px; border:2px solid #b9b0a2; border-radius:5px; background:#fff;
  flex-shrink:0; position:relative; transition:border-color .15s;}
.robot-box.checking{border-color:var(--accent);}
.robot-box.checking::after{content:""; position:absolute; inset:3px; border:3px solid #ddd;
  border-top-color:var(--accent); border-radius:50%; animation:robotspin .5s linear infinite;}
@keyframes robotspin{to{transform:rotate(360deg);}}
.robot-box.checked{border-color:var(--green); background:var(--green);}
.robot-box.checked::after{content:"✓"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:17px; font-weight:900;}
.robot-label{flex:1; font-family:'Lora',serif; color:var(--ink); font-size:15px;}
.robot-logo{font-size:15px; opacity:.75;}

/* ---- Recommended by age ---- */
.age-section{max-width:1000px; margin:24px auto 60px; padding:26px 24px 0; border-top:2px dashed var(--line);}
.age-title{text-align:center; margin:6px 0; font-size:24px;}
.view-sub.center{text-align:center;}
.age-picker{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:18px 0 24px;}
.age-btn{display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--paper);
  border:2px solid var(--line); border-radius:16px; padding:12px 20px; font-family:'Playfair Display',serif;
  font-weight:700; font-size:16px; color:var(--ink); cursor:pointer; transition:transform .12s, border-color .12s;}
.age-btn span{font-family:'Lora',serif; font-weight:400; font-size:12px; color:var(--muted);}
.age-btn:hover{transform:translateY(-2px);}
.age-btn:nth-child(1).active{border-color:var(--c-coral);}
.age-btn:nth-child(2).active{border-color:var(--c-mustard);}
.age-btn:nth-child(3).active{border-color:var(--c-teal);}
.age-btn:nth-child(4).active{border-color:var(--c-berry);}
.age-btn:nth-child(5).active{border-color:var(--c-sky);}
.age-btn.active{box-shadow:0 6px 16px rgba(60,45,30,.14);}
.age-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:18px;}
.age-card{background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column;}
.age-card .cover{aspect-ratio:2/3; width:100%; object-fit:cover; background:#e9e3da;}
.age-card .cover.no{display:flex; align-items:center; justify-content:center; text-align:center; padding:10px; color:var(--muted); font-size:12px;}
.age-info{padding:10px; display:flex; flex-direction:column; gap:4px; flex:1;}
.age-info .t{font-family:'Playfair Display',serif; font-weight:700; font-size:14px; margin:0; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.age-info .a{font-size:12px; color:var(--muted); margin:0;}
.age-info .btn-add-want{margin-top:auto; background:var(--bg); border:1px solid var(--line); color:var(--accent);
  font-weight:600; font-size:12px; padding:7px; border-radius:8px; cursor:pointer;}
.age-info .btn-add-want:hover{background:var(--accent); color:#fff; border-color:var(--accent);}

/* ---- Book trivia game ---- */
.trivia-wrap{max-width:620px; margin:10px auto 60px; padding:0 20px;}
.trivia-card{background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:34px 30px;
  box-shadow:0 16px 40px -16px rgba(60,45,30,.4); text-align:center;}
.trivia-emoji{font-size:56px; line-height:1;}
.trivia-card h2{font-size:26px; margin:14px 0 8px;}
.trivia-best{color:var(--c-mustard); font-weight:700; margin-top:12px;}
.btn-primary.big{font-size:17px; padding:14px 30px; margin-top:18px;}
.trivia-topbar{display:flex; justify-content:space-between; align-items:center; font-family:'Playfair Display',serif;}
.trivia-progress{color:var(--muted); font-style:italic;}
.trivia-score{font-weight:700; color:var(--c-mustard); font-size:18px;}
.trivia-bar{height:8px; background:var(--bg); border-radius:5px; overflow:hidden; margin:12px 0 22px;}
.trivia-bar-fill{height:100%; background:linear-gradient(90deg,var(--accent),var(--c-berry)); border-radius:5px; transition:width .3s;}
.trivia-question{font-size:22px; line-height:1.35; margin:0 0 22px; text-align:left;}
.trivia-options{display:flex; flex-direction:column; gap:12px;}
.trivia-opt{text-align:left; background:#fff; border:2px solid var(--line); border-radius:14px; padding:14px 18px;
  font-family:'Lora',serif; font-size:16px; color:var(--ink); cursor:pointer; transition:border-color .12s, background .12s, transform .1s;}
.trivia-opt:hover:not(:disabled){border-color:var(--accent); transform:translateX(3px);}
.trivia-opt:disabled{cursor:default;}
.trivia-opt.right{border-color:var(--green); background:#e7f2e7; font-weight:600;}
.trivia-opt.wrong{border-color:#d06a6a; background:#f7e6e6;}
.trivia-feedback{margin-top:18px; font-weight:700; font-size:17px; font-family:'Playfair Display',serif;}
.trivia-feedback.good{color:var(--green);}
.trivia-feedback.bad{color:#c04a4a;}
#triviaNext{margin-top:18px;}
.trivia-final-score{font-family:'Playfair Display',serif; font-weight:900; font-size:46px;
  color:var(--accent); margin:6px 0;}

@media(max-width:560px){ .trivia-question{font-size:19px;} .age-picker{gap:8px;} }

/* =======================================================================
   v9 — colourful trivia answers + confetti celebration
   ======================================================================= */
.trivia-opt{display:flex; align-items:center; gap:14px;}
.opt-letter{width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-weight:800; color:#fff; flex-shrink:0; font-size:16px; transition:background .12s;}
.opt-text{flex:1;}
.trivia-opt.c0{border-color:var(--c-coral); background:#fdf1ec;}
.trivia-opt.c0 .opt-letter{background:var(--c-coral);}
.trivia-opt.c1{border-color:var(--c-teal); background:#eaf6f4;}
.trivia-opt.c1 .opt-letter{background:var(--c-teal);}
.trivia-opt.c2{border-color:var(--c-plum); background:#f4eef8;}
.trivia-opt.c2 .opt-letter{background:var(--c-plum);}
.trivia-opt.c3{border-color:var(--c-mustard); background:#fdf6e7;}
.trivia-opt.c3 .opt-letter{background:var(--c-mustard);}
.trivia-opt:hover:not(:disabled){transform:translateX(4px); filter:brightness(.98);}
/* answered states win over the colour classes */
.trivia-opt.right{border-color:var(--green) !important; background:#e3f1e3 !important; font-weight:700;}
.trivia-opt.right .opt-letter{background:var(--green) !important;}
.trivia-opt.wrong{border-color:#d06a6a !important; background:#f7e6e6 !important;}
.trivia-opt.wrong .opt-letter{background:#d06a6a !important;}

/* ---- Confetti ---- */
.confetti-layer{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:200;}
.confetti-piece{position:absolute; top:-24px; width:11px; height:15px; opacity:.95; will-change:transform;
  animation-name:confetti-fall; animation-timing-function:cubic-bezier(.3,.5,.6,1); animation-fill-mode:forwards;}
@keyframes confetti-fall{
  0%{transform:translateY(-24px) translateX(0) rotate(0deg);}
  100%{transform:translateY(106vh) translateX(var(--sway,0)) rotate(760deg);}
}