/* Theme: Dark only, mobile-first */
:root{
  --bg:#0b0f14;           /* page background */
  --text:#e5e7eb;         /* primary text */
  --muted:#94a3b8;        /* secondary text */
  --card:#111827;         /* surfaces */
  --card-border:#1f2937;  /* outlines */
  --accent:#7c3aed;       /* action color */
  --accent-contrast:#ffffff;
  --nav-bg:#0b0f14;
  --nav-border:#1f2937;
  --overlay:rgba(2,6,12,.66);
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:#c7d2fe;text-decoration:none}
a:hover{color:#a78bfa}

.container{max-width:1200px;margin:0 auto;padding:0 15px}

/* Header */
.site-header{position:sticky;top:0;background:var(--nav-bg);border-bottom:1px solid var(--nav-border);z-index:1000}
.site-header .header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:800;font-size:1.15rem;letter-spacing:.2px;color:var(--text)}
.nav-links{display:flex;gap:14px}
.nav-links a{padding:8px 10px;border-radius:8px;color:var(--text)}
.nav-links a:hover{background:var(--accent);color:var(--accent-contrast)}
.actions{display:flex;align-items:center;gap:8px}
.icon-btn{background:transparent;border:1px solid var(--card-border);color:var(--text);border-radius:10px;padding:6px 10px;cursor:pointer}
.icon-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
.icon-btn svg{width:18px;height:18px;display:block;fill:currentColor}
.hamburger{display:none}

/* Mobile helpers */
.mobile-only{display:none}
.desktop-only{display:initial}
@media(max-width:768px){
  .desktop-only{display:none}
  .mobile-only{display:initial}
  body{padding-bottom:74px}
  .site-header .header-inner{height:56px}
  .icon-btn{padding:8px 12px}
  .brand{font-size:1rem}
}

/* Headings */
h1{font-size:2rem;margin:0 0 16px;color:var(--text)}
h2{font-size:1.25rem;margin:0 0 12px;color:var(--text)}
h3{font-size:.95rem;margin:8px 0;color:var(--text)}

/* Hero */
.hero{padding:18px 0 6px}
.hero .lead{color:var(--muted);margin:6px 0 0}

/* Cards, grids and common blocks */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}
@media(max-width:768px){
  .card-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}
.card{background:var(--card);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .2s}
.card:hover{transform:translateY(-2px)}
.card a{display:block}
.card-cover{background:#f3f4f6}
.aspect-portrait{position:relative;width:100%}
.aspect-portrait::before{content:"";display:block;padding-top:155%}
.aspect-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-body{padding:10px}
.card-title{font-size:.95rem;font-weight:700;margin:4px 0 6px}
.meta{font-size:.8rem;color:var(--muted)}

.recommendations{margin-top:30px}
.recommendations .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px}
.recommendations .card{background:var(--card);border:1px solid var(--card-border);padding:10px;border-radius:10px;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.recommendations .card img{width:100%;border-radius:8px;display:block}
.recommendations .card a{color:var(--text)}
.recommendations .card a:hover{color:var(--accent)}
.recommendations .card p{font-size:.8rem;color:var(--muted);margin:6px 0 0}

.book-item{background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:12px;color:var(--text)}
.book-item img{width:100%;border-radius:10px}
.book-item a{color:var(--text)!important}
.book-item a:hover{color:var(--accent)!important}

.genre-btn{background:var(--card);color:var(--text);border:1px solid var(--card-border);padding:8px 12px;border-radius:8px;transition:.2s}
.genre-btn:hover{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}

.pagination-container{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}
.pagination-container a{padding:8px 12px;border-radius:8px;border:1px solid var(--card-border);color:var(--text);transition:.2s}
.pagination-container a:hover{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}
.pagination-container .active{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent);pointer-events:none}
.pagination-container .disabled{background:#f3f4f6;color:#9ca3af;border:1px solid var(--card-border);pointer-events:none;border-radius:8px;padding:8px 12px}

/* Bottom Navbar */
.navbar{position:fixed;bottom:0;left:0;right:0;display:flex;gap:10px;justify-content:center;align-items:center;background:var(--nav-bg);border-top:1px solid var(--nav-border);padding:10px;z-index:1000}
.navbar a,.navbar button.navbtn,.menu .toggle{color:var(--text);background:transparent;border:1px solid transparent;padding:6px 10px;border-radius:10px;cursor:pointer;line-height:1}
.navbar a:hover,.navbar button.navbtn:hover,.menu .toggle:hover{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}

#installButton{display:none;position:fixed;left:8px;bottom:calc(16px + env(safe-area-inset-bottom));width:40px;height:40px;padding:0;background:var(--accent);color:var(--accent-contrast);border:0;border-radius:9999px;cursor:pointer;z-index:1100;box-shadow:0 6px 16px rgba(124,58,237,.35);display:flex;align-items:center;justify-content:center}
#installButton svg{width:20px;height:20px;fill:currentColor}

/* Install popup (PWA) */
.install-popup{display:none;position:fixed;left:16px;bottom:16px;z-index:1500;background:var(--card);color:var(--text);border:1px solid var(--card-border);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);width:min(360px,92%);padding:14px}
.install-popup .title{font-weight:800;margin:0 0 6px}
.install-popup .desc{font-size:.9rem;color:var(--muted);margin:0 0 10px}
.install-popup .actions{display:flex;gap:8px}
.install-popup .actions button{flex:1;padding:10px 12px;border-radius:10px;border:0;cursor:pointer}
.install-popup .actions .primary{background:var(--accent);color:var(--accent-contrast)}
.install-popup .actions .ghost{background:transparent;border:1px solid var(--card-border);color:var(--text)}

