@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;1,7..72,400&family=Inter:wght@400;500;600&family=Hind+Siliguri:wght@400;500;600&family=Noto+Serif+Bengali:wght@400;500;600&display=swap');

/* Bangla text: force Hind Siliguri for UI, Noto Serif Bengali for content */
*:lang(bn), .bn { font-family: 'Hind Siliguri', 'Noto Serif Bengali', sans-serif !important; }

/* Ensure Bangla characters (U+0980-U+09FF) render correctly everywhere */
body, .book-title, .book-author, p, h1, h2, h3, .comment-row, #notes-textarea {
  font-family: var(--sans);
}

/* ============================================================
   Design tokens
   ============================================================ */
:root{
  --dusk-bg:#F5F2F7; --dusk-bg-deep:#EDE7F1;
  --ink:#2B2733; --ink-soft:#6B6577;
  --lilac:#A48FC2; --lilac-deep:#7C689F;
  --blush:#E9C6D2; --gold:#C9AE7C;
  --line:#E1DAE8; --white:#FFFFFF;
  --serif:'Literata','Noto Serif Bengali',Georgia,serif;
  --sans:'Inter','Hind Siliguri',-apple-system,BlinkMacSystemFont,sans-serif;
  --r-sm:6px; --r-md:14px; --r-lg:22px;
  --shadow-soft:0 12px 34px rgba(88,68,112,.10);
  --shadow-lift:0 20px 48px rgba(88,68,112,.16);
}

/* ============================================================
   Themes — Light (default) / Soft / Dark
   Only UI chrome changes. Book pages are always white.
   ============================================================ */
:root[data-theme="soft"]{
  --dusk-bg:#F7F1E6; --dusk-bg-deep:#EFE6D3;
  --ink:#3A2E22; --ink-soft:#7A6B58; --line:#E3D6BE; --white:#FFFBF3;
}
:root[data-theme="dark"]{
  --dusk-bg:#1C1922; --dusk-bg-deep:#262130;
  --ink:#EFEAF5; --ink-soft:#A79FB8;
  --lilac:#A48FC2; --lilac-deep:#C4B3E0;
  --blush:#4A3A47; --gold:#D8C7A1; --line:#362F42; --white:#241F2C;
  --shadow-soft:0 12px 34px rgba(0,0,0,.35);
  --shadow-lift:0 20px 48px rgba(0,0,0,.5);
}

/* ============================================================
   Base
   ============================================================ */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--dusk-bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
h1,h2,h3,.serif{ font-family:var(--serif); font-weight:500; letter-spacing:-.01em; }
h1{ font-size:clamp(2.1rem,4vw,3.4rem); line-height:1.12; margin:0 0 .5em; }
h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin:0 0 .6em; }
h3{ font-size:1.2rem; margin:0 0 .4em; }
p{ color:var(--ink-soft); max-width:62ch; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--lilac-deep); outline-offset:3px; border-radius:4px; }
@media(prefers-reduced-motion:reduce){ *{ animation-duration:.001ms!important; transition-duration:.001ms!important; } }

/* Dark mode text fixes */
:root[data-theme="dark"] body{ color:var(--ink); }
:root[data-theme="dark"] p{ color:var(--ink-soft); }
:root[data-theme="dark"] a{ color:var(--lilac-deep); }
:root[data-theme="dark"] .muted-link{ color:var(--ink-soft); }
:root[data-theme="dark"] .site-nav{ background:rgba(28,25,34,.92); }
:root[data-theme="dark"] .form-card{ background:var(--white); color:var(--ink); }
:root[data-theme="dark"] .admin-side,.admin-main{ background:var(--white); }
:root[data-theme="dark"] table.admin-table{ background:var(--white); }
:root[data-theme="dark"] .btn-primary{ background:var(--lilac); color:#1C1922; }
:root[data-theme="dark"] .btn-ghost{ border-color:var(--line); color:var(--ink); }
:root[data-theme="dark"] .btn-ghost:hover{ border-color:var(--lilac); }
:root[data-theme="dark"] .pill{ background:var(--dusk-bg-deep); color:var(--ink-soft); }
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] #notes-textarea,
:root[data-theme="dark"] #search-input{ background:var(--dusk-bg-deep); color:var(--ink); border-color:var(--line); }
:root[data-theme="dark"] .icon-btn{ background:var(--dusk-bg-deep); border-color:var(--line); color:var(--ink); }
:root[data-theme="dark"] .filter-tab,.category-chip{ background:var(--dusk-bg-deep); color:var(--ink-soft); border-color:var(--line); }
:root[data-theme="dark"] .comment-row{ border-color:var(--line); }

