:root{
  --bg:#0b0e14;
  --bg-elev:#141821;
  --accent:#078BC9;
  --white:#ffffff;
  --gray-text:#b3b3b3;
  --gray-btn:#3a3a3a;
  --nav-bg: rgba(15, 17, 22, 0.72);
  --nav-border: rgba(255,255,255,0.1);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:"Helvetica Neue",Arial,sans-serif;
}
body.light-mode{
  --bg:#f4f4f6;
  --bg-elev:#ffffff;
  --white:#111318;
  --gray-text:#5b5f6a;
  --nav-bg: rgba(255,255,255,0.75);
  --nav-border: rgba(0,0,0,0.08);
}

/* ===== NAVBAR ===== */
.navbar-wrapper{
  position:sticky; top:16px; z-index:100;
  display:flex; justify-content:center; padding:0 24px;
}
.navbar{
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  width:100%; max-width:1400px; padding:10px 20px;
  background:var(--nav-bg); border:1px solid var(--nav-border); border-radius:999px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 8px 30px rgba(0,0,0,0.35);
}
.nav-left{ display:flex; align-items:center; gap:36px; }
.brand{ display:flex; align-items:center; gap:10px; }
.logo{ color:var(--white); font-size:18px; font-weight:800; letter-spacing:0.3px; margin:0; }
.nav-links{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.nav-links li a{ color:var(--gray-text); text-decoration:none; font-size:14px; font-weight:500; transition:color 0.15s ease; }
.nav-links li a:hover{ color:var(--white); }
.nav-links li a.active{ color:var(--white); font-weight:700; }
.nav-right{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.06); border:1px solid var(--nav-border);
  color:var(--white); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; transition:background 0.15s ease;
}
.icon-btn:hover{ background:rgba(255,255,255,0.14); }
.icon-btn svg{ width:17px; height:17px; fill:currentColor; }

/* ===== SEARCH BAR (always visible) ===== */
.search-wrap{
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.06); border:1px solid var(--nav-border);
  border-radius:999px; padding:4px 4px 4px 14px;
}
.search-input{ background:transparent; border:none; outline:none; color:var(--white); font-size:14px; width:180px; }
.search-input::placeholder{ color:var(--gray-text); }
.search-wrap .icon-btn{ background:transparent; border:none; }
.search-wrap .icon-btn:hover{ background:rgba(255,255,255,0.1); }

