/* Netflix-inspired redesign skin.
   Keeps the original HTML structure and JavaScript hooks intact. */
:root {
  color-scheme: dark;
  --nf-bg: #080808;
  --nf-panel: #141414;
  --nf-panel-2: #1d1d1d;
  --nf-text: #f5f5f1;
  --nf-muted: #a3a3a3;
  --nf-red: #e50914;
  --nf-red-hover: #f6121d;
  --nf-border: #292929;
}
html, body { background: var(--nf-bg) !important; color: var(--nf-text) !important; }
body.neon-home, body.neon-watch {
  background: var(--nf-bg) !important;
  color: var(--nf-text) !important;
  font-family: Arial, Helvetica, sans-serif;
}
a { color: inherit; }
.neon-shell { display:grid; grid-template-columns:235px minmax(0,1fr); min-height:100vh; background:var(--nf-bg); }
.neon-sidebar {
  background:#090909 !important; border-right:1px solid var(--nf-border) !important;
  padding:25px 18px !important; box-shadow:none !important;
}
.neon-brand { display:block; margin:0 0 34px !important; padding:0 8px 22px !important; border-bottom:1px solid var(--nf-border) !important; }
.neon-brand img, .neon-watch-brand img { max-width:150px; height:auto; object-fit:contain; }
.neon-side-label { color:#777 !important; font-size:10px !important; letter-spacing:.18em !important; font-weight:800 !important; }
.neon-side-link { color:#c8c8c8 !important; border-radius:5px !important; padding:12px 13px !important; margin:4px 0 !important; transition:.18s ease; }
.neon-side-link:hover, .neon-side-link.is-active { color:#fff !important; background:#262626 !important; }
.neon-side-link.is-active { border-left:3px solid var(--nf-red) !important; }
.neon-side-icon { color:var(--nf-red) !important; }
.neon-side-bottom { color:#858585 !important; border-top:1px solid var(--nf-border) !important; }
.neon-main-area { min-width:0; background:var(--nf-bg) !important; }
.neon-topbar, .neon-watch-header {
  background:rgba(10,10,10,.96) !important; border-bottom:1px solid var(--nf-border) !important;
  box-shadow:0 5px 24px rgba(0,0,0,.2) !important;
}
.neon-topbar { height:76px !important; padding:0 4.2% !important; }
.neon-topbar-left, .neon-watch-nav { color:#bdbdbd !important; }
.neon-kicker, .neon-overline, .neon-library-heading > span, .neon-watch-label {
  color:#aaa !important; letter-spacing:.16em !important; font-size:10px !important; font-weight:800 !important;
}
.search-box input, .neon-watch-header .search-box input {
  background:#202020 !important; color:#fff !important; border:1px solid #454545 !important;
  border-radius:4px !important; min-height:42px; padding:0 15px !important;
}
.search-box input:focus { outline:2px solid #777; border-color:#777 !important; }
.neon-content { max-width:1700px; margin:0 auto; padding:38px 4.2% 65px !important; }
.neon-heading { padding:12px 0 25px !important; }
.neon-heading h1 { color:#fff !important; font-size:clamp(28px,3.2vw,43px) !important; font-weight:800 !important; letter-spacing:-.035em; }
.neon-heading p { color:var(--nf-muted) !important; }
.neon-purple-dot { color:var(--nf-red) !important; }
.neon-heading-symbol { color:var(--nf-red) !important; }
.neon-feature-stripe {
  background:linear-gradient(90deg,#2b090b,#171717 65%,#111) !important;
  border:1px solid #4b171a !important; border-left:4px solid var(--nf-red) !important;
  border-radius:5px !important; box-shadow:none !important; padding:20px 24px !important;
}
.neon-feature-icon, .neon-feature-glow { color:var(--nf-red) !important; }
.neon-feature-stripe strong { color:#fff !important; }
.neon-feature-stripe span { color:#c5c5c5 !important; }
.neon-library-heading { margin:35px 0 18px !important; }
.neon-library-heading h2 { color:#fff !important; font-size:23px !important; font-weight:750 !important; }
.neon-home .video-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:22px 14px !important; }
.neon-home .video-card { background:transparent !important; border:0 !important; border-radius:5px !important; overflow:hidden; }
.neon-home .video-card:hover { transform:scale(1.035); z-index:2; }
.neon-home .video-card .thumb-box { border-radius:5px !important; background:#222 !important; overflow:hidden; }
.neon-home .video-card .thumb { transition:filter .2s ease, transform .25s ease; }
.neon-home .video-card:hover .thumb { filter:brightness(1.08); transform:scale(1.025); }
.neon-home .video-card .meta { padding:10px 2px !important; }
.neon-home .video-card .title { color:#eee !important; font-size:14px !important; font-weight:650 !important; line-height:1.4 !important; }
.neon-home .video-card .views { color:#999 !important; font-size:12px !important; }
.neon-home .duration, .side-duration, .related-duration {
  background:rgba(0,0,0,.85) !important; color:#fff !important; border-radius:3px !important;
}
.category-filters { gap:7px !important; }
.category-chip, .category-dropdown {
  background:#202020 !important; color:#ddd !important; border:1px solid #383838 !important;
  border-radius:4px !important;
}
.category-chip:hover, .category-chip.is-active { background:var(--nf-red) !important; color:#fff !important; border-color:var(--nf-red) !important; }
.video-pagination button { background:#242424 !important; border:1px solid #444 !important; color:#fff !important; border-radius:4px !important; }
.video-pagination button:hover:not(:disabled) { background:var(--nf-red) !important; border-color:var(--nf-red) !important; }
.loading-card { background:#202020 !important; border-radius:5px !important; }

/* Watch page */
.neon-watch-header { min-height:72px; padding:12px 4% !important; }
.neon-watch-layout { max-width:1700px !important; margin:0 auto !important; padding:28px 4% 65px !important; }
.neon-watch-label { margin-bottom:13px !important; color:#aaa !important; }
.neon-live-dot { background:var(--nf-red) !important; box-shadow:0 0 10px rgba(229,9,20,.7) !important; }
.neon-player-stage { background:#111 !important; border:1px solid #292929 !important; border-radius:7px !important; padding:8px !important; box-shadow:0 18px 55px rgba(0,0,0,.45) !important; }
.neon-player-stage .player-box { border-radius:4px !important; background:#000 !important; aspect-ratio:16/9 !important; }
.neon-watch-details {
  background:#151515 !important; border:1px solid #292929 !important; border-radius:5px !important;
  padding:22px 24px !important; margin-top:16px !important;
}
.neon-watch-details #videoTitle { color:#fff !important; font-size:clamp(20px,2.2vw,29px) !important; }
.neon-watch-details #videoViews, .related-views, .side-views { color:#999 !important; }
.neon-watch-details .tool-btn {
  background:#292929 !important; color:#fff !important; border:1px solid #444 !important;
  border-radius:4px !important; min-height:40px; transition:.18s ease;
}
.neon-watch-details .tool-btn:hover { background:#414141 !important; }
.neon-watch-details .tool-btn.active { background:var(--nf-red) !important; border-color:var(--nf-red) !important; color:#fff !important; }
.category-chip, .video-categories .category-chip { text-decoration:none; }
.neon-discovery { gap:25px !important; margin-top:30px !important; }
.neon-discovery .related-heading, .neon-discovery .sidebar-heading { color:#fff !important; font-size:21px !important; font-weight:750 !important; }
.neon-discovery .related-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:16px !important; }
.neon-discovery .related-card { background:#171717 !important; border:1px solid #292929 !important; border-radius:5px !important; }
.neon-discovery .related-card:hover { background:#222 !important; transform:translateY(-2px); }
.neon-discovery .related-meta { padding:10px 11px 12px !important; }
.neon-discovery .related-title, .neon-discovery .side-title { color:#eee !important; }
.neon-discovery .sidebar-section { background:#151515 !important; border:1px solid #292929 !important; border-radius:5px !important; padding:18px !important; }
.neon-discovery .side-card { border-bottom:1px solid #292929 !important; border-radius:3px !important; }
.neon-discovery .side-card:hover { background:#252525 !important; }
.neon-discovery .side-thumb-box { border-radius:4px !important; }
.spinner { border-top-color:var(--nf-red) !important; }
.center-play-button { background:rgba(229,9,20,.92) !important; border:0 !important; box-shadow:0 4px 25px rgba(0,0,0,.5); }
.center-play-button:hover { background:var(--nf-red-hover) !important; }

/* Accessibility and responsive layout */
button, a, input, select { -webkit-tap-highlight-color:transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid #fff !important; outline-offset:3px; }
@media (max-width:1180px) {
  .neon-home .video-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .neon-discovery { grid-template-columns:1fr !important; }
  .neon-discovery .related-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width:760px) {
  .neon-shell { display:block !important; }
  .neon-sidebar { padding:12px 14px !important; }
  .neon-brand { margin:0 !important; padding:0 8px 8px 0 !important; border:0 !important; }
  .neon-topbar { height:60px !important; padding:0 14px !important; }
  .neon-content { padding:22px 14px 45px !important; }
  .neon-heading h1 { font-size:29px !important; }
  .neon-feature-stripe { padding:15px !important; }
  .neon-home .video-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:15px 10px !important; }
  .neon-home .video-card .title { font-size:12px !important; }
  .neon-watch-header { padding:10px 14px !important; }
  .neon-watch-layout { padding:20px 12px 45px !important; }
  .neon-player-stage { padding:4px !important; }
  .neon-watch-details { padding:16px !important; }
  .neon-watch-details .video-toolbar { justify-content:flex-start !important; }
  .neon-watch-details .tool-btn { flex:1; min-width:0; padding:0 9px !important; }
  .neon-discovery .related-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
  .neon-discovery .sidebar-section { padding:13px !important; }
  .neon-discovery .side-thumb-box { width:105px !important; }
}
@media (max-width:420px) {
  .neon-watch-brand img { width:105px !important; }
  .neon-watch-header .search-box { width:100% !important; flex-basis:100% !important; }
  .neon-home .video-card .meta { padding:7px 1px !important; }
}