/* ============================================================
   SMARTLIB — index.css  v15  (logo image fix)
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Nunito:wght@300;400;600;700&display=swap');

:root {
  --bg:#0a0a0a; --bg2:#111; --bg-card:#181818; --bg-card-h:#202020;
  --glass:rgba(18,18,18,.80); --txt:#f0ece4; --txt2:#aaaaaa; --txt3:#555;
  --gold:#e8c96d; --teal:#5ec4b6; --rose:#e87d8a;
  --glow-gold:rgba(232,201,109,.28); --glow-teal:rgba(94,196,182,.28);
  --border:rgba(255,255,255,.08); --border-h:rgba(232,201,109,.40);
  --shadow:0 8px 40px rgba(0,0,0,.70);
  --nav-bg:rgba(10,10,10,.96);
  --tag-bg:rgba(255,255,255,.07); --tag-border:rgba(255,255,255,.15); --tag-col:#999;
  --scroll-thumb:#2a2a2a;
  --nav-h:62px;
}
body.light-mode {
  --bg:#f2f2f2; --bg2:#e5e5e5; --bg-card:#fff; --bg-card-h:#f8f8f8;
  --glass:rgba(255,255,255,.90); --txt:#111; --txt2:#444; --txt3:#888;
  --gold:#b8860b; --teal:#1a7a6a; --rose:#b84060;
  --glow-gold:rgba(184,134,11,.15); --glow-teal:rgba(26,122,106,.15);
  --border:rgba(0,0,0,.09); --border-h:rgba(0,0,0,.25);
  --shadow:0 4px 24px rgba(0,0,0,.10);
  --nav-bg:rgba(242,242,242,.97);
  --tag-bg:rgba(0,0,0,.05); --tag-border:rgba(0,0,0,.13); --tag-col:#666;
  --scroll-thumb:#ccc;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--txt);line-height:1.6;overflow-x:hidden;transition:background .45s,color .45s}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:3px}

#particles-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.5}
body.light-mode #particles-canvas{opacity:.05}

/* ══ NAV ══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--nav-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 4px 24px rgba(0,0,0,.4)}
.nav-top-row{height:var(--nav-h);padding:0 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-logo{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.nav-logo-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--teal));display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 2px 10px var(--glow-gold)}
.nav-logo-text{font-family:'Playfair Display',serif;font-size:1.25rem;font-weight:700;color:var(--txt);letter-spacing:.02em}
.nav-logo-text span{color:var(--gold)}

/* ── Logo image (replaces icon + text) ── */
.nav-logo-img{
  width: 130px !important;
  height: 40px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  object-position: center center !important;
  flex-shrink: 0 !important;
  display: block !important;
  max-width: none !important;
}
.footer-brand .nav-logo-img{
  width: 130px !important;
  height: 40px !important;
  border-radius: 8px !important;
}

