/* ========================================
   CineVerse · Premium Cinematic Design System
   ======================================== */

/* --- RESET & BASE --- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-void: #07060d;
  --bg-deep: #0c0b16;
  --bg-surface: #12111d;
  --bg-card: rgba(255,255,255,.03);
  --bg-card-hover: rgba(255,255,255,.065);
  --bg-glass: rgba(12,11,22,.72);
  --bg-glass-strong: rgba(12,11,22,.88);

  --text-primary: #eeeef6;
  --text-secondary: rgba(238,238,246,.5);
  --text-dim: rgba(238,238,246,.25);

  --accent-violet: #a78bfa;
  --accent-pink: #f472b6;
  --accent-cyan: #22d3ee;
  --accent-blue: #818cf8;
  --accent-warm: #fb923c;
  --accent-gold: #fbbf24;

  --grad-main: linear-gradient(135deg, #a78bfa 0%, #c084fc 40%, #f472b6 100%);
  --grad-ocean: linear-gradient(135deg, #22d3ee, #818cf8);
  --grad-warm: linear-gradient(135deg, #f97316, #ef4444);
  --grad-gold: linear-gradient(135deg, #fbbf24, #f59e0b);
  --grad-subtle: linear-gradient(180deg, rgba(167,139,250,.06) 0%, transparent 100%);

  --glow-violet: 0 0 60px rgba(167,139,250,.15), 0 0 120px rgba(167,139,250,.05);
  --glow-pink: 0 0 60px rgba(244,114,182,.12);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;

  --nav-h: 72px;
  --container-w: 1440px;
  --section-gap: clamp(40px, 5vw, 64px);
}

/* --- LIGHT THEME --- */
[data-theme="light"]{
  --bg-void: #f5f3f0;
  --bg-deep: #ebe8e4;
  --bg-surface: #ffffff;
  --bg-card: rgba(0,0,0,.025);
  --bg-card-hover: rgba(0,0,0,.055);
  --bg-glass: rgba(255,255,255,.82);
  --bg-glass-strong: rgba(255,255,255,.92);

  --text-primary: #1a1a2e;
  --text-secondary: rgba(26,26,46,.55);
  --text-dim: rgba(26,26,46,.3);

  --accent-violet: #7c3aed;
  --accent-pink: #db2777;
  --accent-cyan: #0891b2;
  --accent-blue: #4f46e5;

  --grad-main: linear-gradient(135deg, #7c3aed 0%, #a855f7 40%, #db2777 100%);
  --grad-ocean: linear-gradient(135deg, #0891b2, #4f46e5);
  --grad-warm: linear-gradient(135deg, #ea580c, #dc2626);
  --grad-gold: linear-gradient(135deg, #d97706, #b45309);
  --grad-subtle: linear-gradient(180deg, rgba(124,58,237,.04) 0%, transparent 100%);

  --glow-violet: 0 0 60px rgba(124,58,237,.1), 0 0 120px rgba(124,58,237,.03);
  --glow-pink: 0 0 60px rgba(219,39,119,.08);
}

html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--font-body);
  background:var(--bg-void);
  color:var(--text-primary);
  line-height:1.7;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-size:16px;
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
img{content-visibility:auto;contain-intrinsic-size:auto 300px}
.hero__card img{opacity:0;transition:opacity .5s ease;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg)}
.hero__card img.loaded{opacity:1}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
input{border:none;outline:none;font:inherit;background:none}
/* GPU layers only for actively animating elements — removed broad will-change */
.hero__card{contain:layout style paint}
.card{contain:layout style}
.section{content-visibility:auto;contain-intrinsic-size:auto 600px}
/* Reduce motion for accessibility */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  
}

.container{width:100%;max-width:var(--container-w);margin:0 auto;padding:0 clamp(20px, 4vw, 56px)}

.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;
}

/* --- NAVIGATION --- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:14px 0;transition:all .5s var(--ease-out-expo)}
.nav--scrolled{background:var(--bg-glass-strong);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.05);padding:8px 0;box-shadow:0 4px 40px rgba(0,0,0,.3)}
.nav__inner{display:flex;align-items:center;gap:44px;max-width:var(--container-w);margin:0 auto;padding:0 clamp(16px,4vw,56px)}
.nav__logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav__logo-icon{width:38px;height:38px}
.nav__logo-text{font-family:var(--font-display);font-size:1.35rem;font-weight:700;letter-spacing:2.5px}
.nav__logo-accent{background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.nav__menu{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
.nav__item{position:relative}
.nav__link{display:flex;align-items:center;gap:7px;padding:10px 16px;font-size:.95rem;font-weight:500;color:var(--text-secondary);transition:all .3s var(--ease-smooth);white-space:nowrap;letter-spacing:.3px;position:relative}
.nav__link::after{content:'';position:absolute;bottom:2px;left:16px;right:16px;height:2px;background:var(--grad-main);border-radius:1px;transform:scaleX(0);transform-origin:center;transition:transform .35s var(--ease-out-expo)}
.nav__link:hover,.nav__link--active{color:var(--text-primary)}
.nav__link:hover::after,.nav__link--active::after{transform:scaleX(1)}
.nav__icon{width:17px;height:17px;flex-shrink:0;opacity:.7}
.nav__link:hover .nav__icon{opacity:1}

/* Dropdown */
.nav__item--has-sub:hover .nav__sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__sub{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(10px);opacity:0;visibility:hidden;transition:all .4s var(--ease-out-expo);z-index:100}
.nav__sub-inner{background:var(--bg-glass-strong);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-lg);padding:18px 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px 14px;min-width:300px;box-shadow:0 24px 80px rgba(0,0,0,.55)}
.nav__sub-link{padding:10px 14px;border-radius:var(--radius-sm);font-size:.9rem;color:var(--text-secondary);transition:all .25s var(--ease-smooth);white-space:nowrap}
.nav__sub-link:hover{color:var(--text-primary);background:rgba(255,255,255,.08)}

/* Nav actions */
.nav__actions{display:flex;align-items:center;gap:14px;margin-left:auto}

/* Theme toggle */
.theme-toggle{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease;position:relative}
.theme-toggle:hover{background:rgba(255,255,255,.08)}
.theme-toggle svg{width:19px;height:19px;color:var(--text-secondary);transition:all .3s;position:absolute}
.theme-toggle__sun{opacity:0;transform:rotate(-90deg) scale(.5)}
.theme-toggle__moon{opacity:1;transform:rotate(0) scale(1)}
[data-theme="light"] .theme-toggle:hover{background:rgba(0,0,0,.06)}
[data-theme="light"] .theme-toggle__sun{opacity:1;transform:rotate(0) scale(1)}
[data-theme="light"] .theme-toggle__moon{opacity:0;transform:rotate(90deg) scale(.5)}