/* ============================================================
   Layout
   ============================================================ */
.container{ max-width:1120px; margin:0 auto; padding:0 28px; }
.container-narrow{ max-width:640px; margin:0 auto; padding:0 28px; }

/* ============================================================
   Nav
   ============================================================ */
.site-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(245,242,247,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-nav .row{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.25rem; }
.brand-mark{ width:26px; height:26px; border-radius:7px; background:linear-gradient(155deg,var(--lilac),var(--blush)); display:inline-block; flex-shrink:0; }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ font-size:.93rem; color:var(--ink-soft); transition:color .15s ease; }
.nav-links a:hover,.nav-links a.active{ color:var(--ink); }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.mobile-only{ display:none; }
.theme-switch{
  width:38px; height:38px; border-radius:999px; border:1px solid var(--line);
  background:var(--white); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1rem; color:var(--ink); flex-shrink:0;
}

/* ============================================================
   Buttons / Forms
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px; border:1px solid transparent;
  font-family:var(--sans); font-size:.93rem; font-weight:500; cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--ink); color:var(--white); }
.btn-primary:hover{ box-shadow:var(--shadow-soft); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-lilac{ background:var(--lilac); color:var(--white); }
.btn-lilac:hover{ background:var(--lilac-deep); }
.btn-danger{ background:transparent; color:#A5445A; border-color:#E7C3CB; }
.btn-danger:hover{ background:#FBEEF0; }
.btn-full{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.field{ margin-bottom:18px; text-align:left; }
.field label{ display:block; font-size:.85rem; color:var(--ink-soft); margin-bottom:6px; }
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--white);
  font-family:var(--sans); font-size:.96rem; color:var(--ink);
}
.field input:focus,.field textarea:focus{ border-color:var(--lilac); outline:none; }
.field-hint{ font-size:.8rem; color:var(--ink-soft); margin-top:6px; }
.form-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:40px; box-shadow:var(--shadow-soft); }
.pill{ display:inline-block; padding:4px 12px; border-radius:999px; font-size:.78rem; background:var(--dusk-bg-deep); color:var(--ink-soft); }
.pill-gold{ background:#F4ECDB; color:#8C6F2F; }

.premium-badge{ display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:999px; font-weight:600; font-size:.92rem; }
.premium-badge .badge-expiry{ font-weight:400; opacity:.8; font-size:.82rem; }
.premium-badge-trial{ background:#EFE9F7; color:#6A4E9B; }
.premium-badge-monthly{ background:#E3EEF9; color:#2C6FA8; }
.premium-badge-lifetime{ background:#F4ECDB; color:#8C6F2F; }
.premium-badge-expired{ background:#FBEEF0; color:#A5445A; }
.premium-badge-free{ background:var(--dusk-bg-deep); color:var(--ink-soft); }

/* ============================================================
   Hero
   ============================================================ */
.hero{ padding:70px 0 60px; overflow:hidden; }
.hero .row{ display:flex; align-items:center; gap:60px; }
.hero-copy{ flex:1 1 420px; }
.hero-copy p{ font-size:1.05rem; margin-bottom:30px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-stack{ flex:1 1 360px; position:relative; height:360px; }
.floating-cover{
  position:absolute; width:150px; height:210px; border-radius:var(--r-md);
  box-shadow:var(--shadow-lift); background-size:cover; background-position:center;
  animation:drift 7s ease-in-out infinite;
}
.floating-cover.c1{ left:30%; top:10px; z-index:3; animation-delay:0s; }
.floating-cover.c2{ left:5%; top:90px; z-index:2; transform:rotate(-9deg); animation-delay:1.2s; }
.floating-cover.c3{ left:55%; top:110px; z-index:1; transform:rotate(7deg); animation-delay:2.4s; }
.fc-title{ position:absolute; left:10px; right:10px; bottom:10px; font-family:var(--sans); font-size:.68rem; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); line-height:1.25; }
@keyframes drift{ 0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); } 50%{ transform:translateY(-14px) rotate(var(--rot,0deg)); } }

/* ============================================================
   Ad slots
   ============================================================ */