.nav-links{display:flex;align-items:center;gap:.2rem;list-style:none}
.nav-links a{text-decoration:none;color:var(--txt2);font-size:.875rem;font-weight:600;padding:.4rem .8rem;border-radius:8px;transition:all .2s}
.nav-links a:hover,.nav-links a.active{color:var(--txt);background:var(--border)}
.nav-right{display:flex;align-items:center;gap:.75rem}
.nav-search{display:flex;align-items:center;gap:.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:24px;padding:.4rem 1rem;width:210px;transition:all .3s}
.nav-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--glow-gold);width:270px}
.nav-search svg{color:var(--txt3);flex-shrink:0;width:15px;height:15px}
.nav-search input{background:none;border:none;outline:none;color:var(--txt);font-family:'Nunito',sans-serif;font-size:.85rem;width:100%}
.nav-search input::placeholder{color:var(--txt3)}
.btn-mode-toggle{position:relative;width:70px;height:36px;background:var(--bg-card);border:1.5px solid var(--border);border-radius:36px;cursor:pointer;padding:0;outline:none;transition:background .35s,border-color .35s,box-shadow .35s;flex-shrink:0}
.btn-mode-toggle:hover{border-color:var(--gold);box-shadow:0 0 14px var(--glow-gold)}
.toggle-svg-off,.toggle-svg-on{position:absolute;top:50%;transform:translateY(-50%);width:16px;height:16px;pointer-events:none;transition:opacity .3s}
.toggle-svg-off{left:9px;opacity:.35}.toggle-svg-on{right:9px;opacity:.9}
body.light-mode .toggle-svg-off{opacity:.9}body.light-mode .toggle-svg-on{opacity:.3}
.toggle-knob{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.55);transition:transform .38s cubic-bezier(.34,1.56,.64,1),background .35s;pointer-events:none;display:flex;align-items:center;justify-content:center}
body.light-mode .toggle-knob{transform:translateX(34px);background:#111}
.btn-signin{background:linear-gradient(135deg,var(--gold),#c9a84c);color:#1a1200;font-family:'Nunito',sans-serif;font-weight:700;font-size:.85rem;padding:.45rem 1.1rem;border:none;border-radius:20px;cursor:pointer;transition:all .2s;box-shadow:0 2px 10px var(--glow-gold)}
.btn-signin:hover{transform:translateY(-1px);box-shadow:0 4px 18px var(--glow-gold)}
body.light-mode .btn-signin{background:#111;color:#fff;box-shadow:none}

/* ── Profile dropdown ── */
.nav-profile{position:relative;display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.25rem .5rem;border-radius:10px;transition:background .2s}
.nav-profile:hover{background:var(--border)}
.nav-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--teal));display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;color:#0a0a0a;border:2px solid transparent;transition:border-color .2s;flex-shrink:0;overflow:hidden}
.nav-profile:hover .nav-avatar{border-color:var(--gold)}
.nav-profile-name{font-size:.82rem;font-weight:700;color:var(--txt);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-profile-chevron{width:13px;height:13px;color:var(--txt3);transition:transform .25s}
.nav-profile.open .nav-profile-chevron{transform:rotate(180deg)}

.profile-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;width:215px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  padding:.4rem;box-shadow:0 16px 48px rgba(0,0,0,.7);
  opacity:0;transform:translateY(-6px) scale(.97);pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:1100;
}
.nav-profile.open .profile-dropdown{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.profile-dropdown-header{padding:.7rem .9rem .55rem;border-bottom:1px solid var(--border);margin-bottom:.35rem}
.pd-name{font-family:'Playfair Display',serif;font-size:.9rem;font-weight:700;color:var(--txt)}
.pd-email{font-size:.7rem;color:var(--txt3);margin-top:.1rem}
.pd-link{display:flex;align-items:center;gap:.6rem;padding:.5rem .8rem;border-radius:7px;text-decoration:none;color:var(--txt2);font-size:.82rem;font-weight:600;transition:background .15s,color .15s;cursor:pointer;border:none;background:none;width:100%;text-align:left;font-family:'Nunito',sans-serif}
.pd-link:hover{background:var(--bg-card-h);color:var(--txt)}
.pd-link svg{width:14px;height:14px;flex-shrink:0;color:var(--txt3)}
.pd-link:hover svg{color:var(--gold)}
.pd-link.pd-active{color:var(--gold);}
.pd-link.pd-active svg{color:var(--gold);}
.pd-divider{height:1px;background:var(--border);margin:.35rem 0}
.pd-signout{color:var(--rose)!important}
.pd-signout:hover{background:rgba(232,125,138,.08)!important}
.pd-signout svg{color:var(--rose)!important}

.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.nav-hamburger span{width:22px;height:2px;background:var(--txt);border-radius:2px;display:block}
.mobile-nav{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:var(--nav-bg);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:1rem 1.5rem 1.5rem;z-index:999;flex-direction:column;gap:.5rem;opacity:0;transform:translateY(-8px);transition:all .3s}
.mobile-nav.open{display:flex;opacity:1;transform:translateY(0)}
.mobile-nav a{text-decoration:none;color:var(--txt2);font-weight:600;font-size:1rem;padding:.6rem 0;border-bottom:1px solid var(--border)}
.mobile-nav a:last-child{border:none}

/* ══ GENRE DROPDOWN ══ */
.nav-genre-item{position:static;list-style:none}
.nav-genre-trigger{display:flex;align-items:center;gap:.3rem;background:none;border:none;cursor:pointer;color:var(--txt2);font-family:'Nunito',sans-serif;font-size:.875rem;font-weight:700;padding:.4rem .8rem;border-radius:8px;transition:all .2s;letter-spacing:.02em}
.nav-genre-trigger svg{width:13px;height:13px;transition:transform .25s ease}
.nav-genre-trigger:hover{color:var(--txt);background:var(--border)}
.nav-genre-trigger[aria-expanded="true"]{color:var(--txt);background:var(--border)}
.nav-genre-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.genre-dropdown-panel{position:fixed;top:var(--nav-h);left:0;right:0;z-index:999;background:var(--nav-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:0 12px 40px rgba(0,0,0,.5);max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1);pointer-events:none}
.genre-dropdown-panel.open{max-height:420px;pointer-events:auto}
.genre-dropdown-inner{padding:1.8rem 4vw 2rem}
.genre-dropdown-label{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);margin-bottom:1rem}
.genre-dropdown-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.55rem}
.genre-dp-pill{display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;text-decoration:none;color:var(--txt2);font-family:'Nunito',sans-serif;font-size:.84rem;font-weight:600;transition:all .18s;cursor:pointer}
.genre-dp-pill span{font-size:1.1rem;flex-shrink:0}
.genre-dp-pill:hover{background:var(--bg-card-h);border-color:var(--gold);color:var(--txt);transform:translateY(-1px)}
.genre-dp-pill.active{background:rgba(232,201,109,.12);border-color:var(--gold);color:var(--gold);font-weight:700}
body.light-mode .genre-dp-pill{background:#f8f8f8}
body.light-mode .genre-dp-pill:hover{background:#efefef;border-color:#111;color:#111}
body.light-mode .genre-dp-pill.active{background:rgba(0,0,0,.06);border-color:#111;color:#111}
.genre-overlay{display:none;position:fixed;inset:0;z-index:998}
.genre-overlay.open{display:block}

/* ══ HERO ══ */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding-top:var(--nav-h)}
.hero-bg{position:absolute;inset:0;z-index:1;background:var(--bg);transition:background .45s}
body.light-mode .hero-bg{background:url('/image/light.jpg') center center / cover no-repeat;}
body.light-mode .hero-bg::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.38);}
body.light-mode .hero-rays,
body.light-mode .hero-sparkles,
body.light-mode .hero-dust,
body.light-mode .hero-story-lines{display:none;}
body.light-mode .hero{background:transparent;}
.hero-clouds{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.cloud{position:absolute;border-radius:50%;filter:blur(70px);opacity:.10;animation:cloudDrift linear infinite}
body.light-mode .cloud{opacity:.04}
.cloud:nth-child(1){width:500px;height:220px;background:radial-gradient(ellipse,rgba(232,201,109,.6),transparent);top:10%;left:-100px;animation-duration:38s}
.cloud:nth-child(2){width:420px;height:190px;background:radial-gradient(ellipse,rgba(94,196,182,.5),transparent);top:35%;right:-80px;animation-duration:46s;animation-delay:-12s}
.cloud:nth-child(3){width:580px;height:240px;background:radial-gradient(ellipse,rgba(232,201,109,.4),transparent);bottom:18%;left:8%;animation-duration:42s;animation-delay:-20s}
.cloud:nth-child(4){width:350px;height:160px;background:radial-gradient(ellipse,rgba(94,196,182,.4),transparent);top:55%;right:15%;animation-duration:52s;animation-delay:-6s}
@keyframes cloudDrift{0%{transform:translateX(-40px) translateY(0)}50%{transform:translateX(40px) translateY(-25px)}100%{transform:translateX(-40px) translateY(0)}}
.hero-content{position:relative;z-index:10;text-align:center;padding:2rem;max-width:920px;animation:heroReveal 1.1s ease both}
@keyframes heroReveal{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:20px;padding:.35rem 1rem;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem;animation:heroReveal 1s ease .15s both}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:pulseDot 2s ease infinite}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}
.hero-title{font-family:'Playfair Display',serif;font-size:clamp(2.8rem,8vw,6rem);font-weight:900;line-height:1.05;letter-spacing:-.02em;margin-bottom:1rem;animation:heroReveal 1s ease .25s both}
.hero-title .line1{display:block;color:var(--txt)}
.hero-title .line2{display:block;background:linear-gradient(135deg,var(--gold),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
body.light-mode .hero-title .line2{background:none;-webkit-background-clip:unset;-webkit-text-fill-color:var(--txt);background-clip:unset}
.hero-subtitle{font-family:'Crimson Pro',serif;font-style:italic;font-size:clamp(1rem,2.5vw,1.35rem);color:var(--txt2);line-height:1.7;max-width:560px;margin:0 auto 2.5rem;animation:heroReveal 1s ease .35s both}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;animation:heroReveal 1s ease .45s both}
.btn-primary{background:linear-gradient(135deg,var(--gold),#c9a84c);color:#1a1200;font-family:'Nunito',sans-serif;font-weight:800;font-size:.95rem;padding:.75rem 2rem;border:none;border-radius:50px;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .3s;box-shadow:0 4px 20px var(--glow-gold)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--glow-gold)}
body.light-mode .btn-primary{background:#111;color:#fff;box-shadow:none}
.btn-secondary{background:var(--glass);backdrop-filter:blur(10px);color:var(--txt);font-family:'Nunito',sans-serif;font-weight:700;font-size:.95rem;padding:.75rem 2rem;border:1px solid var(--border);border-radius:50px;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .3s}
.btn-secondary:hover{border-color:var(--teal);color:var(--teal);box-shadow:0 4px 20px var(--glow-teal)}
.hero-stats{display:flex;align-items:center;justify-content:center;gap:2.5rem;margin-top:3rem;flex-wrap:wrap;animation:heroReveal 1s ease .55s both}
.stat{text-align:center}
.stat-num{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:900;color:var(--gold);display:block;line-height:1}
.stat-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);display:block;margin-top:.2rem}
.stat-divider{width:1px;height:36px;background:var(--border)}
.hero-scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--txt3);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;animation:bounceDown 2.2s ease infinite}
@keyframes bounceDown{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}
.scroll-line{width:1px;height:28px;background:linear-gradient(to bottom,var(--gold),transparent)}