/* Search toggle button */
.search-box__toggle{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease}
.search-box__toggle:hover{background:rgba(255,255,255,.08)}
.search-box__toggle svg{width:19px;height:19px;color:var(--text-secondary)}
[data-theme="light"] .search-box__toggle:hover{background:rgba(0,0,0,.06)}

/* Search Modal */
.search-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding-top:clamp(80px,15vh,180px);opacity:0;visibility:hidden;transition:all .35s var(--ease-out-expo)}
.search-modal.open{opacity:1;visibility:visible}
.search-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
[data-theme="light"] .search-modal__overlay{background:rgba(0,0,0,.35)}
.search-modal__dialog{position:relative;width:90%;max-width:580px;background:var(--bg-surface);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-xl);padding:clamp(28px,4vw,40px);box-shadow:0 32px 100px rgba(0,0,0,.5);transform:translateY(20px) scale(.96);transition:all .4s var(--ease-out-expo)}
.search-modal.open .search-modal__dialog{transform:translateY(0) scale(1)}
[data-theme="light"] .search-modal__dialog{border:1px solid rgba(0,0,0,.08);box-shadow:0 32px 100px rgba(0,0,0,.12)}
.search-modal__close{position:absolute;top:16px;right:16px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .25s}
.search-modal__close:hover{background:rgba(255,255,255,.08)}
.search-modal__close svg{width:18px;height:18px;color:var(--text-secondary)}
[data-theme="light"] .search-modal__close:hover{background:rgba(0,0,0,.06)}
.search-modal__heading{font-size:1.3rem;font-weight:800;margin-bottom:20px;letter-spacing:-.01em}
.search-modal__input-wrap{display:flex;gap:8px;align-items:stretch}
.search-modal__input{flex:1;min-width:0;padding:14px 16px;font-size:1rem;color:var(--text-primary);background:rgba(255,255,255,.06);border:2px solid var(--accent-gold);border-radius:var(--radius-md);transition:all .3s;outline:none}
.search-modal__input::placeholder{color:var(--text-dim)}
.search-modal__input:focus{border-color:var(--accent-gold);box-shadow:0 0 0 3px rgba(251,191,36,.15)}
[data-theme="light"] .search-modal__input{background:rgba(0,0,0,.03);border-color:var(--accent-gold)}
[data-theme="light"] .search-modal__input:focus{box-shadow:0 0 0 3px rgba(251,191,36,.2)}
.search-modal__btn{display:flex;align-items:center;gap:4px;padding:14px 16px;background:var(--accent-gold);color:#000;font-size:.9rem;font-weight:700;border-radius:var(--radius-md);transition:all .3s;white-space:nowrap;flex-shrink:0}
.search-modal__btn:hover{background:#f59e0b;transform:translateY(-2px);box-shadow:0 8px 24px rgba(251,191,36,.3)}
.search-modal__btn svg{width:16px;height:16px}

/* Burger */
.nav__burger{display:none;width:42px;height:42px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:var(--radius-sm);background:none;border:none;cursor:pointer;padding:0;-webkit-appearance:none;appearance:none}
.nav__burger span{display:block;width:22px;height:2px;background:var(--text-primary);border-radius:2px;transition:all .3s ease}
.nav__burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.active span:nth-child(2){opacity:0}
.nav__burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:999;background:var(--bg-glass-strong);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);opacity:0;visibility:hidden;transition:all .4s var(--ease-out-expo);padding-top:calc(var(--nav-h) + 24px);overflow-y:auto}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu__inner{max-width:420px;margin:0 auto;padding:24px}
.mobile-menu__link,.mobile-menu__details summary{display:block;padding:18px 0;font-size:1.15rem;font-weight:500;color:var(--text-primary);border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer}
.mobile-menu__details summary{list-style:none}
.mobile-menu__details summary::marker,.mobile-menu__details summary::-webkit-details-marker{display:none}
.mobile-menu__sub{padding:10px 0 18px 20px;display:flex;flex-wrap:wrap;gap:10px}
.mobile-menu__sub a{padding:8px 16px;border-radius:var(--radius-full);font-size:.88rem;background:rgba(255,255,255,.05);color:var(--text-secondary);transition:all .25s}
.mobile-menu__sub a:hover{background:rgba(255,255,255,.1);color:var(--text-primary)}

/* --- HERO / BANNER — Stacked Card Carousel --- */
.hero{position:relative;z-index:1;padding-top:calc(var(--nav-h) + 28px);padding-bottom:clamp(48px,6vw,80px);overflow:hidden;min-height:600px}

/* Dynamic blurred background */
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg-img{position:absolute;inset:-60px;background-size:cover;background-position:center;opacity:0;transition:opacity 1.5s var(--ease-smooth);filter:blur(40px) brightness(.4);transform:scale(1.2)}
.hero__bg-img.active{opacity:1;will-change:opacity}
.hero__bg-overlay{position:absolute;inset:0;background:
  radial-gradient(ellipse at 30% 50%, rgba(7,6,13,.15) 0%, rgba(7,6,13,.7) 70%),
  radial-gradient(ellipse at 70% 30%, rgba(167,139,250,.04) 0%, transparent 50%),
  linear-gradient(180deg, rgba(7,6,13,.3) 0%, rgba(7,6,13,.85) 100%);
  z-index:1}

/* Layout: info left, cards right */
.hero__layout{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(24px,3vw,48px);min-height:480px;justify-content:space-between;overflow:hidden}

/* Left info panel */
.hero__info{flex:0 1 400px;min-width:260px;position:relative;z-index:3}
.hero__info-slide{position:absolute;top:0;left:0;width:100%;opacity:0;visibility:hidden;transform:translateY(24px);transition:all .7s var(--ease-out-expo);pointer-events:none;filter:blur(4px)}
.hero__info-slide.active{position:relative;opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;filter:blur(0)}