/* ===== HOME HERO ===== */
.hero{
  position:relative; height:520px; margin-top:20px;
  background:
    linear-gradient(90deg, rgba(6,8,14,0.95) 0%, rgba(6,8,14,0.75) 30%, rgba(6,8,14,0.15) 60%, rgba(6,8,14,0) 100%),
    linear-gradient(180deg, #1c2431 0%, #33404f 35%, #7c8797 55%, #e8a35a 68%, #f4c98a 72%, #5b4437 76%, #0d1015 100%);
  display:flex; align-items:center; overflow:hidden;
}
.hero-content{ position:relative; z-index:3; padding:0 48px; max-width:560px; }
.eyebrow{ color:var(--accent); font-weight:700; font-size:13px; letter-spacing:1px; margin-bottom:10px; }
.hero-title{ font-size:64px; font-weight:800; letter-spacing:1px; margin:0 0 16px 0; line-height:1; }
.hero-details{ color:#e5e5e5; font-size:15px; margin-bottom:16px; }
.hero-desc{ color:#d2d2d2; font-size:15px; line-height:1.5; margin-bottom:24px; max-width:440px; }
.hero-buttons{ display:flex; gap:14px; }
.btn{
  display:flex; align-items:center; gap:8px; padding:12px 26px; border-radius:5px;
  font-size:15px; font-weight:600; border:none; cursor:pointer;
}
.btn-play{ background:var(--white); color:#000; }
body.light-mode .btn-play{ color:#fff; background:#111318; }
.btn-info{ background:rgba(109,109,110,0.6); color:#fff; }
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.35); border:none; color:#fff; font-size:22px;
  width:40px; height:60px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:4;
}
.hero-arrow.left{left:0;} .hero-arrow.right{right:0;}
.hero-dots{ position:absolute; bottom:24px; left:48px; display:flex; gap:8px; z-index:4; }
.dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.4); cursor:pointer; }
.dot.active{ background:#fff; }

/* ===== ROWS ===== */
.row{ padding:28px 48px 8px 48px; position:relative; }
.row-header{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.row-header h2{ font-size:20px; font-weight:700; margin:0; color:var(--white); display:flex; align-items:center; }
.see-all{ color:var(--gray-text); font-size:13px; text-decoration:none; }
.row-track{
  display:grid; grid-auto-flow:column; gap:12px;
  overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.row-track::-webkit-scrollbar{ display:none; }
.row-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.45); border:1px solid var(--nav-border); color:#fff;
  width:36px; height:80px; font-size:18px; cursor:pointer; z-index:2; border-radius:4px;
}
.row-nav:hover{ background:rgba(0,0,0,0.7); }
.row-nav.left{ left:4px; } .row-nav.right{ right:4px; }
.row-error{ color:var(--gray-text); font-size:14px; padding:24px 0; width:100%; }
.accent-bar{ display:inline-block; width:4px; height:20px; background:var(--accent); margin-right:10px; border-radius:2px; }
.accent-text{ color:var(--accent); font-weight:600; }

/* Continue Watching cards — dynamic, no fake progress bar */
.cw-card{
  width:280px; height:158px; border-radius:4px; position:relative;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  padding:14px 16px; overflow:hidden; cursor:pointer;
  background-size:cover; background-position:center; background-color:#1a1f29;
}
.cw-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.75) 100%);
}
#continue-track{
  justify-content: flex-start;
}
.cw-title{ position:relative; z-index:2; font-weight:700; font-size:1.1rem; letter-spacing:0.3px; color:#fff; }
.cw-subtitle{ position:relative; z-index:2; font-size:0.8rem; color:var(--accent); font-weight:600; margin-top:4px; }

/* Poster cards (movies + search + browse pages) */
.poster-card{ width:220px; border-radius:4px; overflow:hidden; cursor:pointer; }
.poster-img{ height:280px; border-radius:4px; background-size:cover; background-position:center; background-color:#1a1f29; }
.poster-info{ padding-top:5px; }
.poster-title{ font-weight:700; font-size:15px; color:var(--white); }
.poster-year{ color:var(--gray-text); font-size:13px; }
.search-grid{ display:flex; flex-wrap:wrap; gap:16px; padding-bottom:20px; }

/* TV show cards */
.show-card{
  width:280px; height:180px; border-radius:4px; overflow:hidden; position:relative;
  display:flex; align-items:flex-end; padding:16px; cursor:pointer;
  background-size:cover; background-position:center; background-color:#1a1f29;
}
.show-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%);
}
.show-info{ position:relative; z-index:2; }
.show-title{ font-weight:700; font-size:15px; color:#fff; }
.show-season{ color:#c9c9c9; font-size:13px; }

/* ===== BROWSE PAGES (Movies / TV Shows full listings) ===== */
.browse-page{ padding:40px 48px 20px; }
.page-heading{ font-size:32px; font-weight:800; margin:0 0 24px 0; }
.load-more-wrap{ display:flex; justify-content:center; padding:30px 0 60px; }
.load-more-btn{
  background:rgba(255,255,255,0.08); border:1px solid var(--nav-border);
  color:var(--white); padding:10px 28px; border-radius:999px;
  font-size:14px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.load-more-btn:hover{ background:rgba(255,255,255,0.16); }
.load-more-btn:disabled{ opacity:0.5; cursor:default; }

/* ===== WATCH PAGE (unified player stage — used standalone on movie page,
   and inside .tv-layout's .watch-main on the TV page) ===== */
.watch-page{ padding:24px 48px 60px; }

.player-stage{
  position:relative;
  max-width:1100px;
  margin:0 auto;
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  background:#000;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.watch-main .player-stage{ margin:0; max-width:none; } /* fills its column instead of centering */

.trailer-bg{ position:absolute; inset:0; z-index:1; overflow:hidden; background-size:cover; background-position:center; }
.trailer-bg iframe{
  position:absolute; top:50%; left:50%;
  width:177.77vh; height:56.25vw;
  min-width:100%; min-height:100%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.stage-scrim{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.55) 100%);
}
.stage-overlay{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; }
.big-play-btn{
  width:84px; height:84px; border-radius:50%;
  background:rgba(255,255,255,0.16); border:2px solid rgba(255,255,255,0.65);
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; backdrop-filter:blur(6px);
  transition:transform 0.15s ease, background 0.15s ease;
}
.big-play-btn:hover{ background:rgba(255,255,255,0.28); transform:scale(1.07); }
.big-play-btn svg{ margin-left:4px; }
.mute-btn{
  position:absolute; top:16px; right:16px; z-index:4;
  width:38px; height:38px; border-radius:50%;
  background:rgba(20,20,20,0.55); border:1px solid rgba(255,255,255,0.2);
  color:#fff; font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.stage-back{
  position:absolute; top:16px; left:16px; z-index:5;
  width:38px; height:38px; border-radius:50%;
  background:rgba(20,20,20,0.55); border:1px solid rgba(255,255,255,0.2);
  color:#fff; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.stage-player{ position:absolute; inset:0; z-index:6; display:none; }
.stage-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.player-stage.is-playing .stage-overlay,
.player-stage.is-playing .mute-btn{ display:none; }
.player-stage.is-playing .stage-player{ display:block; }

.watch-info{ max-width:1100px; margin:28px auto 0; padding:0 4px; }
.watch-main .watch-info{ margin:24px 0 0; max-width:none; }
.watch-info .detail-title{ font-size:32px; font-weight:800; margin:0 0 10px 0; }
.watch-info .detail-meta{ color:#e5e5e5; font-size:14px; margin-bottom:10px; }
.watch-info .detail-desc{ color:#d2d2d2; font-size:15px; line-height:1.6; max-width:800px; margin-top:4px; }

/* ===== TV PAGE LAYOUT — sidebar beside the player ===== */
.tv-layout{
  display:flex;
  gap:24px;
  align-items:flex-start;
  padding:24px 48px 60px;
}
.watch-main{ flex:1; min-width:0; }

.episodes-sidebar{
  width:360px;
  flex-shrink:0;
  background:var(--bg-elev);
  border:1px solid var(--nav-border);
  border-radius:12px;
  padding:18px;
  position:sticky;
  top:100px;
  max-height:calc(100vh - 120px);
  display:flex;
  flex-direction:column;
}
.episodes-sidebar h2{ font-size:18px; font-weight:700; margin:0 0 14px 0; display:flex; align-items:center; }
.episodes-controls{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.season-select{
  background:rgba(255,255,255,0.06); border:1px solid var(--nav-border);
  color:var(--white); padding:8px 14px; border-radius:8px; font-size:14px; cursor:pointer;
}
.season-select option {
  background-color: #0b0e14;
}
.episode-search-wrap{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.06); border:1px solid var(--nav-border);
  border-radius:8px; padding:8px 14px;
}
.episode-search-wrap input{ background:transparent; border:none; outline:none; color:var(--white); font-size:14px; width:100%; }
.episodes-list{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.episodes-list::-webkit-scrollbar{ width:6px; }
.episodes-list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.15); border-radius:3px; }
.episode-row{ display:flex; gap:12px; padding:10px; border-radius:6px; cursor:pointer; border:1px solid transparent; }
.episode-row:hover{ background:rgba(255,255,255,0.04); border-color:var(--nav-border); }
.episode-thumb{
  position:relative; flex:0 0 76px; height:48px; border-radius:4px;
  background-size:cover; background-position:center; background-color:#1a1f29;
}
.episode-number{
  position:absolute; bottom:3px; left:3px;
  background:rgba(0,0,0,0.65); color:#fff; font-size:10px; font-weight:700; padding:1px 5px; border-radius:3px;
}
.episode-info{ flex:1; min-width:0; }
.episode-title{ font-weight:700; font-size:13.5px; margin-bottom:2px; line-height:1.3; }
.episode-runtime{ color:var(--gray-text); font-size:11.5px; }

@media (max-width: 900px){
  .nav-links{ display:none; }
  .hero-title{ font-size:44px; }
  .hero-content{ max-width:90%; }
  .search-input{ width:120px; }
  .row{ padding:24px 20px 8px 20px; }
  .watch-page{ padding:16px 20px 40px; }
  .browse-page{ padding:24px 20px 20px; }
  .tv-layout{ flex-direction:column; padding:16px 20px 40px; }
  .episodes-sidebar{ width:100%; position:static; max-height:500px; }
}

/* ===== SEARCH TABS ===== */
.search-tabs{
  display:flex;
  gap:10px;
  margin-bottom:20px;
}
.search-tab{
  background:rgba(255,255,255,0.06);
  border:1px solid var(--nav-border);
  color:var(--gray-text);
  padding:8px 20px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease;
}
.search-tab:hover{
  background:rgba(255,255,255,0.12);
  color:var(--white);
}
.search-tab.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}