/* ============================================================
   FLIXORA v5.2 – main.css
   Full Dark / Light theme via [data-theme] attribute
   Transitions smooth on toggle · Mobile-first · Responsive
   ============================================================ */

/* ── Fonts ────────────────────────────────────────────────── */
/* ── CJK & Multilingual Fonts ─────────────────────────────
   Automatically loaded when OS/browser needs these scripts.
   Download via: php install-vendor.php
   Covers: Simplified Chinese, Japanese, Korean, Arabic
   ─────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Noto Sans SC';
  src: url('../fonts/NotoSansSC-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+4E00-9FFF, U+3400-4DBF, U+F900-FAFF,
                 U+2E80-2EFF, U+3000-303F, U+FF00-FFEF;
}
@font-face {
  font-family: 'Noto Sans SC';
  src: url('../fonts/NotoSansSC-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
  unicode-range: U+4E00-9FFF, U+3400-4DBF, U+F900-FAFF,
                 U+2E80-2EFF, U+3000-303F, U+FF00-FFEF;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/NotoSansJP-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+3040-309F, U+30A0-30FF, U+4E00-9FFF, U+FF00-FFEF;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  src: url('../fonts/NotoSansArabic-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../fonts/NotoSansKR-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+AC00-D7AF, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DM_Sans.woff2') format('woff2');
  font-weight: 300 700; font-display: swap;
}

/* ══════════════════════════════════════════════════════════
   DARK THEME (default)
══════════════════════════════════════════════════════════ */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --bg:       #07091c;
  --bg-2:     #0b0e24;
  --bg-3:     #0f1330;
  --bg-card:  #111628;
  --bg-input: #0f1330;
  --bg-nav:   rgba(7,9,28,.82);
  --bg-nav-solid: rgba(7,9,28,.98);
  --bg-dropdown: #111628;
  --bg-glass: rgba(15,19,48,.72);
  --surface:  rgba(255,255,255,.03);
  --surface2: rgba(255,255,255,.06);

  /* Borders */
  --br:  rgba(255,255,255,.07);
  --br2: rgba(255,255,255,.11);
  --br3: rgba(255,255,255,.16);

  /* Text */
  --t1: #eef0f8;
  --t2: #8a9abf;
  --t3: #485870;
  --t4: #2a3554;

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0,0,0,.5);
  --shadow-nav:  0 2px 24px rgba(0,0,0,.5);
  --shadow-drop: 0 16px 48px rgba(0,0,0,.6);
  --shadow-xl:   0 20px 60px rgba(0,0,0,.7);

  /* Scrollbar */
  --scrollbar-thumb: rgba(255,255,255,.1);

  /* Hero overlay */
  --hero-overlay:
    linear-gradient(to right, rgba(7,9,28,.97) 0%, rgba(7,9,28,.55) 44%, rgba(7,9,28,.12) 100%),
    linear-gradient(to top,   rgba(7,9,28,1)   0%, transparent 42%);

  /* Card hover border */
  --card-hover-shadow: 0 18px 52px rgba(0,0,0,.68), 0 0 0 1px rgba(255,107,74,.16);

  /* Input */
  --input-bg: #0f1330;
  --input-border: rgba(255,255,255,.1);
  --input-placeholder: #2a3554;
}

/* ══════════════════════════════════════════════════════════
   LIGHT THEME
══════════════════════════════════════════════════════════ */
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg:       #f0f2f8;
  --bg-2:     #e8ebf5;
  --bg-3:     #dde1ef;
  --bg-card:  #ffffff;
  --bg-input: #ffffff;
  --bg-nav:   rgba(248,249,255,.88);
  --bg-nav-solid: rgba(248,249,255,.98);
  --bg-dropdown: #ffffff;
  --bg-glass: rgba(255,255,255,.82);
  --surface:  rgba(0,0,0,.03);
  --surface2: rgba(0,0,0,.055);

  /* Borders */
  --br:  rgba(0,0,0,.08);
  --br2: rgba(0,0,0,.12);
  --br3: rgba(0,0,0,.18);

  /* Text */
  --t1: #0d1224;
  --t2: #485870;
  --t3: #8a9abf;
  --t4: #b8c5d8;

  /* Shadows */
  --shadow-card: 0 2px 16px rgba(0,0,0,.08);
  --shadow-nav:  0 1px 16px rgba(0,0,0,.08);
  --shadow-drop: 0 8px 32px rgba(0,0,0,.14);
  --shadow-xl:   0 12px 48px rgba(0,0,0,.16);

  /* Scrollbar */
  --scrollbar-thumb: rgba(0,0,0,.14);

  /* Hero overlay */
  --hero-overlay:
    linear-gradient(to right, rgba(7,9,28,.92) 0%, rgba(7,9,28,.5) 44%, rgba(7,9,28,.08) 100%),
    linear-gradient(to top,   rgba(7,9,28,.98) 0%, transparent 42%);

  /* Card hover border */
  --card-hover-shadow: 0 8px 32px rgba(0,0,0,.14), 0 0 0 1.5px rgba(255,107,74,.28);

  /* Input */
  --input-bg: #ffffff;
  --input-border: rgba(0,0,0,.12);
  --input-placeholder: #b8c5d8;
}