.hero__badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:var(--radius-full);font-size:.8rem;font-weight:600;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);margin-bottom:20px;width:fit-content;letter-spacing:.5px}
.hero__title{font-family:var(--font-body);font-size:clamp(1.8rem, 3.5vw, 3rem);font-weight:900;line-height:1.15;letter-spacing:-0.02em;margin-bottom:14px;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero__desc{font-size:clamp(.88rem, 1.2vw, 1.02rem);color:rgba(255,255,255,.55);line-height:1.8;margin-bottom:20px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero__meta{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-bottom:24px}
.hero__meta-item{padding:4px 0;font-size:.82rem;font-weight:500;color:rgba(255,255,255,.75);letter-spacing:.5px;background:none;border:none;backdrop-filter:none;border-radius:0;position:relative}
.hero__meta-item--rating{display:inline-flex;align-items:center;gap:4px;color:#ffd700;font-weight:700;font-size:.88rem}
.hero__meta-item--rating .star-icon{vertical-align:middle;filter:drop-shadow(0 0 4px rgba(255,215,0,.5))}
.hero__meta-sep{color:rgba(255,255,255,.2);font-size:.72rem;font-weight:300;padding:0 10px;user-select:none}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}

/* Dots */
.hero__dots{display:flex;gap:10px;margin-top:32px}
.hero__dot{width:36px;height:3px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;cursor:pointer;transition:all .4s var(--ease-smooth)}
.hero__dot.active{background:rgba(255,255,255,.2);width:48px}
.hero__dot span{display:block;height:100%;width:0;background:var(--grad-main);border-radius:2px}
.hero__dot.active span{animation:dotProgress 5s linear forwards}
@keyframes dotProgress{to{width:100%}}

/* Stacked card carousel */
.hero__cards{position:relative;flex:0 0 auto;width:clamp(300px,32vw,440px);height:clamp(400px,44vw,600px);perspective:1200px;margin-right:clamp(40px,5vw,80px)}
.hero__card{position:absolute;width:100%;height:100%;border-radius:var(--radius-lg);overflow:visible;cursor:pointer;transition:all .7s var(--ease-out-expo);transform-origin:center center;box-shadow:0 20px 60px rgba(0,0,0,.4);backface-visibility:hidden;will-change:transform,opacity}
/* Card states — managed via JS inline styles, base hidden state */
.hero__card{opacity:0;pointer-events:none}

/* Hero arrows */
.hero__arrow{position:absolute;z-index:10;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(16px);transition:all .4s var(--ease-out-expo);opacity:0}
.hero__cards:hover .hero__arrow{opacity:1}
.hero__arrow:hover{background:rgba(255,255,255,.15);transform:translateY(-50%) scale(1.12);box-shadow:0 8px 32px rgba(0,0,0,.3)}
.hero__arrow--prev{left:-24px;top:50%;transform:translateY(-50%)}
.hero__arrow--next{right:-24px;top:50%;transform:translateY(-50%)}
.hero__arrow svg{width:18px;height:18px;color:rgba(255,255,255,.85)}

/* --- GRADIENT TEXT --- */
.gradient-text{background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-text--warm{background:var(--grad-warm);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-text--ocean{background:var(--grad-ocean);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* --- BUTTONS --- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 32px;border-radius:var(--radius-md);font-size:.95rem;font-weight:600;transition:all .4s var(--ease-out-expo);position:relative;overflow:hidden;letter-spacing:.3px}
.btn--primary{background:var(--grad-main);color:#fff;box-shadow:0 8px 32px rgba(167,139,250,.28);border:none;padding:16px 36px;font-size:1rem;border-radius:var(--radius-md)}
.btn--primary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 50%,rgba(255,255,255,.05) 100%);opacity:0;transition:opacity .3s}
.btn--primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 48px rgba(167,139,250,.45),0 0 20px rgba(167,139,250,.2)}
.btn--primary:hover::before{opacity:1}
.btn--primary:active{transform:translateY(-1px) scale(.98)}
.btn--ghost{background:rgba(255,255,255,.05);color:var(--text-primary);border:1px solid rgba(255,255,255,.1)}
.btn--ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}
.btn svg{width:18px;height:18px;flex-shrink:0}

/* --- SECTIONS --- */
.section{position:relative;z-index:1;padding:var(--section-gap) 0}
.section__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(20px,3vw,32px);gap:20px}
.section__title-group{display:flex;align-items:center;gap:14px}
.section__icon{width:30px;height:30px;color:var(--accent-violet);flex-shrink:0;opacity:.8}
.section__title{font-family:var(--font-body);font-size:clamp(1.35rem, 2.8vw, 1.85rem);font-weight:800;letter-spacing:-.01em}
.section__line{width:48px;height:3px;background:var(--grad-main);border-radius:2px;flex-shrink:0;opacity:.6}
.section__more{font-size:.9rem;color:var(--text-secondary);transition:all .3s;white-space:nowrap;padding:8px 0}
.section__more:hover{color:var(--accent-violet)}

/* --- TABS --- */
.tabs{display:flex;gap:4px;margin-bottom:clamp(20px,2.5vw,28px);flex-wrap:wrap;position:relative}
.tab{position:relative;padding:10px 22px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;color:var(--text-secondary);background:transparent;border:none;transition:all .35s var(--ease-smooth);letter-spacing:.3px;overflow:hidden}
.tab::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--grad-main);transform:translateX(-50%);transition:width .35s var(--ease-out-expo);border-radius:2px}
.tab:hover{color:var(--text-primary)}
.tab:hover::after{width:60%}
.tab.active{color:#fff;background:rgba(255,255,255,.06)}
.tab.active::after{width:80%;height:2.5px;box-shadow:0 0 12px rgba(167,139,250,.5),0 0 4px rgba(236,72,153,.4)}

/* --- CARD GRID --- */
.card-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:start}

/* --- CARD --- */
.card{position:relative;min-width:0}
.card > a{display:block;text-decoration:none;color:inherit}
.short-card > a{display:block;text-decoration:none;color:inherit}
.ranking-list__item > a,.ranking-list__item a{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;width:100%}
.card.hidden{display:none !important;order:9999}
.card__inner{position:relative;display:flex;flex-direction:column;height:100%;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-card);border:1px solid rgba(255,255,255,.04);transition:all .5s var(--ease-out-expo)}


.card__inner:hover{background:var(--bg-card-hover);border-color:transparent;transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.3)}


.card__inner:active{transform:translateY(-2px) scale(.98);box-shadow:0 8px 32px rgba(0,0,0,.25)}
.card__poster{position:relative;overflow:hidden;border-radius:var(--radius-md) var(--radius-md) 0 0;background:var(--bg-card);aspect-ratio:2/3;flex:none}
#variety .card__poster{aspect-ratio:16/9}
.card__poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease-out-expo),opacity .6s ease;opacity:0}
.card__poster img.loaded{opacity:1}
.card__inner:hover .card__poster img{transform:scale(1.06)}

.card__overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,.15) 40%, transparent 100%);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s ease}
.card__inner:hover .card__overlay{opacity:1}
.card__play-btn{width:52px;height:52px;transition:transform .35s var(--ease-spring)}
.card__play-btn:hover{transform:scale(1.15)}
.card__play-btn svg{width:52px;height:52px}

/* Episode/status badge — bottom left */
.card__episode{position:absolute;bottom:10px;left:10px;padding:5px 12px;border-radius:var(--radius-full);font-size:.75rem;background:rgba(0,0,0,.55);color:rgba(255,255,255,.8);backdrop-filter:blur(6px);z-index:2}

