:root{
  --bg: #0B0D10;
  --surface: #14171C;
  --surface-2: #1B1F26;
  --border: #262B33;
  --text: #ECEFF3;
  --text-dim: #8A93A0;
  --gold: #E8A33D;
  --gold-dim: #6B5324;
  --teal: #2FD9C4;
  --teal-dim: #123B36;
  --red: #E2544B;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  display:flex;
  min-height:100vh;
}
::-webkit-scrollbar{height:8px; width:8px;}
::-webkit-scrollbar-thumb{background:var(--surface-2); border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* ---------- Sidebar ---------- */
.sidebar{
  width:230px; flex-shrink:0;
  border-right:1px solid var(--border);
  padding:24px 16px;
  display:flex; flex-direction:column; gap:24px;
  position:sticky; top:0; height:100vh;
}
.logo{display:flex; align-items:center; gap:10px; padding:0 8px;}
.logo-mark{width:30px; height:30px; background:linear-gradient(160deg, var(--gold), #B9781E); border-radius:7px; position:relative; flex-shrink:0;}
.logo-mark::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(11,13,16,.55) 0 2px, transparent 2px 6px); border-radius:7px;}
.logo-img{width:30px; height:30px; border-radius:7px; object-fit:cover; flex-shrink:0;}
.logo-text{font-family:'Bebas Neue', sans-serif; font-size:17px; letter-spacing:1px; white-space:nowrap;}
nav{display:flex; flex-direction:column; gap:2px;}
.nav-item{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; color:var(--text-dim); font-size:14px; font-weight:500; cursor:pointer; transition:background .15s, color .15s; white-space:nowrap;}
a.nav-item{text-decoration:none; cursor:pointer;}
.nav-item:hover{background:var(--surface); color:var(--text);}
.nav-item.active{background:var(--teal-dim); color:var(--teal);}
.nav-item svg{width:18px; height:18px; flex-shrink:0;}
.nav-divider{height:1px; background:var(--border); margin:8px 0;}
.promo{margin-top:auto; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px;}
.promo-label{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px;}
.promo-card{display:flex; align-items:center; gap:10px; background:linear-gradient(135deg, var(--teal-dim), var(--surface-2)); border-radius:9px; padding:10px; font-size:12px; font-weight:600;}
.promo-card svg{width:20px; height:20px; color:var(--teal); flex-shrink:0;}

/* ---------- Main ---------- */
main{flex:1; min-width:0; padding:22px 32px 60px;}
.topbar{display:flex; align-items:center; gap:20px; margin-bottom:24px;}
.search{flex:1; max-width:520px; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 14px; color:var(--text-dim); font-size:14px;}
.search svg{width:16px; height:16px; flex-shrink:0;}
.search input{flex:1; background:transparent; border:none; outline:none; color:var(--text); font-size:14px; font-family:inherit;}
.search input::placeholder{color:var(--text-dim);}
.topbar-actions{margin-left:auto; display:flex; align-items:center; gap:12px;}
.avatar{width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, var(--teal), #1A7C6D); flex-shrink:0;}

/* ---------- Filter bar ---------- */
.filter-bar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px;}
.chip{padding:7px 14px; border-radius:20px; font-size:12.5px; font-weight:600; background:var(--surface); border:1px solid var(--border); color:var(--text-dim); cursor:pointer;}
.chip:hover{color:var(--text);}
.chip.active{background:var(--gold); color:#241706; border-color:var(--gold);}

/* ---------- Hero ---------- */
.hero{position:relative; height:280px; border-radius:16px; overflow:hidden; margin-bottom:32px; display:flex; align-items:flex-end; border:1px solid var(--border);}
.hero-content{position:relative; padding:32px; max-width:560px;}
.hero-eyebrow{font-size:12px; font-weight:700; color:var(--gold); letter-spacing:2px; text-transform:uppercase; margin-bottom:10px;}
.hero-title{font-family:'Bebas Neue', sans-serif; font-size:52px; line-height:1; letter-spacing:1px; margin-bottom:10px; text-shadow:0 4px 24px rgba(0,0,0,.5);}
.hero-meta{display:flex; gap:10px; align-items:center; color:var(--text-dim); font-size:13px; margin-bottom:16px;}
.hero-desc{font-size:13.5px; color:var(--text-dim); max-width:460px; margin-bottom:16px; line-height:1.5;}
.tag{background:var(--surface-2); padding:3px 9px; border-radius:5px; font-size:11.5px; color:var(--text);}
.hero-dots{position:absolute; right:24px; bottom:24px; display:flex; gap:6px;}
.hero-dots span{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.25); cursor:pointer;}
.hero-dots span.active{background:var(--gold); width:18px; border-radius:3px;}

/* ---------- Rows / grids ---------- */
.section{margin-bottom:34px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px;}
.section-title{font-size:19px; font-weight:700;}
.row{display:grid; grid-auto-flow:column; grid-auto-columns:150px; gap:16px; overflow-x:auto; padding-bottom:6px;}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px;}
.card{cursor:pointer;}
.poster{position:relative; width:100%; height:212px; border-radius:10px; overflow:hidden; border:1px solid var(--border); display:flex; align-items:flex-end;}
.poster::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 4px, transparent 4px 10px); z-index:2;}
.poster::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%);}
.poster-label{position:relative; z-index:3; font-family:'Bebas Neue', sans-serif; font-size:20px; letter-spacing:.5px; padding:12px 10px; line-height:1.05;}
.badge{position:absolute; top:10px; right:10px; z-index:3; background:var(--gold); color:#241706; font-size:9.5px; font-weight:700; padding:2px 6px; border-radius:4px;}
.rating{position:absolute; top:10px; left:10px; z-index:3; display:flex; align-items:center; gap:3px; font-size:11px; font-weight:600; color:#fff; background:rgba(0,0,0,.5); padding:3px 6px; border-radius:5px;}
.rating svg{width:10px; height:10px; color:var(--gold);}
.watch-toggle{position:absolute; bottom:10px; right:10px; z-index:3; width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.watch-toggle svg{width:14px; height:14px; color:#fff;}
.watch-toggle.on{background:var(--teal);}
.watch-toggle.on svg{color:#06201c;}
.card-title{font-size:13px; font-weight:600; margin-top:8px;}
.card-sub{font-size:11.5px; color:var(--text-dim); margin-top:2px;}
.empty-state{color:var(--text-dim); font-size:14px; padding:40px 0; text-align:center;}

/* ---------- Modal ---------- */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;}
.modal{background:var(--surface); border:1px solid var(--border); border-radius:16px; max-width:640px; width:100%; max-height:88vh; overflow-y:auto;}
.modal-hero{height:200px; position:relative; display:flex; align-items:flex-end; padding:24px;}
.modal-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(20,23,28,.9) 100%);}
.modal-hero-title{position:relative; z-index:2; font-family:'Bebas Neue', sans-serif; font-size:38px; letter-spacing:.5px;}
.modal-close{position:absolute; top:16px; right:16px; z-index:3; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff;}
.modal-body{padding:24px;}
.modal-meta{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.modal-desc{font-size:14px; line-height:1.6; color:var(--text-dim); margin-bottom:20px;}
.modal-row{display:flex; gap:8px; font-size:13px; margin-bottom:8px;}
.modal-row .label{color:var(--text-dim); min-width:70px;}
.modal-actions{margin-top:20px; display:flex; gap:10px;}
.btn{display:flex; align-items:center; gap:6px; padding:10px 18px; border-radius:20px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid transparent;}
.btn-gold{background:linear-gradient(135deg,var(--gold),#C9862C); color:#241706;}
.btn-outline{background:transparent; border-color:var(--border); color:var(--text);}
.btn-outline.on{border-color:var(--teal); color:var(--teal);}

/* ---------- Auth ---------- */
.user-chip{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600;}
.user-chip .avatar{display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#06201c;}
.auth-tabs{display:flex; gap:4px; background:var(--surface-2); border-radius:10px; padding:4px; margin-bottom:20px;}
.auth-tab{flex:1; text-align:center; padding:8px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--text-dim); cursor:pointer;}
.auth-tab.active{background:var(--surface); color:var(--text);}
#auth-form{display:flex; flex-direction:column; gap:10px;}
#auth-form input{width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:11px 12px; color:var(--text); font-size:14px; font-family:inherit; outline:none;}
#auth-form input:focus{border-color:var(--teal);}
.auth-error{color:var(--red); font-size:12.5px; min-height:14px;}
.auth-hint{margin-top:14px; font-size:12.5px; color:var(--text-dim); text-align:center;}
.auth-hint-link, #auth-switch{color:var(--teal); cursor:pointer; font-weight:600;}

/* ---------- Episodes ---------- */
.episode-list{display:flex; flex-direction:column; gap:4px;}
.episode-season-label{font-size:11px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; margin:14px 0 6px;}
.episode-season-label:first-child{margin-top:0;}
.episode-row{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:8px; cursor:pointer;}
.episode-row:hover{background:var(--surface-2);}
.episode-play-icon{width:28px; height:28px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--teal); flex-shrink:0;}
.episode-name{font-size:13.5px; font-weight:600;}
.episode-desc{font-size:12px; color:var(--text-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ---------- Toast ---------- */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--surface-2); border:1px solid var(--border); padding:10px 18px; border-radius:10px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:60;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- Bottom nav (mobile only) ---------- */
.bottom-nav{display:none;}

@media (max-width: 860px){
  .sidebar{display:none;}
  main{padding:14px 14px 68px;}
  .hero-title{font-size:34px;}
  .hero{height:230px;}
  .topbar{gap:10px; flex-wrap:wrap;}
  .search{max-width:none; order:1; flex:1 1 100%;}
  .topbar-actions{order:2; margin-left:0;}
  .filter-bar{gap:6px;}
  .row{grid-auto-columns:128px; gap:10px;}
  .grid{grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px;}
  .poster{height:184px;}
  .modal-hero-title{font-size:28px;}
  .admin-form-row{grid-template-columns:1fr;}
  
.bottom-nav{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    width:100%;
    position:fixed; bottom:0; left:0; right:0; z-index:40;
    background:var(--surface);
    border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom, 0);
  }
  .bottom-nav .nav-item{
    flex:1 1 0; min-width:0;
    display:flex !important;
    flex-direction:column !important;
    align-items:center; justify-content:center;
    gap:1px;
    padding:6px 4px 5px;
    border-radius:0;
    font-size:9.5px;
    text-align:center;
    white-space:nowrap;
  }
  .bottom-nav .nav-item svg{width:16px; height:16px; flex-shrink:0;}
  .bottom-nav .nav-item.active{background:transparent;}


@media (max-width: 480px){
  .hero-desc{display:none;}
  .row{grid-auto-columns:112px;}
  .poster{height:162px;}
  .card-title{font-size:12px;}
}