/* ══════════════════════════════════════════════════════════
   BRAND / ACCENT TOKENS (theme-independent)
══════════════════════════════════════════════════════════ */
:root {
  /* Coral primary */
  --coral:       #ff6b4a;
  --coral-light: #ff8f73;
  --coral-deep:  #e85535;
  --coral-dim:   rgba(255,107,74,.13);
  --coral-glow:  rgba(255,107,74,.28);

  /* Blue */
  --blue:      #4d9fff;
  --blue-dim:  rgba(77,159,255,.13);

  /* Mint */
  --mint:      #00d4a8;
  --mint-dim:  rgba(0,212,168,.13);

  /* Amber */
  --amber:     #f5a623;
  --amber-dim: rgba(245,166,35,.13);

  /* Violet */
  --violet:     #8b5cf6;
  --violet-dim: rgba(139,92,246,.13);

  /* Gradients */
  --g-brand: linear-gradient(135deg,#ff6b4a 0%,#f5a623 100%);
  --g-cool:  linear-gradient(135deg,#4d9fff 0%,#8b5cf6 100%);
  --g-warm:  linear-gradient(135deg,#ff6b4a 0%,#8b5cf6 100%);
  --g-mint:  linear-gradient(135deg,#00d4a8 0%,#4d9fff 100%);

  /* Category gradients */
  --gc-1: linear-gradient(135deg,#ff6b4a,#f5a623);
  --gc-2: linear-gradient(135deg,#4d9fff,#8b5cf6);
  --gc-3: linear-gradient(135deg,#00d4a8,#4d9fff);
  --gc-4: linear-gradient(135deg,#f43f5e,#ff6b4a);
  --gc-5: linear-gradient(135deg,#8b5cf6,#ec4899);
  --gc-6: linear-gradient(135deg,#10b981,#00d4a8);
  --gc-7: linear-gradient(135deg,#f59e0b,#f43f5e);
  --gc-8: linear-gradient(135deg,#6366f1,#4d9fff);

  /* Status */
  --ok:   #22d3a2;
  --err:  #f43f5e;
  --warn: #fbbf24;
  --info: #60a5fa;

  /* Typography */
  --fh: 'Fraunces', Georgia, serif;
  --fb: 'DM Sans', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Arabic', system-ui, sans-serif;

  /* Radii */
  --r4:   4px;  --r8:   8px;  --r12:  12px;
  --r16:  16px; --r20:  20px; --r24:  24px;
  --rpill: 999px;

  /* Motion */
  --ease:        .22s cubic-bezier(.4,0,.2,1);
  --ease-spring: .38s cubic-bezier(.34,1.3,.64,1);

  --nav-h: 64px;
}

/* ══════════════════════════════════════════════════════════
   THEME TRANSITION — all elements fade smoothly
══════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  transition:
    background-color .28s ease,
    border-color     .28s ease,
    color            .15s ease,
    box-shadow       .28s ease;
}
/* Exclude elements where transition causes flicker */
img, video, svg,
.vcard__img, .hero__bg-img,
[data-theme-no-transition],
.vcard__hover-ov,
.topbar__ham span {
  transition: none !important;
}
/* Re-enable specific transitions for interactive elements */
.vcard__img        { transition: transform .55s ease; }
.vcard__hover-ov   { transition: opacity .22s ease; }
.topbar__ham span  { transition: transform .22s ease, opacity .22s ease; }

/* ══════════════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--fb);
  /* CJK unicode rendering */
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  background: var(--bg);
  color: var(--t1);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 65% 45% at 10% -5%,  rgba(255,107,74,.055), transparent 52%),
    radial-gradient(ellipse 55% 60% at 92% 96%, rgba(77,159,255,.045), transparent 52%);
}
[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 65% 40% at 10% -5%, rgba(255,107,74,.04), transparent 50%),
    radial-gradient(ellipse 55% 55% at 92% 96%, rgba(77,159,255,.04), transparent 50%);
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: var(--r4); }

/* ── Typography ───────────────────────────────────────── */
h1,h2,h3,h4,h5 { font-family:var(--fh); font-weight:700; line-height:1.15; letter-spacing:-.025em; }
h1 { font-size:clamp(2rem,5vw,3.8rem); }
h2 { font-size:clamp(1.35rem,3vw,2.1rem); }
h3 { font-size:clamp(1.1rem,2vw,1.5rem); }
p  { color:var(--t2); line-height:1.72; }
.gt  { background:var(--g-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gt2 { background:var(--g-cool);  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 99px; }

/* ══════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
══════════════════════════════════════════════════════════ */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r12);
  border: 1.5px solid var(--br2);
  background: var(--surface);
  cursor: pointer;
  color: var(--t2);
  font-size: 1rem;
  position: relative;
  overflow: hidden;
}
.theme-toggle:hover {
  background: var(--coral-dim);
  border-color: rgba(255,107,74,.3);
  color: var(--coral);
}
/* Icon containers */
.theme-toggle .ico-dark,
.theme-toggle .ico-light {
  position: absolute;
  transition: transform .35s cubic-bezier(.34,1.3,.64,1), opacity .25s ease;
}
[data-theme="dark"]  .theme-toggle .ico-dark  { transform: scale(1)    rotate(0deg);   opacity: 1; }
[data-theme="dark"]  .theme-toggle .ico-light { transform: scale(0)    rotate(90deg);  opacity: 0; }
[data-theme="light"] .theme-toggle .ico-dark  { transform: scale(0)    rotate(-90deg); opacity: 0; }
[data-theme="light"] .theme-toggle .ico-light { transform: scale(1)    rotate(0deg);   opacity: 1; }

/* ══════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .72rem 1.5rem; border-radius: var(--rpill);
  border: none; cursor: pointer; font-weight: 600; font-size: .9rem;
  letter-spacing: .01em; white-space: nowrap;
  position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,0));
  opacity: 0; transition: opacity var(--ease);
}
.btn:hover::after { opacity: 1; }

.btn-brand {
  background: var(--g-brand); color: #fff;
  box-shadow: 0 4px 18px var(--coral-glow);
}
.btn-brand:hover { box-shadow: 0 8px 28px var(--coral-glow); transform: translateY(-1px); }

.btn-ghost-light {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}
.btn-ghost-light:hover { background: rgba(255,255,255,.16); }

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--br3);
  color: var(--t1);
}
.btn-outline:hover { border-color: var(--coral); color: var(--coral); background: var(--coral-dim); }

.btn-ghost { background: var(--surface); color: var(--t2); border: 1px solid var(--br); }
.btn-ghost:hover { background: var(--surface2); color: var(--t1); border-color: var(--br2); }

.btn-sm  { padding: .42rem .95rem; font-size: .82rem; }
.btn-lg  { padding: .9rem 1.85rem; font-size: .95rem; }
.btn-xl  { padding: 1rem 2.25rem; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .38; cursor: not-allowed; pointer-events: none; }

/* ══════════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════════ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h); z-index: 1000;
  background: var(--bg-nav);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid var(--br);
}
.topbar.solid {
  background: var(--bg-nav-solid);
  box-shadow: var(--shadow-nav);
}
[data-theme="light"] .topbar { border-bottom-color: rgba(0,0,0,.07); }

.topbar__inner {
  max-width: 1440px; margin: 0 auto;
  padding: 0 1.25rem; height: 100%;
  display: flex; align-items: center; gap: 1rem;
}

/* Logo */
.logo { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; text-decoration: none; }
.logo__mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--g-brand); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 18px var(--coral-glow); overflow: hidden; flex-shrink: 0;
}
.logo__mark img { width: 20px; height: 20px; object-fit: contain; }
.logo__text {
  font-family: var(--fh); font-size: 1.3rem; font-weight: 800;
  background: var(--g-brand); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing: -.04em;
}

/* Desktop nav links */
.topbar__links { display: none; align-items: center; gap: .1rem; flex: 1; }
.topbar__link {
  display: flex; align-items: center; gap: .35rem;
  padding: .44rem .82rem; border-radius: var(--rpill);
  font-size: .875rem; font-weight: 500; color: var(--t2);
}
.topbar__link:hover { color: var(--t1); background: var(--surface2); }
.topbar__link .li { font-size: .95rem; opacity: .7; }

/* Right actions */
.topbar__right { display: flex; align-items: center; gap: .55rem; margin-left: auto; }

/* Search button */
.topbar__search-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r12);
  border: none; background: transparent; color: var(--t2); cursor: pointer;
}
.topbar__search-btn:hover { color: var(--t1); background: var(--surface2); }

/* Premium badge */
.topbar__premium-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .28rem .75rem; border-radius: var(--rpill);
  background: linear-gradient(135deg,rgba(255,107,74,.14),rgba(245,166,35,.14));
  border: 1px solid rgba(255,107,74,.25);
  color: var(--coral-light); font-size: .74rem; font-weight: 700;
}

/* Avatar */
.topbar__avatar-wrap { position: relative; }

@media(min-width:900px) { .topbar__avatar-btn {
  width: 36px; height: 36px; border-radius: 50%;margin-top: 10px;margin-right: 10px;
  border: none; cursor: pointer; background: none; padding: 0; position: relative;
} }

.topbar__avatar-btn {
  width: 36px; height: 36px; border-radius: 50%;margin-top: 10px;
  border: none; cursor: pointer; background: none; padding: 0; position: relative;
}
.topbar__avatar-btn::before {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  background: var(--g-brand); z-index: -1;
}
.topbar__avatar-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block; }
.topbar__avatar-init {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700;
  background: var(--bg-3); color: var(--t1);
}

/* Dropdown */
.topbar__dropdown {
  position: fixed; top: calc(100% + 12px); right: 0;
  min-width: 210px; background: var(--bg-dropdown);
  border: 1px solid var(--br2); border-radius: var(--r16);
  padding: .5rem; box-shadow: var(--shadow-drop);
  opacity: 0; pointer-events: none;
  transform: translateY(-8px) scale(.97); transform-origin: top right;
  z-index: 10;
}
.topbar__dropdown.open {
  opacity: 1; pointer-events: auto; transform: translateY(0) scale(1);
}
.topbar__dd-user { padding: .72rem 1rem .55rem; border-bottom: 1px solid var(--br); margin-bottom: .4rem; }
.topbar__dd-name { font-size: .88rem; font-weight: 600; color: var(--t1); }
.topbar__dd-sub  { font-size: .73rem; color: var(--t3); margin-top: .1rem; }
.topbar__dd-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .58rem 1rem; border-radius: var(--r8);
  font-size: .875rem; color: var(--t2);
}
.topbar__dd-link:hover { color: var(--t1); background: var(--surface2); }
.topbar__dd-link.danger { color: var(--err); }
.topbar__dd-link.danger:hover { background: rgba(244,63,94,.08); }

/* Search bar slide */
.topbar__search-bar {
  background: var(--bg-nav-solid);
  border-top: 1px solid var(--br);
  padding: .82rem 1.25rem;
}
.topbar__search-form {
  max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: .55rem;
  background: var(--bg-3); border: 1.5px solid var(--br2);
  border-radius: var(--rpill); padding: .5rem .5rem .5rem 1.1rem;
}
.topbar__search-bar:focus-within .topbar__search-form {
  border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-dim);
}
.topbar__search-input { flex: 1; background: none; border: none; color: var(--t1); font-size: .9rem; outline: none; }
.topbar__search-input::placeholder { color: var(--t4); }
.topbar__search-submit {
  background: var(--g-brand); border: none; color: #fff;
  cursor: pointer; padding: .44rem .88rem; border-radius: var(--rpill);
  font-size: .82rem; font-weight: 600; display: flex; align-items: center; gap: .3rem;
}

/* Hamburger */
.topbar__ham {
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 36px; height: 36px;
  background: none; border: none; cursor: pointer; padding: .4rem; border-radius: var(--r8);
}
.topbar__ham:hover { background: var(--surface2); }
.topbar__ham span { display: block; width: 18px; height: 2px; background: var(--t2); border-radius: 2px; }
.topbar__ham.open span { background: var(--t1); }
.topbar__ham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar__ham.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.topbar__ham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.topbar__drawer {
  background: var(--bg-card); border-top: 1px solid var(--br);
  padding: 1rem 1.25rem 1.25rem; display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.topbar__drawer.open { display: block; }
.topbar__drawer-chips {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-bottom: .85rem; padding-bottom: .85rem; border-bottom: 1px solid var(--br);
}
.topbar__drawer-chip {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .38rem .88rem; border-radius: var(--rpill);
  font-size: .82rem; color: var(--t2); background: var(--bg-3); border: 1px solid var(--br);
}
.topbar__drawer-chip:hover { color: var(--t1); border-color: var(--coral); background: var(--coral-dim); }
.topbar__drawer-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

@media(min-width:900px) {
  .topbar__inner { padding: 0 2rem; gap: 1.5rem; }
  .topbar__links { display: flex; }
  .topbar__ham   { display: none; }
  .topbar__drawer { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
.hero {
  position: relative; min-height: 93vh;
  display: flex; align-items: flex-end;
  padding-top: var(--nav-h); overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg-img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.42) saturate(1.22);
  animation: heroZoom 12s ease-in-out infinite alternate;
}
[data-theme="light"] .hero__bg-img { filter: brightness(.5) saturate(1.15); }
@keyframes heroZoom { from{transform:scale(1)} to{transform:scale(1.04)} }
.hero__overlay { position: absolute; inset: 0; background: var(--hero-overlay); }
.hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 2% 56%, rgba(255,107,74,.072), transparent 54%);
}
.hero__body {
  position: relative; z-index: 2;
  max-width: 1440px; width: 100%; margin: 0 auto;
  padding: 2rem 1.25rem 3.5rem;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255,107,74,.12); border: 1px solid rgba(255,107,74,.22);
  color: var(--coral-light); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .9rem; border-radius: var(--rpill); margin-bottom: 1rem;
}
.hero__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--coral);
  animation: pulseDot 2s ease-in-out infinite;
  box-shadow: 0 0 6px var(--coral);
}
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 4px var(--coral); }
  50%      { box-shadow: 0 0 14px var(--coral), 0 0 28px rgba(255,107,74,.35); }
}
.hero__title { max-width: 620px; text-shadow: 0 2px 24px rgba(0,0,0,.5); margin-bottom: .95rem; color: #eef0f8; }
.hero__meta  { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.05rem; }
.hero__desc  { max-width: 500px; color: rgba(238,240,248,.7); font-size: .98rem; line-height: 1.72; margin-bottom: 1.75rem; }
.hero__ctas  { display: flex; gap: .85rem; flex-wrap: wrap; align-items: center; }
.hero__dots  { display: flex; gap: .45rem; margin-top: 2rem; }
.hero__dot {
  height: 4px; border-radius: 2px; border: none; cursor: pointer;
  background: rgba(255,255,255,.22); width: 22px;
}
.hero__dot.active { width: 40px; background: var(--g-brand); box-shadow: 0 0 8px var(--coral-glow); }
@media(min-width:640px) { .hero__body { padding: 2.5rem 2rem 5rem; } }

/* Hero badges */
.hbadge {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .22rem .62rem; border-radius: var(--r4);
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.hbadge-year   { background: rgba(0,0,0,.4); color: #d0d8ee; border: 1px solid rgba(255,255,255,.14); }
.hbadge-rating { background: rgba(245,166,35,.18); color: var(--amber); border: 1px solid rgba(245,166,35,.28); }
.hbadge-movie  { background: rgba(255,107,74,.14); color: var(--coral-light); border: 1px solid rgba(255,107,74,.25); }
.hbadge-series { background: rgba(77,159,255,.14); color: #8dc8ff; border: 1px solid rgba(77,159,255,.25); }

/* ══════════════════════════════════════════════════════════
   CHIP STRIP
══════════════════════════════════════════════════════════ */
.chip-wrap { padding: 1.75rem 1.25rem .5rem; max-width: 1440px; margin: 0 auto; }
.chip-row {
  display: flex; flex-wrap: nowrap; gap: .5rem;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: .25rem;
}
.chip-row::-webkit-scrollbar { display: none; }
@media(min-width:640px) { .chip-wrap { padding: 2rem 2rem .75rem; } .chip-row { flex-wrap: wrap; } }
.chip {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .42rem 1rem; border-radius: var(--rpill);
  font-size: .82rem; font-weight: 600;
  background: var(--bg-card); border: 1.5px solid var(--br);
  color: var(--t2); cursor: pointer; white-space: nowrap;
}
.chip:hover { color: var(--coral); border-color: rgba(255,107,74,.35); background: var(--coral-dim); }
.chip.active { color: #fff; background: var(--g-brand); border-color: transparent; box-shadow: 0 4px 16px var(--coral-glow); }

/* ══════════════════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════════════════ */
.section { padding: 3rem 1.25rem; max-width: 1440px; margin: 0 auto; }
.section-sm { padding-top: 1.25rem; }
.sh { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.4rem; gap: 1rem; }
.sh__eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--coral);
  display: flex; align-items: center; gap: .45rem; margin-bottom: .28rem;
}
.sh__eyebrow::before { content: ''; display: block; width: 14px; height: 2px; background: var(--coral); border-radius: 2px; }
.sh__title { font-family: var(--fh); font-size: clamp(1.15rem,2.5vw,1.5rem); font-weight: 700; color: var(--t1); }
.sh__link {
  display: flex; align-items: center; gap: .38rem;
  font-size: .82rem; font-weight: 600; color: var(--t2);
  padding: .38rem .8rem; border-radius: var(--rpill);
  border: 1px solid var(--br); white-space: nowrap;
}
.sh__link:hover { color: var(--coral); border-color: rgba(255,107,74,.3); background: var(--coral-dim); }
.sh__link svg { transition: transform var(--ease); }
.sh__link:hover svg { transform: translateX(3px); }
@media(min-width:640px) { .section { padding: 3.5rem 2rem; } }

/* ══════════════════════════════════════════════════════════
   CATEGORY VISUAL CARDS
══════════════════════════════════════════════════════════ */
.cat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; }
@media(min-width:480px)  { .cat-grid { grid-template-columns: repeat(3,1fr); gap: .75rem; } }
@media(min-width:640px)  { .cat-grid { grid-template-columns: repeat(4,1fr); gap: 1rem; } }
@media(min-width:900px)  { .cat-grid { grid-template-columns: repeat(6,1fr); } }
@media(min-width:1200px) { .cat-grid { grid-template-columns: repeat(8,1fr); gap: 1.1rem; } }

.cat-card {
  position: relative; border-radius: var(--r16); overflow: hidden;
  aspect-ratio: 4/3; cursor: pointer;
  border: 1px solid var(--br); box-shadow: var(--shadow-card);
}
.cat-card:hover { transform: translateY(-5px) scale(1.025); box-shadow: var(--shadow-xl); }
.cat-card__bg { position: absolute; inset: 0; }
.cat-card:hover .cat-card__bg { transform: scale(1.07); }
.cat-card__bg-img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.35) saturate(1.3); }
.cat-card:hover .cat-card__bg-img { filter: brightness(.52) saturate(1.55); }
.cat-card__bg-grad { position: absolute; inset: 0; }
.cat-card__body {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: .75rem;
}
.cat-card__icon  { font-size: 1.6rem; margin-bottom: .32rem; line-height: 1; }
.cat-card__name  { font-family: var(--fh); font-size: .8rem; font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); line-height: 1.2; }
.cat-card__count { font-size: .62rem; color: rgba(255,255,255,.5); margin-top: .15rem; }