.ad-slot{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--dusk-bg-deep); padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.ad-top{ margin:0; border-radius:0; border-left:0; border-right:0; border-top:0; }
.ad-home{ margin:40px 0; }
.ad-badge{ font-size:.7rem; color:var(--ink-soft); background:var(--white); padding:3px 9px; border-radius:999px; border:1px solid var(--line); white-space:nowrap; }
.ad-badge-ghost{ background:transparent; }
.ad-text{ flex:1; text-align:center; font-size:.88rem; color:var(--ink); font-weight:500; }
.ad-text-lg{ font-size:.95rem; }
.ad-slot.ad-marquee{ overflow:hidden; white-space:nowrap; }
.ad-slot.ad-marquee .ad-text{ display:inline-block; animation:marquee 14s linear infinite; padding-left:100%; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

/* ============================================================
   Promo banner
   ============================================================ */
.promo-banner{ display:block; width:100%; border-radius:var(--r-lg); overflow:hidden; margin:20px 0; box-shadow:var(--shadow-soft); }
.promo-banner img{ width:100%; height:auto; display:block; }

/* ============================================================
   Book grid / shelf
   ============================================================ */
.section{ padding:56px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; gap:12px; }
.shelf-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:28px; }
.book-card{ cursor:pointer; text-decoration:none; }
.book-cover{
  aspect-ratio:3/4.3; border-radius:var(--r-md); background:linear-gradient(160deg,var(--lilac),var(--blush));
  background-size:cover; background-position:center;
  box-shadow:var(--shadow-soft); transition:transform .2s ease,box-shadow .2s ease; margin-bottom:12px;
}
.book-card:hover .book-cover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.book-title{ font-family:var(--serif); font-size:.98rem; margin:0 0 2px; color:var(--ink); }
.book-author{ font-size:.82rem; color:var(--ink-soft); }
.book-price{ font-size:.8rem; color:var(--gold); font-weight:600; margin-bottom:3px; }
.book-card.guest-locked{ position:relative; }
.book-card.guest-locked::after{
  content:"Log in to read"; position:absolute; inset:0; background:rgba(27,24,34,.55);
  color:#fff; font-size:.8rem; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-md); opacity:0; transition:opacity .2s ease;
}
.book-card.guest-locked:hover::after{ opacity:1; }

/* Scroll reveal */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease,transform .5s ease; }
.reveal.revealed{ opacity:1; transform:translateY(0); }

/* ============================================================
   Filters / Categories
   ============================================================ */