/* Rating badge — top right, green */
.card__rating{position:absolute;top:8px;right:8px;padding:4px 10px;border-radius:var(--radius-xs);font-size:.78rem;font-weight:800;background:rgba(34,197,94,.9);color:#fff;z-index:2;letter-spacing:.3px;box-shadow:0 2px 8px rgba(34,197,94,.3)}

.card__info{padding:12px 10px 10px;height:58px;overflow:hidden}
.card__title{font-size:.92rem;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em;line-height:1.3;text-align:center}
.card__actors{font-size:.76rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;max-width:100%}
.card__meta{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--text-secondary)}
.card__score{color:var(--accent-warm);font-weight:700}
.card__glow{display:none}
.card__poster::before{content:'';position:absolute;inset:0;background:var(--bg-card);z-index:0}

/* --- SCROLLER --- */
.scroller{position:relative}
.scroller__track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:10px 0;scrollbar-width:none}
.scroller__track::-webkit-scrollbar{display:none}
.scroller__track .card{scroll-snap-align:start;flex-shrink:0}
.scroller__btn{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-glass-strong);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.07);z-index:5;transition:all .35s var(--ease-smooth);box-shadow:0 8px 28px rgba(0,0,0,.35)}
.scroller__btn:hover{background:rgba(255,255,255,.1);transform:translateY(-50%) scale(1.1)}
.scroller__btn svg{width:20px;height:20px}
.scroller__btn--left{left:-10px}
.scroller__btn--right{right:-10px}

/* --- SHORT DRAMA GRID --- */
.short-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px;width:100%}
.short-card{text-align:center;min-width:0}
.short-card__poster{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:12px;transition:transform .5s var(--ease-out-expo);background:var(--bg-card);aspect-ratio:9/16}

.short-card:hover .short-card__poster{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.35),0 0 30px rgba(167,139,250,.12)}

.short-card__poster img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .6s ease}
.short-card__poster img.loaded{opacity:1}
.short-card__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 55%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;opacity:0;transition:opacity .35s}
.short-card:hover .short-card__overlay{opacity:1}
.short-card__play{width:52px;height:52px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;transition:transform .35s var(--ease-spring)}
.short-card__play:hover{transform:scale(1.15)}
.short-card__play svg{width:52px;height:52px}

/* Variety status text centered */
.variety-status{text-align:center;color:var(--text-secondary);font-size:.78rem}
.short-card__duration{font-size:.78rem;color:rgba(255,255,255,.7);position:absolute;bottom:12px}
.short-card__title{font-size:.9rem;font-weight:600;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.short-card__views{font-size:.78rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;text-align:left;max-width:100%}

/* Short card rating */
.short-card__rating{position:absolute;top:8px;right:8px;padding:4px 10px;border-radius:var(--radius-xs);font-size:.78rem;font-weight:800;background:rgba(34,197,94,.9);color:#fff;z-index:2;letter-spacing:.3px;box-shadow:0 2px 8px rgba(34,197,94,.3)}

/* --- BREADCRUMB (List Page) --- */
.breadcrumb-section{padding-top:calc(var(--nav-h) + 32px);padding-bottom:8px}
.breadcrumb__list{display:flex;align-items:center;gap:6px;list-style:none;flex-wrap:wrap}
.breadcrumb__item{display:flex;align-items:center}
.breadcrumb__link{display:inline-flex;align-items:center;gap:5px;font-size:.88rem;color:var(--text-secondary);text-decoration:none;padding:6px 12px;border-radius:var(--radius-full);transition:all .3s var(--ease-smooth);background:transparent}
.breadcrumb__link:hover{color:var(--accent-violet);background:rgba(167,139,250,.08)}
.breadcrumb__link svg{opacity:.6;transition:opacity .3s}
.breadcrumb__link:hover svg{opacity:1}
.breadcrumb__sep{display:flex;align-items:center;color:var(--text-dim);margin:0 2px}
.breadcrumb__current{font-size:.88rem;font-weight:600;padding:6px 14px;border-radius:var(--radius-full);background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative}
.breadcrumb__current::after{content:'';position:absolute;bottom:0;left:12px;right:12px;height:2px;background:var(--grad-main);border-radius:2px;opacity:.5}


/* --- LIST GRID (reuses short-grid) --- */
.list-section{padding-top:24px}

/* --- LOAD MORE --- */
.load-more-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:48px;padding-bottom:8px}
.load-more-btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 48px;border:1px solid rgba(167,139,250,.25);border-radius:var(--radius-full);background:rgba(167,139,250,.06);color:var(--text-primary);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .4s var(--ease-smooth);overflow:hidden;backdrop-filter:blur(8px)}
.load-more-btn:hover{border-color:rgba(167,139,250,.5);background:rgba(167,139,250,.12);box-shadow:0 0 30px rgba(167,139,250,.12);transform:translateY(-2px)}
.load-more-btn:active{transform:translateY(0)}
.load-more-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.load-more-btn__icon{display:flex;transition:transform .3s var(--ease-spring)}
.load-more-btn:hover .load-more-btn__icon{transform:translateY(3px)}
.load-more-btn__loading{display:inline-flex;align-items:center}

/* --- RANKING --- */
.ranking-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ranking-grid .ranking-card:nth-child(4),
.ranking-grid .ranking-card:nth-child(5){max-width:none}