/* ══════════════════════════════════════════════════════════
   VIDEO CARDS
══════════════════════════════════════════════════════════ */
.card-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .8rem; }
@media(min-width:480px)  { .card-grid { gap: .9rem; } }
@media(min-width:640px)  { .card-grid { grid-template-columns: repeat(3,1fr); gap: 1rem; } }
@media(min-width:900px)  { .card-grid { grid-template-columns: repeat(4,1fr); gap: 1.1rem; } }
@media(min-width:1200px) { .card-grid { grid-template-columns: repeat(5,1fr); gap: 1.2rem; } }
@media(min-width:1440px) { .card-grid { grid-template-columns: repeat(6,1fr); } }

.card-grid-2row { display: grid; grid-template-columns: repeat(2,1fr); gap: .8rem; }
@media(min-width:480px)  { .card-grid-2row { grid-template-columns: repeat(3,1fr); } }
@media(min-width:640px)  { .card-grid-2row { grid-template-columns: repeat(4,1fr); gap: 1rem; } }
@media(min-width:1100px) { .card-grid-2row { grid-template-columns: repeat(5,1fr); } }
@media(min-width:1400px) { .card-grid-2row { grid-template-columns: repeat(6,1fr); } }

/* ── The Card ─────────────────────────────────────────── */
.vcard {
  position: relative; background: var(--bg-card);
  border-radius: var(--r16); overflow: hidden;
  border: 1px solid var(--br); cursor: pointer;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
  text-decoration: none; color: var(--t1);
}
.vcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-hover-shadow);
  border-color: rgba(255,107,74,.2);
}
[data-theme="light"] .vcard:hover {
  border-color: rgba(255,107,74,.3);
}