/* ══ SECTION COMMON ══ */
section{position:relative;z-index:10}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:1rem;padding:0 4vw;gap:1rem}
.section-title{font-family:'Playfair Display',serif;font-size:clamp(1.3rem,3vw,1.9rem);font-weight:700;color:var(--txt);display:flex;align-items:center;gap:.5rem}
.section-title-icon{font-size:1.1em}
.section-badge{background:var(--tag-bg);border:1px solid var(--tag-border);color:var(--gold);font-size:.68rem;font-weight:700;padding:.2rem .6rem;border-radius:10px;letter-spacing:.1em;text-transform:uppercase;margin-left:.5rem}
.see-all{font-family:'Nunito',sans-serif;font-size:.85rem;font-weight:700;color:var(--gold);text-decoration:none;letter-spacing:.05em;white-space:nowrap;transition:color .2s}
.see-all:hover{color:var(--txt)}
body.light-mode .see-all{color:var(--txt2)}

/* ══ FEATURED ══ */
.featured-section{padding:2.5rem 4vw 0}
.featured-banner{position:relative;border-radius:24px;overflow:hidden;min-height:420px;display:flex;align-items:flex-end;cursor:pointer;box-shadow:0 16px 60px rgba(0,0,0,.55);transition:transform .4s,box-shadow .4s}
.featured-banner:hover{transform:scale(1.005);box-shadow:0 24px 80px rgba(0,0,0,.65)}
.featured-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0a0a0a 0%,#0d1a1a 50%,#0a0a0a 100%)}
.featured-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.25;filter:blur(2px)}
.featured-art{position:absolute;inset:0;overflow:hidden}
.featured-art::before{content:'';position:absolute;right:-50px;top:-50px;width:500px;height:500px;background:radial-gradient(ellipse,rgba(94,196,182,.18) 0%,transparent 70%);border-radius:50%;animation:orb1 8s ease infinite}
.featured-art::after{content:'';position:absolute;left:30%;bottom:-100px;width:400px;height:400px;background:radial-gradient(ellipse,rgba(232,201,109,.12) 0%,transparent 70%);border-radius:50%;animation:orb2 10s ease infinite}
@keyframes orb1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-28px,18px) scale(1.08)}}
@keyframes orb2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18px,-14px) scale(1.05)}}
.featured-books-visual{position:absolute;right:5%;top:50%;transform:translateY(-50%);display:flex;gap:1rem;align-items:flex-end;z-index:2}
.book-spine{border-radius:4px 8px 8px 4px;box-shadow:-4px 4px 16px rgba(0,0,0,.5);transition:transform .3s}
.book-spine:hover{transform:translateY(-14px) rotate(-3deg)!important}
.book-spine.b1{width:55px;height:200px;background:linear-gradient(175deg,#1a4a3a,#0d2a20);transform:rotate(-2deg)}
.book-spine.b2{width:60px;height:240px;background:linear-gradient(175deg,#1a3a2a,#0a2018)}
.book-spine.b3{width:50px;height:210px;background:linear-gradient(175deg,#7a2a2a,#4a1010);transform:rotate(2deg)}
.book-spine.b4{width:58px;height:190px;background:linear-gradient(175deg,#8b7a30,#4a3a10);transform:rotate(-1deg)}
.book-spine.b5{width:52px;height:225px;background:linear-gradient(175deg,#1a3a5a,#0d1f3a);transform:rotate(1deg)}
.featured-gradient{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.98) 0%,rgba(10,10,10,.75) 45%,rgba(10,10,10,.05) 100%)}
body.light-mode .featured-gradient{background:linear-gradient(90deg,rgba(242,242,242,.98) 0%,rgba(242,242,242,.8) 45%,rgba(242,242,242,.05) 100%)}
.featured-info{position:relative;z-index:5;padding:2.5rem 3rem 3rem;max-width:520px}
.featured-label{font-size:.68rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--rose);margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem}
.featured-label::before{content:'';display:inline-block;width:18px;height:2px;background:var(--rose);border-radius:1px}
.featured-novel-title{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;line-height:1.1;margin-bottom:.75rem;color:var(--txt)}
.featured-novel-title em{font-style:italic;color:var(--gold)}
.featured-meta{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.rating{display:flex;align-items:center;gap:.25rem;color:var(--gold);font-size:.85rem;font-weight:700}
.rating svg{width:14px;height:14px}
.meta-dot{width:3px;height:3px;border-radius:50%;background:var(--txt3)}
.genre-tag{background:var(--tag-bg);border:1px solid var(--tag-border);color:var(--tag-col);font-size:.7rem;font-weight:700;padding:.2rem .6rem;border-radius:8px}
.featured-desc{font-family:'Crimson Pro',serif;font-size:1rem;color:var(--txt2);line-height:1.7;margin-bottom:1.5rem}
.featured-actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* ══ BOOK ROW ══ */
.content-section{padding:2.5rem 0 0}
.content-section .section-header{margin-bottom:.75rem}
.row-wrapper{padding:0 4vw;overflow-y:visible;overflow-x:visible}
.book-row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;gap:14px;overflow-x:scroll;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;cursor:grab;padding:10px 60px 28px 2px;scroll-snap-type:x mandatory;scroll-behavior:smooth}
.book-row:active{cursor:grabbing}
.book-row::-webkit-scrollbar{display:none}
.book-card{flex:0 0 calc((92vw - 8vw - 56px) / 5.2);min-width:120px;max-width:210px;cursor:pointer;scroll-snap-align:start;transition:transform .28s cubic-bezier(.25,.46,.45,.94);position:relative}
.book-card:hover{transform:translateY(-8px)}
.book-cover{position:relative;width:100%;aspect-ratio:2/3;border-radius:10px;overflow:hidden}
.book-cover img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block;transition:transform .3s}
.book-card:hover .book-cover img{transform:scale(1.04)}
.cover-art{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:.6rem .5rem;position:relative;border-radius:10px}
.cover-art::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.68) 0%,rgba(0,0,0,.05) 55%,transparent 100%);z-index:1;border-radius:10px}
.cover-icon{position:absolute;top:18%;left:50%;transform:translateX(-50%);font-size:2.2rem;z-index:2}
.cover-title{font-family:'Playfair Display',serif;font-size:.65rem;font-weight:700;color:rgba(255,255,255,.95);line-height:1.3;text-align:center;position:relative;z-index:3;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.cover-author{font-size:.54rem;color:rgba(255,255,255,.55);margin-top:.15rem;position:relative;z-index:3;text-align:center}
body.light-mode .cover-art::after{background:linear-gradient(to top,rgba(0,0,0,.12),transparent 60%)}
body.light-mode .cover-title{color:#111;text-shadow:none}
body.light-mode .cover-author{color:#555}
.source-badge{position:absolute;top:5px;right:5px;z-index:10;background:rgba(0,0,0,.55);color:#fff;font-size:.45rem;font-weight:800;padding:2px 4px;border-radius:3px;letter-spacing:.05em;text-transform:uppercase;backdrop-filter:blur(4px)}
.top-badge{position:absolute;top:0;left:0;z-index:10;background:#e50914;color:#fff;border-radius:10px 0 7px 0;padding:4px 7px 3px;display:flex;flex-direction:column;align-items:center;line-height:1;min-width:30px}
.top-label{font-family:'Nunito',sans-serif;font-size:.46rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.top-num{font-family:'Playfair Display',serif;font-size:.82rem;font-weight:900}
.card-dl-btn{position:absolute;bottom:6px;right:6px;z-index:10;background:var(--gold);color:#1a1200;border:none;border-radius:50%;width:28px;height:28px;font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.4);opacity:0;transition:opacity .2s}
.book-card:hover .card-dl-btn{opacity:1}
.card-info{padding:.55rem .05rem 0}
.card-title{font-family:'Nunito',sans-serif;font-size:.78rem;font-weight:700;color:var(--txt);line-height:1.3;margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta{display:flex;align-items:center;gap:.2rem;font-size:.67rem;color:var(--txt2);white-space:nowrap;overflow:hidden}
.card-star{color:#f5c518;font-weight:700;font-size:.67rem}
.card-dot{color:var(--txt3);font-size:.55rem}
.card-type{color:var(--txt3);overflow:hidden;text-overflow:ellipsis}
.cover-c1{background:linear-gradient(160deg,#3d0a0a,#8a1a1a,#c84040)}
.cover-c2{background:linear-gradient(160deg,#0f3d2d,#1a7a5e,#2ee8b0)}
.cover-c3{background:linear-gradient(160deg,#5e1a0f,#a03f2f,#e8844a)}
.cover-c4{background:linear-gradient(160deg,#0f2a3d,#1a5a7a,#40a0c8)}
.cover-c5{background:linear-gradient(160deg,#3d2d0f,#7a5e1a,#e8c86a)}
.cover-c6{background:linear-gradient(160deg,#0f2d4a,#1a5e7a,#40c0e0)}
.cover-c7{background:linear-gradient(160deg,#2a0f0f,#6a1a1a,#c83030)}
.cover-c8{background:linear-gradient(160deg,#1a3d0f,#3a7a1a,#80e040)}
.cover-c9{background:linear-gradient(160deg,#2d1a0f,#6e3a18,#c88040)}
.cover-c10{background:linear-gradient(160deg,#0a1a2a,#1a3a5a,#2a6a9a)}
.cover-c11{background:linear-gradient(160deg,#3d0f1a,#8a1a2d,#e04060)}
.cover-c12{background:linear-gradient(160deg,#1a3d2d,#2a7a50,#40e890)}
body.light-mode [class*="cover-c"]{background:linear-gradient(160deg,#ddd,#eee)}

/* ══ CONTINUE READING ══ */
.shelf-section{padding:2rem 0 1rem}
.shelf-section .section-header{padding:0 4vw;margin-bottom:1.2rem}
.shelf-row{display:flex;gap:1rem;overflow-x:auto;padding:1rem 4vw 1.5rem;scrollbar-width:none}
.shelf-row::-webkit-scrollbar{display:none}
.shelf-card{flex:0 0 auto;width:310px;border-radius:14px;background:var(--bg-card);border:1px solid var(--border);padding:1.2rem;display:flex;gap:1rem;cursor:pointer;transition:all .25s;position:relative;overflow:hidden}
.shelf-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--teal));opacity:0;transition:opacity .3s}
.shelf-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--border-h)}
.shelf-card:hover::before{opacity:1}
.shelf-cover{width:60px;height:90px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.shelf-details{flex:1;min-width:0}
.shelf-title{font-family:'Playfair Display',serif;font-size:.92rem;font-weight:700;color:var(--txt);line-height:1.3;margin-bottom:.25rem}
.shelf-author{font-size:.72rem;color:var(--txt3);margin-bottom:.5rem}
.shelf-progress-text{font-size:.68rem;color:var(--txt3);margin-bottom:.25rem;display:flex;justify-content:space-between}
.shelf-progress-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.shelf-progress-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));border-radius:2px}
.shelf-continue{font-size:.7rem;font-weight:700;color:var(--gold);margin-top:.4rem}
body.light-mode .shelf-continue{color:var(--txt2)}
.shelf-empty{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 4vw;color:var(--txt3);font-size:.9rem;text-align:center}
.shelf-empty span{font-size:2rem}

/* ══ POMODORO ══ */
.pomodoro-section{padding:1rem 4vw 1.5rem}
.pomodoro-banner{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:2rem 2.5rem;display:flex;align-items:center;gap:2rem;cursor:pointer;transition:all .3s}
.pomodoro-banner:hover{border-color:var(--teal);box-shadow:0 8px 32px var(--glow-teal)}
.pomodoro-icon{font-size:2.8rem;flex-shrink:0;animation:pomFloat 3s ease infinite}
@keyframes pomFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.pomodoro-text h3{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:700;color:var(--txt);margin-bottom:.3rem}
.pomodoro-text p{font-size:.875rem;color:var(--txt2);line-height:1.5}
.pomodoro-cta{margin-left:auto;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}
.pomodoro-timer-display{font-family:'Playfair Display',serif;font-size:2.5rem;font-weight:900;color:var(--teal);letter-spacing:.05em}
.pomodoro-start-btn{font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:700;color:var(--teal);opacity:.8;transition:opacity .2s}
.pomodoro-banner:hover .pomodoro-start-btn{opacity:1}
body.light-mode .pomodoro-timer-display{color:var(--txt)}

/* ══ CTA ══ */
.cta-section{padding:3rem 4vw}
.cta-box{background:var(--bg-card);border:1px solid var(--border);border-radius:24px;padding:3rem 2rem;max-width:560px;margin:0 auto;text-align:center;position:relative;overflow:hidden}
.cta-box::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(232,201,109,.06),transparent 70%);pointer-events:none}
body.light-mode .cta-box::before{background:none}
.cta-box h2{font-family:'Playfair Display',serif;font-size:clamp(1.4rem,3vw,2rem);font-weight:700;color:var(--txt);margin-bottom:.75rem}
.cta-box p{color:var(--txt2);font-size:.95rem;margin-bottom:1.5rem}
.email-form{display:flex;gap:.5rem;background:var(--bg2);border:1px solid var(--border);border-radius:50px;padding:.4rem .4rem .4rem 1.25rem;max-width:400px;margin:0 auto;transition:border-color .3s}
.email-form:focus-within{border-color:var(--gold)}
.email-form input,.sub-input{flex:1;background:none;border:none;outline:none;color:var(--txt);font-family:'Nunito',sans-serif;font-size:.875rem}
.email-form input::placeholder,.sub-input::placeholder{color:var(--txt3)}
.sub-success{background:rgba(94,196,182,.15);border:1px solid rgba(94,196,182,.4);color:var(--teal);border-radius:12px;padding:.75rem 1.25rem;font-size:.88rem;font-weight:600;margin-top:.5rem}
.sub-exists{background:rgba(232,201,109,.12);border:1px solid rgba(232,201,109,.35);color:var(--gold);border-radius:12px;padding:.75rem 1.25rem;font-size:.88rem;font-weight:600;margin-top:.5rem}
.sub-exists a{color:var(--gold)}
.sub-error{color:var(--rose);font-size:.82rem;margin-top:.5rem}

/* ══ FOOTER ══ */
footer{background:#080808;border-top:1px solid rgba(255,255,255,.05);position:relative;z-index:10}
body.light-mode footer{background:#e8e8e8;border-top:1px solid rgba(0,0,0,.07)}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding:3.5rem 4vw 3rem}
.footer-brand p{font-size:.82rem;color:rgba(255,255,255,.28);line-height:1.8;max-width:270px;margin-top:.75rem}
body.light-mode .footer-brand p{color:rgba(0,0,0,.4)}
.footer-col h4{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.2);margin-bottom:1.1rem}
body.light-mode .footer-col h4{color:rgba(0,0,0,.28)}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.footer-col ul a{text-decoration:none;color:rgba(255,255,255,.32);font-size:.82rem;font-weight:500;transition:color .2s}
.footer-col ul a:hover{color:rgba(255,255,255,.82)}
body.light-mode .footer-col ul a{color:rgba(0,0,0,.42)}
body.light-mode .footer-col ul a:hover{color:rgba(0,0,0,.88)}
.footer-rule{height:1px;background:rgba(255,255,255,.05);margin:0 4vw}
body.light-mode .footer-rule{background:rgba(0,0,0,.06)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.2rem 4vw 1.4rem}
.footer-copy{font-size:.72rem;color:rgba(255,255,255,.16)}
body.light-mode .footer-copy{color:rgba(0,0,0,.28)}
.footer-links{display:flex;gap:1.5rem}
.footer-links a{font-size:.72rem;color:rgba(255,255,255,.16);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:rgba(255,255,255,.6)}
body.light-mode .footer-links a{color:rgba(0,0,0,.28)}
body.light-mode .footer-links a:hover{color:rgba(0,0,0,.7)}

/* ══ SCROLL REVEAL ══ */
.fade-in-up{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.fade-in-up.visible{opacity:1;transform:translateY(0)}
.stagger-1{transition-delay:.1s}.stagger-2{transition-delay:.2s}.stagger-3{transition-delay:.3s}.stagger-4{transition-delay:.4s}.stagger-5{transition-delay:.5s}

/* ══ SKELETON ══ */
.skeleton-card .skeleton-cover{width:100%;aspect-ratio:2/3;border-radius:10px;background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-card-h) 50%,var(--bg-card) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}
.skeleton-line{height:10px;border-radius:5px;margin:7px 0;background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-card-h) 50%,var(--bg-card) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}
.skeleton-line.short{width:60%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ══ BOOK MODAL ══ */
.book-modal{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .3s}
.book-modal.open{opacity:1;pointer-events:auto}
.modal-inner{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:2rem;max-width:600px;width:100%;display:flex;gap:2rem;position:relative;max-height:90vh;overflow-y:auto;animation:modalPop .3s ease}
@keyframes modalPop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.modal-cover{flex-shrink:0;width:140px}
.modal-cover-img{width:140px;aspect-ratio:2/3;object-fit:cover;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.modal-body{flex:1;min-width:0}
.modal-title{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:900;color:var(--txt);margin-bottom:.4rem;line-height:1.2}
.modal-author{font-size:.85rem;color:var(--txt2);margin-bottom:.75rem}
.modal-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.modal-tag{background:var(--tag-bg);border:1px solid var(--tag-border);color:var(--tag-col);font-size:.7rem;font-weight:700;padding:.2rem .6rem;border-radius:8px}
.modal-desc{font-family:'Crimson Pro',serif;font-size:.95rem;color:var(--txt2);line-height:1.7;margin-bottom:1.5rem;max-height:160px;overflow-y:auto}
.modal-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.modal-dl-btn{background:linear-gradient(135deg,var(--gold),#c9a84c);color:#1a1200;font-family:'Nunito',sans-serif;font-weight:800;font-size:.85rem;padding:.6rem 1.4rem;border:none;border-radius:50px;cursor:pointer;display:flex;align-items:center;gap:.4rem;transition:all .2s}
.modal-dl-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px var(--glow-gold)}
.modal-save-btn{background:var(--glass);color:var(--txt);font-family:'Nunito',sans-serif;font-weight:700;font-size:.85rem;padding:.6rem 1.4rem;border:1px solid var(--border);border-radius:50px;cursor:pointer;transition:all .2s}
.modal-save-btn:hover{border-color:var(--teal);color:var(--teal)}
.modal-close{position:absolute;top:1rem;right:1rem;background:var(--bg-card-h);border:1px solid var(--border);color:var(--txt2);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all .2s}
.modal-close:hover{background:var(--rose);color:#fff;border-color:var(--rose)}

/* ══ TOAST ══ */
#sl-toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg-card);border:1px solid var(--border);color:var(--txt);padding:.75rem 1.5rem;border-radius:50px;font-size:.875rem;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:all .3s;z-index:9999}
#sl-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ══ ROW EMPTY ══ */
.row-empty{color:var(--txt3);font-size:.875rem;padding:2rem;text-align:center;width:100%}

/* ══ RESPONSIVE ══ */
@media(max-width:1024px){
  .footer-top{grid-template-columns:1fr 1fr;gap:2rem}
  .featured-books-visual{display:none}
  .book-card{flex:0 0 calc((92vw - 42px) / 3.8);min-width:110px;max-width:200px}
}
@media(max-width:600px){
  .nav-links,.nav-search{display:none}
  .nav-hamburger{display:flex}
  .stat-divider{display:none}
  .shelf-card{width:280px}
  .pomodoro-banner{flex-direction:column;text-align:center;padding:1.5rem}
  .pomodoro-cta{margin-left:0}
  .footer-top{grid-template-columns:1fr 1fr;gap:1.5rem}
  .footer-brand{grid-column:1/-1}
  .book-card{flex:0 0 calc((92vw - 28px) / 2.8);min-width:100px;max-width:180px}
}
@media(max-width:480px){
  .nav-top-row{padding:0 1rem}
  .hero-title{font-size:2.2rem}
  .shelf-card{width:260px}
  .hero-actions,.featured-actions{flex-direction:column;align-items:center}
  .btn-primary,.btn-secondary{width:100%;max-width:290px;justify-content:center}
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .row-wrapper{padding:0 3vw}
  .book-card{flex:0 0 calc((94vw - 14px) / 2.1);min-width:90px;max-width:160px}
}

/* ============================================================
   SMARTLIB — navbar-fix.css
   Paste at the BOTTOM of index.css (after all existing rules)
============================================================ */

/* ── 1. Allow dropdown to overflow the nav row ── */
.nav-top-row {
  overflow: visible !important;
}
.nav-right {
  overflow: visible !important;
}
.nav-profile {
  overflow: visible !important;
}

/* ── 2. Dropdown z-index guarantee ── */
.profile-dropdown {
  z-index: 9999 !important;
}

/* ── 3. Tablet (769px – 1024px): shrink links + search, keep visible ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-top-row {
    padding: 0 1rem;
    gap: .5rem;
  }

  .nav-links {
    gap: 0;
  }

  .nav-links a,
  .nav-genre-trigger {
    font-size: .75rem;
    padding: .35rem .45rem;
    white-space: nowrap;
  }

  /* Search: shrink default, expand on focus */
  .nav-search {
    width: 150px;
    min-width: 120px;
    padding: .35rem .75rem;
  }
  .nav-search:focus-within {
    width: 190px;
  }

  /* Hide name + chevron on tablet — keep avatar only */
  .nav-profile-name,
  .nav-profile-chevron {
    display: none;
  }

  /* Hide mode toggle label text if any, keep button */
  .btn-mode-toggle {
    width: 60px;
    height: 32px;
  }
  .toggle-knob {
    width: 24px;
    height: 24px;
    top: 3px;
    left: 3px;
  }
  body.light-mode .toggle-knob {
    transform: translateX(28px);
  }
}


/* ── 5. Add Search to mobile drawer ── */
/* The mobile drawer search row */
.mobile-nav-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: .5rem 1rem;
  margin-bottom: .25rem;
}
.mobile-nav-search svg {
  color: var(--txt3);
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}
.mobile-nav-search input {
  background: none;
  border: none;
  outline: none;
  color: var(--txt);
  font-family: 'Nunito', sans-serif;
  font-size: .9rem;
  width: 100%;
}
.mobile-nav-search input::placeholder {
  color: var(--txt3);
}

/* ── 6. Mobile drawer: show profile info when logged in ── */
.mobile-nav-profile {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: .25rem;
}
.mobile-nav-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--teal));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 800;
  color: #0a0a0a;
  flex-shrink: 0;
}
.mobile-nav-username {
  font-family: 'Playfair Display', serif;
  font-size: .9rem;
  font-weight: 700;
  color: var(--txt);
}

/* ── 7. Ensure hamburger always shows on mobile (already in css, safety) ── */
@media (max-width: 600px) {
  .nav-links,
  .nav-search {
    display: none !important;
  }
  .nav-hamburger {
    display: flex !important;
  }
}


/* ── Decoration elements — never block clicks ── */
.glow-orb,
.hero-sparkles,
.hero-clouds,
.sparkle,
.cloud {
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ── Genre dropdown — block clicks only when closed ── */
.genre-dropdown-panel {
  pointer-events: none;
}
.genre-dropdown-panel.open {
  pointer-events: auto;
}

/* ── Mobile nav fix ── */
.mobile-nav {
  display: none !important;
  z-index: 1100;
}
.mobile-nav.open {
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.genre-dropdown-panel {
  z-index: 1000 !important;
  pointer-events: none !important;
}

.genre-dropdown-panel.open {
  pointer-events: auto !important;
}


@media (max-width: 600px) {
  .nav-top-row .btn-mode-toggle {
    display: flex !important;
    width: 40px !important;
    height: 22px !important;
  }
  .nav-top-row .btn-mode-toggle .toggle-knob {
    width: 16px !important;
    height: 16px !important;
    top: 2px !important;
    left: 2px !important;
  }
  .nav-top-row .btn-mode-toggle .toggle-knob svg {
    display: none !important;
  }
  .nav-top-row .btn-mode-toggle .toggle-svg-off,
  .nav-top-row .btn-mode-toggle .toggle-svg-on {
    display: none !important;
  }
  body.light-mode .nav-top-row .btn-mode-toggle .toggle-knob {
    transform: translateX(18px) !important;
  }
  .btn-signin {
    font-size: .72rem !important;
    padding: .35rem .7rem !important;
  }
  .nav-logo-img {
    width: 130px !important;
    height: 40px !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 8px !important;
  }
}