.filter-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.filter-tab{
  padding:7px 16px; border-radius:999px; border:1px solid var(--line); background:var(--white);
  color:var(--ink-soft); font-size:.85rem; cursor:pointer; transition:all .15s ease;
}
.filter-tab:hover{ border-color:var(--lilac); }
.filter-tab.filter-active{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.library-search{ display:flex; gap:10px; margin:18px 0 26px; flex-wrap:wrap; align-items:center; }
.library-search input{
  flex:1; min-width:220px; padding:12px 16px; border-radius:999px; border:1px solid var(--line);
  background:var(--white); color:var(--ink); font-family:var(--sans);
}
.genre-pills{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.category-chip{
  flex-shrink:0; padding:8px 16px; border-radius:999px; border:1px solid var(--line);
  background:var(--white); color:var(--ink-soft); font-size:.85rem; cursor:pointer; white-space:nowrap;
}
.category-chip.filter-active{ background:var(--ink); color:var(--white); border-color:var(--ink); }

/* ============================================================
   Reader shell layout
   ============================================================ */
.reader-shell{ min-height:100vh; display:flex; flex-direction:column; background:var(--dusk-bg); position:relative; }
.reader-body{ display:flex; flex:1; min-height:0; overflow:hidden; }
.reader-body .reader-stage{ flex:1; min-width:0; }

.reader-top{
  display:flex; align-items:center; justify-content:space-between; padding:10px 20px;
  border-bottom:1px solid var(--line); background:rgba(245,242,247,.9); flex-shrink:0; gap:10px;
}
:root[data-theme="dark"] .reader-top{ background:rgba(28,25,34,.95); border-color:var(--line); }
.reader-top .title{
  font-family:var(--serif); font-size:.95rem; text-align:center; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink);
}
.reader-tools{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

.icon-btn{
  width:38px; height:38px; border-radius:999px; border:1px solid var(--line); background:var(--white);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1rem;
  flex-shrink:0; color:var(--ink);
}
.icon-btn:hover{ border-color:var(--lilac); }
.icon-btn[disabled]{ opacity:.4; cursor:not-allowed; }

/* ============================================================
   Reader stage — ONLY this background changes with theme.
   The flipbook/book pages are ALWAYS white/normal.
   ============================================================ */
.reader-stage{
  display:flex; align-items:center; justify-content:center;
  perspective:2200px; padding:20px; overflow:auto;
  background:var(--dusk-bg); transition:background .3s ease;
}
:root[data-theme="soft"] .reader-stage{ background:#EFE6D3; }
:root[data-theme="dark"] .reader-stage{ background:#12101A; }

/* ============================================================
   Flipbook — NEVER inverted, NEVER filtered, ALWAYS light.
   ============================================================ */
#flipbook-wrap{
  position:relative; margin:0 auto;
  transform-origin:top center;
  color-scheme:light !important;
}
#flipbook-wrap,
#flipbook-wrap *{
  filter:none !important;
  -webkit-filter:none !important;
}

/* ============================================================
   Reader controls
   ============================================================ */
.reader-bottom{
  display:flex; align-items:center; justify-content:center; gap:20px; padding:16px;
  border-top:1px solid var(--line); background:var(--dusk-bg); flex-shrink:0;
}
:root[data-theme="dark"] .reader-bottom{ background:var(--dusk-bg); border-color:var(--line); }

.audio-bar{
  display:flex; align-items:center; gap:14px; padding:12px 20px; border-top:1px solid var(--line);
  background:var(--white); flex-shrink:0;
}
:root[data-theme="dark"] .audio-bar{ background:var(--dusk-bg-deep); border-color:var(--line); }
.audio-bar input[type=range]{ flex:1; accent-color:var(--lilac); }

/* Timer */
.focus-timer{
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--white); padding:6px 16px; border-radius:999px;
  font-size:.82rem; display:none; z-index:9999; pointer-events:none;
}
.reader-shell.timer-active .focus-timer{ display:block; }
.reader-shell:fullscreen .focus-timer{ display:block !important; top:12px; }

/* Timer modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(28,25,34,.55); z-index:100;
  display:flex; align-items:center; justify-content:center;
}
.modal-card{
  background:var(--white); border-radius:var(--r-lg); padding:32px; max-width:360px; text-align:center;
  box-shadow:var(--shadow-lift);
}

/* Fullscreen: ONLY the book is visible */
.reader-shell:fullscreen{ background:#000; }
.reader-shell:fullscreen .reader-top{ display:none !important; }
.reader-shell:fullscreen .ad-slot{ display:none !important; }
.reader-shell:fullscreen .reader-bottom{ display:none !important; }
.reader-shell:fullscreen .audio-bar{ display:none !important; }
.reader-shell:fullscreen .comments-section{ display:none !important; }
.reader-shell:fullscreen .notes-panel{ display:none !important; }
.reader-shell:fullscreen .toc-panel,.reader-shell:fullscreen .search-panel{ display:none !important; }
.reader-shell:fullscreen .reader-body{ height:100dvh; }
.reader-shell:fullscreen .reader-stage{ padding:0; background:#000; }
.reader-shell:fullscreen #flipbook-wrap{ max-width:100vw !important; max-height:100dvh !important; }
/* Timer always visible in fullscreen */
.reader-shell:fullscreen .focus-timer{ display:block !important; top:12px; }

/* Notes open: focus on reading + notes only */
.reader-shell.notes-open .ad-slot,
.reader-shell.notes-open .audio-bar,
.reader-shell.notes-open .comments-section{ display:none !important; }

/* ============================================================
   Notes panel
   ============================================================ */
.notes-panel{
  width:320px; flex-shrink:0; display:flex; position:relative;
  border-left:1px solid var(--line); background:var(--white);
}
:root[data-theme="dark"] .notes-panel{ background:var(--dusk-bg-deep); border-color:var(--line); }
.notes-resize-handle{
  position:absolute; left:-4px; top:0; bottom:0; width:8px; cursor:col-resize; z-index:5;
}
.notes-panel-inner{ flex:1; padding:16px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.notes-panel-inner h3{ margin:0; font-size:1rem; }
#notes-textarea{
  height:200px; resize:vertical; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px; font-family:var(--sans); font-size:.9rem; color:var(--ink);
  background:var(--dusk-bg); width:100%; min-height:120px; max-height:300px;
}
:root[data-theme="dark"] #notes-textarea{ background:var(--dusk-bg); color:var(--ink); }
.notes-status{ font-size:.72rem; color:var(--ink-soft); min-height:1em; }
.notes-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.notes-actions .btn{ padding:8px 12px; font-size:.8rem; }
.download-group{ position:relative; }
.download-dropdown{
  display:none; position:absolute; bottom:110%; left:0;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm);
  min-width:120px; box-shadow:var(--shadow-soft); z-index:10;
}
.download-dropdown .btn{ width:100%; border-radius:0; border:none; border-bottom:1px solid var(--line); text-align:left; justify-content:flex-start; }
.download-dropdown .btn:last-child{ border-bottom:none; }

/* ============================================================
   TOC / Search panels
   ============================================================ */
.toc-panel,.search-panel{
  position:absolute; top:56px; right:20px; width:320px; max-height:60vh;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-lift); z-index:30; display:flex; flex-direction:column;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
  border-bottom:1px solid var(--line);
}
.panel-close{ border:none; background:none; cursor:pointer; color:var(--ink-soft); font-size:1rem; }
.panel-body{ padding:12px 16px; overflow-y:auto; flex:1; }
.toc-item{ padding:8px 0; border-bottom:1px solid var(--line); cursor:pointer; font-size:.88rem; color:var(--ink); }
.toc-item:hover{ color:var(--lilac-deep); }
#search-input{
  width:100%; padding:10px 12px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--dusk-bg); color:var(--ink); font-family:var(--sans); margin-bottom:10px;
}
.search-result{ padding:8px 0; border-bottom:1px solid var(--line); cursor:pointer; font-size:.85rem; }
.search-result .snippet{ color:var(--ink-soft); }
.search-result:hover{ color:var(--lilac-deep); }