.ranking-card{background:var(--bg-card);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-lg);padding:24px;transition:all .4s var(--ease-smooth)}
.ranking-card:hover{border-color:rgba(255,255,255,.08);background:var(--bg-card-hover);box-shadow:0 12px 48px rgba(0,0,0,.2)}
.ranking-card__header{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.05)}
.ranking-card__header h3{font-size:1rem;font-weight:700;letter-spacing:.3px}
.ranking-card__icon{width:24px;height:24px;color:var(--accent-violet)}
.ranking-list__item{display:flex;align-items:center;gap:14px;padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.025);transition:all .25s}
.ranking-list__item:hover{background:rgba(255,255,255,.025);border-radius:var(--radius-sm);padding-left:8px}
.ranking-list__rank{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;border-radius:7px;background:rgba(255,255,255,.05);color:var(--text-secondary);flex-shrink:0}
.ranking-list__rank--1{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#000}
.ranking-list__rank--2{background:linear-gradient(135deg,#94a3b8,#64748b);color:#fff}
.ranking-list__rank--3{background:linear-gradient(135deg,#cd7f32,#a0522d);color:#fff}
.ranking-list__name{flex:1;font-size:.9rem;font-weight:500}
.ranking-list__heat{font-size:.8rem;color:var(--text-secondary);flex-shrink:0}

/* --- STATS --- */
.stats-section{position:relative;z-index:1;padding:clamp(48px,6vw,72px) 0;border-top:1px solid rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.035);background:var(--grad-subtle)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:48px;text-align:center}
.stat__number{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.2rem);font-weight:900;background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px}
.stat__label{font-size:.9rem;color:var(--text-secondary);font-weight:500;letter-spacing:.3px}

/* --- FRIEND LINKS --- */
.links-section{position:relative;z-index:1;padding:clamp(48px,6vw,72px) 0}
.links-section__title{font-size:.85rem;color:var(--text-dim);margin-bottom:22px;text-align:center;letter-spacing:3px;text-transform:uppercase;font-weight:500}
.links-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.friend-link{padding:10px 24px;font-size:.82rem;color:var(--text-secondary);background:linear-gradient(135deg,rgba(167,139,250,.06),rgba(244,114,182,.04));border:none;border-left:2px solid rgba(167,139,250,.3);transition:all .4s var(--ease-out-expo);position:relative;overflow:hidden;border-radius:4px;letter-spacing:.5px}
.friend-link::before{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:linear-gradient(90deg,rgba(167,139,250,.8),rgba(244,114,182,.6));transition:width .4s var(--ease-out-expo)}
.friend-link:hover{color:var(--text-primary);border-left-color:rgba(167,139,250,.7);transform:translateY(-2px);background:linear-gradient(135deg,rgba(167,139,250,.12),rgba(244,114,182,.08));box-shadow:0 4px 20px rgba(167,139,250,.1)}
.friend-link:hover::before{width:100%}
.friend-link span{position:relative;z-index:1}

/* --- FOOTER --- */
.footer{position:relative;z-index:1;padding:0 0 36px;overflow:hidden;background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 100%)}
.footer__glow-line{height:2px;background:linear-gradient(90deg, transparent 0%, var(--accent-violet) 20%, var(--accent-pink) 50%, var(--accent-violet) 80%, transparent 100%);opacity:.6}
.footer__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;padding:40px 0 32px}
.footer__logo{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-family:var(--font-display);font-weight:700;font-size:1.15rem}
.footer__desc{font-size:.82rem;color:var(--text-secondary);line-height:1.6;letter-spacing:.3px}
.footer__actions{display:flex;gap:12px}
.footer__action-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--radius-full);font-size:.85rem;font-weight:600;transition:all .35s;position:relative;overflow:hidden}
.footer__action-btn--app{background:linear-gradient(135deg, rgba(167,139,250,.15), rgba(244,114,182,.15));border:1px solid rgba(167,139,250,.25);color:var(--text-primary)}
.footer__action-btn--app:hover{background:linear-gradient(135deg, rgba(167,139,250,.3), rgba(244,114,182,.3));border-color:rgba(167,139,250,.5);transform:translateY(-2px);box-shadow:0 8px 24px rgba(167,139,250,.2)}
.footer__action-btn--contact{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--text-secondary)}
.footer__action-btn--contact:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:var(--text-primary);transform:translateY(-2px)}

/* Channel navigation */
.footer__channels{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:0 0 28px;border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04)}
.footer__channel{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.03);position:relative}
.footer__channel:nth-child(3n+2){padding-left:24px;padding-right:24px;border-left:1px solid rgba(255,255,255,.03);border-right:1px solid rgba(255,255,255,.03)}
.footer__ch-title{display:inline-block;font-size:.88rem;font-weight:700;color:var(--text-primary);margin-bottom:8px;position:relative;transition:color .3s}
.footer__ch-title::before{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--grad-main);transition:width .35s}
.footer__ch-title:hover{color:var(--accent-violet)}
.footer__ch-title:hover::before{width:100%}
.footer__ch-links{display:flex;flex-wrap:wrap;gap:0}
.footer__ch-links a{font-size:.8rem;color:var(--text-dim);padding:2px 0;transition:color .25s;white-space:nowrap}
.footer__ch-links a:hover{color:var(--accent-violet)}
.footer__ch-links a:not(:last-child)::after{content:'·';margin:0 8px;color:var(--text-dim);opacity:.4;pointer-events:none}

.footer__seo-text{padding:20px 0 12px}
.footer__seo-text p{font-size:.78rem;color:var(--text-dim);line-height:1.8;max-width:800px}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;padding-top:28px;border-top:1px solid rgba(255,255,255,.04)}
.footer__bottom p{font-size:.82rem;color:var(--text-dim)}
.footer__socials{display:flex;gap:14px}
.footer__socials a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.04);color:var(--text-secondary);transition:all .35s}
.footer__socials a:hover{background:rgba(255,255,255,.1);color:var(--accent-violet);transform:translateY(-3px)}

/* --- PLAYER PAGE --- */
.player-section{padding-top:16px;padding-bottom:0}
.player-wrap{position:relative;width:100%;max-width:1100px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;background:#000;box-shadow:0 8px 48px rgba(0,0,0,.5)}
.player__container{position:relative;width:100%;padding-top:56.25%}
.player__video{position:absolute;inset:0;width:100%;height:100%;background:#000;outline:none}
.player__big-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;background:rgba(0,0,0,.2);transition:opacity .3s}
.player__big-play:hover svg circle{fill:rgba(167,139,250,.3)}
.player__big-play svg{filter:drop-shadow(0 4px 20px rgba(0,0,0,.5));transition:transform .3s var(--ease-spring)}
.player__big-play:hover svg{transform:scale(1.1)}

/* Episode section */
.episode-section{max-width:1100px;margin:20px auto 0;padding:24px;background:var(--bg-card);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-lg)}
.episode__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.episode__title{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:700;color:var(--text-primary)}
.episode__title svg{color:var(--accent-violet);flex-shrink:0}
.episode__current{font-size:.85rem;color:var(--accent-violet);font-weight:600;background:rgba(167,139,250,.08);padding:6px 14px;border-radius:var(--radius-full)}
.episode__list{display:flex;flex-wrap:wrap;gap:8px}
.episode__btn{padding:10px 20px;border-radius:var(--radius-sm);font-size:.88rem;font-weight:500;color:var(--text-secondary);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all .3s var(--ease-smooth);min-width:72px;text-align:center}
.episode__btn:hover{color:var(--text-primary);background:rgba(255,255,255,.08);border-color:rgba(167,139,250,.3)}
.episode__btn--active{color:#fff;background:var(--grad-main);border-color:transparent;box-shadow:0 4px 16px rgba(167,139,250,.3)}
.episode__btn--active:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(167,139,250,.4)}
.episode__expand{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:8px 20px;border-radius:var(--radius-full);font-size:.85rem;color:var(--text-secondary);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all .3s}
.episode__expand:hover{color:var(--text-primary);background:rgba(255,255,255,.08)}
.episode__expand svg{transition:transform .3s}