/* Thumbnail */
.vcard__thumb {
  position: relative; aspect-ratio: 16/9;
  overflow: hidden; background: var(--bg-3); flex-shrink: 0;
}
.vcard__img { width: 100%; height: 100%; object-fit: cover; }
.vcard:hover .vcard__img { transform: scale(1.06); }
/* Bottom gradient */
.vcard__thumb::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 52%; pointer-events: none; z-index: 1;
  background: linear-gradient(to top, rgba(7,9,28,.92) 0%, transparent 100%);
}
[data-theme="light"] .vcard__thumb::after {
  background: linear-gradient(to top, rgba(5,6,16,.85) 0%, transparent 100%);
}
/* Hover overlay */
.vcard__hover-ov {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(7,9,28,.4); display: flex; align-items: center; justify-content: center;
  opacity: 0;
}
.vcard:hover .vcard__hover-ov { opacity: 1; }
.vcard__play-btn {
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255,255,255,.15); backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  transform: scale(.82);
}
.vcard:hover .vcard__play-btn { transform: scale(1); }
.vcard__play-btn:hover { background: var(--g-brand); border-color: transparent; }
.vcard__play-btn svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }

/* Episode count pill */
.vcard__ep-pill {
  position: absolute; bottom: .6rem; left: .6rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .22rem .6rem;
  background: rgba(7,9,28,.78); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r4);
  font-size: .68rem; font-weight: 700; color: #fff; line-height: 1;
}
.vcard__ep-pill svg { width: 9px; height: 9px; fill: #fff; opacity: .8; flex-shrink: 0; }

/* Rating pill */
.vcard__rating-pill {
  position: absolute; bottom: .6rem; right: .6rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .22rem;
  padding: .22rem .55rem;
  background: rgba(7,9,28,.78); backdrop-filter: blur(8px);
  border: 1px solid rgba(245,166,35,.28); border-radius: var(--r4);
  font-size: .68rem; font-weight: 700; color: var(--amber); line-height: 1;
}
.vcard__rating-pill svg { width: 9px; height: 9px; fill: var(--amber); flex-shrink: 0; }

/* Status badges */
.vcard__badges { position: absolute; top: .6rem; left: .6rem; z-index: 4; display: flex; gap: .3rem; flex-wrap: wrap; }
.vbadge {
  display: inline-block; padding: .2rem .52rem; border-radius: var(--r4);
  font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  line-height: 1.4; backdrop-filter: blur(6px);
}
.vbadge-free    { background: rgba(0,212,168,.18); color: #5eecd4; border: 1px solid rgba(0,212,168,.3); }
.vbadge-new     { background: rgba(77,159,255,.18); color: #8dc8ff; border: 1px solid rgba(77,159,255,.3); }
.vbadge-hot     { background: rgba(255,107,74,.18); color: #ffaa90; border: 1px solid rgba(255,107,74,.3); }
.vbadge-top     { background: rgba(245,166,35,.18); color: #fcd07a; border: 1px solid rgba(245,166,35,.3); }
.vbadge-hd      { background: rgba(139,92,246,.18); color: #c4b5fd; border: 1px solid rgba(139,92,246,.3); }
.vbadge-premium { background: rgba(245,166,35,.15); color: var(--amber); border: 1px solid rgba(245,166,35,.25); }

/* Card body */
.vcard__body { padding: .8rem .9rem .92rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.vcard__genre-label {
  font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  background: var(--g-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.vcard__title {
  font-family: var(--fh); font-size: .9rem; font-weight: 700; color: var(--t1); line-height: 1.25;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.vcard__meta-row { display: flex; align-items: center; gap: .45rem; font-size: .72rem; color: var(--t3); flex-wrap: wrap; }
.vcard__meta-sep  { color: var(--br2); }
.vcard__meta-star { color: var(--amber); font-weight: 600; }
.vcard__info-row  { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .4rem; }
.vcard__eps-count { font-size: .68rem; color: var(--t2); background: var(--bg-3); border: 1px solid var(--br); padding: .18rem .52rem; border-radius: var(--r4); font-weight: 600; }
.vcard__type-ic   { font-size: .8rem; opacity: .4; }

/* Swiper */
.swiper-section { overflow: hidden !important; }
.swiper-section .swiper-slide { width: 190px; flex-shrink: 0; }
@media(min-width:480px)  { .swiper-section .swiper-slide { width: 215px; } }
@media(min-width:768px)  { .swiper-section .swiper-slide { width: 244px; } }
@media(min-width:1100px) { .swiper-section .swiper-slide { width: 265px; } }

/* ══════════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 1.15rem; }
.form-label { display: block; font-size: .82rem; font-weight: 600; color: var(--t2); margin-bottom: .42rem; }
.form-input {
  width: 100%; background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  color: var(--t1); padding: .78rem 1rem; border-radius: var(--r12);
  font-size: .9rem;
}
.form-input:focus { border-color: var(--coral); outline: none; box-shadow: 0 0 0 3px var(--coral-dim); }
.form-input::placeholder { color: var(--input-placeholder); }
select.form-input { cursor: pointer; }
textarea.form-input { resize: vertical; min-height: 96px; }
.form-err  { font-size: .78rem; color: var(--err); margin-top: .3rem; }
.form-hint { font-size: .76rem; color: var(--t4); margin-top: .28rem; }

/* Auth */
.auth-page {
  min-height: 100vh; display: grid; place-items: center;
  padding: 2rem 1.25rem 2rem;
  background: var(--bg);
}
[data-theme="dark"]  .auth-page { background-image: radial-gradient(ellipse 80% 50% at 50% -10%,rgba(255,107,74,.07),transparent 55%); }
[data-theme="light"] .auth-page { background-image: radial-gradient(ellipse 80% 50% at 50% -10%,rgba(255,107,74,.05),transparent 55%); }
.auth-box {
  width: 100%; max-width: 420px; background: var(--bg-card);
  border: 1px solid var(--br2); border-radius: var(--r24);
  padding: 2rem 1.75rem; box-shadow: var(--shadow-xl);
}
.auth-logo { text-align: center; margin-bottom: 1.75rem; }
.auth-title { font-family: var(--fh); font-size: 1.75rem; font-weight: 700; margin-bottom: .4rem; color: var(--t1); }
.auth-sub   { font-size: .88rem; color: var(--t2); margin-bottom: 1.85rem; }
.auth-switch { text-align: center; margin-top: 1.2rem; font-size: .875rem; color: var(--t2); }
.auth-switch a { color: var(--coral); font-weight: 600; }
@media(min-width:480px) { .auth-box { padding: 2.5rem; } }

/* Alerts */
.alert { padding: .82rem 1.1rem; border-radius: var(--r12); margin: .75rem 0; font-size: .875rem; font-weight: 500; display: flex; align-items: flex-start; gap: .7rem; }
.alert--ok,.alert--success   { background: rgba(34,211,162,.08); color: var(--ok);   border: 1px solid rgba(34,211,162,.2); }
.alert--err,.alert--error     { background: rgba(244,63,94,.08);  color: var(--err);  border: 1px solid rgba(244,63,94,.2); }
.alert--warn,.alert--warning  { background: rgba(251,191,36,.08); color: var(--warn); border: 1px solid rgba(251,191,36,.2); }
.alert--info                  { background: rgba(96,165,250,.08); color: var(--info); border: 1px solid rgba(96,165,250,.2); }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.75rem; }
@media(min-width:640px)  { .pricing-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1000px) { .pricing-grid { grid-template-columns: repeat(4,1fr); } }
.price-card {
  background: var(--bg-card); border: 1.5px solid var(--br);
  border-radius: var(--r20); padding: 1.75rem 1.5rem;
  position: relative; display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
}
.price-card:hover { border-color: rgba(255,107,74,.32); box-shadow: 0 0 36px rgba(255,107,74,.1); }
.price-card--pop { border-color: rgba(255,107,74,.42); }
[data-theme="light"] .price-card--pop { background: linear-gradient(160deg,rgba(255,107,74,.03),var(--bg-card)); }
[data-theme="dark"]  .price-card--pop { background: linear-gradient(160deg,var(--bg-3),var(--bg-card)); }
.price-card__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--g-brand); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: .28rem .95rem; border-radius: var(--rpill); box-shadow: 0 4px 16px var(--coral-glow); white-space: nowrap; }
.price-card__name   { font-family: var(--fh); font-size: 1.15rem; font-weight: 700; margin-bottom: .62rem; color: var(--t1); }
.price-card__amount { font-family: var(--fh); font-size: 2rem; font-weight: 800; margin-bottom: .2rem; background: var(--g-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.price-card__amount span { font-size: .88rem; font-weight: 400; color: var(--t3); -webkit-text-fill-color: var(--t3); }
.price-card__period { font-size: .8rem; color: var(--t4); margin-bottom: 1.25rem; }
.price-card__feats  { flex: 1; margin-bottom: 1.25rem; }
.price-card__feat   { display: flex; align-items: center; gap: .6rem; font-size: .86rem; color: var(--t2); padding: .37rem 0; border-bottom: 1px solid var(--br); }
.price-card__feat:last-child { border: none; }
.price-card__feat-check { color: var(--mint); flex-shrink: 0; }

/* Video detail */
.vid-banner { position: relative; min-height: 60vh; display: flex; align-items: flex-end; padding-top: var(--nav-h); overflow: hidden; }
.vid-banner__bg { position: absolute; inset: 0; }
.vid-banner__img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.37) saturate(1.2); }
[data-theme="light"] .vid-banner__img { filter: brightness(.45) saturate(1.15); }
.vid-banner__ov { position: absolute; inset: 0; background: linear-gradient(to top,rgba(7,9,28,1) 0%,transparent 48%),linear-gradient(to right,rgba(7,9,28,.92) 0%,transparent 56%); }
.vid-banner__body { position: relative; z-index: 1; max-width: 1440px; width: 100%; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
@media(min-width:640px) { .vid-banner__body { padding: 2rem 2rem 3.5rem; } }

/* Episode list */
.ep-list { display: flex; flex-direction: column; gap: .55rem; }
.ep-item {
  display: flex; align-items: center; gap: .9rem;
  background: var(--bg-card); border: 1px solid var(--br); border-radius: var(--r16);
  padding: .78rem 1rem; cursor: pointer;
  box-shadow: var(--shadow-card);
  text-decoration: none; color: var(--t1);
}
.ep-item:hover { border-color: rgba(255,107,74,.28); background: var(--bg-3); box-shadow: 0 4px 18px rgba(255,107,74,.08); }
.ep-item--locked { opacity: .5; cursor: default; }
.ep-item--locked:hover { border-color: var(--br); background: var(--bg-card); box-shadow: var(--shadow-card); }
.ep-num   { font-family: var(--fh); font-size: .9rem; font-weight: 700; color: var(--t4); width: 1.65rem; flex-shrink: 0; text-align: center; }
.ep-thumb { width: 98px; flex-shrink: 0; aspect-ratio: 16/9; border-radius: var(--r8); overflow: hidden; background: var(--bg-3); }
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ep-info  { flex: 1; min-width: 0; }
.ep-title { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .2rem; color: var(--t1); }
.ep-desc  { font-size: .74rem; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-meta  { display: flex; align-items: center; gap: .55rem; margin-top: .22rem; font-size: .72rem; color: var(--t4); flex-wrap: wrap; }
.ep-lock  { font-size: .9rem; flex-shrink: 0; }
.ep-free  { color: var(--mint); }
@media(max-width:480px) { .ep-thumb { display: none; } }

/* Comments */
.cmt-list { display: flex; flex-direction: column; gap: .95rem; }
.cmt      { display: flex; gap: .8rem; }
.cmt__av  { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--g-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; overflow: hidden; }
.cmt__av img { width: 100%; height: 100%; object-fit: cover; }
.cmt__body { flex: 1; background: var(--bg-card); border: 1px solid var(--br); border-radius: var(--r16); padding: .82rem 1rem; box-shadow: var(--shadow-card); }
.cmt__hd   { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.cmt__name { font-weight: 600; font-size: .86rem; color: var(--t1); }
.cmt__time { font-size: .72rem; color: var(--t4); }
.cmt__text { font-size: .88rem; color: var(--t2); line-height: 1.65; }
.cmt__actions { display: flex; gap: .85rem; margin-top: .6rem; }
.cmt__btn { background: none; border: none; cursor: pointer; color: var(--t4); font-size: .78rem; display: flex; align-items: center; gap: .3rem; }
.cmt__btn:hover { color: var(--coral); }

/* Stars */
.stars { display: inline-flex; gap: .08rem; }
.star   { font-size: 1rem; color: var(--t4); }
.star-on,.star-h { color: var(--amber); }
.stars-i .star { cursor: pointer; }
.stars-i .star:hover,.stars-i .star.hov { color: var(--amber); }

/* Popup */
.popup-wrap { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.75); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.popup-box  { background: var(--bg-card); border: 1px solid var(--br2); border-radius: var(--r24); max-width: 520px; width: 100%; overflow: hidden; position: relative; box-shadow: var(--shadow-xl); animation: popIn .3s cubic-bezier(.34,1.45,.64,1); }
@keyframes popIn { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
.popup-close { position: absolute; top: .72rem; right: .72rem; z-index: 1; background: rgba(0,0,0,.45); border: none; cursor: pointer; color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.popup-close:hover { background: var(--err); }
.popup-box img { width: 100%; display: block; }
.popup-footer  { padding: 1.1rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.popup-dismiss { background: none; border: none; cursor: pointer; color: var(--t3); font-size: .83rem; text-decoration: underline; }
.popup-dismiss:hover { color: var(--t2); }

/* Profile */
.profile-wrap { max-width: 1440px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; display: flex; flex-direction: column; gap: 1.25rem; }
.profile-side { background: var(--bg-card); border: 1px solid var(--br); border-radius: var(--r20); padding: 1.6rem; box-shadow: var(--shadow-card); }
.profile-av   { width: 82px; height: 82px; border-radius: 50%; margin: 0 auto .9rem; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 700; color: #fff; background: var(--g-brand); overflow: hidden; }
.profile-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile-name  { text-align: center; font-family: var(--fh); font-size: 1.1rem; margin-bottom: .2rem; color: var(--t1); }
.profile-email { text-align: center; font-size: .78rem; color: var(--t4); margin-bottom: 1.3rem; }
.profile-nav a { display: flex; align-items: center; gap: .65rem; padding: .6rem .9rem; border-radius: var(--r8); color: var(--t2); font-size: .88rem; border-left: 3px solid transparent; }
.profile-nav a:hover  { background: var(--surface2); color: var(--t1); }
.profile-nav a.active { background: var(--coral-dim); color: var(--coral); border-left-color: var(--coral); }
.cbox { background: var(--bg-card); border: 1px solid var(--br); border-radius: var(--r20); padding: 1.5rem; margin-bottom: 1.1rem; box-shadow: var(--shadow-card); }
.cbox__title { font-family: var(--fh); font-size: 1.05rem; margin-bottom: 1.25rem; padding-bottom: .85rem; border-bottom: 1px solid var(--br); color: var(--t1); }
@media(min-width:768px) { .profile-wrap { flex-direction: row; align-items: flex-start; padding: 2rem 2rem 4rem; gap: 1.75rem; } .profile-side { width: 248px; flex-shrink: 0; position: sticky; top: calc(var(--nav-h)+1rem); } }

/* Pagination */
.pager { margin-top: 2.5rem; display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; }
.pager a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r8); background: var(--bg-card); border: 1px solid var(--br); color: var(--t2); font-size: .85rem; box-shadow: var(--shadow-card); }
.pager a:hover { color: var(--coral); border-color: rgba(255,107,74,.3); background: var(--coral-dim); }
.pager a.active,.pager .active a { background: var(--g-brand); border-color: transparent; color: #fff; font-weight: 700; box-shadow: 0 4px 14px var(--coral-glow); }

/* Footer */
.footer { background: var(--bg-2); border-top: 1px solid var(--br); padding: 3.5rem 1.25rem 1.75rem; }
.footer__inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
.footer__tag { color: var(--t4); font-size: .83rem; margin-top: .45rem; }
.footer__links { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
.footer__col h4 { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t4); margin-bottom: .9rem; }
.footer__col a  { display: block; color: var(--t2); font-size: .86rem; padding: .28rem 0; }
.footer__col a:hover { color: var(--coral); }
.footer__bottom { max-width: 1440px; margin: 0 auto; border-top: 1px solid var(--br); padding-top: 1.3rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; font-size: .78rem; color: var(--t4); }
@media(min-width:640px) { .footer { padding: 4.5rem 2rem 2rem; } .footer__inner { grid-template-columns: 1.2fr 2fr; } .footer__links { grid-template-columns: repeat(3,1fr); } }

/* Status */
.status { display: inline-block; padding: .22rem .62rem; border-radius: var(--r4); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.s-ok,.s-active,.s-paid,.s-published { background: rgba(34,211,162,.1); color: var(--ok); }
.s-err,.s-expired,.s-failed          { background: rgba(244,63,94,.1);  color: var(--err); }
.s-warn,.s-pending                   { background: rgba(251,191,36,.1); color: var(--warn); }
.s-draft                             { background: var(--surface); color: var(--t3); }

/* Utils */
.text-sm{font-size:.85rem;} .text-xs{font-size:.75rem;}
.text-muted{color:var(--t2) !important;} .text-dim{color:var(--t4);} .text-coral{color:var(--coral);}
.text-center{text-align:center;}
.mt2{margin-top:1rem;} .mt3{margin-top:1.5rem;} .mt4{margin-top:2rem;}
.mb2{margin-bottom:1rem;} .mb3{margin-bottom:1.5rem;}
.d-flex{display:flex;} .aic{align-items:center;} .jcb{justify-content:space-between;}
.gap1{gap:.5rem;} .gap2{gap:1rem;} .w100{width:100%;}
.d-none{display:none !important;}

.spinner { width:38px;height:38px;border-radius:50%;border:3px solid var(--bg-3);border-top-color:var(--coral);animation:spin .7s linear infinite;margin:2rem auto; }
@keyframes spin { to{transform:rotate(360deg)} }
.skel { background:linear-gradient(90deg,var(--bg-3) 25%,var(--bg-2) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:skel 1.5s infinite;border-radius:var(--r8); }
@keyframes skel { from{background-position:200% 0}to{background-position:-200% 0} }
.empty { text-align:center;padding:4rem 2rem;color:var(--t4); }
.empty__icon  { font-size:2.8rem;margin-bottom:.85rem; }
.empty__title { font-family:var(--fh);font-size:1.2rem;color:var(--t2);margin-bottom:.45rem; }

/* Animations */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)} }
.au  {animation:fadeUp .5s ease both;} .au-1{animation-delay:.1s;} .au-2{animation-delay:.2s;}
.au-3{animation-delay:.3s;} .au-4{animation-delay:.4s;}

/* ══════════════════════════════════════════════════════════
   SITE MAIN — prevents content hiding under fixed topbar
   Pages with their own hero (index, video-detail, player)
   use padding-top themselves and override via .no-main-pad
══════════════════════════════════════════════════════════ */
.site-main {
  padding-top: var(--nav-h);
}
/* Pages that handle their own top offset (hero sections / player) */
.hero-page   .site-main,
.player-page .site-main,
.auth-page-body .site-main {
  padding-top: 0;
}

/* Flash message sits just below nav, full-width */
.site-main > .alert {
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  padding: .72rem 1.25rem;
}
@media(min-width:640px) {
  .site-main > .alert { padding: .72rem 2rem; }
}


/* ── Mobile nav overflow fix ──────────────────────────────── */
.topbar__right {
  flex-shrink: 0;
  min-width: 0;
}
/* Theme toggle hidden text on very small screens */
@media (max-width: 380px) {
  .topbar__right > .btn { display: none; }
  .topbar__right > .btn.btn-brand:last-of-type { display: inline-flex; }
  .topbar__premium-badge { display: none; }
}
/* Bootstrap-like d-none/d-sm-inline-flex utilities */
.d-none { display: none !important; }
.d-inline-flex { display: inline-flex !important; }
@media (min-width: 576px) {
  .d-sm-inline-flex { display: inline-flex !important; }
}

/* ── Popup enhancements ────────────────────────────────────── */
.popup-image-wrap img { width: 100%; display: block; }
.popup-content {
  padding: .9rem 1.25rem 0;
}
.popup-desc {
  font-size: .88rem; color: var(--t2); line-height: 1.65; margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   VIDEO DETAIL PAGE — fully responsive
═══════════════════════════════════════════════════════════ */

/* Banner tweaks */
.vid-banner { position:relative; min-height:62vh; display:flex; align-items:flex-end; padding-top:var(--nav-h); overflow:hidden; }
.vid-banner__bg { position:absolute; inset:0; }
.vid-banner__img { width:100%; height:100%; object-fit:cover; filter:brightness(.37) saturate(1.2); }
[data-theme="light"] .vid-banner__img { filter:brightness(.45) saturate(1.15); }
.vid-banner__ov { position:absolute; inset:0; background:linear-gradient(to top,rgba(7,9,28,1) 0%,transparent 48%),linear-gradient(to right,rgba(7,9,28,.92) 0%,transparent 56%); }
.vid-banner__body { position:relative; z-index:1; max-width:1440px; width:100%; margin:0 auto; padding:1.5rem 1.25rem 3rem; }
@media(min-width:640px){ .vid-banner__body { padding:2rem 2rem 3.5rem; } }

.vid-eye { display:flex; align-items:center; gap:.55rem; margin-bottom:.65rem; }
.vid-eye__cat { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--coral-light); text-decoration:none; }
.vid-eye__dot { color:rgba(255,255,255,.3); }
.vid-eye__type { font-size:.7rem; color:rgba(255,255,255,.45); font-weight:600; }
.vid-title { font-family:var(--fh); font-size:clamp(1.7rem,5vw,3.2rem); font-weight:800; color:#eef0f8; line-height:1.1; margin-bottom:.75rem; letter-spacing:-.03em; text-shadow:0 2px 20px rgba(0,0,0,.4); }
.vid-meta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.9rem; }
.vid-desc { color:rgba(238,240,248,.72); font-size:.96rem; line-height:1.7; max-width:540px; margin-bottom:1.5rem; }
.vid-ctas { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }

/* ── Content layout ─────────────────────────────────────── */
.vid-layout {
  display:flex;
  flex-direction:column;
  gap:2rem;
  align-items:flex-start;
}
@media(min-width:960px){
  .vid-layout {
    flex-direction:row;
    gap:2.5rem;
  }
}

.vid-main   { flex:1; min-width:0; width:100%; }
.vid-sidebar{ flex-shrink:0; width:100%; }
@media(min-width:960px){ .vid-sidebar { width:300px; } }
@media(min-width:1200px){ .vid-sidebar { width:320px; } }

/* Rating box */
.vid-rating-box {
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  background:var(--bg-card); border:1px solid var(--br); border-radius:var(--r16);
  padding:.85rem 1.15rem; margin-bottom:1.5rem; box-shadow:var(--shadow-card);
}
.vid-rating-box__label { font-size:.84rem; color:var(--t2); }
.vid-rating-box__avg { font-size:.82rem; color:var(--amber); margin-left:auto; }
.vid-rating-box__cnt { color:var(--t4); font-size:.78em; }

/* Episode items — improved mobile */
.ep-list { display:flex; flex-direction:column; gap:.5rem; }
.ep-item {
  display:flex; align-items:center; gap:.85rem;
  background:var(--bg-card); border:1.5px solid var(--br); border-radius:var(--r16);
  padding:.78rem 1rem; cursor:pointer; box-shadow:var(--shadow-card);
  text-decoration:none; color:var(--t1);
  transition:border-color var(--ease),background var(--ease),transform .18s ease;
}
.ep-item:hover { border-color:rgba(255,107,74,.28); background:var(--bg-3); transform:translateY(-2px); box-shadow:0 4px 18px rgba(255,107,74,.08); }
.ep-item--locked { opacity:.52; cursor:default; }
.ep-item--locked:hover { border-color:var(--br); background:var(--bg-card); transform:none; box-shadow:var(--shadow-card); }
.ep-num { font-family:var(--fh); font-size:.88rem; font-weight:700; color:var(--t4); width:1.5rem; flex-shrink:0; text-align:center; }
.ep-thumb {
  width:96px; flex-shrink:0; aspect-ratio:16/9;
  border-radius:var(--r8); overflow:hidden; background:var(--bg-3);
  position:relative;
}
.ep-thumb img { width:100%; height:100%; object-fit:cover; }
.ep-thumb__bar { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(0,0,0,.4); }
.ep-thumb__bar-fill { height:100%; background:var(--g-brand); border-radius:1px; }
.ep-thumb__done {
  position:absolute; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  color:var(--mint); font-size:.85rem; font-weight:700;
}
.ep-info { flex:1; min-width:0; }
.ep-title { font-size:.88rem; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:.2rem; }
.ep-desc  { font-size:.74rem; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:none; }
.ep-meta  { display:flex; align-items:center; gap:.45rem; font-size:.72rem; color:var(--t3); flex-wrap:wrap; margin-top:.18rem; }
.ep-free  { color:var(--mint); font-weight:700; font-size:.68rem; }
.ep-lock  { flex-shrink:0; color:var(--t3); }

/* Show description only on wider screens */
@media(min-width:640px){ .ep-desc { display:block; } .ep-thumb { width:110px; } }

/* On very small screens, hide thumbnail to save space */
@media(max-width:380px){ .ep-thumb { display:none; } .ep-num { width:1.2rem; font-size:.8rem; } }

/* Tags */
.vid-tags { display:flex; flex-wrap:wrap; gap:.38rem; margin-top:1.5rem; }
.vid-tag {
  display:inline-block; padding:.24rem .65rem; border-radius:var(--rpill);
  font-size:.75rem; font-weight:600; color:var(--t3);
  background:var(--bg-3); border:1px solid var(--br);
  text-decoration:none;
  transition:color var(--ease),border-color var(--ease),background var(--ease);
}
.vid-tag:hover { color:var(--coral); border-color:rgba(255,107,74,.3); background:var(--coral-dim); }

/* ── Sidebar: info card ─────────────────────────────────── */
.vid-info-card {
  background:var(--bg-card); border:1px solid var(--br); border-radius:var(--r20);
  overflow:hidden; box-shadow:var(--shadow-card);
}
.vid-info-card__thumb {
  position:relative; aspect-ratio:16/9; background:var(--bg-3); overflow:hidden;
}
.vid-info-card__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.vid-info-card__type-badge {
  position:absolute; bottom:.6rem; left:.6rem;
  background:rgba(7,9,28,.78); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r4);
  font-size:.72rem; font-weight:700; color:#fff; padding:.2rem .55rem;
}
.vid-info-card__body { padding:1.1rem 1.25rem; }
.vid-info-row {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:.75rem; padding:.5rem 0; border-bottom:1px solid var(--br); font-size:.84rem;
}
.vid-info-row:last-child { border:none; }
.vid-info-row__label { color:var(--t3); font-weight:500; flex-shrink:0; }
.vid-info-row__val   { color:var(--t1); font-weight:600; text-align:right; }

/* ── Sidebar: related list ──────────────────────────────── */
.vid-related-list { display:flex; flex-direction:column; gap:.55rem; }
.vid-related-item {
  display:flex; align-items:center; gap:.75rem;
  text-decoration:none; color:var(--t1); border-radius:var(--r12);
  padding:.55rem .5rem; transition:background var(--ease);
}
.vid-related-item:hover { background:var(--surface2); }
.vid-related-item__thumb {
  width:76px; flex-shrink:0; aspect-ratio:16/9;
  border-radius:var(--r8); overflow:hidden; background:var(--bg-3);
}
.vid-related-item__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.vid-related-item__info { flex:1; min-width:0; }
.vid-related-item__title { font-size:.82rem; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:.18rem; }
.vid-related-item__meta  { font-size:.72rem; color:var(--t3); }

/* On mobile, sidebar goes BELOW main content */
@media(max-width:959px){
  .vid-sidebar { order:2; }
  .vid-main    { order:1; }
  /* Show related as a horizontal scroll on mobile */
  .vid-related-list { flex-direction:row; overflow-x:auto; padding-bottom:.35rem; scrollbar-width:none; }
  .vid-related-list::-webkit-scrollbar { display:none; }
  .vid-related-item { flex-direction:column; min-width:130px; align-items:flex-start; padding:.45rem .5rem; }
  .vid-related-item__thumb { width:100%; aspect-ratio:16/9; }
}