/* ============================================================
   Comments
   ============================================================ */
.comments-section{ border-top:1px solid var(--line); padding:34px 20px 60px; background:var(--dusk-bg-deep); }
.comments-section h3{ margin-bottom:14px; }
.comment-row{ padding:14px 0; border-bottom:1px solid var(--line); }
.comment-row:last-child{ border-bottom:none; }
.comment-head{ display:flex; align-items:center; justify-content:space-between; font-size:.9rem; }
.comment-actions{ display:flex; gap:14px; margin-top:6px; }
.comment-actions button{ border:none; background:none; cursor:pointer; font-size:.78rem; color:var(--ink-soft); }
.comment-actions button:hover{ color:var(--lilac-deep); }
.comment-actions button.voted{ color:var(--lilac-deep); font-weight:600; }

/* ============================================================
   Star rating
   ============================================================ */
.star-rating{ display:inline-flex; gap:3px; }
.star-rating button{ background:none; border:none; cursor:pointer; font-size:1.3rem; color:#D8D2E0; padding:0; line-height:1; }
.star-rating button.filled{ color:var(--gold); }
.rating-summary{ font-size:.85rem; color:var(--ink-soft); display:flex; align-items:center; gap:8px; margin:6px 0 16px; }

/* ============================================================
   Subscription / plan cards
   ============================================================ */
.plan-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin:30px 0; }
.plan-card{ padding:26px; }
.plan-card-gold{ border-color:var(--gold); }
.plan-price{ font-family:var(--serif); font-size:1.6rem; color:var(--ink); margin:6px 0; }
.plan-price span{ font-size:.9rem; color:var(--ink-soft); font-family:var(--sans); }
.contact-strip{ margin-top:28px; text-align:center; }
.contact-links{ display:flex; gap:22px; justify-content:center; font-size:.9rem; }
.contact-links a{ color:var(--ink-soft); }
.contact-links a:hover{ color:var(--ink); }

/* ============================================================
   Admin panel
   ============================================================ */