@media(max-width:768px){
  #installButton{bottom:16px}
}

/* Dropdown */
.menu{position:relative;display:inline-flex;align-items:center}
.menu .dropdown{display:none;position:fixed;top:56px;left:12px;min-width:220px;max-width:min(92vw,420px);max-height:60vh;overflow:auto;background:var(--card);border:1px solid var(--card-border);border-radius:12px;box-shadow:0 12px 24px rgba(0,0,0,.24);z-index:2000;padding:6px}
.menu.open .dropdown{display:block}
.dropdown a{display:block;color:var(--text);padding:10px;border-radius:8px}
.dropdown a:hover{background:var(--accent);color:var(--accent-contrast)}
/* No hover-open to avoid layout shifts; open via JS click */

/* Search overlay */
.search-overlay{display:none;position:fixed;inset:0;z-index:1300;background:var(--overlay);justify-content:center;align-items:center}
.search-box{width:min(420px,92%);background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:20px;text-align:center;box-shadow:0 16px 40px rgba(0,0,0,.18)}
.search-box input{width:100%;padding:12px;border:1px solid var(--card-border);border-radius:10px;font-size:16px}
.search-box .row{display:flex;gap:10px;margin-top:12px}
.search-box button{flex:1;padding:10px;border:0;border-radius:10px;cursor:pointer;font-size:16px}
.search-box .primary{background:var(--accent);color:var(--accent-contrast)}
.search-box .ghost{background:#eef2ff;color:#3730a3}

/* Watch page */
.video-wrapper{position:relative;width:100%;max-width:450px;margin:0 auto;border-radius:12px;overflow:hidden;background:#000}
.video-wrapper::before{content:"";display:block;padding-top:177.78%}
.video-wrapper .video-js{position:absolute;inset:0}
.video-info{margin-top:15px;font-size:14px;color:var(--muted)}
.video-info h1{font-size:20px;margin:0 0 10px;color:var(--text)}

.horizontal-scroll{display:flex;overflow-x:auto;gap:10px}
.horizontal-scroll a{flex:0 0 auto;width:120px;text-align:center;background:var(--card);border:1px solid var(--card-border);border-radius:10px;text-decoration:none;color:var(--text);padding:10px;transition:.2s}
.horizontal-scroll a.active,.horizontal-scroll a:hover{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}
.horizontal-scroll img{width:100%;border-radius:8px}

/* Legacy pagination block on watch page */
.pagination{text-align:center;margin:20px 0}
.pagination a{padding:10px 20px;background:var(--card);border:1px solid var(--card-border);color:var(--text);border-radius:999px;margin:0 8px;text-decoration:none;font-size:16px;transition:.2s}
.pagination a:hover{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}
.pagination a:disabled{background:#f3f4f6;color:#9ca3af}

/* Utility */
.section-title{font-weight:700}
@media(min-width:1024px){.navbar{max-width:1200px;margin:0 auto}}

/* Bootstrap primary button → match accent */
.btn-primary{background-color:var(--accent)!important;border-color:var(--accent)!important}
.btn-primary:hover,.btn-primary:focus{background-color:#6d28d9!important;border-color:#6d28d9!important}

/* Forms */
.select, select{appearance:none;padding:10px 12px;border:1px solid var(--card-border);border-radius:10px;background:var(--card);color:var(--text)}
select option{background:var(--card);color:var(--text)}
.select:focus, select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,58,237,.25)}

/* Chips */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:6px 10px;border-radius:999px;border:1px solid var(--card-border);background:#fff;color:var(--text);font-size:.85rem}
.chip.active,.chip:hover{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}

/* Accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Mobile drawer menu */
.mobile-menu{position:fixed;inset:0;display:none;z-index:1400}
.mobile-menu.open{display:block}
.mobile-menu .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.mobile-menu .drawer{position:absolute;top:0;bottom:0;left:0;width:min(84%,320px);background:var(--card);border-right:1px solid var(--card-border);box-shadow:0 8px 24px rgba(0,0,0,.2);transform:translateX(-100%);transition:transform .2s}
.mobile-menu.open .drawer{transform:translateX(0)}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:14px 12px;border-bottom:1px solid var(--card-border)}
.drawer-links,.drawer-section{padding:10px}
.drawer-links a,.drawer-section a{display:block;padding:10px 12px;border-radius:10px;color:var(--text)}
.drawer-links a:hover,.drawer-section a:hover{background:var(--accent);color:var(--accent-contrast)}

/* Bottom navigation (mobile) */
.bottom-bar{position:fixed;left:0;right:0;bottom:0;background:var(--nav-bg);border-top:1px solid var(--nav-border);display:none;z-index:1200;padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.bottom-bar .tabs{display:flex;justify-content:space-around;align-items:center;gap:6px}
.bottom-bar a,.bottom-bar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;border:0;background:transparent;color:var(--text);border-radius:10px}
.bottom-bar a:hover,.bottom-bar button:hover{background:var(--accent);color:var(--accent-contrast)}
@media(max-width:768px){.bottom-bar{display:block}}