/* Movie info */
.movie-info{max-width:1100px;margin:28px auto 0;padding:28px;background:var(--bg-card);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-lg)}
.movie-info__header{display:flex;gap:24px;margin-bottom:24px}
.movie-info__poster{width:160px;height:220px;flex-shrink:0;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.3)}
.movie-info__poster img{width:100%;height:100%;object-fit:cover}
.movie-info__meta{flex:1;min-width:0}
.movie-info__title{font-size:clamp(1.4rem,3vw,2rem);font-weight:900;margin-bottom:12px;letter-spacing:-.01em}
.movie-info__rating{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.movie-info__score{font-size:1.3rem;font-weight:800;color:#ffd700;font-family:var(--font-display)}
.movie-info__score-label{font-size:.82rem;color:var(--text-secondary)}
.movie-info__tags{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px}
.movie-info__tag{font-size:.85rem;color:var(--text-secondary);line-height:1.8}
.movie-info__tag em{font-style:normal;color:var(--text-primary);font-weight:500}
.movie-info__actors{font-size:.88rem;color:var(--text-secondary);line-height:1.8}
.movie-info__label{color:var(--text-secondary)}
.movie-info__plot{border-top:1px solid rgba(255,255,255,.05);padding-top:20px}
.movie-info__plot-title{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:700;margin-bottom:12px;color:var(--text-primary)}
.movie-info__plot-title svg{color:var(--accent-violet);flex-shrink:0}
.movie-info__plot-text{font-size:.92rem;color:var(--text-secondary);line-height:1.9;text-indent:2em}

/* Light mode overrides for player */
[data-theme="light"] .player-wrap{box-shadow:0 8px 48px rgba(0,0,0,.12)}
[data-theme="light"] .episode-section{background:var(--bg-card);border:1px solid rgba(0,0,0,.06)}
[data-theme="light"] .episode__btn{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);color:var(--text-secondary)}
[data-theme="light"] .episode__btn:hover{background:rgba(0,0,0,.06);border-color:rgba(124,58,237,.2)}
[data-theme="light"] .episode__btn--active{color:#fff;background:var(--grad-main);border-color:transparent}
[data-theme="light"] .episode__current{background:rgba(124,58,237,.06)}
[data-theme="light"] .episode__expand{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.06)}
[data-theme="light"] .episode__expand:hover{background:rgba(0,0,0,.06)}
[data-theme="light"] .movie-info{background:var(--bg-card);border:1px solid rgba(0,0,0,.06)}
[data-theme="light"] .movie-info__plot{border-top:1px solid rgba(0,0,0,.06)}
[data-theme="light"] .movie-info__poster{box-shadow:0 8px 32px rgba(0,0,0,.08)}

@media(max-width:768px){
  .player-wrap{border-radius:0;margin:0 -20px;width:calc(100% + 40px);max-width:none}
  .episode-section{margin-left:0;margin-right:0;padding:18px;border-radius:var(--radius-md)}
  .movie-info{padding:20px;border-radius:var(--radius-md)}
  .movie-info__header{flex-direction:column;align-items:center;text-align:center}
  .movie-info__poster{width:120px;height:165px}
  .movie-info__tags{justify-content:center}
  .movie-info__rating{justify-content:center}
  .movie-info__actors{text-align:center}
  .episode__btn{padding:8px 14px;font-size:.82rem;min-width:60px}
}

/* --- BACK TO TOP --- */
.btt{position:fixed;right:28px;bottom:28px;z-index:100;width:50px;height:50px;border-radius:50%;background:var(--bg-glass-strong);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(20px);transition:all .4s var(--ease-out-expo);box-shadow:0 10px 32px rgba(0,0,0,.35)}
.btt.visible{opacity:1;visibility:visible;transform:translateY(0)}
.btt:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)}
.btt svg{width:20px;height:20px}

/* --- REVEAL ANIMATION --- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out-expo),transform .9s var(--ease-out-expo)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.reveal:nth-child(4){transition-delay:.18s}
.reveal:nth-child(5){transition-delay:.24s}
.reveal:nth-child(6){transition-delay:.3s}

/* --- LIGHT MODE OVERRIDES --- */
[data-theme="light"] .nav--scrolled{background:var(--bg-glass-strong);border-bottom:1px solid rgba(0,0,0,.06);box-shadow:0 4px 40px rgba(0,0,0,.06)}
[data-theme="light"] .nav__link::after{background:var(--grad-main)}
[data-theme="light"] .nav__sub-inner{background:var(--bg-glass-strong);border:1px solid rgba(0,0,0,.06);box-shadow:0 24px 80px rgba(0,0,0,.1)}
[data-theme="light"] .nav__sub-link:hover{background:rgba(0,0,0,.04)}
[data-theme="light"] .search-box__toggle:hover{background:rgba(0,0,0,.06)}
[data-theme="light"] .hero__bg-img{filter:blur(50px) saturate(1.2) brightness(.7)}
[data-theme="light"] .hero__bg-overlay{background:
  radial-gradient(ellipse at 30% 50%, rgba(245,243,240,.3) 0%, rgba(245,243,240,.8) 70%),
  linear-gradient(180deg, rgba(245,243,240,.5) 0%, rgba(245,243,240,.95) 100%)}
[data-theme="light"] .hero__badge{background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.08);color:var(--text-primary)}
[data-theme="light"] .hero__desc{color:rgba(26,26,46,.5)}
[data-theme="light"] .hero__meta-item{color:rgba(26,26,46,.7)}
[data-theme="light"] .hero__meta-item--rating{color:#e6a800}
[data-theme="light"] .hero__meta-sep{color:rgba(26,26,46,.15)}
[data-theme="light"] .hero__dot{background:rgba(0,0,0,.1)}
[data-theme="light"] .hero__dot.active{background:rgba(0,0,0,.2)}
[data-theme="light"] .hero__arrow{background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.08)}
[data-theme="light"] .hero__arrow:hover{background:rgba(255,255,255,.95)}
[data-theme="light"] .hero__arrow svg{color:rgba(26,26,46,.7)}
[data-theme="light"] .btn--ghost{background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.1);color:var(--text-primary)}
[data-theme="light"] .btn--ghost:hover{background:rgba(0,0,0,.08)}
[data-theme="light"] .tab{background:transparent;border:none;color:var(--text-secondary)}
[data-theme="light"] .tab:hover{color:var(--text-primary)}
[data-theme="light"] .tab.active{color:var(--text-primary);background:rgba(0,0,0,.04)}
[data-theme="light"] .card__inner{border:1px solid rgba(0,0,0,.06);background:var(--bg-card)}
[data-theme="light"] .card__inner:hover{border-color:transparent;background:var(--bg-card-hover);box-shadow:0 20px 60px rgba(0,0,0,.08),0 0 30px rgba(124,58,237,.08)}