.admin-shell{ display:flex; min-height:100vh; }
.admin-side{ width:230px; border-right:1px solid var(--line); padding:28px 18px; background:var(--white); flex-shrink:0; }
.admin-side a{ display:block; padding:10px 12px; border-radius:var(--r-sm); font-size:.9rem; color:var(--ink-soft); margin-bottom:4px; }
.admin-side a.active,.admin-side a:hover{ background:var(--dusk-bg-deep); color:var(--ink); }
.admin-main{ flex:1; padding:34px 40px; overflow-y:auto; }
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:18px; margin-bottom:34px; }
.stat-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:20px; }
.stat-card .num{ font-family:var(--serif); font-size:1.8rem; }
.stat-card .label{ font-size:.8rem; color:var(--ink-soft); }
table.admin-table{ width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); }
table.admin-table th,table.admin-table td{ text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); font-size:.88rem; }
table.admin-table th{ color:var(--ink-soft); font-weight:500; background:var(--dusk-bg-deep); }
table.admin-table tr:last-child td{ border-bottom:none; }
#users-table select{ padding:6px 8px; border-radius:var(--r-sm); border:1px solid var(--line); font-size:.82rem; }
.dropzone{
  border:1.5px dashed var(--line); border-radius:var(--r-md); padding:46px; text-align:center;
  color:var(--ink-soft); background:var(--white); cursor:pointer;
}
.dropzone:hover{ border-color:var(--lilac); }

/* ============================================================
   Toast
   ============================================================ */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--white); padding:12px 20px; border-radius:999px;
  font-size:.88rem; opacity:0; pointer-events:none; transition:opacity .25s ease,transform .25s ease;
  z-index:9999;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }

/* ============================================================
   Misc
   ============================================================ */
.center-page{ min-height:80vh; display:flex; align-items:center; justify-content:center; padding:60px 20px; }
.muted-link{ color:var(--ink-soft); font-size:.88rem; }
.muted-link:hover{ color:var(--ink); }
footer{ border-top:1px solid var(--line); padding:40px 0; margin-top:60px; }
footer .row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; font-size:.85rem; color:var(--ink-soft); align-items:center; }
footer a{ color:var(--ink-soft); }
footer a:hover{ color:var(--ink); }

/* ============================================================
   Mobile responsive
   ============================================================ */
@media(max-width:760px){
  .mobile-only{ display:flex; }
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--dusk-bg); border-bottom:1px solid var(--line);
    flex-direction:column; padding:10px 28px 18px; gap:4px; z-index:39;
  }
  .site-nav.nav-open .nav-links{ display:flex; }
  .hero .row{ flex-direction:column; gap:30px; }
  .hero-stack{ height:220px; }
  .shelf-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .admin-side{ display:none; }
  .admin-main{ padding:20px 16px; }
  .notes-panel{ width:100%!important; border-left:none; border-top:1px solid var(--line); max-height:50vh; }
  .notes-resize-handle{ display:none; }
  .toc-panel,.search-panel{ left:12px; right:12px; width:auto; }
  #flipbook-wrap{ max-width:98vw!important; }
  .reader-top{ padding:8px 10px; gap:6px; }
  .reader-tools{
    gap:4px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* Never let the tools row itself be the thing that overflows the
       page — it scrolls internally instead, so every button stays
       reachable by a horizontal swipe even when there isn't room to
       show all of them at once. */
    max-width:56vw;
  }
  .reader-tools::-webkit-scrollbar{ display:none; }
  .reader-top .title{ font-size:.78rem; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .reader-stage{ padding:10px; }
  .reader-bottom{ padding:10px 12px; gap:14px; }
}
@media(max-width:480px){
  h1{ font-size:1.9rem; }
  .container{ padding:0 16px; }
  .btn{ padding:10px 16px; font-size:.88rem; }
  .icon-btn{ width:32px; height:32px; font-size:.78rem; }
  .shelf-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .form-card{ padding:24px; }
}
@media(max-width:560px){
  .reader-shell:fullscreen #flipbook-wrap{ width:100vw!important; height:100dvh!important; }
  .reader-shell:fullscreen .reader-stage{ padding:0; }
}
@media(pointer:coarse){
  .btn{ min-height:44px; }
  .icon-btn{ width:42px; height:42px; }
  .filter-tab{ min-height:40px; }
}

/* Reader controls on narrow phones: placed after the pointer:coarse
   block above on purpose so it wins the cascade there too (same
   selector specificity, later rule wins) — a touch phone under 480px
   would otherwise get the 42px pointer:coarse size instead of a size
   that actually leaves room for prev/next plus the whole tools row. */
@media(max-width:480px){
  .reader-top .icon-btn,
  .reader-bottom .icon-btn{ width:34px; height:34px; font-size:.85rem; }
  .reader-top .title{ max-width:64px; }
}