[data-theme="light"] .card__poster{background-color:rgba(0,0,0,.03)}
[data-theme="light"] .card__episode{background:rgba(0,0,0,.5)}
[data-theme="light"] .scroller__btn{background:var(--bg-glass-strong);border:1px solid rgba(0,0,0,.06);box-shadow:0 8px 28px rgba(0,0,0,.08)}
[data-theme="light"] .scroller__btn:hover{background:rgba(0,0,0,.04)}
[data-theme="light"] .ranking-card{background:var(--bg-card);border:1px solid rgba(0,0,0,.05)}
[data-theme="light"] .ranking-card:hover{border-color:rgba(0,0,0,.08);background:var(--bg-card-hover);box-shadow:0 12px 48px rgba(0,0,0,.06)}
[data-theme="light"] .ranking-card__header{border-bottom:1px solid rgba(0,0,0,.06)}
[data-theme="light"] .ranking-list__item{border-bottom:1px solid rgba(0,0,0,.04)}
[data-theme="light"] .ranking-list__item:hover{background:rgba(0,0,0,.02)}
[data-theme="light"] .ranking-list__rank{background:rgba(0,0,0,.04)}
[data-theme="light"] .stats-section{border-top:1px solid rgba(0,0,0,.05);border-bottom:1px solid rgba(0,0,0,.05)}

/* Friend links — light mode enhanced */
[data-theme="light"] .links-section{background:linear-gradient(180deg, rgba(124,58,237,.02) 0%, rgba(219,39,119,.02) 100%)}
[data-theme="light"] .links-section__title{color:var(--text-secondary)}
[data-theme="light"] .friend-link{background:linear-gradient(135deg,rgba(124,58,237,.04),rgba(219,39,119,.03));border-left:2px solid rgba(124,58,237,.2);color:var(--text-secondary);backdrop-filter:blur(8px)}
[data-theme="light"] .friend-link:hover{background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(219,39,119,.06));border-left-color:rgba(124,58,237,.5);color:var(--accent-violet);box-shadow:0 6px 24px rgba(124,58,237,.1);transform:translateY(-3px)}
[data-theme="light"] .friend-link:hover::before{width:100%}

[data-theme="light"] .footer{background:linear-gradient(180deg, rgba(0,0,0,.01) 0%, rgba(0,0,0,.03) 100%)}
[data-theme="light"] .footer__glow-line{opacity:.4}
[data-theme="light"] .footer__channels{border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
[data-theme="light"] .footer__channel{border-bottom:1px solid rgba(0,0,0,.04)}
[data-theme="light"] .footer__channel:nth-child(3n+2){border-left:1px solid rgba(0,0,0,.04);border-right:1px solid rgba(0,0,0,.04)}
[data-theme="light"] .footer__ch-links a:not(:last-child)::after{color:var(--text-dim);opacity:.3}
[data-theme="light"] .footer__action-btn--app{background:linear-gradient(135deg, rgba(124,58,237,.08), rgba(219,39,119,.08));border-color:rgba(124,58,237,.2)}
[data-theme="light"] .footer__action-btn--app:hover{background:linear-gradient(135deg, rgba(124,58,237,.15), rgba(219,39,119,.15));border-color:rgba(124,58,237,.4)}
[data-theme="light"] .footer__action-btn--contact{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08)}
[data-theme="light"] .footer__action-btn--contact:hover{background:rgba(0,0,0,.06)}
[data-theme="light"] .footer__bottom{border-top:1px solid rgba(0,0,0,.05)}
[data-theme="light"] .footer__socials a{background:rgba(0,0,0,.04)}
[data-theme="light"] .footer__socials a:hover{background:rgba(0,0,0,.08)}
[data-theme="light"] .btt{background:var(--bg-glass-strong);border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 32px rgba(0,0,0,.08)}
[data-theme="light"] .btt:hover{background:rgba(0,0,0,.04)}
[data-theme="light"] .mobile-menu{background:var(--bg-glass-strong)}
[data-theme="light"] .mobile-menu__link,.mobile-menu__details summary{border-bottom:1px solid rgba(0,0,0,.06);color:var(--text-primary)}
[data-theme="light"] .mobile-menu__sub a{background:rgba(0,0,0,.04);color:var(--text-secondary)}
[data-theme="light"] .mobile-menu__sub a:hover{background:rgba(0,0,0,.08)}
[data-theme="light"] .short-card__poster{background-color:rgba(0,0,0,.03)}
[data-theme="light"] .nav__burger span{background:var(--text-primary)}
[data-theme="light"] .hero__title{text-shadow:none}


@media(max-width:1024px){
  .hero__cards{width:clamp(260px,35vw,380px);height:clamp(350px,48vw,520px)}
  .hero__info{max-width:400px}
  .card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ranking-grid{grid-template-columns:repeat(2,1fr)}
  .footer__channels{grid-template-columns:repeat(2,1fr)}
  .footer__channel:nth-child(3n+2){border-left:none;border-right:none;padding-left:0;padding-right:0}
  .footer__channel:nth-child(even){padding-left:24px;border-left:1px solid rgba(255,255,255,.03)}
  [data-theme="light"] .footer__channel:nth-child(3n+2){border-left:none;border-right:none}
  [data-theme="light"] .footer__channel:nth-child(even){border-left:1px solid rgba(0,0,0,.04)}
}

@media(max-width:768px){
  .nav__inner{gap:0}
  .nav__menu{display:none}
  .nav__burger{display:flex}
  /* Mobile banner: cards on top, info below, tight spacing */
  .hero{min-height:auto;padding-bottom:clamp(24px,4vw,48px)}
  .hero__layout{flex-direction:column-reverse;text-align:center;align-items:center;gap:12px;min-height:auto;padding-top:8px;padding-bottom:0}
  .hero__info{max-width:100%;flex:none}
  .hero__slide .hero__actions{justify-content:center}
  .hero__slide .hero__meta{justify-content:center}
  .hero__badge{margin-bottom:10px}
  .hero__title{margin-bottom:8px}
  .hero__desc{margin-bottom:10px}
  .hero__meta{margin-bottom:14px}
  .hero__dots{justify-content:center;margin-top:16px}
  .hero__cards{width:260px;height:360px;margin-right:0}
  .hero__arrow{display:none}
  /* Touch swipe indicator */
  .hero__cards::after{content:'';position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);width:48px;height:4px;border-radius:2px;background:rgba(255,255,255,.15);animation:swipeHint 2.5s ease-in-out infinite}
  @keyframes swipeHint{0%,100%{transform:translateX(-50%)}30%{transform:translateX(-30px)}70%{transform:translateX(30px)}}
  .hero__title{font-size:clamp(1.4rem,5vw,2.2rem)}
  .btn--primary{padding:12px 28px;font-size:.9rem}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .ranking-grid{grid-template-columns:1fr !important}
  .short-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:12px;width:100%}
  .footer__channels{grid-template-columns:1fr}
  .footer__channel:nth-child(3n+2),.footer__channel:nth-child(even){border-left:none;border-right:none;padding-left:0;padding-right:0}
  .footer__head{flex-direction:column;align-items:flex-start}
  .footer__bottom{flex-direction:column;text-align:center}
  .section{padding:clamp(32px,5vw,48px) 0}
}

@media(max-width:480px){
  .hero__desc{display:none}
  .hero__cards{width:220px;height:300px}
  .hero__layout{gap:8px}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card__info{padding:8px 6px 8px;height:54px}
  .card__title{font-size:.8rem}
  .card__actors{font-size:.68rem}
  .hero__title{font-size:1.5rem}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:28px}
  .short-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px;width:100%}
  .short-card__title{font-size:.78rem}
  .short-card__views{font-size:.66rem}
}

/* --- CUSTOM PLAYER CONTROLS --- */
.player-controls{position:absolute;bottom:0;left:0;right:0;z-index:10;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 60%,transparent 100%);padding:0 16px 12px;opacity:0;transition:opacity .35s var(--ease-smooth);pointer-events:none}
.player-controls--visible{opacity:1;pointer-events:auto}
.player-controls__progress{position:relative;width:100%;height:4px;background:rgba(255,255,255,.15);border-radius:2px;cursor:pointer;margin-bottom:10px;transition:height .15s}
.player-controls:hover .player-controls__progress{height:6px}
.player-controls__progress-buffered{position:absolute;top:0;left:0;height:100%;background:rgba(255,255,255,.2);border-radius:2px;transition:width .3s}
.player-controls__progress-played{position:absolute;top:0;left:0;height:100%;background:var(--grad-main);border-radius:2px}
.player-controls__progress-handle{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 8px rgba(167,139,250,.5);opacity:0;transition:opacity .2s}
.player-controls:hover .player-controls__progress-handle{opacity:1}
.player-controls__bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.player-controls__left,.player-controls__right{display:flex;align-items:center;gap:8px}
.player-controls__btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:rgba(255,255,255,.85);transition:all .25s;flex-shrink:0}
.player-controls__btn:hover{color:#fff;background:rgba(255,255,255,.12)}
.player-controls__btn:active{transform:scale(.92)}
.player-controls__time{font-size:.82rem;color:rgba(255,255,255,.7);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.player-controls__volume-wrap{display:flex;align-items:center;gap:4px}
.player-controls__volume{-webkit-appearance:none;appearance:none;width:80px;height:4px;background:rgba(255,255,255,.2);border-radius:2px;outline:none;cursor:pointer}
.player-controls__volume::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 4px rgba(0,0,0,.3);cursor:pointer}
.player-controls__volume::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:none;cursor:pointer}

/* Player glow border for dark mode */
.player-wrap--glow{position:relative}
.player-wrap--glow::before{content:'';position:absolute;inset:-2px;border-radius:calc(var(--radius-lg) + 2px);background:linear-gradient(135deg,rgba(167,139,250,.35),rgba(244,114,182,.25),rgba(34,211,238,.2));z-index:-1;opacity:1;transition:opacity .5s}
.player-wrap--glow::after{content:'';position:absolute;inset:-6px;border-radius:calc(var(--radius-lg) + 6px);background:linear-gradient(135deg,rgba(167,139,250,.08),rgba(244,114,182,.06),rgba(34,211,238,.05));filter:blur(12px);z-index:-2}
[data-theme="light"] .player-wrap--glow::before{background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(219,39,119,.12));opacity:.6}
[data-theme="light"] .player-wrap--glow::after{display:none}

/* Unified hero__slide (replaces hero__info-slide) */
.hero__slide{position:absolute;top:0;left:0;width:100%;opacity:0;visibility:hidden;transform:translateY(24px);transition:all .7s var(--ease-out-expo);pointer-events:none;filter:blur(4px)}
.hero__slide.active{position:relative;opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;filter:blur(0)}

@media(max-width:768px){
  .player-controls__volume-wrap{display:none}
  .player-controls__btn{width:32px;height:32px}
  .player-controls__time{font-size:.75rem}
}

/* --- SECTION SEO DESCRIPTION --- */
.section-seo{margin:16px 0 24px;padding:0;background:none;border:none;border-radius:var(--radius-sm);position:relative;overflow:hidden;transition:all .3s var(--ease-out-expo)}
.section-seo:not(.expanded){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.section-seo.expanded{padding:14px 18px;background:var(--bg-card);border:1px solid rgba(167,139,250,.06);white-space:normal}
@media(max-width:767px){.section-seo:not(.expanded){white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.section-seo__toggle{display:inline-flex!important;margin-top:4px}}
.section-seo__text{color:var(--text-secondary);font-size:.84rem;line-height:1.8;margin:0;display:inline}
.section-seo__text a{color:var(--accent-violet);text-decoration:none;border-bottom:1px dashed rgba(167,139,250,.3);transition:all .2s}
.section-seo__text a:hover{color:var(--accent-pink);border-bottom-color:var(--accent-pink)}
.section-seo__text strong{color:var(--text-primary);font-weight:500}
.section-seo__full{display:none}
.section-seo.expanded .section-seo__full{display:inline}
.section-seo__toggle{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:0;background:none;border:none;color:var(--accent-violet);font-size:.8rem;cursor:pointer;font-family:var(--font-body);transition:color .2s;vertical-align:baseline}
.section-seo__toggle:hover{color:var(--accent-pink)}
.section-seo__toggle svg{width:14px;height:14px;transition:transform .3s var(--ease-out-expo)}
.section-seo.expanded .section-seo__toggle svg{transform:rotate(180deg)}
[data-theme="light"] .section-seo.expanded{background:rgba(0,0,0,.02);border-color:rgba(124,58,237,.08)}

/* --- SEO CONTENT SECTION --- */
.seo-content{padding:var(--section-gap) 0;border-top:1px solid rgba(167,139,250,.08)}
.seo-content__title{font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.4rem);color:var(--text-primary);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.seo-content__title::before{content:'';width:4px;height:20px;background:var(--grad-main);border-radius:4px}
.seo-content__text{color:var(--text-secondary);font-size:.92rem;line-height:1.9;margin-bottom:24px;max-width:960px}
.seo-content__text strong{color:var(--text-primary);font-weight:500}
.seo-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.seo-links__item{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;background:var(--bg-card);border:1px solid rgba(167,139,250,.1);border-radius:var(--radius-full);color:var(--text-secondary);font-size:.84rem;text-decoration:none;transition:all .25s var(--ease-out-expo)}
.seo-links__item:hover{background:var(--bg-card-hover);color:var(--accent-violet);border-color:rgba(167,139,250,.25);transform:translateY(-1px)}
.seo-links__item svg{width:14px;height:14px;opacity:.6}
.seo-content__cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px}
@media(max-width:768px){.seo-content__cols{grid-template-columns:1fr;gap:20px}}