/* ============================================
   AnimeFlix - Main Stylesheet
   Dark anime streaming site aesthetic
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
  --color-primary: #e94560;
  --color-secondary: #0f3460;
  --font-main: 'Outfit', 'Noto Sans JP', sans-serif;
  
  /* Dark theme defaults */
  --bg-base: #0a0a1a;
  --bg-surface: #111127;
  --bg-card: #161630;
  --bg-hover: #1e1e40;
  --text-primary: #f0f0ff;
  --text-secondary: #9090b0;
  --text-muted: #5a5a7a;
  --border: rgba(255,255,255,0.08);
  --shadow: 0 4px 24px rgba(0,0,0,0.5);
  --nav-height: 64px;
  --nav-top-gap: 14px;
  --header-clearance: calc(var(--nav-top-gap) + var(--nav-height) + 12px);
  --hero-overlay-color: rgba(10, 10, 26, 0.97);
  --hero-overlay-fade: rgba(10, 10, 26, 0.15);

  /* Checkout / NX component variables — dark defaults */
  --nx-bg:          #0e0e0e;
  --nx-panel-bg:    #151515;
  --nx-ink:         #f0f0f0;
  --nx-ink-2:       #b0b0b0;
  --nx-ink-3:       #6b6b6b;
  --nx-accent:      #ff2346;
  --nx-rule:        #222222;
  --nx-rule-hard:   #2a2a2a;
  --nx-tile-overlay:  rgba(255,255,255,0.06);
  --nx-detail-bg:     rgba(255,255,255,0.03);
  --nx-copy-row-bg:   rgba(255,255,255,0.04);
  --nx-icon-bg:       rgba(255,255,255,0.07);
  --nx-instr-bg:      rgba(255,255,255,0.03);

  /* Profile / Watch-History / Bookmarks — dark defaults */
  --ptab-border:        rgba(255,255,255,.08);
  --ptab-btn-color:     var(--text-secondary, #9090b0);
  --ptab-btn-hover:     var(--text-primary, #f0f0ff);
  --ptab-active-color:  #fff;
  --ptab-active-line:   #6366f1;
  --ptab-count-bg:      rgba(99,102,241,.25);
  --ptab-count-color:   #a5b4fc;
  --ptab-title-color:   #fff;
  --ptab-badge-bg:      rgba(99,102,241,.2);
  --ptab-badge-color:   #a5b4fc;
  --ptab-btn-bg:        rgba(255,255,255,.04);
  --ptab-btn-border:    rgba(255,255,255,.12);
  --ptab-btn-hover-bg:  rgba(255,255,255,.09);
  --ptab-btn-hover-fg:  #fff;
  --ptab-search-bg:     rgba(255,255,255,.05);
  --ptab-search-border: rgba(255,255,255,.1);
  --ptab-search-color:  #fff;
  --ptab-infobar-color: #93c5fd;
  --ptab-infobar-bg:    rgba(59,130,246,.08);
  --ptab-infobar-bdr:   rgba(59,130,246,.2);
  --ptab-ok-color:      #86efac;
  --ptab-ok-bg:         rgba(34,197,94,.07);
  --ptab-ok-bdr:        rgba(34,197,94,.2);
  --ptab-toast-bg:      #1e293b;
  --ptab-toast-border:  rgba(255,255,255,.12);
  --ptab-toast-color:   #fff;
  --ptab-divider:       rgba(255,255,255,.07);
  --wh-item-bg:         rgba(255,255,255,.03);
  --wh-item-border:     rgba(255,255,255,.07);
  --wh-item-hover:      rgba(255,255,255,.06);
  --wh-thumb-ph-bg:     rgba(255,255,255,.06);
  --wh-title-color:     #fff;
  --wh-ep-color:        #a5b4fc;
  --wh-ep-hover:        #c7d2fe;

  /* Social banner — dark defaults */
  --sb-bg:              var(--bg-surface);
  --sb-border:          rgba(255,255,255,.08);
  --sb-text:            var(--text-primary);
  --sb-btn-bg:          rgba(255,255,255,.07);
  --sb-btn-border:      rgba(255,255,255,.15);
  --sb-btn-hover-bg:    rgba(255,255,255,.16);
  --sb-btn-hover-border:rgba(255,255,255,.35);

  /* Watch announce banner — dark defaults */
  --wa-bg:              rgba(99,102,241,.12);
  --wa-border:          rgba(99,102,241,.25);
  --wa-text:            var(--text-primary);

  /* Watch ad zone — dark defaults */
  --ad-bg:              transparent;

  /* ── Payment Lookup & Checkout — dark defaults ── */
  --pl-card-bg:        var(--bg-card);
  --pl-border:         var(--border);
  --pl-text:           var(--text-primary);
  --pl-text-muted:     var(--text-secondary);
  --pl-input-bg:       var(--bg-base);
  --pl-input-border:   var(--border);
  --pl-accent:         #6366f1;
  --pl-accent-hover:   #4f46e5;
  --pl-indigo-text:    #a5b4fc;
  --pl-mono-color:     #a5b4fc;
  --pl-success-bg:     rgba(16,185,129,.12);
  --pl-success-color:  #34d399;
  --pl-success-border: rgba(16,185,129,.2);
  --pl-warn-bg:        rgba(245,158,11,.12);
  --pl-warn-color:     #fbbf24;
  --pl-warn-border:    rgba(245,158,11,.2);
  --pl-error-bg:       rgba(239,68,68,.10);
  --pl-error-color:    #f87171;
  --pl-error-border:   rgba(239,68,68,.2);
  --pl-badge-bg:       rgba(245,158,11,.12);
  --pl-badge-color:    #fbbf24;
  --pl-spinner-border: rgba(255,255,255,.3);
  --pl-spinner-top:    #fff;
  --pl-history-btn-bg: rgba(255,255,255,.04);
  --pl-copy-btn-color: #818cf8;
  --theme-accent: #39d5ff;
  --theme-accent-2: #0ea5e9;
  --logo-pulse-rgb: 57, 213, 255;
  --surface-soft: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  --surface-strong: color-mix(in srgb, var(--bg-card) 94%, transparent);
  --surface-border-strong: color-mix(in srgb, var(--border) 78%, transparent);
  --surface-glow: 0 0 0 1px color-mix(in srgb, var(--theme-accent) 28%, transparent), 0 12px 35px rgba(0,0,0,0.35);
  --control-font-size: clamp(0.78rem, 0.18vw + 0.74rem, 0.9rem);
  --control-min-height: clamp(2.1rem, 1.35vw + 1.8rem, 2.5rem);
  --control-inline-pad: clamp(0.62rem, 0.7vw, 0.95rem);
  --control-gap: clamp(0.3rem, 0.45vw, 0.55rem);
  --icon-sm-size: clamp(0.92rem, 0.52vw, 1.08rem);
  --icon-md-size: clamp(1rem, 0.66vw, 1.18rem);
}

[data-theme="light"] {
  --bg-base: #f0f0f8;
  --bg-surface: #ffffff;
  --bg-card: #f8f8ff;
  --bg-hover: #ebebff;
  --text-primary: #0a0a1a;
  --text-secondary: #4a4a6a;
  --text-muted: #9090b0;
  --border: rgba(0,0,0,0.1);
  --shadow: 0 4px 24px rgba(0,0,0,0.1);
  --hero-overlay-color: rgba(255, 255, 255, 0.85);
  --hero-overlay-fade: rgba(255, 255, 255, 0.1);

  /* Checkout / NX component variables — light overrides */
  --nx-bg:          #f4f4f8;
  --nx-panel-bg:    #ffffff;
  --nx-ink:         #0a0a1a;
  --nx-ink-2:       #3a3a5a;
  --nx-ink-3:       #7a7a9a;
  --nx-accent:      #ff2346;
  --nx-rule:        #e0e0ea;
  --nx-rule-hard:   #d0d0df;
  --nx-tile-overlay:  rgba(0,0,0,0.04);
  --nx-detail-bg:     rgba(0,0,0,0.03);
  --nx-copy-row-bg:   rgba(0,0,0,0.04);
  --nx-icon-bg:       rgba(0,0,0,0.06);
  --nx-instr-bg:      rgba(0,0,0,0.03);

  /* Profile / Watch-History / Bookmarks — light overrides */
  --ptab-border:        rgba(0,0,0,.1);
  --ptab-btn-color:     var(--text-secondary, #4a4a6a);
  --ptab-btn-hover:     var(--text-primary, #0a0a1a);
  --ptab-active-color:  #0a0a1a;
  --ptab-active-line:   #6366f1;
  --ptab-count-bg:      rgba(99,102,241,.15);
  --ptab-count-color:   #4f46e5;
  --ptab-title-color:   #0a0a1a;
  --ptab-badge-bg:      rgba(99,102,241,.12);
  --ptab-badge-color:   #4338ca;
  --ptab-btn-bg:        rgba(0,0,0,.04);
  --ptab-btn-border:    rgba(0,0,0,.12);
  --ptab-btn-hover-bg:  rgba(0,0,0,.07);
  --ptab-btn-hover-fg:  #0a0a1a;
  --ptab-search-bg:     rgba(0,0,0,.04);
  --ptab-search-border: rgba(0,0,0,.12);
  --ptab-search-color:  #0a0a1a;
  --ptab-infobar-color: #1d4ed8;
  --ptab-infobar-bg:    rgba(59,130,246,.07);
  --ptab-infobar-bdr:   rgba(59,130,246,.25);
  --ptab-ok-color:      #166534;
  --ptab-ok-bg:         rgba(34,197,94,.08);
  --ptab-ok-bdr:        rgba(34,197,94,.25);
  --ptab-toast-bg:      #1e293b;
  --ptab-toast-border:  rgba(255,255,255,.12);
  --ptab-toast-color:   #fff;
  --ptab-divider:       rgba(0,0,0,.08);
  --wh-item-bg:         rgba(0,0,0,.02);
  --wh-item-border:     rgba(0,0,0,.08);
  --wh-item-hover:      rgba(0,0,0,.05);
  --wh-thumb-ph-bg:     rgba(0,0,0,.06);
  --wh-title-color:     #0a0a1a;
  --wh-ep-color:        #4338ca;
  --wh-ep-hover:        #3730a3;

  /* Social banner — light overrides */
  --sb-bg:              var(--bg-surface);
  --sb-border:          rgba(0,0,0,.1);
  --sb-text:            var(--text-primary);
  --sb-btn-bg:          rgba(0,0,0,.05);
  --sb-btn-border:      rgba(0,0,0,.12);
  --sb-btn-hover-bg:    rgba(0,0,0,.11);
  --sb-btn-hover-border:rgba(0,0,0,.28);

  /* Watch announce banner — light overrides */
  --wa-bg:              rgba(99,102,241,.07);
  --wa-border:          rgba(99,102,241,.2);
  --wa-text:            var(--text-primary);

  /* Watch ad zone — light overrides */
  --ad-bg:              transparent;

  /* ── Payment Lookup & Checkout — light overrides ── */
  --pl-input-bg:       #eef0f8;
  --pl-input-border:   rgba(0,0,0,.12);
  --pl-indigo-text:    #4338ca;
  --pl-mono-color:     #4338ca;
  --pl-success-bg:     rgba(16,185,129,.09);
  --pl-success-color:  #065f46;
  --pl-success-border: rgba(16,185,129,.2);
  --pl-warn-bg:        rgba(245,158,11,.08);
  --pl-warn-color:     #92400e;
  --pl-warn-border:    rgba(245,158,11,.18);
  --pl-error-bg:       rgba(239,68,68,.07);
  --pl-error-color:    #991b1b;
  --pl-error-border:   rgba(239,68,68,.18);
  --pl-badge-bg:       rgba(245,158,11,.10);
  --pl-badge-color:    #92400e;
  --pl-spinner-border: rgba(0,0,0,.12);
  --pl-spinner-top:    #6366f1;
  --pl-history-btn-bg: rgba(0,0,0,.04);
  --pl-copy-btn-color: #4338ca;
}

[data-theme-variant="aqua-dark"] {
  --color-primary: #22d3ee;
  --color-secondary: #0f172a;
  --bg-base: #070b14;
  --bg-surface: #0f172a;
  --bg-card: #111c34;
  --bg-hover: #1a2a49;
  --text-primary: #e7f8ff;
  --text-secondary: #98b8cc;
  --text-muted: #6d8ca5;
  --border: rgba(103, 232, 249, 0.20);
  --theme-accent: #39d5ff;
  --theme-accent-2: #0ea5e9;
  --logo-pulse-rgb: 57, 213, 255;
}
[data-theme-variant="violet-dark"] {
  --color-primary: #a78bfa;
  --color-secondary: #1a1233;
  --bg-base: #090613;
  --bg-surface: #130f24;
  --bg-card: #1b1431;
  --bg-hover: #271c46;
  --text-primary: #f4edff;
  --text-secondary: #b7a8da;
  --text-muted: #8d7bb5;
  --border: rgba(167, 139, 250, 0.24);
  --theme-accent: #a78bfa;
  --theme-accent-2: #7c3aed;
  --logo-pulse-rgb: 167, 139, 250;
}
[data-theme-variant="light-mint"] {
  --color-primary: #0f766e;
  --color-secondary: #0f766e;
  --bg-base: #ecfdf5;
  --bg-surface: #ffffff;
  --bg-card: #f0fdf4;
  --bg-hover: #dcfce7;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --border: rgba(15, 118, 110, 0.22);
  --theme-accent: #34d399;
  --theme-accent-2: #10b981;
  --logo-pulse-rgb: 52, 211, 153;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }
@supports (overflow-x: clip) {
  html { overflow-x: clip; }
}

body {
  font-family: var(--font-main);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}

a { color: inherit; text-decoration: none; }
img, svg, video, canvas, iframe { max-width: 100%; }
img, video, canvas, iframe { height: auto; }
img { display: block; }
button { cursor: pointer; font-family: inherit; }
input, button, select, textarea { font: inherit; max-width: 100%; }

/* Shared themed surfaces */
.card, .anime-card, .status-card, .episode-card, .section, .widget, .panel {
  background: var(--surface-strong);
  border-color: var(--surface-border-strong);
}

.search-results,
.dropdown-menu,
.nav-user-dropdown,
.lang-dropdown,
.navbar-search-overlay,
.overlay-search-results {
  background: var(--surface-strong);
  border-color: var(--surface-border-strong);
}

input, select, textarea {
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  border-color: var(--surface-border-strong);
  color: var(--text-primary);
}

.section-header,
.nav-inner,
.nav-actions,
.hero-content,
.hero-content-inner,
.hero-meta,
.hero-actions,
.wic-title-row,
.wic-meta-row,
.wic-series-row,
.wic-share-row,
.server-switcher,
.video-controls-bar,
.vc-nav,
.vc-actions,
.detail-breadcrumb,
.dv-action-row,
.dv-info-item,
.dv-episodes-header,
.episodes-header,
.footer-top,
.footer-bottom,
.footer-azlist-header,
.footer-azlist-letters,
.filter-row,
.sidebar-ep-header,
.sidebar-meta,
.card-info,
.card-meta-row {
  min-width: 0;
}

.card-title,
.cw-title,
.sidebar-item-title,
.wic-title,
.dv-title,
.detail-title,
.hero-title,
.hero-alt-title,
.dv-bc-current,
.wic-series-link,
.footer-note,
.footer-brand p,
.footer-links a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; }

/* ============ NAVBAR ============ */

/* Macro layout is viewport-driven. Device/touch classes must not control grid, column, width, order, or page structure. */
.navbar {
  position: absolute;
  top: var(--nav-top-gap);
  left: 0;
  right: 0;
  height: var(--nav-height);
  width: min(96vw, 1880px);
  margin: 0 auto;
  background: color-mix(in srgb, #07121f 58%, transparent);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid color-mix(in srgb, var(--theme-accent) 24%, rgba(255,255,255,0.2));
  border-radius: 20px;
  box-shadow: 0 14px 42px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  z-index: 20;
  transition: box-shadow 0.3s, border-color 0.25s, background 0.25s;
}


.navbar.scrolled { box-shadow: 0 14px 42px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08); }

.nav-inner {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: none;
  margin: 0 auto;
  padding: 0 1.05rem;
  height: 100%;
  width: 100%;
  min-width: 0;
}

.nav-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.nav-logo-symbol {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 40%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent) 30%, transparent), rgba(255,255,255,0.02));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(var(--logo-pulse-rgb), 0.08);
}
.nav-logo-symbol-core {
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  opacity: 0.88;
}
.logo-text {
  font-size: 1.35rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--text-primary), color-mix(in srgb, var(--text-primary) 65%, var(--theme-accent)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.35px;
}
.nav-logo-image { height: 32px; width: auto; max-width: 230px; object-fit: contain; }
.nav-logo[data-logo-pulse="active"] .nav-logo-symbol {
  animation: logoSymbolDoublePulse 0.16s linear 1;
}
@keyframes logoSymbolDoublePulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(var(--logo-pulse-rgb),0.08); }
  22% { box-shadow: 0 0 0 1px rgba(var(--logo-pulse-rgb),0.52), 0 0 14px rgba(var(--logo-pulse-rgb),0.62), 0 0 20px rgba(var(--logo-pulse-rgb),0.44); }
  46% { box-shadow: inset 0 0 0 1px rgba(var(--logo-pulse-rgb),0.1); }
  72% { box-shadow: 0 0 0 1px rgba(var(--logo-pulse-rgb),0.58), 0 0 15px rgba(var(--logo-pulse-rgb),0.68), 0 0 22px rgba(var(--logo-pulse-rgb),0.46); }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin-left: 0.15rem;
  min-width: 0;
}

.nav-links a {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.46rem 0.58rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--text-primary) 82%, var(--text-muted));
  transition: all 0.2s;
  white-space: nowrap;
  max-width: 100%;
}

.nav-links a:hover, .nav-links a.active {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--theme-accent) 22%, transparent);
}
.nav-link-nowrap { white-space: nowrap; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem;
  min-width: 280px;
  box-shadow: var(--shadow);
  display: none;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.dropdown:hover .dropdown-menu { display: flex; }
.dropdown-menu a {
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  transition: all 0.15s;
  white-space: nowrap;
}
.dropdown-menu a:hover { background: var(--color-primary); color: white; }
.dropdown-menu .genre-view-all {
  width: 100%;
  text-align: center;
  background: none;
  color: var(--color-primary);
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: .45rem .5rem .1rem;
  font-weight: 600;
  font-size: .78rem;
  margin-top: .15rem;
}
.dropdown-menu .genre-view-all:hover { background: none; color: var(--color-primary); opacity: .75; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  margin-left: auto;
  min-width: 0;
  flex-shrink: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.mobile-nav-only { display: none !important; }
.desktop-only { display: inline-flex; }

/* Search */
.nav-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface-strong);
  border: 1px solid var(--surface-border-strong);
  border-radius: 999px;
  padding: 0 0.75rem;
  height: 40px;
  width: clamp(230px, 23vw, 360px);
  transition: border-color 0.2s, box-shadow 0.2s;
  flex-shrink: 1;
}
.nav-search:focus-within {
  border-color: color-mix(in srgb, var(--theme-accent) 45%, var(--border));
  box-shadow: 0 0 0 3px rgba(var(--logo-pulse-rgb), 0.15);
}
.nav-search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: block;
}
.nav-search input {
  flex: 1;
  min-width: 0;
  background: var(--surface-strong);
  border: 1px solid var(--surface-border-strong);
  outline: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.875rem;
  padding: 0;
  height: 100%;
}
.nav-search input::placeholder { color: var(--text-muted); }

/* Search results dropdown */
.search-results {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 280px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  max-height: 400px;
  overflow-y: auto;
  z-index: 9999;
}
.search-results.open { display: block; }

/* Mobile search toggle button (hidden on desktop) */
.search-icon-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  width: clamp(2.1rem, 1.2vw + 1.8rem, 2.5rem);
  height: clamp(2.1rem, 1.2vw + 1.8rem, 2.5rem);
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.search-icon-btn:hover { background: var(--bg-hover); color: var(--color-primary); }
.search-icon-btn svg { width: clamp(16px, 1vw, 20px); height: clamp(16px, 1vw, 20px); }

.menu-toggle {
  display: none;
  background: var(--surface-strong);
  border: 1px solid var(--surface-border-strong);
  color: var(--text-primary);
  width: clamp(2.1rem, 1.2vw + 1.8rem, 2.5rem); height: clamp(2.1rem, 1.2vw + 1.8rem, 2.5rem);
  align-items: center; justify-content: center;
  border-radius: 10px;
}
.menu-toggle svg { width: clamp(18px, 1.2vw, 22px); height: clamp(18px, 1.2vw, 22px); }

/* Mobile: full navbar overlay */
.navbar-search-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #07121f 90%, transparent);
  z-index: 100;
  align-items: center;
  padding: 0 1rem;
  gap: 0.75rem;
}
.navbar-search-overlay.open { display: flex; }
.navbar-search-overlay input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  height: 100%;
}
.navbar-search-overlay input::placeholder { color: var(--text-muted); }
.overlay-search-icon {
  color: var(--text-muted);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.overlay-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  border-radius: 8px;
  flex-shrink: 0;
}
.overlay-close:hover { color: var(--color-primary); }
.overlay-close svg { width: 20px; height: 20px; }
.overlay-search-results {
  display: none;
  position: fixed;
  top: calc(var(--nav-top-gap) + var(--nav-height) + 8px);
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  max-height: calc(100vh - var(--nav-height));
  overflow-y: auto;
  z-index: 9998;
}
.overlay-search-results.open { display: block; }

@media (max-width: 900px) {
  :root {
    --nav-top-gap: 10px;
  }
  .navbar {
    width: calc(100vw - 14px);
    height: var(--nav-height);
    border-radius: 16px;
    background: color-mix(in srgb, #0a1528 58%, transparent);
    border-color: color-mix(in srgb, var(--theme-accent) 28%, rgba(255,255,255,0.18));
  }
  .nav-inner { max-width: 100%; padding: 0 0.42rem; gap: 0.32rem; }
  .menu-toggle { display: inline-flex; order: 1; color: var(--text-secondary); flex: 0 0 auto; }
  .nav-logo { order: 2; gap: .45rem; flex: 1 1 auto; min-width: 0; max-width: calc(100vw - 204px); overflow: hidden; }
  .nav-logo-image { height: 28px; max-width: min(160px, 100%); min-width: 0; }
  .logo-text { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .nav-actions { order: 3; margin-left: auto; gap: 0.2rem; flex: 0 0 auto; }
  .nav-search { display: none; }
  .search-icon-btn { display: inline-flex; }
  .lang-switcher,
  .nav-desktop-utility { display: none !important; }
  .mobile-nav-only { display: block !important; }
  .nav-links .desktop-nav-item { display: block !important; }
  .nav-links .dropdown { display: none !important; }
  .nav-actions .nav-login-btn {
    width: 36px; height: 36px; border-radius: 10px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px;
  }
  .theme-toggle, .search-icon-btn, .menu-toggle {
    width: 36px; height: 36px; min-width: 36px; border-radius: 10px;
  }
  .nav-user-avatar, .nav-user-avatar-img { width: 30px; height: 30px; }
  .nav-links {
    display: flex; flex-direction: column; gap: 0.2rem; position: absolute;
    top: calc(100% + 8px); left: 0.55rem; width: min(88vw, 330px); max-height: min(72vh, 520px);
    background: color-mix(in srgb, var(--bg-surface) 95%, rgba(2,6,23,.7));
    border: 1px solid var(--surface-border-strong); border-radius: 16px; padding: 0.75rem;
    margin-left: 0; transform: translateX(-104%); opacity: 0; pointer-events: none;
    transition: transform .24s ease, opacity .2s ease; z-index: 1002; overflow-y: auto;
    box-shadow: 18px 0 40px rgba(0,0,0,.48);
  }
  .nav-links.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
  .nav-links a { border-radius: 10px; padding: 0.58rem 0.62rem; font-size: 0.86rem; }
  .mobile-nav-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); text-transform: uppercase; padding: 0.7rem 0.5rem 0.35rem; }
  .mobile-nav-label-row { padding-top: .2rem; }
  .navbar::after {
    content: ''; position: fixed; inset: calc(var(--nav-top-gap) + var(--nav-height) + 8px) 0 0 0;
    background: rgba(2,6,23,.48); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 1001;
  }
  .navbar.menu-open::after { opacity: 1; pointer-events: auto; }
  .overlay-search-results { top: calc(var(--nav-top-gap) + var(--nav-height) + 8px); }
}


.search-result-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  transition: background 0.15s;
  border-top: 1px solid var(--border);
}
.search-result-item:hover { background: var(--bg-hover); }
.search-result-item img {
  width: 40px; height: 54px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.search-result-no-img {
  width: 40px; height: 54px;
  background: var(--bg-hover);
  border-radius: 6px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.result-info p { font-size: 0.85rem; font-weight: 600; line-height: 1.3; }
.result-info span { font-size: 0.75rem; color: var(--text-muted); }
.search-loading { padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

/* ── Theme switcher ── */
.theme-switcher { position: relative; }
.theme-toggle {
  border: 1px solid var(--surface-border-strong);
  background: var(--surface-strong);
  color: var(--text-secondary);
  min-height: var(--control-min-height);
  border-radius: 999px;
  padding: 0 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--control-font-size);
  font-weight: 600;
  max-width: 100%;
}
.theme-toggle:hover { border-color: color-mix(in srgb, var(--theme-accent) 35%, var(--border)); color: var(--text-primary); }
.theme-toggle-chevron { width: 15px; height: 15px; opacity: 0.7; }
#themeToggleLabel { white-space: nowrap; }
.theme-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--surface-border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 0.35rem;
  min-width: 170px;
  display: none;
  z-index: 1001;
}
.theme-switcher.open .theme-menu { display: block; }
.theme-option {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 9px;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.6rem;
  font-size: 0.81rem;
}
.theme-option:hover, .theme-option.active { background: var(--bg-hover); color: var(--text-primary); }
.theme-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--theme-accent); }
.theme-option[data-theme-option="violet-dark"] .theme-dot { background: #a78bfa; }
.theme-option[data-theme-option="light-mint"] .theme-dot { background: #34d399; }

.nav-history-btn {
  border: 1px solid var(--surface-border-strong);
  min-height: var(--control-min-height);
  border-radius: 999px;
  padding: 0 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: var(--control-font-size);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-strong);
}
.nav-history-btn:hover {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--theme-accent) 35%, var(--border));
}
.nav-history-btn svg { width: 15px; height: 15px; }
@media (max-width: 768px) {
  .theme-toggle { width: 40px; padding: 0; justify-content: center; border-radius: 10px; }
  #themeToggleLabel, .theme-toggle-chevron { display: none; }
  .theme-menu { right: -16px; }
  .nav-history-btn { width: 40px; padding: 0; justify-content: center; border-radius: 10px; }
  .nav-history-btn span { display: none; }
  .lang-btn { width: 40px; padding: 0; justify-content: center; border-radius: 10px; }
  .lang-btn .lang-current, .lang-btn .chevron { display: none; }
}

/* ============ LAYOUT ============ */
.main-content { padding-top: var(--header-clearance); min-height: 100vh; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }

/* Icons */
.icon-xs svg, [data-lucide].icon-xs { width: clamp(12px, 0.78vw, 14px); height: clamp(12px, 0.78vw, 14px); }
.icon-sm svg, [data-lucide].icon-sm { width: var(--icon-sm-size); height: var(--icon-sm-size); }
svg { display: inline-block; vertical-align: middle; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  padding: 0.55rem var(--control-inline-pad);
  min-height: var(--control-min-height);
  border-radius: 10px;
  font-size: var(--control-font-size);
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}
.btn svg { width: var(--icon-md-size); height: var(--icon-md-size); flex-shrink: 0; }
.btn-primary { background: var(--color-primary); color: white; }
.btn-primary:hover { background: color-mix(in srgb, var(--theme-accent-2) 72%, var(--color-primary)); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--logo-pulse-rgb),0.35); }
.btn-ghost { background: var(--surface-strong); color: var(--text-primary); border: 1px solid var(--surface-border-strong); }
.btn-ghost:hover { background: var(--bg-hover); }
.btn-sm { min-height: clamp(1.95rem, 1.2vw + 1.55rem, 2.22rem); padding: 0.36rem clamp(0.56rem, 0.6vw, 0.78rem); font-size: clamp(0.74rem, 0.2vw + 0.68rem, 0.82rem); }
.btn-lg { min-height: clamp(2.35rem, 1.5vw + 1.95rem, 2.8rem); padding: 0.7rem clamp(1rem, 1.1vw, 1.45rem); font-size: clamp(0.9rem, 0.35vw + 0.8rem, 1rem); }
.btn-block { width: 100%; justify-content: center; }

/* ============ BADGES ============ */
.badge { display: inline-flex; align-items: center; padding: clamp(0.22rem, 0.3vw, 0.3rem) clamp(0.5rem, 0.7vw, 0.68rem); border-radius: 6px; font-size: clamp(0.68rem, 0.22vw + 0.64rem, 0.76rem); font-weight: 700; line-height: 1.2; max-width: 100%; }
.badge-primary { background: var(--color-primary); color: white; }
.badge-status { background: rgba(255,255,255,0.1); color: white; }
.badge-status.ongoing { background: var(--badge-color-ongoing); }
.badge-status.completed { background: var(--badge-color-completed); }
.badge-status.upcoming { background: var(--badge-color-upcoming); }

/* ============ HERO SLIDER - PREMIUM CINEMATIC REDESIGN ============ */


/* Home: let hero start at page top while keeping global fixed header behavior */
body.page-home #heroSection.hero-section {
  margin-top: calc(-1 * var(--header-clearance));
}
.hero-section {
  --hero-accent: var(--color-primary);
  position: relative;
  width: 100%;
  min-height: clamp(390px, 54vw, 660px);
  max-height: 660px;
  overflow: hidden;
  background: #070b14;
  border-radius: 0 0 20px 20px;
  box-shadow: inset 0 -60px 100px rgba(0, 0, 0, 0.45);
}

[data-theme-variant="aqua-dark"] .hero-section {
  --hero-accent: #22d3ee;
}

[data-theme-variant="violet-dark"] .hero-section {
  --hero-accent: #a78bfa;
}

[data-theme-variant="light-mint"] .hero-section {
  --hero-accent: #34d399;
}

.hero-slider,
.hero-slide {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 72% center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(1.03);
  display: flex;
  align-items: flex-end;
  will-change: transform, opacity;
}

.hero-slide.active {
  opacity: 1;
  z-index: 2;
  visibility: visible;
  transform: scale(1);
}

.hero-slider {
  --hero-drag-offset: 0px;
  touch-action: pan-y;
}

.hero-slider.is-dragging .hero-slide.active {
  transition: none;
  transform: translateX(var(--hero-drag-offset)) scale(1.01);
}

.hero-slider.is-snapping .hero-slide.active {
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(980px 460px at -8% 10%, rgba(5, 8, 16, 0.6) 0%, rgba(5, 8, 16, 0.28) 34%, rgba(5, 8, 16, 0.08) 52%, rgba(5, 8, 16, 0) 66%),
    radial-gradient(620px 320px at 12% 96%, rgba(3, 6, 13, 0.52) 0%, rgba(3, 6, 13, 0.24) 40%, rgba(3, 6, 13, 0) 72%),
    radial-gradient(1200px 520px at 85% 20%, rgba(255, 255, 255, 0.14), transparent 64%),
    linear-gradient(100deg, rgba(6, 9, 18, 0.48) 0%, rgba(7, 12, 24, 0.24) 24%, rgba(8, 14, 25, 0.08) 42%, rgba(0, 0, 0, 0) 58%),
    linear-gradient(0deg, rgba(3, 6, 13, 0.42) 0%, rgba(3, 6, 13, 0.12) 30%, rgba(3, 6, 13, 0) 52%);
  pointer-events: none;
}

[data-theme="light"] .hero-overlay,
[data-theme="light-mint"] .hero-overlay {
  background:
    radial-gradient(1200px 520px at 85% 20%, rgba(255, 255, 255, 0.45), transparent 64%),
    linear-gradient(103deg, rgba(250, 252, 255, 0.95) 8%, rgba(246, 251, 255, 0.82) 38%, rgba(242, 248, 255, 0.38) 60%, rgba(255, 255, 255, 0.12) 100%),
    linear-gradient(0deg, rgba(242, 247, 252, 0.95) 0%, rgba(242, 247, 252, 0.3) 45%, rgba(242, 247, 252, 0) 70%);
}

.hero-visual-glow {
  position: absolute;
  right: -10%;
  top: -6%;
  width: min(42vw, 460px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero-accent) 36%, transparent) 0%, transparent 72%);
  filter: blur(4px);
  opacity: 0.9;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 3;
  width: min(620px, 92%);
  margin: clamp(1.25rem, 4vw, 2.5rem);
  margin-bottom: clamp(1.4rem, 5vw, 3rem);
  padding: clamp(1rem, 2.2vw, 1.5rem);
  border-radius: 22px;
}

.hero-content-inner {
  display: grid;
  gap: clamp(0.45rem, 1.3vw, 0.8rem);
}

.hero-trending-chip {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  color: #f4f8ff;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

.hero-trending-chip::before {
  content: "✦";
  display: inline-block;
  margin-right: 0.32rem;
  font-size: 0.64rem;
  line-height: 1;
  opacity: 0.9;
}

@media (min-width: 769px) {
  .hero-trending-chip {
    display: none;
  }
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.1rem;
}


.hero-title {
  font-size: clamp(1.32rem, 2.7vw, 2.35rem);
  font-weight: 900;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 6px 28px rgba(0, 0, 0, 0.42);
}

.hero-alt-title {
  font-size: clamp(0.78rem, 1.2vw, 0.92rem);
  margin: 0;
  color: var(--text-secondary);
  opacity: 0.9;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.15rem;
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.24rem 0.58rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-secondary);
}



.hero-meta-status-desktop {
  display: inline-flex;
}

.hero-meta-status-mobile {
  display: none !important;
}

.hero-meta svg {
  flex-shrink: 0;
}

.hero-desc {
  margin: 0.95rem 0 1.25rem;
  max-width: 56ch;
  font-size: clamp(0.84rem, 1.2vw, 0.98rem);
  line-height: 1.55;
  color: var(--text-secondary);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

@media (min-width: 769px) {
  .hero-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-meta .hero-meta-rating,
  .hero-meta .hero-meta-year,
  .hero-meta .hero-meta-genre {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.26);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.72rem;
}

.btn-hero {
  min-height: 46px;
  border-radius: 14px;
  padding: 0.65rem 1.2rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.btn-hero svg {
  width: 16px;
  height: 16px;
}

.btn-hero-primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--hero-accent) 88%, white 12%), color-mix(in srgb, var(--hero-accent) 72%, #25183b 28%));
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--hero-accent) 54%, transparent);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--hero-accent) 36%, transparent);
}

.btn-hero-primary:hover,
.btn-hero-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px color-mix(in srgb, var(--hero-accent) 45%, transparent);
  filter: saturate(1.08);
}

.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
}

.btn-hero-secondary:hover,
.btn-hero-secondary:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--hero-accent) 65%, rgba(255, 255, 255, 0.24));
  background: color-mix(in srgb, var(--hero-accent) 20%, rgba(255, 255, 255, 0.08));
}

.hero-controls {
  position: absolute;
  right: clamp(0.8rem, 2vw, 2rem);
  bottom: clamp(0.7rem, 2vw, 1.9rem);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 0.68rem;
  padding: 0.45rem 0.65rem;
  border-radius: 999px;
  background: rgba(9, 12, 22, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

.hero-dots {
  display: flex;
  align-items: center;
  gap: 0.42rem;
}

.hero-dot {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  transition: width 0.24s ease, background 0.24s ease, transform 0.24s ease;
}

.hero-dot:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.68);
}

.hero-dot.active {
  width: 26px;
  background: var(--hero-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--hero-accent) 42%, transparent);
}

.hero-arrow {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.hero-arrow:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--hero-accent) 30%, rgba(255, 255, 255, 0.09));
  border-color: color-mix(in srgb, var(--hero-accent) 65%, rgba(255, 255, 255, 0.22));
}

.hero-arrow svg {
  width: 16px;
  height: 16px;
}

.hero-arrow.disabled,
.hero-arrow.disabled:hover {
  opacity: 0.45;
  transform: none;
}

[data-theme="light"] .hero-section,
[data-theme="light-mint"] .hero-section {
  box-shadow: inset 0 -60px 100px rgba(17, 24, 39, 0.12);
}


[data-theme="light"] .hero-trending-chip,
[data-theme="light-mint"] .hero-trending-chip {
  color: #1f2937;
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(140, 163, 185, 0.38);
}

[data-theme="light"] .hero-controls,
[data-theme="light-mint"] .hero-controls {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(31, 41, 55, 0.12);
}

[data-theme="light"] .hero-dot,
[data-theme="light-mint"] .hero-dot {
  background: rgba(17, 24, 39, 0.28);
}

[data-theme="light"] .hero-arrow,
[data-theme="light-mint"] .hero-arrow {
  color: #1f2937;
  border-color: rgba(31, 41, 55, 0.2);
  background: rgba(255, 255, 255, 0.84);
}

@media (max-width: 1024px) {
  .hero-section {
    min-height: 400px;
    max-height: 520px;
  }

  .hero-slide {
    background-position: 66% center;
  }

  .hero-content {
    width: min(560px, 95%);
    margin-bottom: clamp(1.1rem, 4vw, 2.2rem);
  }

  .hero-desc {
    max-width: 50ch;
  }
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 336px;
    max-height: 420px;
    border-radius: 0 0 16px 16px;
  }

  .hero-slide {
    background-size: cover;
    background-position: 50% 18%;
    transform: scale(1);
    filter: none;
  }

  .hero-visual-glow {
    display: none;
  }

  .hero-overlay {
    background:
      radial-gradient(122% 108% at -18% 8%, rgba(3, 7, 14, 0.76) 0%, rgba(3, 7, 14, 0.42) 34%, rgba(3, 7, 14, 0.14) 54%, rgba(3, 7, 14, 0) 66%),
      radial-gradient(92% 84% at -8% 92%, rgba(3, 7, 14, 0.5) 0%, rgba(3, 7, 14, 0.2) 46%, rgba(3, 7, 14, 0) 70%),
      linear-gradient(96deg, rgba(3, 7, 14, 0.62) 0%, rgba(3, 7, 14, 0.32) 27%, rgba(3, 7, 14, 0.12) 42%, rgba(3, 7, 14, 0) 56%),
      linear-gradient(0deg, rgba(3, 7, 14, 0.24) 0%, rgba(3, 7, 14, 0.09) 35%, rgba(3, 7, 14, 0) 58%);
  }

  .hero-content {
    width: min(520px, 94%);
    margin: 0.92rem;
    margin-bottom: 0.82rem;
    padding: 0.82rem;
    border-radius: 16px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hero-content-inner {
    gap: 0.42rem;
  }

  .hero-badges {
    display: none;
  }

  .hero-trending-chip {
    font-size: 0.52rem;
    padding: 0.2rem 0.3rem;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(9px) saturate(1.08);
    -webkit-backdrop-filter: blur(9px) saturate(1.08);
  }
  .hero-trending-chip::before {
    color: #ffd166;
  }

  .hero-title {
    font-size: clamp(1.22rem, 5.2vw, 1.8rem);
  }

  .hero-alt-title {
    font-size: 0.77rem;
  }

  .hero-meta {
    gap: 0.45rem;
    margin-top: 0.4rem;
  }

  .hero-meta span {
    font-size: 0.7rem;
    padding: 0.2rem 0.48rem;
  }

  .hero-meta-year {
    display: none !important;
  }

  .hero-meta-status-desktop {
    display: none !important;
  }

  .hero-meta-status-mobile {
    display: inline-flex !important;
  }

  .hero-meta .hero-meta-status-mobile.badge-status {
    min-height: var(--badge-chip-h);
    padding: 0 var(--badge-chip-pad-x);
    border-radius: var(--badge-chip-radius);
    font-size: var(--badge-chip-font);
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--badge-glass-text) !important;
    border: 1px solid color-mix(in srgb, var(--badge-accent) 37%, var(--badge-glass-edge)) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 36%),
      linear-gradient(122deg, color-mix(in srgb, var(--badge-accent) 18%, transparent), transparent 66%),
      color-mix(in srgb, var(--badge-accent) 12%, var(--badge-glass-bg-strong)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.13),
      inset 0 -1px 0 rgba(0,0,0,0.28),
      0 2px 6px color-mix(in srgb, var(--badge-accent) 11%, rgba(0,0,0,0.32)) !important;
    backdrop-filter: blur(5px) saturate(112%);
    -webkit-backdrop-filter: blur(5px) saturate(112%);
  }

  .hero-meta .hero-meta-status-mobile.badge-status.ongoing {
    --badge-accent: var(--badge-color-ongoing);
  }

  .hero-meta .hero-meta-status-mobile.badge-status.completed {
    --badge-accent: var(--badge-color-completed);
  }

  .hero-meta-genre {
    display: none !important;
  }

  .hero-desc {
    margin-top: 0.72rem;
    margin-bottom: 0.92rem;
    font-size: 0.82rem;
    line-height: 1.45;
    -webkit-line-clamp: 2;
  }

  .hero-actions {
    gap: 0.48rem;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 34px;
    margin-top: 0.68rem;
    padding-right: 7.2rem;
  }

  .btn-hero,
  .hero-actions .btn-hero-secondary {
    min-height: 30px;
    padding: 0.29rem 0.52rem;
    font-size: 0.62rem;
    line-height: 1.1;
    flex: 0 0 auto;
    justify-content: center;
    white-space: nowrap;
    border-radius: 10px;
  }

  .btn-hero svg,
  .hero-actions .btn-hero-secondary svg {
    width: 12px;
    height: 12px;
  }

  .hero-controls {
    right: 0.65rem;
    bottom: 0.82rem;
    padding: 0.28rem 0.4rem;
    gap: 0.46rem;
  }

  .hero-arrow {
    width: 27px;
    height: 27px;
  }

  .hero-dot {
    width: 6px;
    height: 6px;
  }

  .hero-dot.active {
    width: 16px;
  }

  .hero-meta span {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(9px) saturate(1.06);
    -webkit-backdrop-filter: blur(9px) saturate(1.06);
  }

  .hero-actions .btn-hero-secondary {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
  }
}

@media (max-width: 480px) {
  .hero-section {
    min-height: 316px;
    max-height: 380px;
  }

  .hero-slide {
    background-position: 50% 16%;
    background-size: cover;
    transform: scale(1);
    filter: none;
  }

  .hero-visual-glow {
    display: none;
  }

  .hero-overlay {
    background:
      radial-gradient(126% 112% at -21% 7%, rgba(3, 7, 14, 0.82) 0%, rgba(3, 7, 14, 0.46) 33%, rgba(3, 7, 14, 0.16) 53%, rgba(3, 7, 14, 0) 65%),
      radial-gradient(96% 88% at -10% 94%, rgba(3, 7, 14, 0.56) 0%, rgba(3, 7, 14, 0.22) 44%, rgba(3, 7, 14, 0) 68%),
      linear-gradient(97deg, rgba(3, 7, 14, 0.68) 0%, rgba(3, 7, 14, 0.36) 25%, rgba(3, 7, 14, 0.14) 40%, rgba(3, 7, 14, 0) 54%),
      linear-gradient(0deg, rgba(3, 7, 14, 0.27) 0%, rgba(3, 7, 14, 0.1) 33%, rgba(3, 7, 14, 0) 56%);
  }

  .hero-meta span:nth-child(3),
  .hero-desc {
    display: none;
  }

  .hero-content {
    width: calc(100% - 1rem);
    margin: 0.5rem;
    margin-bottom: 0.56rem;
    padding: 0.6rem;
  }

  .hero-actions {
    flex-wrap: nowrap;
    gap: 0.44rem;
    min-height: 31px;
    margin-top: 0.7rem;
    padding-right: 6.2rem;
  }

  .btn-hero,
  .hero-actions .btn-hero-secondary {
    min-height: 29px;
    padding: 0.28rem 0.5rem;
    font-size: 0.6rem;
    border-radius: 9px;
  }

  .btn-hero svg,
  .hero-actions .btn-hero-secondary svg {
    width: 11px;
    height: 11px;
  }

  .hero-controls {
    right: 0.5rem;
    bottom: 0.56rem;
    padding: 0.24rem 0.33rem;
    gap: 0.4rem;
  }

  .hero-arrow {
    width: 24px;
    height: 24px;
  }

  .hero-arrow svg {
    width: 13px;
    height: 13px;
  }

  .hero-dot {
    width: 5px;
    height: 5px;
  }

  .hero-dot.active {
    width: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-dot,
  .hero-arrow,
  .btn-hero {
    transition: none;
  }
}

/* ============ ANIME GRID ============ */
.anime-section { padding: 2.5rem 0 0; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.section-title { font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
.section-title svg { color: var(--color-primary); }
.see-all { font-size: 0.85rem; color: var(--color-primary); display: flex; align-items: center; gap: 0.25rem; transition: gap 0.2s; }
.see-all:hover { gap: 0.5rem; }

/* Continue Watching */
.cw-section { padding-top: 1.25rem; }
.cw-section .section-header { align-items: flex-end; gap: .75rem; }
.cw-subtitle {
  margin-left: auto;
  font-size: .78rem;
  color: var(--text-muted);
  opacity: .9;
}
.cw-grid {
  display: grid;
  gap: .92rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.cw-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.25);
  box-shadow: 0 9px 22px rgba(2, 6, 23, .22);
  isolation: isolate;
}
.cw-thumb-link {
  position: relative;
  display: block;
  aspect-ratio: 2.06 / 1;
}
.cw-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0f172a;
  transition: transform .35s ease;
}
.cw-card:hover .cw-thumb { transform: scale(1.035); }
.cw-thumb-ph {
  background: linear-gradient(135deg, rgba(107,114,128,.25), rgba(55,65,81,.35));
}
.cw-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2,6,23,.08) 34%, rgba(2,6,23,.68) 86%),
    linear-gradient(90deg, rgba(2,6,23,.12), rgba(2,6,23,.04));
  z-index: 1;
}
.cw-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: .68rem .74rem .66rem;
  display: flex;
  flex-direction: column;
  gap: .34rem;
}
.cw-title {
  font-weight: 800;
  font-size: .89rem;
  line-height: 1.18;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 12px rgba(2,6,23,.6);
}
.cw-meta-row { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.cw-ep { margin: 0; font-size: 0.7rem; color: rgba(226,232,240,.92); font-weight: 600; }
.cw-progress-row { display: flex; align-items: center; gap: .55rem; }
.cw-time-pill {
  font-size: .64rem;
  font-weight: 700;
  padding: .2rem .45rem;
  border-radius: 999px;
  background: rgba(20,184,166,.16);
  color: #2dd4bf;
  border: 1px solid rgba(45,212,191,.35);
}
.cw-progress {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  overflow: hidden;
}
.cw-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #22d3ee, #6366f1 55%, #a855f7);
}
.cw-left {
  margin: 0;
  font-size: .67rem;
  color: rgba(203,213,225,.92);
}
.cw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  width: fit-content;
  padding: .28rem .62rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, rgba(34,211,238,.24), rgba(99,102,241,.34));
  border: 1px solid rgba(125,211,252,.55);
  backdrop-filter: blur(4px);
}
.cw-empty {
  border: 1px dashed rgba(148,163,184,.35);
  border-radius: 14px;
  padding: 1.2rem 1rem;
  text-align: center;
  color: #93a0ba;
  display: grid;
  justify-items: center;
  gap: .45rem;
}
.cw-empty i { width: 18px; height: 18px; color: #2dd4bf; }
.cw-empty h3 { margin: 0; font-size: .95rem; color: var(--text); }
.cw-empty p { margin: 0; font-size: .84rem; max-width: 46ch; }
.cw-empty-btn {
  margin-top: .25rem;
  font-size: .78rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .36rem .75rem;
  color: #e2e8f0;
  border: 1px solid rgba(125,211,252,.45);
  background: rgba(14,116,144,.25);
}

@media (max-width: 760px) {
  .cw-section .section-header,
  
  .cw-subtitle,
  
  .cw-section .cw-grid,
  .cw-section .cw-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .52rem;
    padding: 0 .15rem .2rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .cw-section .cw-grid::-webkit-scrollbar,
  .cw-section .cw-grid::-webkit-scrollbar { display: none; }

  .cw-section .cw-card,
  .cw-section .cw-card {
    flex: 0 0 auto;
    min-width: calc((100% - (.52rem * .6)) / 1.6);
    max-width: calc((100% - (.52rem * .6)) / 1.6);
    width: calc((100% - (.52rem * .6)) / 1.6);
    min-height: 132px;
    border-radius: 11px;
    scroll-snap-align: start;
  }

  .cw-thumb-link,
  .cw-thumb-link {
    aspect-ratio: 2.08 / 1;
    height: 132px;
    min-height: 132px;
    display: block;
    background: rgba(2,6,23,.25);
  }

  .cw-thumb,
  .cw-thumb-ph,
  .cw-thumb,
  .cw-thumb-ph {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
  }

  .cw-overlay,
  .cw-overlay {
    background:
      linear-gradient(180deg, rgba(2,6,23,.06) 24%, rgba(2,6,23,.72) 88%),
      linear-gradient(95deg, rgba(2,6,23,.12), rgba(2,6,23,.05));
  }

  .cw-body,
  .cw-body {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    top: auto;
    bottom: 0;
    padding: .5rem .43rem .52rem;
    justify-content: flex-end;
    gap: .22rem;
  }

  .cw-title,
  .cw-title { font-size: .68rem; -webkit-line-clamp: 2; }

  .cw-ep,
  .cw-left,
  .cw-ep,
  .cw-left { font-size: .55rem; }

  .cw-progress-row,
  .cw-progress-row { gap: .32rem; }

  .cw-progress,
  .cw-progress { height: 3px; }

  .cw-time-pill,
  .cw-time-pill { font-size: .5rem; padding: .08rem .22rem; }

  .cw-btn,
  .cw-btn { font-size: .53rem; padding: .13rem .32rem; }
}

.cw-thumb-link { aspect-ratio: 2.3 / 1; min-height: 0; }
.cw-thumb,
.cw-thumb-ph { width: 100%; height: 100%; object-fit: cover; }
.cw-overlay {
  background:
    linear-gradient(180deg, rgba(2,6,23,.06) 24%, rgba(2,6,23,.72) 88%),
    linear-gradient(95deg, rgba(2,6,23,.12), rgba(2,6,23,.05));
}
.cw-body { left: 0; right: 0; width: auto; padding: .46rem .52rem .46rem; gap: .23rem; }
.cw-progress-row { gap: .45rem; }
.cw-btn { font-size: .58rem; padding: .18rem .45rem; }

/* Desktop/tablet: keep Continue Watching as horizontal rail (mobile behavior unchanged). */
@media (min-width: 761px) {
  .cw-section .cw-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: .92rem;
    padding: 0 0 .2rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
  }

  .cw-section .cw-grid::-webkit-scrollbar { display: none; }

  .cw-section .cw-grid.cw-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-snap-type: none;
  }

  .cw-section .cw-card {
    flex: 0 0 clamp(260px, 23vw, 350px);
    width: clamp(260px, 23vw, 350px);
    min-width: clamp(260px, 23vw, 350px);
    scroll-snap-align: start;
  }
}

@media (min-width: 1100px) {
  .cw-grid { grid-template-columns: none; }
}

@media (min-width: 1480px) {
  .cw-grid { grid-template-columns: none; }
}

.anime-grid,
.home-anime-grid {
  display: grid;
  gap: clamp(0.5rem, 2vw, 1rem);
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 480px) {
  .anime-grid, .home-anime-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 700px) {
  .anime-grid, .home-anime-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 960px) {
  .anime-grid, .home-anime-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1280px) {
  .anime-grid, .home-anime-grid { grid-template-columns: repeat(7, 1fr); }
}
@media (min-width: 1600px) {
  .anime-grid, .home-anime-grid { grid-template-columns: repeat(8, 1fr); }
}

/* ============ HOME FEATURED: NEW + UPCOMING ============ */
.home-featured-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1rem;
  align-items: start;
}

.featured-main { min-width: 0; }
.upcoming-mobile-list { display: none; }

.upcoming-sidebar {
  position: sticky;
  top: 86px;
  background: linear-gradient(160deg, rgba(18,22,36,.95), rgba(28,23,45,.92));
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: 14px;
  padding: 0.9rem;
}
.upcoming-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .7rem;
}
.upcoming-head h3 {
  margin: 0;
  font-size: 1rem;
}
.upcoming-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .2rem .55rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffd78a;
  background: rgba(251,191,36,.15);
  border: 1px solid rgba(251,191,36,.4);
}
.upcoming-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.upcoming-item {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: .65rem;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: .45rem;
}
.upcoming-item-thumb,
.upcoming-item-thumb img,
.upcoming-noimg {
  width: 58px;
  height: 80px;
  border-radius: 8px;
}
.upcoming-item-thumb img { object-fit: cover; display: block; }
.upcoming-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(107,114,128,.22);
  color: rgba(255,255,255,.65);
}
.upcoming-item-title {
  margin: 0 0 .25rem;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.upcoming-item-date {
  margin: 0;
  color: #fbbf24;
  font-size: .73rem;
  font-weight: 700;
}
.upcoming-item-meta {
  margin: .25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.upcoming-item-meta span {
  font-size: .66rem;
  color: #c7d2fe;
  background: rgba(99,102,241,.18);
  border: 1px solid rgba(129,140,248,.35);
  border-radius: 999px;
  padding: 0 .42rem;
}

/* Phoenix glow effect */
.phoenix-glow {
  position: relative;
  overflow: hidden;
}
.phoenix-glow::after {
  content: "";
  position: absolute;
  inset: -40% -25%;
  background:
    radial-gradient(closest-side, rgba(251,191,36,.17), transparent 70%),
    radial-gradient(closest-side, rgba(236,72,153,.11), transparent 72%),
    conic-gradient(from 210deg, transparent 0deg, rgba(239,68,68,.08) 40deg, transparent 110deg, rgba(245,158,11,.10) 220deg, transparent 360deg);
  filter: blur(16px);
  opacity: 0;
  transform: scale(.92);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.phoenix-glow:hover::after,
.phoenix-glow:focus-within::after,
.phoenix-glow:active::after {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 1024px) {
  .home-featured-split {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .upcoming-sidebar { display: none; }
  .upcoming-mobile-list { display: block; margin-top: 1rem; }
  .upcoming-mobile-stack {
    display: grid;
    gap: .6rem;
  }
  .upcoming-mobile-item {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: .65rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    padding: .42rem;
    text-decoration: none;
    color: inherit;
  }
  .upcoming-mobile-thumb,
  .upcoming-mobile-thumb img,
  .upcoming-mobile-noimg {
    width: 62px;
    height: 86px;
    border-radius: 8px;
  }
  .upcoming-mobile-thumb img { object-fit: cover; display: block; }
  .upcoming-mobile-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(107,114,128,.22);
  }
  .upcoming-mobile-title { margin: 0 0 .25rem; font-size: .85rem; font-weight: 700; }
  .upcoming-mobile-meta { margin: 0; font-size: .72rem; color: #fbbf24; }
  .upcoming-mobile-franchise { margin: .2rem 0 0; font-size: .72rem; color: #c7d2fe; }
}

/* ============ ANIME CARD ============ */
.anime-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.card-link { display: block; text-decoration: none; color: inherit; }

.card-image {
  position: relative;
  aspect-ratio: 2/3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
}
.card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.card-no-image {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}

/* ================================================================
   BADGE SYSTEM - premium glass layout
   ================================================================ */
.card-badge {
  position: absolute;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.9rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(8,10,20,.56);
  box-shadow: 0 6px 18px rgba(5,8,20,.35);
}
.card-badge-status {
  top: 9px;
  left: 9px;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 14px), 0 14px);
  border-radius: 0;
}
.card-badge-type { top: 9px; right: 9px; }
.card-bottom-left {
  position: absolute;
  left: 9px;
  bottom: 10px;
  z-index: 10;
  display: flex;
  gap: 6px;
  align-items: center;
}
.card-bottom-right {
  position: absolute;
  right: 9px;
  bottom: 10px;
  z-index: 10;
}
.card-badge-episode {
  position: static;
  background: rgba(10,14,30,.68);
}
.card-badge-quality,
.card-badge-language { position: static; }
.recent-update-card .card-badge {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
}
.recent-update-card .badge--audio {
  position: absolute;
  top: 8px;
  right: 8px;
}
.recent-update-card .badge--quality {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
.recent-update-card .badge--episode {
  position: absolute;
  left: 8px;
  bottom: 8px;
  min-width: 0;
  white-space: nowrap;
}

.badge-status-ongoing {
  background: linear-gradient(135deg, color-mix(in srgb, var(--badge-color-ongoing) 88%, #ffffff 12%), var(--badge-color-ongoing));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--badge-color-ongoing) 45%, transparent);
}
.badge-status-completed {
  background: linear-gradient(135deg, color-mix(in srgb, var(--badge-color-completed) 88%, #ffffff 12%), var(--badge-color-completed));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--badge-color-completed) 42%, transparent);
}
.badge-status-upcoming {
  background: linear-gradient(135deg, color-mix(in srgb, var(--badge-color-upcoming) 88%, #ffffff 12%), var(--badge-color-upcoming));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--badge-color-upcoming) 45%, transparent);
}
.badge-type-movie { background: color-mix(in srgb, var(--badge-color-movie) 80%, rgba(7,10,22,.55)); }
.badge-type-ona   { background: color-mix(in srgb, var(--badge-color-ona) 80%, rgba(7,10,22,.55)); }
.badge-type-ova   { background: color-mix(in srgb, var(--badge-color-ova) 80%, rgba(7,10,22,.55)); }
.badge-lang-sub { background: color-mix(in srgb, var(--badge-color-sub) 80%, rgba(8,10,22,.6)); }
.badge-lang-dub { background: color-mix(in srgb, var(--badge-color-dub) 80%, rgba(8,10,22,.6)); }
.badge-quality-sd  { background: color-mix(in srgb, var(--badge-color-sd) 78%, rgba(8,10,22,.6)); }
.badge-quality-hd  { background: color-mix(in srgb, var(--badge-color-hd) 78%, rgba(8,10,22,.6)); }
.badge-quality-fhd { background: color-mix(in srgb, var(--badge-color-fhd) 78%, rgba(8,10,22,.6)); }
.badge-quality-4k  { background: color-mix(in srgb, var(--badge-color-4k) 78%, rgba(8,10,22,.6)); border-color: rgba(255,255,255,.45); }

/* Trending fire icon - top left */
.card-trend-icon {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

/* Bottom bar: Ep label + Rating */
.card-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 8px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,0.45) 60%);
  z-index: 3;
}
.card-right-badges {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Rating badge */
.card-rating-badge {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(0,0,0,0.55);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

/* Play overlay on hover */
.card-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.anime-card.tapped .card-play-overlay {
  opacity: 1;
  pointer-events: auto;
}

.card-play-btn {
  width: 46px;
  height: 46px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.card-play-btn svg { width: 22px; height: 22px; margin-left: 3px; }

.card-info {
  padding: 0.5rem 0.1rem 0;
  background: transparent;
  border: none;
  box-shadow: none;
  min-width: 0;
}
.recent-update-card .card-info {
  box-shadow: none;
  background: transparent;
}
.recent-update-card .card-title {
  text-shadow: none;
  box-shadow: none;
  background: transparent;
}
.card-title {
  background: transparent;
  box-shadow: none;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.card-meta-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.card-year { font-size: 0.72rem; color: var(--text-muted); }
.card-genre {
  font-size: 0.7rem;
  color: var(--color-primary);
  background: rgba(233,69,96,0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 500;
}

/* Legacy compat - kept for other templates */
.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,26,0.85) 0%, rgba(10,10,26,0.1) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
}


/* ============ GENRE TAGS ============ */
.genre-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.genre-tag {
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.genre-tag:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); }

/* ============ PAGE WITH SIDEBAR LAYOUT ============ */
/* Shared two-column layout used by home, detail, and other full pages */
.page-with-sidebar {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 0.75rem 0 2rem;
}

.page-main {
  flex: 1;
  min-width: 0;
}

.page-sidebar {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: static;
  overflow-y: visible;
  scrollbar-width: thin;
}
.page-sidebar::-webkit-scrollbar { width: 3px; }
.page-sidebar::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 2px; }

/* Sidebar genre tags (compact pill style) */
.sidebar-genre-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.sidebar-genre-tag {
  font-size: 0.72rem;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.sidebar-genre-tag:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ── Responsive: sidebar collapses on tablet/mobile ── */
@media (max-width: 1100px) {
  .page-sidebar { width: 260px; }
}
@media (max-width: 900px) {
  .page-with-sidebar { flex-direction: column; gap: 0; padding-bottom: 1rem; }
  .page-sidebar {
    width: 100%;
    position: static;
    max-height: none;
    overflow-y: visible;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 0 0 1rem;
  }
}
@media (max-width: 600px) {
  .page-sidebar { grid-template-columns: 1fr; }
}

/* ============ ANIME DETAIL PAGE ============ */
/* ============================================
   DETAIL PAGE — full layout
   ============================================ */

/* ── Page wrapper ─────────────────────────── */
.detail-page {
  padding: 0 0 3rem;
}

/* ── Banner ───────────────────────────────── */
.detail-banner-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  margin-bottom: 0;
}
.detail-banner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
}
.detail-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,10,26,0.15) 0%,
    rgba(10,10,26,0.5)  55%,
    rgba(10,10,26,0.96) 100%
  );
}
[data-theme="light"] .detail-banner-overlay {
  background: linear-gradient(
    to bottom,
    rgba(240,240,248,0.1)  0%,
    rgba(240,240,248,0.55) 55%,
    rgba(240,240,248,0.97) 100%
  );
}

/* ── Hero: poster + title row ─────────────── */
.detail-hero {
  display: flex;
  gap: 1.25rem;
  align-items: flex-end;
  max-width: 960px;
  margin: -80px auto 0;
  padding: 0 1rem;
  position: relative;
  z-index: 2;
}

.detail-poster-wrap {
  flex-shrink: 0;
  width: 130px;
  margin-bottom: 0;
}
.detail-poster-img {
  width: 130px;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--bg-surface);
  box-shadow: 0 6px 24px rgba(0,0,0,0.55);
  display: block;
}
.detail-poster-placeholder {
  width: 130px;
  aspect-ratio: 2/3;
  background: var(--bg-card);
  border-radius: 10px;
  border: 2px solid var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.detail-hero-info {
  flex: 1;
  min-width: 0;
  padding-bottom: .2rem;
}

/* Breadcrumb */
.detail-breadcrumb {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: .45rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.detail-breadcrumb a { color: var(--text-secondary); }
.detail-breadcrumb a:hover { color: var(--color-primary); }

/* Title */
.detail-title {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: .25rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

/* Alt title */
.detail-alt-title {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: .6rem;
  font-style: italic;
}

/* Chips row (type, status, year, eps, score, lang) */
.detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .7rem;
  align-items: center;
}
.detail-chip {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .2rem .6rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-secondary);
  letter-spacing: .01em;
}
[data-theme="light"] .detail-chip {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.1);
}
.detail-chip.is-type     { background: rgba(99,102,241,.18); border-color: rgba(99,102,241,.3);  color: #a5b4fc; }
.detail-chip.is-status-ongoing   { background: color-mix(in srgb, var(--badge-color-ongoing) 13%, transparent); border-color: color-mix(in srgb, var(--badge-color-ongoing) 25%, transparent); color: color-mix(in srgb, var(--badge-color-ongoing) 76%, #ffffff); }
.detail-chip.is-status-completed { background: color-mix(in srgb, var(--badge-color-completed) 13%, transparent); border-color: color-mix(in srgb, var(--badge-color-completed) 25%, transparent); color: color-mix(in srgb, var(--badge-color-completed) 76%, #ffffff); }
.detail-chip.is-status-upcoming  { background: color-mix(in srgb, var(--badge-color-upcoming) 13%, transparent); border-color: color-mix(in srgb, var(--badge-color-upcoming) 25%, transparent); color: color-mix(in srgb, var(--badge-color-upcoming) 76%, #ffffff); }
.detail-chip.is-score    { background: rgba(251,191,36,.13); border-color: rgba(251,191,36,.25); color: #fbbf24; }
.detail-chip.is-score svg { color: #f59e0b; }

/* Action buttons */
.detail-actions {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin-top: .1rem;
}
.detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.42rem 0.95rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}
.detail-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.detail-btn-watch    { background: var(--color-primary); color: white; }
.detail-btn-trailer  { background: #e53935; color: white; }
.detail-btn-bookmark { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: var(--text-primary); }
[data-theme="light"] .detail-btn-bookmark { background: rgba(0,0,0,.07); border-color: rgba(0,0,0,.15); }

/* ── Body: main + sidebar two-column ──────── */
.detail-body {
  max-width: 960px;
  margin: 1.25rem auto 0;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 1.25rem;
  align-items: start;
}

/* ── Sidebar ──────────────────────────────── */
.detail-sidebar {}

.detail-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.detail-info-card-title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: .65rem .9rem .4rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.detail-info-card-title::before {
  content: '';
  display: inline-block;
  width: 3px; height: .85em;
  border-radius: 2px;
  background: var(--color-primary);
  flex-shrink: 0;
}

/* Info grid rows (used in sidebar) */
.detail-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.detail-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.82rem;
  padding: .35rem .9rem;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.detail-info-item:last-child { border-bottom: none; }
.detail-info-item:hover { background: var(--bg-hover); }
.info-dot {
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--color-primary);
  flex-shrink: 0;
  margin-top: .3rem;
}
.info-label {
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
  min-width: 62px;
  flex-shrink: 0;
  font-size: .76rem;
  padding-top: .03rem;
}
.info-value {
  color: var(--text-primary);
  font-weight: 500;
  word-break: break-word;
}

/* Genre tags in sidebar */
.detail-genres {
  padding: .6rem .9rem .75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.detail-genre-tag {
  padding: .22rem .65rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  font-size: .74rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all .18s;
}
.detail-genre-tag:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* ── Main column ──────────────────────────── */
.detail-main {}

/* Section heading style */
.detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .65rem;
  gap: .5rem;
}
.detail-section-title {
  font-size: .88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.detail-section-title::before {
  content: '';
  display: inline-block;
  width: 3px; height: 1em;
  border-radius: 2px;
  background: var(--color-primary);
  flex-shrink: 0;
}

/* Synopsis */
.detail-synopsis { margin-bottom: 1.25rem; }
.detail-synopsis-text {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.detail-synopsis-text.expanded { -webkit-line-clamp: unset; }
.synopsis-toggle {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 0.8rem;
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.synopsis-toggle:hover { text-decoration: underline; }

/* SEO text */
.detail-seo-text {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Rating block */
.detail-rating-block {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .85rem 1rem;
  margin-bottom: 1.25rem;
}
.detail-rating-score {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fbbf24;
  line-height: 1;
  flex-shrink: 0;
}
.detail-rating-label {
  font-size: .74rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: .25rem;
}
.detail-stars {
  display: flex;
  gap: .15rem;
}
.detail-stars svg { color: #f59e0b; }
.detail-stars svg.empty { color: var(--bg-hover); }

/* Episodes */
.detail-episodes { margin-bottom: 1.5rem; }
.detail-episodes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .65rem;
  gap: .75rem;
  flex-wrap: wrap;
}
.detail-episodes-header h3 {
  font-size: .88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.ep-count {
  display: inline-block;
  background: var(--color-primary);
  color: white;
  font-size: 0.68rem;
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
  font-weight: 700;
}
.ep-search-input {
  padding: 0.36rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.82rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.ep-search-input:focus { border-color: var(--color-primary); }
.ep-search-input::placeholder { color: var(--text-muted); }

.episodes-grid { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.18s;
}
.ep-btn:hover { background: var(--color-primary); color: white; border-color: transparent; transform: translateY(-1px); }
.ep-btn.hidden { display: none; }


/* ── Episodes (alt class) ─────────────────── */
.episodes-section {}
.episodes-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.episodes-header h3 { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 0.4rem; }

/* ── Legacy compat ────────────────────────── */
.anime-hero { display: none; }
.anime-detail { display: none; }

/* ── Characters & Staff cast section ─────── */
.mal-cast-section {
  margin-bottom: 1.75rem;
  display: none; /* JS sets display:block once data arrives */
}
.mal-cast-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .8rem;
  flex-wrap: wrap;
}
.mal-cast-tabs {
  display: flex;
  gap: .25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: .2rem;
}
.mal-cast-tab {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .32rem .8rem;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.mal-cast-tab.active {
  background: var(--color-primary);
  color: #fff;
}
.mal-cast-tab:not(.active):hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.mal-cast-tab-count {
  display: inline-block;
  background: rgba(255,255,255,.15);
  border-radius: 20px;
  font-size: .64rem;
  font-weight: 700;
  padding: .05em .45em;
  min-width: 1.4em;
  text-align: center;
  line-height: 1.6;
}
.mal-cast-tab.active .mal-cast-tab-count {
  background: rgba(255,255,255,.25);
}
.mal-cast-pane { display: none; }
.mal-cast-pane.active { display: block; }

/* ── Responsive ───────────────────────────── */
@media (max-width: 700px) {
  .detail-body {
    grid-template-columns: 1fr;
  }
  .detail-sidebar { order: 2; }
  .detail-main    { order: 1; }
}
@media (max-width: 600px) {
  .detail-banner-wrap { height: 160px; }
  .detail-hero { gap: .85rem; margin-top: -65px; flex-wrap: wrap; }
  .detail-poster-wrap { width: 100px; }
  .detail-poster-img  { width: 100px; }
  .detail-title { font-size: 1.25rem; }
  .detail-btn { padding: 0.38rem 0.8rem; font-size: 0.74rem; }
}

/* ============================================
   DETAIL PAGE — dv-* layout
   Matches reference: poster+rating+buttons+info
   on left, title+synopsis+info-grid+cast+eps
   on right
   ============================================ */

/* ── Outer container ─────────────────────── */
/* ── Hero grid — see crew/detail CSS block below ── */

.dv-title {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: .2rem;
  text-align: center;
}
.dv-alt-title {
  font-size: .82rem;
  color: var(--text-muted);
  margin-bottom: .75rem;
  text-align: center;
}

/* Synopsis — scrollable, no toggle */
.dv-synopsis-text {
  font-size: .86rem;
  color: var(--text-secondary);
  line-height: 1.72;
  max-height: 88px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: .3rem;
  padding-right: .35rem;
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}
.dv-synopsis-text::-webkit-scrollbar { width: 3px; }
.dv-synopsis-text::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; }
.dv-synopsis-text::-webkit-scrollbar-track { background: transparent; }
.dv-synopsis-text.expanded { max-height: 88px; overflow-y: auto; }
.synopsis-toggle { display: none !important; }

/* SEO text shown inline at top of dv-right (below title) */
.dv-seo-inline {
  font-size: .8rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: .75rem;
}
.dv-seo-inline strong { color: var(--text-primary); font-weight: 600; }

/* Synopsis block — below action buttons */
.dv-synopsis-block {
  margin-top: .9rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
}
.dv-synopsis-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 .4rem;
}

/* 2-column info grid */
.dv-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .22rem .75rem;
  margin-bottom: 1rem;
  font-size: .82rem;
  text-align: left;
}
.dv-info-item {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  overflow: hidden;
  min-width: 0;
}
.dv-info-dot {
  width: 7px; height: 7px;
  border-radius: 1px;
  background: var(--color-primary);
  flex-shrink: 0;
  display: inline-block;
  margin-top: .05rem;
}
.dv-info-label {
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.dv-info-val {
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Coloured status values */
.dv-status-completed { color: var(--badge-color-completed); font-weight: 700; }
.dv-status-ongoing   { color: var(--badge-color-ongoing); font-weight: 700; }
.dv-status-upcoming  { color: var(--badge-color-upcoming); font-weight: 700; }

/* Genre tags */
.dv-genres {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.dv-genre-tag {
  padding: .22rem .7rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  font-size: .74rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all .18s;
}
.dv-genre-tag:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ── Cast section ────────────────────────── */
.dv-cast-section {
  margin-bottom: 1.5rem;
}

.dv-cast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
  gap: .5rem;
}
.dv-cast-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
}
.dv-cast-tab {
  padding: .4rem 1.1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: color .15s, border-color .15s;
}
.dv-cast-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.dv-cast-tab:not(.active):hover { color: var(--text-primary); }

.dv-cast-showall {
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  background: #22c55e;
  padding: .28rem .85rem;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .15s;
}
.dv-cast-showall:hover { opacity: .85; }

.dv-cast-pane { display: none; }
.dv-cast-pane.active { display: block; }

/* Scrollable horizontal row of character circles */
.dv-cast-scroll {
  display: flex;
  gap: .85rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}
.dv-cast-scroll::-webkit-scrollbar { height: 3px; }
.dv-cast-scroll::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 2px; }

/* Individual character/staff card — circular avatar style */
.dv-char-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
  width: 78px;
  text-align: center;
}
.dv-char-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-hover);
  display: block;
  border: 2px solid var(--border);
  transition: border-color .18s;
}
.dv-char-card:hover .dv-char-avatar { border-color: var(--color-primary); }
.dv-char-avatar-ph { background: var(--bg-hover); }
.dv-char-skel {
  animation: dv-shimmer 1.4s infinite;
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
}
.dv-char-skel-name {
  width: 56px;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: dv-shimmer 1.4s infinite;
}
@keyframes dv-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.dv-char-name {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  word-break: break-word;
  width: 100%;
}
.dv-char-role {
  font-size: .64rem;
  color: var(--text-muted);
  line-height: 1.2;
}

/* ── Episodes section ────────────────────── */
/* ══════════════════════════════════════════
   Breadcrumb bar (above banner)
   ══════════════════════════════════════════ */
.dv-breadcrumb-bar {
  background: var(--bg-secondary, var(--bg-card));
  border-bottom: 1px solid var(--border);
  padding: .45rem 0;
}
/* Series page alignment inherits global header clearance */
body.page-series .dv-breadcrumb-bar {
  background: transparent;
  border-bottom: 0;
  padding: 0;
  margin-bottom: .55rem;
}
body.page-series .detail-breadcrumb.watch-page-header-main {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #0c1726, #07101d 64%);
  border: 1px solid rgba(158,194,255,.14);
  box-shadow: 0 14px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  flex-wrap: wrap;
}
.detail-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color .15s;
}
.detail-breadcrumb a:hover { color: var(--color-primary); }
.dv-bc-sep { color: var(--text-muted); font-size: .75rem; }
.dv-bc-current {
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

/* ── Hero grid — poster overlaps banner ── */
.dv-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: -80px; /* pull up over banner */
  padding-bottom: .5rem;
  position: relative;
  z-index: 2;
}

.dv-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}

/* Poster */
.dv-poster-box { width: 170px; }
.dv-poster-img {
  width: 170px;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 12px;
  border: none;
  box-shadow: none;
  display: block;
}
.dv-poster-ph {
  width: 170px;
  aspect-ratio: 2/3;
  background: var(--bg-card);
  border-radius: 12px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

/* RIGHT column */
.dv-right {
  width: 100%;
  max-width: 760px;
  min-width: 0;
  padding-top: 0;
  text-align: center;
}

/* Action buttons row */
.dv-action-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .85rem;
}
.dv-btn-watch {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem 1rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity .15s, transform .12s;
  white-space: nowrap;
}
.dv-btn-watch:hover { opacity: .88; transform: translateY(-1px); }
.dv-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .95rem;
  background: rgba(255,255,255,.1);
  color: var(--text-primary);
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid var(--color-primary);
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s, background .15s;
  white-space: nowrap;
}
.dv-btn-secondary:hover { background: rgba(255,255,255,.16); }
.dv-btn-secondary.bookmarked { background: #22c55e; border-color: #22c55e; color: #fff; }
[data-theme="light"] .dv-btn-secondary.bookmarked { color: #fff; }
[data-theme="light"] .dv-btn-secondary {
  background: #fff;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
[data-theme="light"] .dv-btn-secondary:hover {
  background: rgba(0,0,0,.12);
  color: var(--text-primary);
}
.dv-btn-trailer {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .9rem;
  background: #e53935;
  color: #fff;
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .15s;
  white-space: nowrap;
}
.dv-btn-trailer:hover { opacity: .88; }

/* Inline rating (stars + number) */
.dv-rating-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .65rem;
  margin-bottom: .2rem;
}
.dv-stars {
  display: flex;
  gap: .1rem;
}
.dv-rating-num {
  font-size: .78rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Keep old dv-action-btn for compat */
.dv-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  padding: .52rem .75rem;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: opacity .18s, transform .12s;
  white-space: nowrap;
}
.dv-action-btn:hover { opacity: .85; transform: translateY(-1px); }
.dv-bookmark-btn { background: var(--color-primary); color: #fff; }
.dv-bookmark-btn.bookmarked { background: #22c55e; }
.dv-trailer-btn  { background: #e53935; color: #fff; }

/* Watch actions (legacy compat) */
.dv-watch-actions { display: flex; flex-direction: column; gap: .45rem; }
.dv-watch-btn { background: var(--color-primary); color: #fff; }
.dv-watch-btn-ep {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--text-primary);
}
[data-theme="light"] .dv-watch-btn-ep {
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.13);
}

/* ══════════════════════════════════════════
   Characters & Crew — horizontal circle scroll
   ══════════════════════════════════════════ */
.crew-section {
  margin-bottom: 1.5rem;
}
.crew-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
  gap: .5rem;
}
.crew-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
}
.crew-tab {
  padding: .38rem 1.1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: color .15s, border-color .15s;
}
.crew-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.crew-tab:not(.active):hover { color: var(--text-primary); }

.crew-showall {
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  background: #22c55e;
  padding: .28rem .85rem;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s, transform .12s;
}
.crew-showall:hover { opacity: .85; transform: translateY(-1px); }

/* ══════════════════════════════════════════
   Crew "Show All" — inline expanded vertical grid
   ══════════════════════════════════════════ */
.crew-expanded-grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .65rem;
  margin-top: .75rem;
}
.crew-expanded-grid[style*="grid"] {
  animation: crewExpand .2s ease;
}
@keyframes crewExpand {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.crew-exp-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .6rem .75rem;
  transition: border-color .18s, transform .15s;
}
.crew-exp-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.crew-exp-avatar {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-primary);
}
.crew-exp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.crew-exp-ph {
  width: 100%;
  height: 100%;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.crew-exp-info {
  min-width: 0;
  flex: 1;
}
.crew-exp-name {
  font-size: .81rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crew-exp-role {
  font-size: .7rem;
  color: var(--text-muted);
  margin-top: .15rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crew-exp-empty {
  color: var(--text-muted);
  font-size: .82rem;
  padding: 1rem 0;
  grid-column: 1 / -1;
}

@media (max-width: 540px) {
  .crew-expanded-grid { grid-template-columns: 1fr 1fr; gap: .4rem; }
  .crew-exp-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: .5rem .55rem;
    gap: .45rem;
  }
  .crew-exp-avatar { width: 36px; height: 36px; flex-shrink: 0; }
  .crew-exp-name { white-space: normal; font-size: .74rem; }
  .crew-exp-role {
    white-space: normal;
    font-size: .64rem;
    color: var(--text-muted);
    font-weight: 500;
  }
}


.crew-pane { display: none; }
.crew-pane.active { display: block; }

/* Horizontal scrolling row */
.crew-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}
.crew-scroll::-webkit-scrollbar { height: 3px; }
.crew-scroll::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 2px; }

/* Individual circular card */
.crew-circle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
  width: 82px;
  text-align: center;
  cursor: default;
}
.crew-circle-wrap {
  width: 74px;
  height: 74px;
  flex-shrink: 0;
}
.crew-circle-img {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2.5px solid var(--color-primary);
  background: var(--bg-hover);
  transition: border-color .18s, transform .18s;
}
.crew-circle-card:hover .crew-circle-img {
  border-color: #22c55e;
  transform: scale(1.05);
}
.crew-circle-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: var(--bg-card) !important;
  border: 2px solid var(--border) !important;
}
.crew-circle-name {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  word-break: break-word;
  width: 100%;
}
.crew-circle-role {
  font-size: .62rem;
  color: var(--text-muted);
  line-height: 1.2;
  width: 100%;
}

/* Skeleton */
.crew-skel-circle {
  border: none !important;
  animation: dv-shimmer 1.4s infinite;
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%) !important;
  background-size: 200% 100% !important;
}
.crew-skel-txt {
  width: 56px;
  height: 9px;
  border-radius: 5px;
  animation: dv-shimmer 1.4s infinite;
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
}

/* Responsive */
@media (max-width: 700px) {
  .dv-wrap {
    gap: .75rem;
    margin-top: -55px;
  }
  .dv-poster-box { width: 140px; }
  .dv-poster-img { width: 140px; }
  .dv-poster-ph  { width: 140px; }
  .dv-right { padding-top: 0; }
  .dv-btn-watch, .dv-btn-secondary, .dv-btn-trailer { font-size: .76rem; padding: .38rem .75rem; }
}
@media (max-width: 480px) {
  .dv-wrap {
    gap: .6rem;
    margin-top: -45px;
  }
  .dv-poster-box { width: 120px; }
  .dv-poster-img { width: 120px; }
  .dv-poster-ph  { width: 120px; }
  .dv-right { padding-top: 0; }
  .dv-bc-current { max-width: 160px; }
}

/* ── Episodes section ────────────────────── */
.dv-episodes-section { margin-bottom: 1.5rem; }
.dv-franchise-section { padding: 1rem; }
.dv-episodes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .65rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.dv-episodes-header h3 {
  font-size: .92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.dv-franchise-header { align-items: flex-start; gap: .75rem; }
.dv-franchise-title { margin-bottom: .3rem; }
.dv-franchise-link { color: inherit; text-decoration: none; }
.dv-franchise-meta { display: flex; gap: .5rem; flex-wrap: wrap; }
.dv-franchise-pill { text-decoration: none; }
.dv-franchise-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.rec-section-spaced { margin-top: 1.5rem; }
.rec-tabs-spaced { margin-bottom: .75rem; }
.detail-related-wrap { margin-top: 1.5rem; }
.crew-empty-note {
  color: var(--text-muted);
  font-size: .82rem;
  padding: .75rem 0;
}

/* ── Responsive ───────────────────────────── */
@media (max-width: 700px) {
  .dv-title { font-size: 1.2rem; }
  .dv-info-grid { grid-template-columns: 1fr 1fr; gap: .18rem .4rem; font-size: .78rem; }
}
@media (max-width: 480px) {
  .dv-title { font-size: 1.1rem; }
  .dv-info-grid { grid-template-columns: 1fr 1fr; gap: .15rem .3rem; font-size: .74rem; }
  .dv-info-label, .dv-info-val { font-size: .72rem; }
}

/* ============ WATCH PAGE ============ */
.watch-page:not(.watch-rebuild) {
  display: flex;
  gap: 1.25rem;
  padding: 0.75rem 1.25rem 2rem;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  align-items: flex-start;
}
.watch-main { flex: 1; min-width: 0; }

/* Sidebar */
.watch-sidebar {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: static;
  overflow-y: visible;
  scrollbar-width: thin;
}
.watch-sidebar::-webkit-scrollbar { width: 3px; }
.watch-sidebar::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 2px; }
.sidebar-anime-info {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-card);
  border-radius: 10px;
}
.sidebar-cover { width: 60px; height: 80px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.sidebar-text { min-width: 0; }
.sidebar-text h3 { font-size: 0.85rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.3rem; }
.sidebar-genre { font-size: 0.75rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-meta { display: flex; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; align-items: center; }
.sidebar-section {
  display: block;
  background: var(--bg-card);
  border-radius: 10px;
  padding: 0.75rem;
}
.sidebar-title { font-size: 0.88rem; font-weight: 700; margin-bottom: 0.65rem; display: flex; align-items: center; gap: 0.35rem; }
.sidebar-list { display: flex; flex-direction: column; gap: 0.5rem; }
.sidebar-item { display: flex; gap: 0.6rem; padding: 0.5rem; border-radius: 8px; transition: background 0.15s; }
.sidebar-item:hover { background: var(--bg-hover); }
.sidebar-item img { width: 44px; height: 60px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.sidebar-item-info { min-width: 0; }
.sidebar-item-title { font-size: 0.8rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sidebar-item-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.2rem; }

/* Sidebar episodes */
.sidebar-ep-section { display: block; }
.sidebar-ep-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; gap: 0.5rem; }
.sidebar-ep-search {
  flex: 1; padding: 0.28rem 0.6rem;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 7px; color: var(--text-primary);
  font-family: inherit; font-size: 0.75rem; outline: none; min-width: 0;
}
.sidebar-ep-search:focus { border-color: var(--color-primary); }
.sidebar-ep-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  max-height: 300px; overflow-y: auto; padding-right: 2px;
}
.sidebar-ep-grid::-webkit-scrollbar { width: 3px; }
.sidebar-ep-grid::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 2px; }
.sidebar-ep-pill {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 34px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 6px; font-size: 0.75rem; font-weight: 600;
  color: var(--text-secondary); text-decoration: none; transition: all 0.15s;
}
.sidebar-ep-pill:hover, .sidebar-ep-pill.active { background: var(--color-primary); color: white; border-color: transparent; }
.sidebar-ep-pill.hidden { display: none !important; }

/* Video */
.video-outer { position: relative; }
.video-wrapper { position: relative; padding-top: 56.25%; background: #000; border-radius: 12px; overflow: hidden; }
.video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* Controls bar */
.video-controls-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.45rem 0.1rem; gap: 0.5rem;
}
.vc-nav { display: flex; align-items: center; gap: 0.4rem; }
.vc-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.32rem 0.75rem; border-radius: 7px; font-size: 0.8rem; font-weight: 600;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
  text-decoration: none; transition: all 0.2s; font-family: inherit; cursor: pointer;
}
.vc-btn:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.vc-btn.disabled { opacity: 0.3; pointer-events: none; }
.vc-actions { display: flex; gap: 0.35rem; }
.vc-icon-btn {
  width: 34px; height: 34px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;
}
.vc-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.vc-icon-btn.bulb-on { background: #fbbf24; border-color: #fbbf24; color: #111; box-shadow: 0 0 14px rgba(251,191,36,0.55); }

/* Bulb mode */
.bulb-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 90; }
.bulb-overlay.active { display: block; }
.watch-page.bulb-mode .video-outer,
.watch-page.bulb-mode .video-controls-bar { position: relative; z-index: 100; }

/* Expand — fix: hide sidebar + remove gap */
.watch-page.expanded { gap: 0; }
.watch-page.expanded .watch-sidebar { display: none !important; }
.watch-page.expanded .watch-main { flex: 1; width: 100%; max-width: 100%; }
.watch-page.expanded .video-wrapper { border-radius: 8px; }

/* Server switcher */
.server-switcher {
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap; padding: 0.55rem 0;
  border-bottom: 1px solid var(--border); margin-bottom: 0.5rem;
}
.server-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.server-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-width: 0;
  flex: 1 1 320px;
}
.server-btn {
  padding: 0.3rem clamp(0.6rem, 0.8vw, 0.86rem); border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary);
  font-size: clamp(0.74rem, 0.2vw + 0.7rem, 0.84rem); font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s;
  min-height: clamp(2rem, 1.2vw + 1.7rem, 2.35rem);
  max-width: 100%;
}
.server-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.server-btn.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }

/* Watch info card (replaces old .watch-info-bar) */
.wic-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem 1rem;
  margin: .6rem 0 .75rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

/* Title row */
.wic-title-row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  flex-wrap: wrap;
}
.wic-play-icon {
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: .15rem;
  transition: color .15s;
}
.wic-play-icon:hover { color: var(--color-primary); }
.wic-title {
  font-size: clamp(.92rem, 0.3vw + .86rem, 1rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  margin: 0;
  min-width: 0;
}

/* Meta row */
.wic-meta-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.wic-sub-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: #f59e0b;
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .22rem .65rem;
  border-radius: 6px;
}
.wic-date {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  color: var(--text-muted);
}
.wic-date svg { flex-shrink: 0; }
.wic-status-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 4px;
  background: var(--bg-hover);
  color: var(--text-secondary);
}
.wic-status-ongoing   { background: color-mix(in srgb, var(--badge-color-ongoing) 15%, transparent); color: var(--badge-color-ongoing); }
.wic-status-completed { background: color-mix(in srgb, var(--badge-color-completed) 15%, transparent); color: var(--badge-color-completed); }
.wic-status-upcoming  { background: color-mix(in srgb, var(--badge-color-upcoming) 15%, transparent); color: var(--badge-color-upcoming); }
.wic-rating {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--badge-color-rating);
}

/* Series row */
.wic-series-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  flex-wrap: wrap;
}
.wic-series-row-franchise { row-gap: .45rem; }
.wic-series-label { color: var(--text-muted); }
.wic-series-row svg { color: var(--text-muted); flex-shrink: 0; }
.wic-series-link {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}
.wic-series-link:hover { color: var(--color-primary); }
.wic-franchise-pill { text-decoration: none; }

/* Share buttons */
.wic-share-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-top: .1rem;
  flex-wrap: wrap;
}
.wic-share-btn {
  width: clamp(34px, 1vw + 30px, 38px);
  height: clamp(34px, 1vw + 30px, 38px);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: opacity .15s, transform .1s;
  flex-shrink: 0;
}
.wic-share-btn:hover { opacity: .85; transform: translateY(-1px); }
.wic-share-fb { background: #1877f2; }
.wic-share-tw { background: #1da1f2; }
.wic-share-wa { background: #25d366; }
.wic-share-tg { background: #0088cc; }


/* Mobile episode section */
.mobile-ep-section { display: none; }
.mob-ep-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; gap: 0.5rem; }
.mob-ep-header h4 { font-size: 0.88rem; font-weight: 700; display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.mob-ep-search { padding: 0.28rem 0.6rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 7px; color: var(--text-primary); font-family: inherit; font-size: 0.78rem; outline: none; width: 110px; }
.mob-ep-search:focus { border-color: var(--color-primary); }
.mob-ep-scroll { display: flex; flex-wrap: nowrap; gap: 0.4rem; overflow-x: auto; overflow-y: hidden; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; }
.mob-ep-scroll::-webkit-scrollbar { height: 3px; }
.mob-ep-scroll::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 2px; }
.ep-pill {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: clamp(34px, 0.8vw + 30px, 38px); background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 7px; font-size: 0.8rem; font-weight: 600;
  color: var(--text-secondary); text-decoration: none; transition: all 0.15s;
}
.ep-pill:hover, .ep-pill.active { background: var(--color-primary); color: white; border-color: transparent; }
.ep-pill.hidden { display: none !important; }

/* Desktop/mobile helpers */
.desktop-only { display: flex; }
.mobile-only  { display: none; }

/* ============ SEARCH PAGE ============ */
.search-page { padding: 2rem 0; }
.search-header { margin-bottom: 1.5rem; }
.page-title { font-size: 1.8rem; font-weight: 800; }
.page-title span { color: var(--color-primary); }
.search-count { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; }

.search-filters { background: var(--bg-card); border-radius: 12px; padding: 1rem; margin-bottom: 2rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; }
.filter-group { flex: 1; min-width: 120px; }

/* Base input style */
.filter-input {
  width: 100%;
  padding: 0.6rem 0.9rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}
.filter-input:focus { border-color: var(--color-primary); }

/* Hide native select — replaced by custom dropdown */
.filter-select { display: none; }

/* Custom dropdown wrapper */
.custom-select {
  position: relative;
  width: 100%;
  user-select: none;
}
.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  white-space: nowrap;
  overflow: hidden;
}
.custom-select-trigger:hover { border-color: var(--color-primary); color: var(--text-primary); }
.custom-select-trigger.active {
  border-color: var(--color-primary);
  background: var(--bg-hover);
  color: var(--text-primary);
}
.custom-select-trigger span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.custom-select-arrow {
  flex-shrink: 0;
  width: 14px; height: 14px;
  transition: transform 0.2s;
  color: var(--text-muted);
}
.custom-select.open .custom-select-arrow { transform: rotate(180deg); }

/* Dropdown panel */
.custom-select-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  overflow: hidden;
  z-index: 999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  max-height: 220px;
  overflow-y: auto;
}
.custom-select-dropdown::-webkit-scrollbar { width: 3px; }
.custom-select-dropdown::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 2px; }
.custom-select.open .custom-select-dropdown { display: block; }

/* Each option */
.custom-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  font-size: 0.83rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border-bottom: 1px solid var(--border);
}
.custom-option:last-child { border-bottom: none; }
.custom-option:hover { background: var(--bg-hover); color: var(--text-primary); }
.custom-option.selected {
  background: rgba(233,69,96,0.12);
  color: var(--color-primary);
  font-weight: 700;
}
.custom-option .opt-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border);
}
.custom-option.selected .opt-dot { background: var(--color-primary); }
/* Status color dots */
.custom-option[data-value="Ongoing"] .opt-dot   { background: #22c55e; }
.custom-option[data-value="Completed"] .opt-dot { background: #dc2626; }
.custom-option[data-value="Upcoming"] .opt-dot  { background: #fbbf24; }


.empty-state { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.empty-state svg { width: 64px; height: 64px; margin: 0 auto 1rem; opacity: 0.3; }
.empty-state h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.empty-state p { margin-bottom: 1.5rem; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 0.4rem; padding: 2rem 0; }
.page-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.page-btn:hover, .page-btn.active { background: var(--color-primary); color: white; border-color: transparent; }
.page-btn.disabled { opacity: 0.35; pointer-events: none; cursor: default; }
.page-btn.page-btn-dots { background: transparent; border-color: transparent; cursor: default; pointer-events: none; color: var(--text-muted); }

/* Recently Updated pagination wrapper */
.rp-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding-top: 0.5rem;
}
.rp-info {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.rp-total { color: var(--text-muted); opacity: 0.7; }
.rp-pagination .pagination { padding: 0.5rem 0 1rem; }

/* ============ BOOKMARK PAGE ============ */
.bookmark-page { padding: 2rem 0; }
.bookmark-header { margin-bottom: 2rem; }
.bookmark-header h1 { display: flex; align-items: center; gap: .5rem; font-size: 1.6rem; font-weight: 800; }
.bookmark-subtitle { color: var(--text-muted); margin-top: .3rem; font-size: 0.85rem; }
.bm-card-remove {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(239,68,68,.85);
  border: none; border-radius: 50%;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff; z-index: 10;
  opacity: 0; transition: opacity .2s;
  backdrop-filter: blur(4px);
}
.anime-card:hover .bm-card-remove { opacity: 1; }
.btn-danger {
  background: #ef4444; color: #fff;
  border: none; padding: .6rem 1.4rem;
  border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; transition: background .2s;
  font-family: inherit;
}
.btn-danger:hover { background: #dc2626; }

/* ============ FOOTER ============ */
.site-footer {
  background: var(--footer-bg, var(--bg-surface));
  border-top: 1px solid var(--border);
  border-top: 1px solid color-mix(in srgb, var(--footer-accent-color, var(--color-primary)) 24%, transparent);
  padding: 1rem 0 0.55rem;
  margin-top: 1rem;
  position: relative;
  z-index: 2;
}
.footer-inner { max-width: 1400px; margin: 0 auto; padding: 0 1rem; }
.footer-top { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: .55rem; align-items: flex-start; }
.footer-brand { flex: 2; min-width: 200px; }
.footer-logo { font-size: 1.08rem; line-height: 1.15; font-weight: 900; color: var(--footer-accent-color, var(--color-primary)); display: block; margin-bottom: 0.2rem; }
.footer-brand p { font-size: 0.78rem; line-height: 1.35; color: var(--footer-text-color, var(--text-muted)); margin: 0; }
.footer-links { flex: 1; min-width: 120px; }
.footer-links h4 { font-size: 0.74rem; line-height: 1.2; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.35rem; color: var(--footer-heading-color, var(--text-muted)); }
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.18rem; line-height: 1.2; }
.footer-links a { font-size: 0.78rem; color: var(--footer-link-color, var(--text-secondary)); transition: color 0.2s; }
.footer-links a:hover { color: var(--footer-accent-color, var(--color-primary)); }
.footer-bottom { padding-top: 0.45rem; border-top: 1px solid var(--border); border-top: 1px solid color-mix(in srgb, var(--footer-accent-color, var(--color-primary)) 18%, transparent); display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: space-between; align-items: center; }
.footer-bottom p { font-size: 0.72rem; line-height: 1.3; color: var(--footer-text-color, var(--text-muted)); margin: 0; }
.footer-note { font-size: 0.7rem !important; }

/* ============ RESPONSIVE ============ */

/* Tablet (769px–1024px): sidebar stays visible but narrower */
@media (max-width: 1024px) and (min-width: 769px) {
  .watch-page   { gap: 0.75rem; padding: 0.5rem 0.75rem 2rem; }
  .watch-sidebar { width: 240px; }
  .rec-grid-sidebar { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Mobile (≤768px): hide sidebar, show mob-below sections */
@media (max-width: 768px) {
  /* anime-grid handled by viewport breakpoints above */
  /* Watch page: single column, no sidebar */
  .watch-page:not(.watch-rebuild) .watch-sidebar  { display: none !important; }
  .watch-page:not(.watch-rebuild)     { flex-direction: column !important; padding: 0 !important; gap: 0 !important; max-width: 100% !important; }
  .watch-page:not(.watch-rebuild) .watch-main     { width: 100% !important; max-width: 100% !important; }
  /* Show mob-below sections */
  .mob-ep-bar        { display: block !important; }
  .mob-below-popular { display: block !important; }
  .mob-below-rec     { display: block !important; }
  .mobile-ep-section { display: block; padding: 0.5rem 0.75rem 1rem; }
  .wic-card { border-radius: 0; margin: .4rem 0 .5rem; border-left: none; border-right: none; }
  .wic-title { font-size: .9rem; }
  .wic-share-btn { width: 32px; height: 32px; }
  .video-wrapper { border-radius: 0; }
  .video-controls-bar { padding: 0.4rem 0.75rem; }
  .server-switcher { padding: 0.5rem 0.75rem; }
  .watch-info-bar { padding: 0.6rem 0.75rem 0.75rem; }
  .episode-info-bar { flex-wrap: wrap; }
  .filter-row { gap: 0.4rem; }
  .filter-group { flex: 1 1 calc(50% - 0.4rem); min-width: 0; }
  .filter-group:last-child { flex: 1 1 100%; }
  .vc-nav { flex-wrap: wrap; }
  .vc-btn { min-height: 2rem; }
  .server-btn { min-height: 2rem; }
  .wic-series-row,
  .wic-meta-row { row-gap: .38rem; }
}

@media (max-width: 480px) {
  .server-label { width: 100%; }
  .server-actions { flex-basis: 100%; }
  .container { padding: 0 0.75rem; }
  .footer-inner { padding: 0 0.75rem; }
  .footer-top { gap: 1rem; }
  .footer-brand,
  .footer-links { min-width: 0; flex: 1 1 100%; }
  .footer-bottom { align-items: flex-start; }
}

@media (max-width: 1024px) {
  .detail-breadcrumb { row-gap: .25rem; }
  .dv-bc-current { max-width: min(68vw, 260px); }
  .dv-info-item { align-items: flex-start; }
  .dv-info-val {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
    overflow-wrap: anywhere;
  }
}

.watch-page:not(.watch-rebuild) {
  padding-inline: clamp(0.55rem, 2vw, 0.9rem);
}
.watch-main,
.wic-card,
.server-switcher,
.video-controls-bar,
.footer-inner,
.container {
  min-width: 0;
}
.wic-title-row,
.wic-series-row,
.wic-meta-row,
.wic-share-row,
.vc-nav,
.server-switcher {
  flex-wrap: wrap;
}

/* ── mob-ep-bar: shown only on mobile ── */
.mob-ep-bar {
  display: none;
  padding: 0.5rem 0.75rem 0.75rem;
  background: var(--bg-card);
  margin-top: 0.5rem;
}

/* ── mob-below sections: hidden by default, shown on mobile ── */
.mob-below-popular,
.mob-below-rec {
  display: none;
  padding: 0.85rem 0.75rem 1rem;
  background: var(--bg-card);
  border-top: 4px solid var(--bg-surface);
  width: 100%;
  box-sizing: border-box;
}
.mob-below-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0.75rem;
}
.mob-below-header .sidebar-title { margin-bottom: 0; }
.mob-below-popular .sidebar-title,
.mob-below-rec .sidebar-title {
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* Mobile rec grid: 3 columns */
.rec-grid-mob {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
@media (max-width: 400px) {
  .rec-grid-mob { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Sidebar section header: title + tab group side by side ── */
.sidebar-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0.65rem;
}
.sidebar-section-header .sidebar-title { margin-bottom: 0; }

.popSc{position:fixed;top:0;bottom:0;left:0;right:0;padding:20px;background:rgba(255, 255, 255, 0.1);z-index:99980;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;animation:popupBlur .3s ease-in;-webkit-animation:popupBlur .3s}
.popSc.hidden{display:none}
.popSc >*{animation:popupScale .3s ease-in; -webkit-animation:popupScale .3s}
.popSc .popBo{position:relative;background:rgba(255, 255, 255, 0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:20px;box-shadow:0 5px 25px rgb(0 0 0 / 20%)}
.popSc .popBo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.popSc .popBo h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.popSc .popBo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}
.popSc .popBo .popBtn{display:inline-flex;justify-content:center;align-items:center;height:50px;width:50px;outline:none;border:none;background:#482dff;border-radius:50%;margin-top:20px;transition:all .2s ease;-webkit-transition:all .2s ease}
.popSc .popBo .popBtn:hover{transform:scale(1.05);-webkit-transform:scale(1.05)}
.popSc .popBo .popBtn svg{width:24px;height:24px;stroke:#fff;flex-shrink:0}
.popSc .popBo .popBtn svg.r{animation:rotateIcn 1.5s infinite linear;-webkit-animation:rotateIcn 1.5s infinite linear}
.darkMode .popSc{background:rgba(0, 0, 0, 0.1)}
.darkMode .popSc .popBo{background:rgba(50, 50, 50, 0.8)}
.darkMode .popSc .popBo svg{stroke:#fefefe}
.darkMode .popSc .popBo p, .darkMode .popSc .popBo h2{color:#fefefe}
@keyframes popupBlur {from{opacity:0}to{opacity:1}}
@-webkit-keyframes popupBlur{from{opacity:0}to{opacity:1}}
@keyframes popupScale{from{transform:scale(0);animation-timing-function:ease-in;opacity:0}to{transform:scale(1);opacity:1}}
@-webkit-keyframes popupScale{from{-webkit-transform:scale(0);-webkit-animation-timing-function: ease-in;opacity:0}to{-webkit-transform:scale(1);opacity:1}}
@keyframes rotateIcn{from{transform:rotate(0deg)} to{transform:rotate(359deg)}}
@-webkit-keyframes rotateIcn{from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(359deg)}}

/* Prevent GT from pushing body down 40px */
body { top: 0 !important; }

/* Remove GT font-tag background colouring */
font { background: transparent !important; box-shadow: none !important; }

/* Hide the GT bar iframe entirely */
.goog-te-banner-frame { display: none !important; }
iframe.skiptranslate  { display: none !important; border: none !important; box-shadow: none !important; }

/* Hide the original GT widget element */
#google_translate_element  { display: none !important; }
.goog-te-gadget-simple     { display: none !important; }

/* Hide all other GT artifacts */
.goog-te-gadget-simple img,
.goog-te-gadget-simple .VIpgJd-ZVi9od-xl07Ob-lTBxed span,
#goog-gt-tt,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.goog-te-spinner-pos,
.goog-te-spinner,
.goog-te-spinner-gif,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe,
.VIpgJd-ZVi9od-SmfZ-OEVmcd,
.VIpgJd-ZVi9od-l9xktf,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
  display: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* GT injects a high-z-index absolute div — nuke it */
* [style*="position: absolute; z-index: 10000"] { display: none !important; }

.lang-switcher { position: relative; display: flex; align-items: center; }

.lang-btn {
  display: flex; align-items: center; gap: 3px;
  background: var(--surface-strong);
  border: 1px solid var(--surface-border-strong);
  border-radius: 8px;
  color: var(--text-secondary);
  padding: 0 clamp(6px, 0.6vw, 10px);
  min-height: var(--control-min-height);
  cursor: pointer;
  font-size: clamp(0.72rem, 0.2vw + 0.68rem, 0.8rem); font-weight: 600;
  transition: background .2s, color .2s;
  white-space: nowrap;
  font-family: inherit;
}
.lang-btn:hover { background: var(--bg-hover); color: var(--color-primary); border-color: color-mix(in srgb, var(--theme-accent) 35%, var(--border)); }
.lang-btn svg {
  width: clamp(13px, 0.8vw, 16px); height: clamp(13px, 0.8vw, 16px);
  flex-shrink: 0;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.lang-btn .chevron { width: 12px; height: 12px; transition: transform .2s; }
.lang-switcher.open .lang-btn .chevron { transform: rotate(180deg); }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  width: 290px;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 99999;
  display: none;
  overflow: hidden;
}
.lang-switcher.open .lang-dropdown { display: block; }
.lang-switcher.mobile-open {
  position: fixed;
  top: 88px;
  left: 16px;
  right: 16px;
  z-index: 1200;
}
.lang-switcher.mobile-open .lang-dropdown {
  position: relative;
  top: 0;
  right: auto;
  width: 100%;
}

.lang-search-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.lang-search-wrap svg {
  width: 14px; height: 14px;
  color: var(--text-muted); flex-shrink: 0;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
#gtLangSearch {
  background: transparent; border: none; outline: none;
  color: var(--text-primary); font-size: 13px; width: 100%;
}
#gtLangSearch::placeholder { color: var(--text-muted); }

.lang-list { max-height: 320px; overflow-y: auto; padding: 6px 0; }
.lang-list::-webkit-scrollbar       { width: 4px; }
.lang-list::-webkit-scrollbar-track { background: transparent; }
.lang-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

.lang-group-label {
  padding: 8px 14px 4px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-muted);
}
.lang-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s;
  font-size: 13px;
  color: var(--text-primary);
}
.lang-item:hover  { background: rgba(255,255,255,.07); }
.lang-item.active { background: rgba(233,69,96,.15); color: var(--color-primary); }
.lang-item.no-translate {
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 4px;
  color: #ff6b6b;
}
.lang-item.no-translate:hover  { background: rgba(255,107,107,.1); }
.lang-item.no-translate.active { background: rgba(255,107,107,.15); color: #ff6b6b; }

.lang-flag       { font-size: 18px; line-height: 1; width: 24px; text-align: center; }
.lang-name       { flex: 1; }
.lang-code-badge {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255,255,255,.07);
  padding: 2px 5px; border-radius: 4px;
}
.lang-empty-state {
  padding: 16px;
  text-align: center;
  color: var(--text-muted, #888);
  font-size: 13px;
}

@media (max-width: 768px) {
  .lang-dropdown { width: 260px; }
  .lang-current  { display: none; }
}

/* ============ NAV USER AUTH ============ */
.nav-login-btn {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 700;
  white-space: nowrap;
}
.nav-login-icon { width: 16px; height: 16px; }
.nav-login-btn span { display: none; }
@media (min-width: 640px) { .nav-login-btn span { display: inline; } }

.nav-user-wrap { position: relative; }
.is-hidden { display: none !important; }

/* Header account button — modern circular glass style */
.nav-user-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 16px rgba(0,0,0,.34);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease;
}
.nav-user-btn:hover,
.nav-user-btn:focus-visible {
  border-color: rgba(255,255,255,.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 20px rgba(0,0,0,.42);
  transform: translateY(-1px);
}

/* Initials avatar (jab koi image nahi) */
.nav-user-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.12));
  color: white; font-size: 0.78rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

/* Profile image avatar */
.nav-user-avatar-img {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; display: block; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.44);
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.nav-user-avatar-fallback {
  align-items: center; justify-content: center;
}

/* Dropdown */
.nav-user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px; min-width: 200px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  padding: 0.4rem;
  display: none; flex-direction: column;
  z-index: 200;
  animation: dropIn 0.15s ease;
}
.nav-user-dropdown.open { display: flex; }
@keyframes dropIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* Dropdown info row — tight, no excess padding */
.nav-user-info {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.6rem 0.4rem;
}
.nav-user-info > div { display: flex; flex-direction: column; min-width: 0; }
.nav-user-dropdown-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 1.5px solid var(--border);
}
.nav-user-name { display: block; font-weight: 700; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-user-email { display: block; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-user-divider { height: 1px; background: var(--border); margin: 0.25rem 0; }
.nav-user-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.6rem; border-radius: 8px;
  font-size: 0.84rem; color: var(--text-secondary);
  text-decoration: none; transition: background 0.15s, color 0.15s;
}
.nav-user-item-icon { width: 14px; height: 14px; flex-shrink: 0; }
.nav-user-item:hover { background: var(--bg-card); color: var(--text-primary); }
.nav-user-logout:hover { color: var(--color-primary); }
.nav-user-logout-form { margin: 0; padding: 0; }
.nav-user-logout-btn {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 0;
}


/* ============================================================
   PROFILE PAGE  (profile.php)
   Prefix: .profile-*  .mem-card  .mem-expires-*  .mem-features
           .plans-grid  .plan-card  .plan-*  .history-*
           .pay-modal-*  .pay-step  .pay-method-*  .pay-info-*
           .form-field
   ============================================================ */

/* ── Wrapper ── */
.profile-wrap {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1.25rem 4rem;
}

/* ── Section headings ── */
.profile-wrap .section-title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin: 2rem 0 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.profile-wrap .section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2rem 0 1rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.profile-wrap .section-title-row .section-title {
  margin: 0;
}
.profile-section-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  padding: .35rem .75rem;
  border: 1px solid rgba(233,69,96,.25);
  border-radius: 8px;
  transition: background .15s, border-color .15s;
}
.profile-section-link:hover {
  background: rgba(233,69,96,.08);
  border-color: var(--color-primary);
}
.profile-section-link svg { width: 13px; height: 13px; }

/* ── Hero card ── */
.profile-hero {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.profile-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(233,69,96,.07) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Avatar ── */
.profile-avatar-wrap { position: relative; flex-shrink: 0; }
.profile-avatar {
  width: 88px; height: 88px;
  border-radius: 50%; object-fit: cover;
  border: 3px solid var(--color-primary);
  display: block;
}
.profile-avatar-placeholder {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary, #e94560), #7c3aed);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800; color: #fff;
  border: 3px solid var(--color-primary);
}
.profile-badge-pin {
  position: absolute; bottom: -4px; left: 50%;
  transform: translateX(-50%);
  font-size: .6rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: #fff; padding: .15rem .45rem;
  border-radius: 6px; white-space: nowrap;
}

/* ── Info block ── */
.profile-info { flex: 1; min-width: 180px; }
.profile-username { font-size: 1.4rem; font-weight: 800; margin: 0 0 .2rem; color: var(--text-primary); }
.profile-email { font-size: .85rem; color: var(--text-muted); margin: 0 0 .65rem; }
.profile-plan-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: #fff; padding: .38em .9em; border-radius: 20px;
}
.profile-plan-pill svg { width: 13px; height: 13px; }

/* ── Stats ── */
.profile-stats { display: flex; gap: 1.5rem; flex-shrink: 0; }
.profile-stat { text-align: center; }
.profile-stat-val {
  display: block; font-size: 1.5rem;
  font-weight: 800; line-height: 1;
  color: var(--text-primary);
}
.profile-stat-val.warn { color: #ef4444; }
.profile-stat-val.ok   { color: #22c55e; }
.profile-stat-lbl {
  font-size: .7rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
}

/* ── Membership card ── */
.mem-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  margin-bottom: .5rem;
}
.mem-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}
.mem-card-title {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin: 0;
}
.mem-card-manage-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity .15s;
}
.mem-card-manage-link:hover { opacity: .8; }
.mem-card-manage-link svg { width: 12px; height: 12px; }
.mem-card-plan-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .1rem;
}
.mem-card-plan-name { font-size: 1.1rem; font-weight: 800; color: var(--text-primary); }
.mem-card-plan-dur  { font-size: .85rem; color: var(--text-muted); }
.mem-card-expires   { font-size: .82rem; color: var(--text-muted); }
.mem-card-expires strong { color: var(--text-secondary); }
.mem-expires-bar-wrap { margin-top: .9rem; }
.mem-expires-label {
  display: flex; justify-content: space-between;
  font-size: .75rem; color: var(--text-muted);
  margin-bottom: .35rem;
}
.mem-expires-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px; overflow: hidden;
}
.mem-expires-fill {
  height: 100%; border-radius: 3px;
  transition: width .4s ease;
}
.mem-features {
  list-style: none; padding: 0;
  margin: .9rem 0 0;
  display: flex; flex-wrap: wrap;
  gap: .4rem .9rem;
}
.mem-features li {
  display: flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: var(--text-secondary);
}
.mem-features li svg { flex-shrink: 0; color: #22c55e; }

/* ── Upgrade banner (free users) ── */
.mem-upgrade-banner {
  background: linear-gradient(135deg, rgba(233,69,96,.12), rgba(124,58,237,.08));
  border: 1px solid rgba(233,69,96,.2);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.mem-upgrade-banner-text h3 {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 .2rem;
  color: var(--text-primary);
}
.mem-upgrade-banner-text p {
  font-size: .82rem;
  color: var(--text-muted);
  margin: 0;
}
.mem-upgrade-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--color-primary);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  padding: .6rem 1.2rem;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s;
}
.mem-upgrade-btn:hover { opacity: .88; }
.mem-upgrade-btn svg { width: 14px; height: 14px; }

/* ── Plan cards ── */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.plan-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 1.25rem;
  display: flex; flex-direction: column; gap: .5rem;
  position: relative;
  transition: border-color .2s, transform .2s;
}
.plan-card:hover {
  border-color: rgba(255,255,255,.18);
  transform: translateY(-3px);
}
.plan-card.is-current { border-color: var(--color-primary); }
.plan-card-badge {
  display: inline-block;
  font-size: .62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: #fff; padding: .2rem .55rem;
  border-radius: 6px; align-self: flex-start;
}
.plan-card-name { font-size: 1rem; font-weight: 800; margin: 0; color: var(--text-primary); }
.plan-card-price { font-size: 1.4rem; font-weight: 800; color: var(--text-primary); }
.plan-card-price span { font-size: .75rem; font-weight: 500; color: var(--text-muted); }
.plan-card-duration { font-size: .75rem; color: var(--text-muted); }
.plan-card-features {
  list-style: none; padding: 0;
  margin: .25rem 0 .5rem;
  display: flex; flex-direction: column; gap: .3rem; flex: 1;
}
.plan-card-features li {
  display: flex; align-items: flex-start; gap: .35rem;
  font-size: .78rem; color: var(--text-secondary);
}
.plan-card-features li svg { flex-shrink: 0; margin-top: 2px; color: #22c55e; }
.plan-btn {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; text-align: center; padding: .65rem;
  border-radius: 10px; font-size: .82rem; font-weight: 700;
  border: none; cursor: pointer; margin-top: auto;
  text-decoration: none; transition: opacity .2s;
  font-family: inherit;
}
.plan-btn:hover { opacity: .88; }
.plan-btn.disabled {
  background: var(--bg-hover) !important;
  color: var(--text-muted) !important;
  cursor: default;
}
.plan-btn.disabled:hover { opacity: 1; }
/* Checkout redirect variant */
.plan-btn-link {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; text-align: center; padding: .65rem;
  border-radius: 10px; font-size: .82rem; font-weight: 700;
  text-decoration: none; transition: opacity .2s;
  margin-top: auto;
}
.plan-btn-link:hover { opacity: .88; }

/* ── Watch history & bookmarks ── */
.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .85rem;
  margin-bottom: 1rem;
}
.history-card {
  display: block; text-decoration: none;
  border-radius: 10px; overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  position: relative; transition: transform .2s;
  color: inherit;
}
.history-card:hover { transform: translateY(-3px); }
.history-card img {
  width: 100%; aspect-ratio: 2/3;
  object-fit: cover; display: block;
}
.history-prog {
  position: absolute; bottom: 44px; left: 0;
  height: 3px;
  background: var(--color-primary);
  border-radius: 0 2px 2px 0;
}
.history-card-info { padding: .45rem .55rem .5rem; }
.history-card-title {
  font-size: .75rem; font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-card-ep { font-size: .68rem; color: var(--text-muted); margin: 0; }

/* ── Watch History collapsible section ── */
.wh-section {
  margin: 2rem 0 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
}

/* Toggle button (acts as the header) */
.wh-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1.25rem;
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.wh-toggle:hover { background: var(--bg-hover); }
.wh-section.wh-open .wh-toggle {
  border-bottom: 1px solid var(--border);
}

.wh-toggle-left {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  white-space: nowrap;
}
.wh-toggle-left svg { color: var(--color-primary); flex-shrink: 0; }

.wh-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(233,69,96,.12);
  color: var(--color-primary);
  font-size: .65rem;
  font-weight: 800;
  padding: .15rem .5rem;
  border-radius: 20px;
  min-width: 22px;
}

.wh-toggle-right {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}

.wh-search {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .35rem .7rem;
  color: var(--text-primary);
  font-size: .78rem;
  font-family: inherit;
  outline: none;
  width: 160px;
  transition: border-color .15s, width .2s;
  display: none; /* shown only when section is open */
}
.wh-section.wh-open .wh-search { display: block; }
.wh-search:focus { border-color: var(--color-primary); }
.wh-search::placeholder { color: var(--text-muted); }

.wh-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform .25s;
}
.wh-section.wh-open .wh-chevron { transform: rotate(180deg); }

/* Collapsible body */
.wh-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

/* Episode list */
.wh-list {
  list-style: none;
  padding: .4rem 0;
  margin: 0;
}

.wh-item { border-bottom: 1px solid var(--border); }
.wh-item:last-child { border-bottom: none; }

.wh-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem 1.25rem;
  text-decoration: none;
  color: var(--text-primary);
  transition: background .15s;
  position: relative;
}
.wh-link:hover { background: var(--bg-hover); }
.wh-link:hover .wh-play-icon { opacity: 1; transform: translateX(0); }

.wh-ep-num {
  font-size: .7rem;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(233,69,96,.1);
  padding: .15rem .5rem;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 46px;
  text-align: center;
}

.wh-ep-name {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wh-prog-wrap {
  width: 60px;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.wh-prog-bar {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: 2px;
}

.wh-prog-pct {
  font-size: .68rem;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 30px;
  text-align: right;
}

.wh-play-icon {
  color: var(--color-primary);
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s, transform .15s;
}

.wh-empty {
  text-align: center;
  padding: 1.25rem;
  font-size: .82rem;
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 600px) {
  .wh-search { width: 110px; }
  .wh-prog-wrap,
  .wh-prog-pct { display: none; }
}

/* ── Payment modal ── */
.pay-modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 1rem;
  backdrop-filter: blur(6px);
}
.pay-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px; padding: 1.5rem;
  width: 100%; max-width: 420px;
  position: relative;
  display: flex; flex-direction: column; gap: .9rem;
  max-height: 90vh; overflow-y: auto;
}
.pay-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}
.pay-modal-header h3 { margin: 0; font-size: 1.1rem; color: var(--text-primary); flex: 1; }
.pay-modal-close {
  background: none; border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 7px;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.pay-modal-close:hover { color: var(--text-primary); background: var(--bg-hover); }
.pay-modal-close svg { width: 16px; height: 16px; }
.pay-modal-meta { font-size: .85rem; color: var(--text-muted); margin: 0; }
.pay-modal-meta strong { color: var(--text-primary); }
.pay-modal-or-link {
  text-align: center;
  font-size: .78rem;
  color: var(--text-muted);
}
.pay-modal-or-link a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 700;
}
.pay-modal-or-link a:hover { text-decoration: underline; }

.pay-step { display: none; flex-direction: column; gap: .75rem; }
.pay-step.is-active { display: flex; }

.pay-method-list { display: flex; flex-direction: column; gap: .5rem; }
.pay-method-btn {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 12px; cursor: pointer;
  text-align: left; width: 100%;
  color: var(--text-primary); font-family: inherit;
  transition: border-color .2s, background .2s;
}
.pay-method-btn:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.15);
}
.pay-method-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pay-method-icon svg { width: 18px; height: 18px; }
.pay-method-label { font-weight: 700; font-size: .9rem; color: var(--text-primary); }
.pay-method-contact { font-size: .75rem; color: var(--text-muted); }

.pay-info-box {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 10px; padding: .85rem;
  font-size: .83rem; line-height: 1.6;
}
.pay-info-box strong {
  display: block; margin-bottom: .35rem;
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
}
.pay-info-box p { color: var(--text-secondary); margin: 0; }
.pay-contact {
  font-weight: 700; color: var(--color-primary);
  font-family: monospace;
}

/* ── Generic form fields (used in payment modal) ── */
.form-field { display: flex; flex-direction: column; gap: .35rem; }
.form-field label {
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted);
}
.form-field input,
.form-field textarea,
.form-field select {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 10px; padding: .65rem .85rem;
  color: var(--text-primary);
  font-size: .875rem; font-family: inherit;
  width: 100%; box-sizing: border-box;
  outline: none;
  transition: border-color .15s;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { border-color: var(--color-primary); }

/* ── Profile responsive ── */
@media (max-width: 768px) {
  .profile-wrap { padding: 0 1rem 3rem; }
  .plans-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (max-width: 600px) {
  .profile-hero { flex-direction: column; align-items: center; text-align: center; }
  .profile-stats { justify-content: center; }
  .mem-features { flex-direction: column; gap: .5rem; }
  .plans-grid { grid-template-columns: 1fr 1fr; }
  .history-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .mem-upgrade-banner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
  .plans-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   AUTH PAGES — Login (lgn-) & Register (rgs-)
   Uses site CSS variables — respects light/dark theme toggle
   ============================================================ */

/* ── Font override to cancel admin.css bleedthrough ── */
.lgn-page *, .lgn-card *,
.rgs-page *, .rgs-card * {
  font-family: 'Outfit', 'DM Sans', sans-serif !important;
  box-sizing: border-box;
}

/* ── Page wrapper — clears fixed navbar ── */
.lgn-page, .rgs-page {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  padding-top: var(--header-clearance);
  background: var(--bg-base);
  color: var(--text-primary);
}

/* ── Animated background layer ── */
.lgn-bg, .rgs-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 10% 30%, rgba(233,69,96,.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 90% 80%, rgba(15,52,96,.25) 0%, transparent 60%);
}
.lgn-bg-grid, .rgs-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
  opacity: .5;
}
.lgn-bg-orb, .rgs-bg-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none;
  animation: authOrbFloat 9s ease-in-out infinite alternate;
}
.lgn-bg-orb.orb1, .rgs-bg-orb.orb1 { width:420px; height:420px; background:rgba(233,69,96,.10); top:-120px; left:-100px; animation-delay:0s; }
.lgn-bg-orb.orb2, .rgs-bg-orb.orb2 { width:320px; height:320px; background:rgba(15,52,96,.20);  bottom:-80px; right:-80px; animation-delay:-4s; }
.lgn-bg-orb.orb3                    { width:220px; height:220px; background:rgba(233,69,96,.07); top:45%; right:25%; animation-delay:-7s; }
@keyframes authOrbFloat { from { transform: translate(0,0) scale(1); } to { transform: translate(24px,16px) scale(1.05); } }

/* ── Two-column layout ── */
.lgn-left, .rgs-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 3rem 3rem 4.5rem;
  position: relative;
  z-index: 2;
}
.lgn-right, .rgs-right {
  width: 480px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 2.5rem;
  position: relative;
  z-index: 2;
}

/* ── Logo ── */
.lgn-logo, .rgs-logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.4rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--text-primary);
  margin-bottom: 2.5rem;
}
.lgn-logo-dot, .rgs-logo-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 12px var(--color-primary);
  display: inline-block;
  flex-shrink: 0;
}

/* ── Left panel text ── */
.lgn-tagline, .rgs-tagline {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.03em;
  margin: 0 0 1rem;
  color: var(--text-primary);
}
.lgn-tagline em, .rgs-tagline em {
  font-style: italic;
  color: var(--color-primary);
}
.lgn-sub, .rgs-sub {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 380px;
  margin-bottom: 2rem;
}
.lgn-features {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.lgn-features li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .9rem;
  color: var(--text-secondary);
}
.lgn-features li::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
  flex-shrink: 0;
}

/* ── Register plan preview ── */
.rgs-plans {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: .5rem;
}
.rgs-plan {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: .65rem .9rem;
  transition: border-color .2s;
}
.rgs-plan:hover { border-color: rgba(233,69,96,.3); }
.rgs-plan-dot   { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.rgs-plan-name  { font-size:.87rem; font-weight:700; color: var(--text-primary); }
.rgs-plan-price { font-size:.75rem; color: var(--text-muted); margin-top:.1rem; }
.rgs-plan-badge {
  margin-left: auto;
  font-size: .63rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .2em .55em; border-radius: 99px; white-space: nowrap;
}

/* ── Auth card ── */
.lgn-card, .rgs-card {
  width: 100%; max-width: 430px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 2.25rem 2rem 2rem;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  animation: authCardIn .4s cubic-bezier(.16,1,.3,1);
}
@keyframes authCardIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }

/* Mobile logo — hidden on desktop */
.lgn-logo-mobile, .rgs-logo-mobile {
  display: none;
  align-items: center;
  gap: .45rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
}

/* ── Card heading ── */
.lgn-card-title, .rgs-card-title {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0 0 .3rem;
  color: var(--text-primary);
}
.lgn-card-sub, .rgs-card-sub {
  font-size: .85rem;
  color: var(--text-muted);
  margin: 0 0 1.4rem;
}
.lgn-card-sub a, .rgs-card-sub a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}
.lgn-card-sub a:hover, .rgs-card-sub a:hover { text-decoration: underline; }

/* ── Alerts ── */
.lgn-alert, .rgs-alert {
  display: flex; align-items: flex-start; gap: .6rem;
  background: rgba(233,69,96,.1);
  border: 1px solid rgba(233,69,96,.3);
  color: #ff6b8a;
  border-radius: 10px;
  padding: .7rem .9rem;
  font-size: .83rem;
  margin-bottom: 1rem;
  animation: authShake .35s ease;
}
@keyframes authShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.lgn-alert svg, .rgs-alert svg { flex-shrink:0; margin-top:1px; }

/* ── Form ── */
.lgn-form, .rgs-form {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

/* ── Fields ── */
.lgn-page .field, .rgs-page .field {
  display: flex;
  flex-direction: column;
  gap: .38rem;
}
.lgn-page .field label, .rgs-page .field label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}
.lgn-page .field-wrap, .rgs-page .field-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.lgn-page .field-wrap > svg:first-child,
.rgs-page .field-wrap > svg:first-child {
  position: absolute;
  left: .9rem;
  color: var(--text-muted);
  pointer-events: none;
  flex-shrink: 0;
}
.lgn-page .field input, .rgs-page .field input {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: .75rem .9rem .75rem 2.6rem;
  color: var(--text-primary);
  font-size: .875rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  font-family: inherit;
}
.lgn-page .field input:focus,
.rgs-page .field input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(233,69,96,.12);
}
.lgn-page .field input::placeholder,
.rgs-page .field input::placeholder { color: var(--text-muted); }
.lgn-page .field input.is-ok,  .rgs-page .field input.is-ok  { border-color: #22c55e; }
.lgn-page .field input.is-err, .rgs-page .field input.is-err { border-color: #ef4444; }

/* field hint */
.lgn-page .field-hint, .rgs-page .field-hint { font-size:.72rem; color:var(--text-muted); }
.lgn-page .field-hint.is-err, .rgs-page .field-hint.is-err { color:#ef4444; }

/* toggle show/hide password */
.lgn-page .field-toggle, .rgs-page .field-toggle {
  position: absolute; right: .8rem;
  background: none; border: none;
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; padding: .25rem;
}
.lgn-page .field-toggle:hover, .rgs-page .field-toggle:hover { color: var(--text-secondary); }

/* ── Password strength bar ── */
.lgn-page .pw-strength, .rgs-page .pw-strength {
  height: 3px; border-radius: 99px;
  background: var(--border); overflow: hidden; margin-top: .3rem;
}
.pw-strength-fill { height:100%; border-radius:99px; width:0; transition:width .3s, background .3s; }

/* ── Options row ── */
.lgn-options, .rgs-options {
  display: flex; align-items: center;
  justify-content: space-between;
  font-size: .83rem;
}
.lgn-check, .rgs-check {
  display: flex; align-items: center; gap: .45rem;
  cursor: pointer; color: var(--text-secondary);
}
.lgn-check input[type=checkbox], .rgs-check input[type=checkbox] {
  width:15px; height:15px;
  accent-color: var(--color-primary);
}
.lgn-forgot, .rgs-forgot {
  color: var(--text-muted); text-decoration: none; font-size: .83rem;
}
.lgn-forgot:hover, .rgs-forgot:hover { color: var(--color-primary); }

/* ── Terms ── */
.lgn-terms, .rgs-terms {
  font-size: .78rem; line-height: 1.55;
  color: var(--text-muted);
}
.lgn-terms a, .rgs-terms a { color: var(--color-primary); text-decoration: none; }
.lgn-terms a:hover, .rgs-terms a:hover { text-decoration: underline; }

/* ── Submit button ── */
.lgn-btn, .rgs-btn {
  width: 100%; padding: .85rem;
  background: var(--color-primary);
  color: #fff; border: none; border-radius: 13px;
  font-family: 'Outfit', sans-serif;
  font-size: .95rem; font-weight: 700;
  letter-spacing: .02em; cursor: pointer;
  box-shadow: 0 4px 18px rgba(233,69,96,.35);
  transition: opacity .2s, transform .15s, box-shadow .2s;
  margin-top: .2rem;
}
.lgn-btn:hover, .rgs-btn:hover { opacity:.88; transform:translateY(-1px); box-shadow:0 8px 26px rgba(233,69,96,.45); }
.lgn-btn:active, .rgs-btn:active { transform:translateY(0); }

/* ── Back link divider ── */
.lgn-divider, .rgs-divider { text-align: center; margin-top: 1rem; }
.lgn-divider a, .rgs-divider a {
  color: var(--text-muted); font-size: .8rem; text-decoration: none;
  transition: color .2s;
}
.lgn-divider a:hover, .rgs-divider a:hover { color: var(--text-secondary); }

/* Turnstile */
.lgn-page .cf-turnstile, .rgs-page .cf-turnstile { margin: .25rem 0; }



/* ============================================================
   AUTH RESPONSIVE — Mobile
   ============================================================ */
@media (max-width: 860px) {
  .lgn-left, .rgs-left { display: none; }
  .lgn-right, .rgs-right {
    width: 100%;
    padding: 2rem 1.25rem 3rem;
    align-items: flex-start;
  }
  .lgn-card, .rgs-card {
    max-width: 100%;
    border-radius: 18px;
    padding: 1.75rem 1.25rem 1.5rem;
  }
  .lgn-logo-mobile, .rgs-logo-mobile { display: flex; }
}
@media (max-width: 480px) {
  .lgn-right, .rgs-right { padding: 1.5rem 1rem 2rem; }
  .lgn-card-title, .rgs-card-title { font-size: 1.3rem; }
  .lgn-card, .rgs-card { padding: 1.5rem 1rem; }
}



/* ============================================================
   FORGOT / RESET PASSWORD  (fgp-)
   Reuses .lgn-page, .lgn-card, .lgn-bg, .lgn-btn, .lgn-alert,
   .lgn-form, .lgn-divider, .field, .pw-strength from AUTH block
   ============================================================ */
.fgp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: 1rem;
}
.fgp-icon--lock   { background: rgba(233,69,96,.12);  border: 1px solid rgba(233,69,96,.25); }
.fgp-icon--shield { background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.25); }
.fgp-icon--lock   svg { stroke: var(--color-primary); }
.fgp-icon--shield svg { stroke: #6366f1; }

.fgp-header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.fgp-header .lgn-card-title { margin-bottom: .25rem; }
.fgp-header .lgn-card-sub   { margin: 0; }

.fgp-success {
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.3);
  color: #4ade80;
}
.fgp-warn {
  background: rgba(251,191,36,.1);
  border-color: rgba(251,191,36,.3);
  color: #fbbf24;
}

/* Center layout for single-card pages (forgot/reset) */
.lgn-page--center {
  justify-content: center;
}
.lgn-page--center .lgn-right {
  max-width: 480px;
  width: 100%;
}

/* ============================================================
   LEGAL PAGES — Terms & Privacy  (legal-)
   ============================================================ */
.legal-page {
  min-height: 100vh;
  padding: 5rem 1.5rem 4rem;
  background: var(--bg-base);
}
.legal-wrap {
  max-width: 780px;
  margin: 0 auto;
}
.legal-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-muted);
  font-size: .85rem;
  text-decoration: none;
  margin-bottom: 2rem;
  transition: color .18s;
}
.legal-back:hover { color: var(--text-secondary); }
.legal-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 .75rem;
  line-height: 1.15;
}
.legal-date {
  color: var(--text-muted);
  font-size: .9rem;
  margin: 0;
}
.legal-body section        { margin-bottom: 2.25rem; }
.legal-body h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.legal-body p {
  color: var(--text-secondary);
  line-height: 1.8;
  font-size: .925rem;
  margin: 0 0 .75rem;
}
.legal-body ul {
  color: var(--text-secondary);
  line-height: 1.8;
  font-size: .925rem;
  padding-left: 1.5rem;
  margin: .5rem 0 .75rem;
}
.legal-body ul li         { margin-bottom: .35rem; }
.legal-body strong        { color: var(--text-primary); }
.legal-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.legal-footer a {
  font-size: .85rem;
  text-decoration: none;
  transition: opacity .18s;
}
.legal-footer a:hover       { opacity: .75; }
.legal-footer a.primary     { color: var(--color-primary); }
.legal-footer a.muted       { color: var(--text-muted); }

@media (max-width: 600px) {
  .legal-page  { padding: 4rem 1rem 3rem; }
  .legal-title { font-size: 1.6rem; }
}

/* ============================================================
   PAYMENT STATUS PAGE  (payment_status.php)
   Prefix: .ps-page  .ps-head  .ps-flash  .ps-req-*
           .ps-empty  .ps-reject-note  badge-*
   ============================================================ */

/* ── Wrapper ── */
.ps-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

/* ── Flash banners ── */
.ps-flash {
  padding: .85rem 1.2rem;
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .88rem;
  margin-bottom: 1.5rem;
}
.ps-flash.err { background: rgba(239,68,68,.09); border: 1px solid rgba(239,68,68,.28); color: #ef4444; }
.ps-flash.ok  { background: rgba(34,197,94,.09);  border: 1px solid rgba(34,197,94,.28);  color: #22c55e; }

/* ── Page heading ── */
.ps-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.75rem;
}
.ps-head h1 {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.025em;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-primary);
}
.ps-head p { color: var(--text-muted); font-size: .87rem; margin-top: .3rem; }
.ps-plan-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  padding: .45rem .9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.ps-plan-link:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* ── Request card ── */
.ps-req-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.ps-req-head {
  padding: .95rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  border-bottom: 1px solid var(--border);
}
.ps-req-plan  { font-weight: 700; font-size: .93rem; display: flex; align-items: center; gap: .5rem; color: var(--text-primary); }
.ps-req-price { font-size: .81rem; color: var(--text-muted); margin-top: .15rem; }

/* ── Status badge variants ── */
.ps-req-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .7rem;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ps-req-badge svg { flex-shrink: 0; }
.badge-pending  { background: rgba(245,158,11,.1);  color: #f59e0b; border: 1px solid rgba(245,158,11,.22); }
.badge-approved { background: rgba(34,197,94,.1);   color: #22c55e; border: 1px solid rgba(34,197,94,.22); }
.badge-rejected { background: rgba(239,68,68,.1);   color: #ef4444; border: 1px solid rgba(239,68,68,.22); }

/* ── Request body rows ── */
.ps-req-body { padding: .95rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.ps-req-row  { display: flex; align-items: flex-start; gap: .5rem; font-size: .82rem; }
.ps-req-row-label {
  font-weight: 700;
  color: var(--text-muted);
  min-width: 88px;
  flex-shrink: 0;
}
.ps-req-row-val { color: var(--text-secondary); word-break: break-all; }
.ps-req-row-val.mono { font-family: monospace; font-size: .8rem; }

/* ── Rejection note box ── */
.ps-reject-note {
  background: rgba(239,68,68,.06);
  border: 1px solid rgba(239,68,68,.16);
  border-radius: 8px;
  padding: .65rem .9rem;
  margin-top: .25rem;
  font-size: .81rem;
}
.ps-reject-note strong { color: #ef4444; display: block; margin-bottom: .2rem; }
.ps-reject-note p { color: var(--text-muted); }

/* ── Card footer action buttons ── */
.ps-req-foot {
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.ps-req-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 700;
  padding: .38rem .8rem;
  border-radius: 7px;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-muted);
  transition: color .15s, border-color .15s;
}
.ps-req-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.ps-req-btn.primary {
  background: var(--color-primary);
  color: #fff;
  border-color: transparent;
}
.ps-req-btn.primary:hover { opacity: .87; }

/* ── Empty state ── */
.ps-empty {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--text-muted);
}
.ps-empty h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-secondary); margin: 1rem 0 .5rem; }
.ps-empty p  { font-size: .87rem; }
.ps-empty a  { color: var(--color-primary); text-decoration: none; }
.ps-empty a:hover { text-decoration: underline; }
.ps-empty-cta {
  display: inline-flex;
  margin-top: 1rem;
}

/* ── Back link + new-request button ── */
.ps-back-link {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--text-muted); font-size: .82rem; text-decoration: none;
  transition: color .15s;
}
.ps-back-link:hover { color: var(--text-primary); }
.ps-new-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #7c3aed; color: #fff; text-decoration: none;
  border-radius: 8px; padding: .55rem 1rem;
  font-size: .83rem; font-weight: 700; transition: opacity .15s;
  white-space: nowrap;
}
.ps-new-btn:hover { opacity: .88; }

/* ── Plan badge pill inside card ── */
.ps-plan-badge {
  color: #fff; font-size: .68rem; font-weight: 700;
  padding: .18rem .55rem; border-radius: 20px;
}

/* ── Detail grid (amount, method, tx ref, date) ── */
.ps-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: .5rem .85rem;
  font-size: .82rem;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.ps-detail-label {
  color: var(--text-muted); font-size: .71rem;
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: .15rem;
}
.ps-detail-val { font-weight: 600; color: var(--text-primary); }
.ps-detail-val.mono { font-family: monospace; font-size: .8rem; word-break: break-all; }

/* ── Payment method logo in detail grid ── */
.ps-method-logo {
  width: 20px; height: 20px; object-fit: contain;
  border-radius: 4px; vertical-align: middle; margin-right: .3rem;
}

/* ── User notes ── */
.ps-notes {
  padding: .6rem 1.25rem;
  font-size: .8rem; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.ps-notes strong { color: var(--text-secondary); }

/* ── Retry link ── */
.ps-retry {
  padding: .7rem 1.25rem;
}
.ps-retry a {
  font-size: .82rem; color: #7c3aed; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: .3rem;
}
.ps-retry a:hover { text-decoration: underline; }

/* ── Approved card accent ── */
.ps-req-card.approved { border-color: rgba(34,197,94,.28); }

/* ── Payment status responsive ── */
@media (max-width: 580px) {
  .ps-page { padding: 1.25rem 1rem 3rem; }
  .ps-req-head { flex-direction: column; align-items: flex-start; }
  .ps-req-row  { flex-direction: column; gap: .2rem; }
  .ps-req-row-label { min-width: unset; }
  .ps-detail-grid { grid-template-columns: 1fr 1fr; }
  .ps-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   USER MEMBERSHIP PAGE  (user_membership.php)
   Prefix: .mem-page  .mem-head  .mem-flash  .mem-active-*
           .mem-free-*  .mem-plans-*  .mem-plan-*  .mem-feat-*
   ============================================================ */

.mem-page { max-width: 720px; margin: 2rem auto; padding: 0 1rem; }

.mem-head { margin-bottom: 1.5rem; }
.mem-head h1 { margin: 0 0 .2rem; font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.mem-head p  { color: var(--text-muted); font-size: .9rem; margin: 0; }

.mem-flash {
  border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem;
  font-size: .88rem; display: flex; align-items: center; gap: .5rem;
}
.mem-flash.ok  { background: rgba(34,197,94,.1);  border: 1px solid rgba(34,197,94,.3);  color: #22c55e; }
.mem-flash.err { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #ef4444; }

.mem-active-card {
  background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(79,70,229,.15));
  border: 1px solid rgba(124,58,237,.4);
  border-radius: 14px; padding: 1.25rem 1.5rem; margin-bottom: 1.75rem;
  position: relative; overflow: hidden;
}
.mem-active-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.mem-active-top svg { color: #a78bfa; flex-shrink: 0; }
.mem-active-label { font-weight: 800; font-size: 1.05rem; color: var(--text-primary); }
.mem-active-pill { color: #fff; font-size: .7rem; font-weight: 700; padding: .2rem .6rem; border-radius: 20px; }
.mem-active-name { font-size: 1rem; font-weight: 600; margin-bottom: .35rem; color: var(--text-primary); }
.mem-active-expires { font-size: .84rem; color: var(--text-secondary); }
.mem-active-expires strong { color: var(--text-primary); }
.mem-active-days { margin-left: .75rem; }
.mem-active-days.warn    { color: #f87171; }
.mem-active-days.caution { color: #fbbf24; }
.mem-active-days.ok      { color: #22c55e; }
.mem-active-link { display: inline-block; margin-top: .75rem; font-size: .82rem; color: #a78bfa; font-weight: 600; }

.mem-free-card {
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: .75rem;
}
.mem-free-card svg { color: var(--text-muted); flex-shrink: 0; }
.mem-free-title { font-weight: 600; font-size: .92rem; color: var(--text-primary); }
.mem-free-sub   { font-size: .82rem; color: var(--text-muted); }

.mem-section-title {
  font-size: 1rem; font-weight: 700; margin: 0 0 .85rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted);
}
.mem-plans-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.mem-plan-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.25rem;
  display: flex; flex-direction: column; position: relative; transition: transform .2s;
}
.mem-plan-card:hover { transform: translateY(-3px); }
.mem-plan-card.is-current { border-color: #7c3aed; }
.mem-plan-current-tag {
  position: absolute; top: -.55rem; right: 1rem;
  background: #7c3aed; color: #fff; font-size: .68rem; font-weight: 700;
  padding: .2rem .65rem; border-radius: 20px;
}
.mem-plan-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.mem-plan-dur   { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.mem-plan-badge { color: #fff; font-size: .7rem; font-weight: 700; padding: .2rem .6rem; border-radius: 20px; }
.mem-plan-name  { font-size: 1.15rem; font-weight: 800; margin-bottom: .15rem; color: var(--text-primary); }
.mem-plan-price { font-size: 1.55rem; font-weight: 900; color: #a78bfa; margin-bottom: .85rem; }
.mem-plan-price span { font-size: .7rem; font-weight: 500; color: var(--text-muted); }
.mem-plan-feats {
  margin: 0 0 .9rem; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: .3rem; flex: 1;
}
.mem-plan-feats li { font-size: .82rem; color: var(--text-secondary); display: flex; gap: .4rem; align-items: flex-start; }
.mem-plan-feats li svg { flex-shrink: 0; margin-top: .1rem; color: #22c55e; }
.mem-plan-cta-label {
  text-align: center; font-size: .82rem; color: #a78bfa; font-weight: 600;
  padding: .6rem; border: 1px solid rgba(124,58,237,.3); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; gap: .35rem;
}
.mem-plan-btn {
  display: block; text-align: center; background: #7c3aed; color: #fff;
  text-decoration: none; border-radius: 9px; padding: .7rem; font-size: .88rem;
  font-weight: 700; transition: opacity .15s;
}
.mem-plan-btn:hover { opacity: .85; }
.mem-foot-link { text-align: center; font-size: .8rem; color: var(--text-muted); }
.mem-foot-link a { color: #7c3aed; }

@media (max-width: 600px) { .mem-plans-grid { grid-template-columns: 1fr; } }


/* ============================================================
   CHECKOUT PAGE  (checkout.php)
   Prefix: .co-page  .co-head  .co-flash  .co-plan-*
           .co-pending  .co-form  .co-section-*  .co-method-*
           .co-field  .co-input  .co-textarea  .co-submit-btn
   ============================================================ */

.co-page { max-width: 640px; margin: 2rem auto; padding: 0 1rem; }

.co-flash {
  border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem;
  font-size: .88rem; display: flex; align-items: center; gap: .6rem;
}
.co-flash.err { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.35);  color: #ef4444; }
.co-flash.ok  { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.35); color: #22c55e; }
.co-flash svg { flex-shrink: 0; }

.co-head { margin-bottom: 1.5rem; }
.co-back-link {
  color: var(--text-muted); font-size: .82rem;
  display: inline-flex; align-items: center; gap: .3rem;
  text-decoration: none; transition: color .15s;
}
.co-back-link:hover { color: var(--text-primary); }
.co-head h1 { margin: .4rem 0 .2rem; font-size: 1.4rem; font-weight: 800; color: var(--text-primary); }
.co-head p  { color: var(--text-muted); font-size: .9rem; margin: 0; }

.co-plan-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.25rem; margin-bottom: 1.25rem;
}
.co-plan-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.co-plan-top-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.co-plan-badge { color: #fff; font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 20px; }
.co-plan-name  { font-size: 1.2rem; font-weight: 800; margin-bottom: .25rem; color: var(--text-primary); }
.co-plan-meta  { display: flex; gap: 1.5rem; font-size: .85rem; color: var(--text-muted); align-items: center; }
.co-plan-meta svg { flex-shrink: 0; }
.co-plan-meta strong { color: var(--text-primary); }
.co-plan-feats {
  margin: .75rem 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: .3rem;
}
.co-plan-feats li { font-size: .82rem; color: var(--text-secondary); display: flex; gap: .4rem; align-items: center; }
.co-plan-feats li svg { flex-shrink: 0; color: #22c55e; }

.co-pending {
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3);
  border-radius: 10px; padding: 1rem; margin-bottom: 1.25rem;
  color: #f59e0b; font-size: .88rem;
}
.co-pending strong { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.co-pending a { color: inherit; font-weight: 700; }

.co-form { display: flex; flex-direction: column; gap: 1rem; }
.co-section-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; }
.co-section-title {
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: .85rem; color: var(--text-muted);
}
.co-method-list { display: flex; flex-direction: column; gap: .6rem; }
.co-method-option {
  display: flex; align-items: flex-start; gap: .75rem; cursor: pointer;
  padding: .75rem; border-radius: 8px; border: 1px solid var(--border); transition: border-color .15s;
}
.co-method-option.selected { border-color: #7c3aed; }
.co-method-option input[type="radio"] { margin-top: .2rem; accent-color: #7c3aed; flex-shrink: 0; }
.co-method-inner { display: flex; align-items: flex-start; gap: .65rem; flex: 1; }
.co-method-logo {
  width: 36px; height: 36px; object-fit: contain; border-radius: 7px;
  background: rgba(255,255,255,.06); padding: 3px; flex-shrink: 0;
}
.co-method-logo-placeholder { width: 36px; height: 36px; flex-shrink: 0; }
.co-method-name { font-weight: 700; font-size: .92rem; color: var(--text-primary); }
.co-method-contact     { font-size: .8rem; color: var(--text-muted); margin-top: .15rem; font-family: monospace; }
.co-method-instructions{ font-size: .8rem; color: var(--text-secondary); margin-top: .3rem; line-height: 1.5; }

.co-field { margin-bottom: .75rem; }
.co-field:last-child { margin-bottom: 0; }
.co-label { display: block; font-size: .82rem; margin-bottom: .35rem; color: var(--text-secondary); }
.co-label .req { color: #ef4444; }
.co-input,
.co-textarea {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: 7px; padding: .6rem .85rem;
  color: var(--text-primary); font-size: .88rem; font-family: inherit;
  outline: none; resize: vertical; transition: border-color .15s;
}
.co-input { font-family: monospace; }
.co-input:focus, .co-textarea:focus { border-color: #7c3aed; }

.co-submit-btn {
  background: #7c3aed; color: #fff; border: none; border-radius: 9px;
  padding: .85rem 1.5rem; font-size: .95rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; font-family: inherit; transition: opacity .15s;
}
.co-submit-btn:hover { opacity: .88; }

.co-footer-note { text-align: center; font-size: .78rem; color: var(--text-muted); margin-top: 1.25rem; }
.co-footer-note a { color: #7c3aed; }

@media (max-width: 640px) { .co-page { padding: 1rem .75rem 3rem; } }

/* ── Checkout: field hint ── */
.co-field-hint { font-size: .75rem; color: var(--text-muted); margin-top: .3rem; }

/* ── Checkout: submit button disabled/loading state ── */
.co-submit-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Post-submit contact panel ── */
.co-contact-panel {
  display: none;                          /* shown via JS after form submit */
  flex-direction: column;
  gap: .85rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem 1.3rem;
  margin-top: .25rem;
  animation: co-fadein .35s ease;
}
.co-contact-panel.visible { display: flex; }

@keyframes co-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.co-contact-title {
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); margin-bottom: .2rem;
}
.co-contact-intro {
  font-size: .875rem; color: var(--text-secondary); line-height: 1.55;
}

.co-contact-btns { display: flex; flex-direction: column; gap: .6rem; }

.co-contact-btn {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem; border-radius: 10px;
  border: 1px solid var(--border); text-decoration: none;
  color: var(--text-primary); font-size: .88rem; font-weight: 600;
  transition: border-color .15s, background .15s;
  cursor: pointer; background: transparent; font-family: inherit; width: 100%;
}
.co-contact-btn:hover { background: var(--bg-hover); }

.co-contact-btn-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.co-contact-btn-icon.tg { background: rgba(37,211,102,.15); color: #25D366; }
.co-contact-btn-icon.wa { background: rgba(37,211,102,.15); color: #25D366; }
.co-contact-btn-icon.tg { background: rgba(0,136,204,.15); color: #0088cc; }

.co-contact-btn-label { display: flex; flex-direction: column; line-height: 1.35; }
.co-contact-btn-label span { font-size: .75rem; font-weight: 400; color: var(--text-muted); }

.co-contact-skip {
  text-align: center; font-size: .8rem; color: var(--text-muted);
}
.co-contact-skip a { color: #7c3aed; font-weight: 600; }
.co-contact-skip a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .co-contact-btn { padding: .75rem .85rem; font-size: .85rem; }
}

/* ============================================================
   IMGBB LOGO DROP ZONE  (payment method modal)
   Prefix: .nx-img-drop-*
   ============================================================ */

.nx-img-drop {
  border: 1.5px dashed var(--border, rgba(255,255,255,.12));
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  padding: 1.25rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
}
.nx-img-drop:hover,
.nx-img-drop-over {
  border-color: #7c3aed;
  background: rgba(124,58,237,.06);
}
.nx-img-drop-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  color: var(--text-muted, #9090b0);
  font-size: .85rem;
  pointer-events: none;
}
.nx-img-drop-idle svg { opacity: .55; }
.nx-img-drop-browse {
  color: #a78bfa;
  cursor: pointer;
  pointer-events: all;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nx-img-drop-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}


.nx-img-drop-uploading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-size: .85rem;
  color: var(--text-muted, #9090b0);
  padding: .5rem 0;
}

.nx-img-drop-preview {
  display: flex;
  align-items: center;
  gap: .85rem;
  justify-content: center;
}
.nx-img-drop-thumb {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,.1));
  background: rgba(255,255,255,.06);
  padding: 4px;
  flex-shrink: 0;
}
.nx-img-drop-preview-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  text-align: left;
}

/* Spin animation (reuse if already defined, safe to redeclare) */
.nx-spin { animation: nx-spin-anim .7s linear infinite; }
@keyframes nx-spin-anim { to { transform: rotate(360deg); } }

/* ============================================================
   VIP / MEMBERSHIP SYSTEM STYLES
   Covers: paywall overlay, VIP badge, server lock button,
           mini-prompt, episode pill VIP dots
   ============================================================ */

/* ── VIP Badge (in episode title) ─────────────────────────── */
.vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px 2px 5px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 6px;
  line-height: 1;
}

/* ── Full Episode Paywall Overlay ──────────────────────────── */
.vip-paywall {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0a0a1a 0%, #12102a 60%, #1a0f2e 100%);
  border-radius: inherit;
  z-index: 10;
  /* padding scales with container width via cqi (container query inline) */
  padding: clamp(0.5rem, 3cqw, 2rem) clamp(0.75rem, 4cqw, 1.5rem);
  container-type: inline-size; /* enable cqi units for children */
  overflow: hidden;
}

.vip-paywall-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: min(400px, 90cqw);
  /* gap shrinks gracefully on small containers */
  gap: clamp(0.3rem, 2cqh, 0.85rem);
}

/* Crown icon wrapper — scales with container width */
.vip-crown {
  width: clamp(36px, 12cqw, 80px);
  height: clamp(36px, 12cqw, 80px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,0.18) 0%, rgba(245,158,11,0.05) 70%);
  border: 1.5px solid rgba(245,158,11,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #f59e0b;
  box-shadow: 0 0 32px rgba(245,158,11,0.15);
}
/* Crown SVG scales too */
.vip-crown svg {
  width: clamp(18px, 6cqw, 48px) !important;
  height: clamp(18px, 6cqw, 48px) !important;
}

.vip-paywall-title {
  font-size: clamp(0.7rem, 3.5cqw, 1.3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.2;
}

.vip-paywall-desc {
  font-size: clamp(0.6rem, 2.5cqw, 0.9rem);
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin: 0;
  /* hide on very small containers (height < ~120px) */
}

.vip-paywall-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.25rem, 1.5cqw, 0.6rem);
  width: 100%;
}

/* Primary CTA — Get Membership */
.vip-upgrade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: clamp(0.65rem, 2.8cqw, 0.95rem);
  font-weight: 700;
  padding: clamp(0.35rem, 1.5cqw, 0.7rem) clamp(0.75rem, 4cqw, 1.8rem);
  border-radius: clamp(6px, 1.5cqw, 10px);
  text-decoration: none;
  width: 100%;
  max-width: min(260px, 70cqw);
  transition: opacity 0.18s, transform 0.18s;
  box-shadow: 0 4px 18px rgba(245,158,11,0.35);
  white-space: nowrap;
}
.vip-upgrade-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.vip-upgrade-btn svg { flex-shrink: 0; }

/* Secondary — Sign in link */
.vip-login-btn {
  font-size: clamp(0.58rem, 2cqw, 0.82rem);
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.15s;
  padding: 0.2rem 0;
  white-space: nowrap;
}
.vip-login-btn:hover { color: #f59e0b; }

/* Hide description text on very small player heights (portrait mobile) */
@container (max-width: 320px) {
  .vip-paywall-desc { display: none; }
  .vip-crown { display: none; }
}
@container (max-height: 140px) {
  .vip-paywall-desc { display: none; }
}

/* ── VIP Server Lock Button ────────────────────────────────── */
.server-btn-locked {
  opacity: 0.7;
  cursor: not-allowed !important;
  position: relative;
}
.server-btn-locked:hover {
  opacity: 0.85;
}

/* Gold star icon color inside VIP server buttons */
.server-btn-vip svg[fill="currentColor"] {
  color: #f59e0b;
}

/* ── VIP Mini Prompt (below server switcher) ───────────────── */
.vip-mini-prompt {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  font-size: 0.82rem;
  color: var(--text-primary);  /* respects light/dark theme */
  margin-top: 0.5rem;
  position: relative;
  overflow: visible;           /* never clip text */
}
[data-theme="light"] .vip-mini-prompt {
  background: rgba(245,158,11,0.10);
  border-color: rgba(180,110,0,0.35);
}
[data-theme="light"] .vip-mini-prompt .vip-mini-close {
  color: rgba(0,0,0,0.35);
}
[data-theme="light"] .vip-mini-prompt .vip-mini-close:hover {
  color: #000;
}
.vip-mini-prompt svg {
  color: #f59e0b;
  flex-shrink: 0;
}
.vip-mini-prompt strong {
  color: #fbbf24;
  font-weight: 700;
}
.vip-mini-prompt a {
  color: #fbbf24;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 1;
}
.vip-mini-prompt a:hover { text-decoration: underline; }

/* Close button */
.vip-mini-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  font-size: 0.8rem;
  padding: 0 0 0 0.3rem;
  cursor: pointer;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
  transition: color 0.15s;
}
.vip-mini-close:hover { color: #fff; }

/* Mobile: allow wrap with proper gap */
@media (max-width: 540px) {
  .vip-mini-prompt {
    white-space: normal;
    flex-wrap: wrap;
    font-size: 0.79rem;
  }
}

/* ── Episode Pill VIP dot (sidebar + mobile scroll) ─────────── */
.pill-vip-dot {
  font-size: 0.6rem;
  color: #f59e0b;
  line-height: 1;
  vertical-align: middle;
}

/* VIP episode pills — gold border */
.sidebar-ep-vip,
.ep-pill-vip {
  border-color: rgba(245,158,11,0.45) !important;
  color: #f59e0b !important;
}
.sidebar-ep-vip:hover,
.ep-pill-vip:hover {
  background: rgba(245,158,11,0.12) !important;
}


/* ============================================================
   Watch Page — Download Section
   HMAC-protected download links with VIP support
   ============================================================ */

/* Container */
.download-section {
  margin-top: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

/* Header bar */
.download-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.03);
}
[data-theme="light"] .download-header {
  background: rgba(0,0,0,.02);
}

/* "All links unlocked" tag for members */
.download-member-tag {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: .68rem;
  color: #f59e0b;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* Links container */
.download-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .85rem 1rem;
}

/* Individual download button */
.download-link-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  background: rgba(108,92,231,.15);
  border: 1px solid rgba(108,92,231,.3);
  border-radius: 6px;
  color: #a89af5;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s, border-color .18s, color .18s;
}
.download-link-btn:hover {
  background: rgba(108,92,231,.3);
  border-color: #6c5ce7;
  color: #fff;
}
[data-theme="light"] .download-link-btn {
  background: rgba(108,92,231,.08);
  border-color: rgba(108,92,231,.2);
  color: #5b4fd4;
}
[data-theme="light"] .download-link-btn:hover {
  background: rgba(108,92,231,.18);
  border-color: #6c5ce7;
  color: #4338ca;
}

/* VIP download button */
.download-link-btn.dl-vip {
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.3);
  color: #f59e0b;
}
.download-link-btn.dl-vip:hover {
  background: rgba(245,158,11,.25);
  border-color: #f59e0b;
  color: #fff;
}

/* Inline elements inside each button */
.dl-vip-star { flex-shrink: 0; }
.dl-name { /* inherits from parent */ }
.dl-size {
  font-size: .7rem;
  color: var(--text-muted);
  font-weight: 400;
}
.dl-arrow { flex-shrink: 0; opacity: .7; }

/* VIP wall — shown when all links are VIP and user is not a member */
.download-vip-wall {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  flex-wrap: wrap;
}
.download-vip-wall svg { color: #f59e0b; flex-shrink: 0; }
.download-vip-wall strong {
  display: block;
  font-size: .87rem;
  color: var(--text-primary);
  margin-bottom: .25rem;
}
.download-vip-wall p {
  font-size: .78rem;
  color: var(--text-muted);
  margin: 0;
}
.download-upgrade-btn {
  margin-left: auto;
  padding: .45rem 1rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .18s, transform .18s;
}
.download-upgrade-btn:hover { opacity: .88; transform: translateY(-1px); }

@media (max-width: 480px) {
  .download-vip-wall { flex-direction: column; align-items: flex-start; }
  .download-upgrade-btn { margin-left: 0; width: 100%; text-align: center; }
}

/* ============================================================
   PROFILE PAGE ADDITIONS — Avatar edit, flash, modal (.ep-*)
   ============================================================ */

/* Flash messages */
.px-flash { padding: .65rem 1.1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .875rem; font-weight: 500; }
.px-flash-ok   { background: rgba(34,197,94,.12); color: #22c55e; border: 1px solid rgba(34,197,94,.25); }
.px-flash-warn { background: rgba(245,158,11,.12); color: #f59e0b; border: 1px solid rgba(245,158,11,.25); }

/* Avatar button — members ke liye */
.profile-avatar-btn {
  position: relative; background: none; border: none;
  padding: 0; cursor: pointer; border-radius: 50%; display: block;
}
.profile-avatar-btn:hover .profile-avatar-edit-overlay,
.profile-avatar-btn:focus .profile-avatar-edit-overlay { opacity: 1; }
.profile-avatar-edit-overlay {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .18s; color: #fff; pointer-events: none;
}

/* Edit Profile button */
.profile-edit-btn {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem;
  padding: .35rem .8rem; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg-hover); color: var(--text-primary);
  font-size: .78rem; font-weight: 500; cursor: pointer;
  transition: background .15s, border-color .15s; font-family: inherit;
}
.profile-edit-btn:hover { background: var(--bg-surface); border-color: var(--color-primary); color: var(--color-primary); }

/* Edit Profile Modal overlay */
.ep-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65); z-index: 1000;
  backdrop-filter: blur(4px);
}
.ep-overlay.is-open { display: block; }

/* Modal box */
.ep-modal {
  display: none; position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1001; width: min(520px,95vw); max-height: 90vh; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.ep-modal.is-open { display: block; }
.ep-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.ep-modal-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.ep-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  padding: .2rem .4rem; border-radius: 6px; transition: color .15s; font-family: inherit;
}
.ep-close:hover { color: var(--text-primary); }

/* Avatar section inside modal */
.ep-avatar-section { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.ep-avatar-preview-wrap { flex-shrink: 0; }
.ep-avatar-preview { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.ep-avatar-preview-placeholder {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), #7c3aed);
  color: #fff; font-size: 1.6rem; font-weight: 700; border: 2px solid var(--border);
}
.ep-avatar-controls { flex: 1; min-width: 0; }
.ep-avatar-label { font-size: .75rem; color: var(--text-muted); margin-bottom: .4rem; }
.ep-upload-btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .85rem;
  background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-primary); font-size: .8rem; font-weight: 500;
  cursor: pointer; transition: background .15s, border-color .15s; margin-bottom: .35rem; font-family: inherit;
}
.ep-upload-btn:hover { background: var(--bg-surface); border-color: rgba(255,255,255,.25); }
.ep-hint { font-size: .72rem; color: var(--text-muted); margin: .2rem 0 .4rem; }
.ep-divider-or {
  display: flex; align-items: center; gap: .5rem;
  margin: .5rem 0; color: var(--text-muted); font-size: .75rem;
}
.ep-divider-or::before, .ep-divider-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.ep-upload-status { font-size: .78rem; margin: .2rem 0 0; min-height: 1.1em; }
.ep-upload-status.ok       { color: #22c55e; }
.ep-upload-status.err      { color: #f87171; }
.ep-upload-status.uploading{ color: var(--text-muted); }

/* Form fields */
.ep-field { margin-bottom: 1rem; }
.ep-label { display: block; font-size: .78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .35rem; }
.ep-input, .ep-textarea {
  width: 100%; box-sizing: border-box; padding: .55rem .8rem;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-primary); font-size: .875rem;
  font-family: inherit; transition: border-color .15s;
}
.ep-input::placeholder, .ep-textarea::placeholder { color: var(--text-muted); }
.ep-input:focus, .ep-textarea:focus { outline: none; border-color: var(--color-primary); }
.ep-textarea { resize: vertical; min-height: 80px; }
.ep-actions {
  display: flex; gap: .6rem; justify-content: flex-end;
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
.ep-btn-cancel {
  padding: .45rem 1rem; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text-secondary); font-size: .85rem;
  cursor: pointer; transition: background .15s; font-family: inherit;
}
.ep-btn-cancel:hover { background: var(--bg-hover); }
.ep-btn-save {
  display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1.1rem;
  border-radius: 8px; border: none; background: var(--color-primary); color: #fff;
  font-size: .85rem; font-weight: 600; cursor: pointer; transition: opacity .15s; font-family: inherit;
}
.ep-btn-save:hover { opacity: .88; }

@media (max-width: 480px) {
  .ep-modal { padding: 1.1rem; }
  .ep-avatar-section { flex-direction: column; align-items: center; text-align: center; }
  .ep-avatar-controls { width: 100%; }
}

/* ============ STATUS SLIDER SECTIONS ============ */
.status-slider-section { padding: 2.5rem 0 0; }

.status-slider-wrap { position: relative; }

.status-slider {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.25rem 0 0.75rem;
}
.status-slider::-webkit-scrollbar { display: none; }

/* Card — portrait poster, same width as anime-grid */
.status-card {
  flex: 0 0 clamp(110px, 38vw, 155px);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  display: block;
}
.status-slider-section .status-card {
  background: transparent;
}
@media (max-width: 480px) {
  .status-card { flex: 0 0 clamp(100px, 40vw, 130px); }
}

/* Image wrapper — 2:3 portrait ratio */
.status-card-img {
  position: relative;
  aspect-ratio: 2/3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
}
.status-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.status-card:hover .status-card-img img { transform: scale(1.04); }

.status-card-no-img {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}

/* ── Top-left: vertical status ribbon ── */
.sc-ribbon-wrap {
  position: absolute;
  top: 6px;
  left: 6px;
  width: clamp(18px, 11%, 24px);
  height: clamp(96px, 62%, 152px);
  overflow: hidden;
  border-radius: 0;
  z-index: 11;
  pointer-events: none;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%);
}
.sc-ribbon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 7px 0;
  text-align: center;
  transform: none;
  font-size: var(--badge-status-font);
  font-weight: 700;
  color: var(--badge-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  font-family: inherit;
  box-shadow: none;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: upright;
  justify-content: flex-start;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%);
}
.sc-ribbon.ongoing   { background: linear-gradient(180deg, var(--badge-color-ongoing), color-mix(in srgb, var(--badge-color-ongoing) 68%, #000)); }
.sc-ribbon.upcoming  { background: linear-gradient(180deg, var(--badge-color-upcoming), color-mix(in srgb, var(--badge-color-upcoming) 68%, #000)); }
.sc-ribbon.completed { background: linear-gradient(180deg, var(--badge-color-completed), color-mix(in srgb, var(--badge-color-completed) 68%, #000)); }

/* ── Top-right: type badge (ONA / MOVIE / DONGHUA) ── */
.sc-type {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px;
  z-index: 10;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #e94560, #9f1239);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  clip-path: none;
}
.sc-type.tv      { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.sc-type.movie   { background: linear-gradient(135deg, var(--badge-color-movie), color-mix(in srgb, var(--badge-color-movie) 68%, #000)); }
.sc-type.ona     { background: linear-gradient(135deg, var(--badge-color-ona), color-mix(in srgb, var(--badge-color-ona) 68%, #000)); }
.sc-type.ova     { background: linear-gradient(135deg, var(--badge-color-ova), color-mix(in srgb, var(--badge-color-ova) 68%, #000)); }
.sc-type.special { background: linear-gradient(135deg, #0d9488, #0f766e); }
.sc-type.music   { background: linear-gradient(135deg, #ec4899, #be185d); }
.sc-type.donghua { background: linear-gradient(135deg, #f97316, #c2410c); }

/* ── Bottom-left: Rating ── */
.sc-rating {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(0,0,0,0.65);
  color: var(--badge-color-rating);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 20px;
  z-index: 10;
  backdrop-filter: blur(4px);
  clip-path: none;
}

/* ── Bottom-right: SUB badge ── */
.sc-sub {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: var(--badge-color-sub);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px;
  z-index: 10;
  letter-spacing: 0.3px;
  clip-path: none;
}

/* ── Play overlay on hover ── */
.sc-play {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s;
}
.status-card:hover .sc-play { opacity: 1; }
.sc-play-btn {
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #111;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.sc-play-btn svg { width: 20px; height: 20px; margin-left: 3px; }

/* ── Title below image ── */
.sc-info { padding: 0.45rem 0.1rem 0; }
.sc-title {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
  color: var(--text-primary);
}

/* ============ RECOMMENDATION SECTION ============ */
.rec-section { padding: 2.5rem 0 0; }

/* Genre tabs */
.rec-tabs {
  display: flex;
  gap: 0;
  background: var(--bg-card);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.rec-tabs::-webkit-scrollbar { display: none; }

.rec-tab {
  flex: 1;
  padding: 0.55rem 1rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: inherit;
}
.rec-tab.active {
  background: #2563eb;
  color: #fff;
}

/* Homepage Recommendation — premium mechanical tab styling (tabs only) */
.rec-section-home .rec-tabs-home {
  position: relative;
  gap: 0.42rem;
  padding: 0.42rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--recommend-accent, #2563eb) 34%, rgba(255,255,255,0.1));
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)),
    linear-gradient(120deg, rgba(0,0,0,0.2), rgba(255,255,255,0.01));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    inset 0 -1px 0 rgba(0,0,0,0.24),
    0 10px 24px rgba(0,0,0,0.3);
}

.rec-section-home .rec-tabs-home::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--recommend-accent, #2563eb) 26%, transparent);
  opacity: 0.5;
  pointer-events: none;
}

.rec-section-home .rec-tabs-home .rec-tab {
  position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  color: color-mix(in srgb, var(--text-primary) 72%, var(--text-secondary));
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
  transition: border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, background 0.22s ease;
}

.rec-section-home .rec-tabs-home .rec-tab::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.52), transparent);
  opacity: 0.45;
}

.rec-section-home .rec-tabs-home .rec-tab:hover {
  border-color: color-mix(in srgb, var(--recommend-accent, #2563eb) 52%, rgba(255,255,255,0.18));
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 6px 14px rgba(0,0,0,0.24);
}

.rec-section-home .rec-tabs-home .rec-tab.active {
  border-color: color-mix(in srgb, var(--recommend-accent, #2563eb) 75%, rgba(255,255,255,0.2));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--recommend-accent, #2563eb) 46%, rgba(255,255,255,0.24)),
      color-mix(in srgb, var(--recommend-accent, #2563eb) 62%, rgba(0,0,0,0.08))
    );
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 0 0 1px color-mix(in srgb, var(--recommend-accent, #2563eb) 55%, transparent),
    0 10px 20px color-mix(in srgb, var(--recommend-accent, #2563eb) 30%, transparent);
}

[data-theme="light"] .rec-section-home .rec-tabs-home {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85), rgba(240,244,255,0.7)),
    linear-gradient(120deg, rgba(15,23,42,0.06), rgba(255,255,255,0.7));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(148,163,184,0.25),
    0 10px 20px rgba(15,23,42,0.07);
}

/* Grid — Mobile default 3 columns */
.rec-grid {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.rec-grid.active {
  display: grid;
}

/* Tablet — 4 columns */
@media (min-width: 768px) {
  .rec-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
  }
}

/* Desktop — 6 columns */
@media (min-width: 1024px) {
  .rec-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 0.9rem;
  }
}

/* ============ HOME (Desktop): Unified card sizing across sections ============ */
@media (min-width: 1024px) {
  :root {
    --home-card-unified-w: 170px;
    --home-card-unified-h: 255px; /* 2:3 poster ratio */
  }

  /* New Release / Most Popular / Recently Updated (home grids) */
  .home-anime-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--home-card-unified-w), 1fr));
  }

  /* Recommendation */
  .rec-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--home-card-unified-w), 1fr));
  }

  /* Ongoing / Upcoming / Completed sliders */
  .status-slider .status-card {
    flex: 0 0 var(--home-card-unified-w);
  }

  /* Weekly Schedule timeline cards */
  .wsch-grp-dot-col,
  .wsch-card,
  .wsch-card-img {
    width: var(--home-card-unified-w);
  }
  .wsch-card-img {
    height: var(--home-card-unified-h);
  }
}


/* Card — portrait style identical to status-card */
.rec-card {
  text-decoration: none;
  color: inherit;
  position: relative;
  border-radius: 10px;
  overflow: visible;
  display: block;
}

.rec-card-img {
  position: relative;
  aspect-ratio: 2/3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
}

/* Show title below image */
.rec-card .sc-info {
  display: block;
  padding: 0.35rem 0.1rem 0;
}

.rec-card .sc-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-primary);
}

.rec-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.rec-card-no-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}


/* Bottom bar */
.rec-card-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 7px 7px;
  background: linear-gradient(transparent, rgba(0,0,0,0.75) 55%);
  z-index: 4;
}

.rec-card-title {
  display: none;
}

.rec-card-status {
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  text-transform: capitalize;
}


/* SUB badge */
.rec-sub {
  background: var(--badge-color-sub);
  color: #000;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}


/* Small mobile adjustments */
@media (max-width: 480px) {
  .rec-grid {
    gap: 0.5rem;
  }

  .rec-tab {
    font-size: 0.8rem;
    padding: 0.45rem 0.7rem;
  }

  .rec-card-status {
    font-size: 10px;
  }
}

/* ============================================
   Checkout Page Styles
   ============================================ */
.co-page{max-width:660px;margin:0 auto;padding:1.5rem 1rem 4rem}
.co-back{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--nx-ink-3);text-decoration:none;margin-bottom:1.1rem;transition:color .15s}
.co-back:hover{color:var(--nx-ink)}
.co-head{margin-bottom:1.5rem}
.co-head h1{font-size:1.5rem;font-weight:800;margin:.2rem 0 .1rem}
.co-head p{color:var(--nx-ink-3);font-size:.88rem;margin:0}
.co-flash{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;border-radius:10px;font-size:.875rem;margin-bottom:1rem;border:1px solid}
.co-flash.err{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.3);color:#dc2626}
.co-flash.ok{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.3);color:#16a34a}

/* Plan card */
.co-plan-card{background:var(--nx-panel-bg);border:1px solid var(--nx-rule-hard);border-radius:14px;padding:1.2rem 1.4rem;margin-bottom:1.5rem}
.co-plan-top{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.co-plan-eyebrow{font-size:.7rem;color:var(--nx-ink-3);text-transform:uppercase;letter-spacing:.07em}
.co-plan-badge{font-size:.7rem;font-weight:700;padding:.1rem .5rem;border-radius:999px;color:#fff}
.co-plan-name{font-size:1.15rem;font-weight:800;margin-bottom:.35rem;color:var(--nx-ink)}
.co-plan-meta{display:flex;gap:1rem;font-size:.82rem;color:var(--nx-ink-3);align-items:center;flex-wrap:wrap}
.co-plan-price{font-weight:800;font-size:1rem;color:var(--nx-accent)}
.co-plan-feats{list-style:none;padding:0;margin:.65rem 0 0;display:flex;flex-direction:column;gap:.3rem}
.co-plan-feats li{font-size:.82rem;color:var(--nx-ink-2);display:flex;align-items:center;gap:.4rem}
.co-plan-feats svg{color:#16a34a;flex-shrink:0}

/* Pending */
.co-pending{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);color:#b45309;border-radius:12px;padding:1rem 1.2rem;font-size:.88rem;line-height:1.6;margin-bottom:1.5rem}
[data-theme="dark"] .co-pending,.co-pending{color:#f59e0b}
[data-theme="light"] .co-pending{color:#b45309}
.co-pending a{color:inherit;font-weight:600}

/* Section */
.co-section{background:var(--nx-panel-bg);border:1px solid var(--nx-rule-hard);border-radius:14px;padding:1.2rem 1.4rem;margin-bottom:1.1rem}
.co-section-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--nx-ink-3);margin-bottom:1rem}

/* Method Grid */
.co-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.65rem}
.co-tile-wrap{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.co-tile{position:relative;border:2px solid var(--nx-rule-hard);border-radius:13px;outline:none;user-select:none;overflow:hidden;background:var(--nx-bg);width:100%;aspect-ratio:1/1}
.co-tile.sel{border-color:var(--nx-accent)}
.co-tile input[type=radio]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.co-tile-logo{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem;line-height:1;overflow:hidden}
.co-tile-logo img{width:100%;height:100%;object-fit:cover;display:block}
.co-tile-name{text-align:center;font-size:.75rem;font-weight:700;color:var(--nx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.co-tile-check{position:absolute;top:.4rem;right:.4rem;width:17px;height:17px;border-radius:50%;background:var(--nx-accent);display:none;align-items:center;justify-content:center}
.co-tile.sel .co-tile-check{display:flex}

/* Detail panel */
.co-detail{display:none;background:var(--nx-detail-bg);border:1px solid var(--nx-rule-hard);border-radius:11px;padding:.9rem 1rem;margin-top:.85rem;animation:coIn .17s ease}
.co-detail.on{display:block}
@keyframes coIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.co-detail-head{display:flex;align-items:center;gap:.65rem;padding-bottom:.75rem;border-bottom:1px solid var(--nx-rule);margin-bottom:.8rem}
.co-detail-icon{width:36px;height:36px;border-radius:9px;background:var(--nx-icon-bg);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:1.15rem;flex-shrink:0}
.co-detail-icon img{width:100%;height:100%;object-fit:contain;padding:4px}
.co-detail-mname{font-weight:700;font-size:.93rem;color:var(--nx-ink)}
.co-detail-mtype{font-size:.72rem;color:var(--nx-ink-3);margin-top:.1rem}

/* Copy row */
.co-copy-row{display:flex;align-items:center;gap:.45rem;background:var(--nx-copy-row-bg);border:1px solid var(--nx-rule-hard);border-radius:9px;padding:.55rem .8rem;margin-bottom:.7rem}
.co-copy-addr{flex:1;font-family:monospace;font-size:.84rem;word-break:break-all;color:var(--nx-ink)}
.co-copy-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:.28rem;background:var(--nx-accent);color:#fff;border:none;border-radius:7px;padding:.32rem .7rem;font-size:.77rem;font-weight:700;cursor:pointer;transition:opacity .15s;white-space:nowrap}
.co-copy-btn:hover{opacity:.88}
.co-copy-btn.copied{background:#16a34a}
.co-instr{font-size:.81rem;color:var(--nx-ink-2);line-height:1.65;padding:.5rem .7rem;background:var(--nx-instr-bg);border-left:3px solid var(--nx-accent);border-radius:0 7px 7px 0}

/* Form */
.co-field{margin-bottom:.9rem}
.co-label{display:block;font-size:.77rem;font-weight:600;color:var(--nx-ink-2);margin-bottom:.38rem;text-transform:uppercase;letter-spacing:.06em}
.co-label .req{color:var(--nx-accent)}
.co-input,.co-textarea{width:100%;box-sizing:border-box;background:var(--nx-bg);border:1px solid var(--nx-rule-hard);border-radius:9px;color:var(--nx-ink);padding:.62rem .82rem;font-size:.89rem;font-family:inherit;outline:none;transition:border-color .15s}
.co-input::placeholder,.co-textarea::placeholder{color:var(--nx-ink-3)}
.co-input:focus,.co-textarea:focus{border-color:var(--nx-accent)}
.co-textarea{resize:vertical;min-height:76px}
.co-hint{font-size:.74rem;color:var(--nx-ink-3);margin-top:.28rem}
.co-submit{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;background:var(--nx-accent);color:#fff;border:none;border-radius:12px;padding:.88rem 1.5rem;font-size:.98rem;font-weight:700;cursor:pointer;transition:opacity .15s,transform .1s;margin-top:.4rem}
.co-submit:hover{opacity:.92;transform:translateY(-1px)}
.co-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}
.co-footer{margin-top:1.75rem;font-size:.77rem;color:var(--nx-ink-3);text-align:center;line-height:1.6}
@keyframes co-spin{to{transform:rotate(360deg)}}

/* ============================================================
   POPULAR ANIME LIST — Shared styles
   Used in: index.php (full-width section), detail.php (below related),
            watch.php (sidebar compact version)
   ============================================================ */

/* ── Section header tab group ── */
.popular-list-section .section-header {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pop-tab-group {
  display: flex;
  gap: 4px;
  background: var(--bg-card);
  border-radius: 8px;
  padding: 3px;
}
.pop-tab-group-sm .pop-tab {
  font-size: 10px;
  padding: 3px 9px;
}

.pop-tab {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-family: inherit;
}
.pop-tab.active {
  background: var(--color-primary);
  color: #fff;
}
.pop-tab:not(.active):hover {
  color: var(--text-primary);
}

/* ── List container ── */
.pop-list {
  display: none;
  flex-direction: column;
  gap: 0;
}
.pop-list.active { display: flex; }

/* ── INLINE (home page, no sidebar) — grid layout ── */
.popular-watch-section .pop-list.active {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 600px) {
  .popular-watch-section .pop-list.active {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1rem;
  }
}
@media (min-width: 1024px) {
  .popular-watch-section .pop-list.active {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 1rem;
  }
}
@media (min-width: 1400px) {
  .popular-watch-section .pop-list.active {
    grid-template-columns: repeat(4, 1fr);
    gap: 0 1rem;
  }
}
/* Section header for inline popular */
.popular-watch-section .section-header {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── Individual list item ── */
.pop-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  transition: background 0.18s;
}
.pop-list-item:last-child { border-bottom: none; }
.pop-list-item:hover { background: var(--bg-hover); }

/* Compact variant (watch sidebar) */
.pop-list-item-sm {
  padding: 7px 4px;
  gap: 8px;
}

/* ── Rank number ── */
.pop-rank {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-muted);
  min-width: 28px;
  text-align: center;
  line-height: 1;
}
.pop-rank-sm {
  font-size: 14px;
  min-width: 18px;
}
.pop-rank-top { color: var(--color-primary); }

/* ── Thumbnail ── */
.pop-thumb {
  width: 48px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--bg-card);
}
.pop-thumb-sm {
  width: 36px;
  height: 48px;
}
.pop-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

/* ── Info block ── */
.pop-info { flex: 1; min-width: 0; }

.pop-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.pop-meta {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.pop-dot { opacity: 0.4; }

/* ── Rating ── */
.pop-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--badge-color-rating);
  flex-shrink: 0;
}

/* ============================================================
   Home: Top Trending Donghua right sidebar
   ============================================================ */
.home-content-columns{display:block}
.home-main-stack,.home-trending-column{min-width:0}
.trending-sidebar-section{
  background:linear-gradient(170deg,#0f1219 0%,#0a0d14 72%,#090b10 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:16px;
  box-shadow:0 20px 45px rgba(0,0,0,.45);
}
.trending-sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.trending-sidebar-section .section-title{font-weight:800;font-size:1.06rem;letter-spacing:.01em}
.trending-sidebar-section .section-title .icon-sm{color:#ffb54c;filter:drop-shadow(0 0 8px rgba(255,141,46,.45))}
.trending-filter{position:relative}
.trending-filter-btn{
  border:0;border-radius:999px;background:linear-gradient(120deg,#ff9f1a,#ff6d2a);color:#fff;font-size:.74rem;font-weight:700;min-width:94px;
  padding:7px 11px;display:flex;align-items:center;justify-content:space-between;gap:6px;cursor:pointer;box-shadow:0 8px 16px rgba(255,110,35,.3)
}
.trending-filter-btn:hover{filter:brightness(1.04)}
.trending-filter-menu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:100%;background:#111520;border:1px solid rgba(255,255,255,.1);border-radius:10px;
  padding:5px;display:none;z-index:30
}
.trending-filter.open .trending-filter-menu{display:block}
.trending-filter-option{
  width:100%;border:0;background:transparent;color:#bcc3d0;border-radius:8px;padding:7px 9px;text-align:left;font-size:.78rem;font-weight:600;cursor:pointer
}
.trending-filter-option:hover,.trending-filter-option.active{background:rgba(255,117,35,.16);color:#fff}
.trending-sidebar-lists .pop-list{gap:8px}
.trending-sidebar-section .pop-list.active{display:flex;flex-direction:column}
.trending-pop-card{
  position:relative;display:flex;align-items:flex-start;gap:8px;border:1px solid rgba(255,255,255,.08);border-radius:17px;padding:14px 16px;min-height:104px;
  background:
    linear-gradient(112deg,rgba(11,15,24,.98) 0%,rgba(10,13,20,.96) 50%,rgba(9,12,19,.92) 72%,rgba(9,11,18,.92) 100%),
    radial-gradient(110% 120% at 8% -8%,rgba(70,84,112,.22) 0%,rgba(12,16,25,0) 66%);
  overflow:hidden;isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)
}
.trending-pop-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(112deg,rgba(6,9,15,.94) 0%,rgba(6,9,15,.92) 22%,rgba(7,10,16,.82) 39%,rgba(7,10,16,.64) 52%,rgba(7,10,16,.42) 64%,rgba(7,10,16,.24) 75%,rgba(7,10,16,.1) 86%,transparent 100%),
    radial-gradient(116% 136% at 0% 50%,rgba(5,8,13,.5) 0%,rgba(6,9,15,.26) 42%,rgba(7,10,16,.1) 68%,transparent 84%);
}
.trending-thumb-wrap{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:35%;
  min-width:172px;
  overflow:hidden;
  z-index:1;
  clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);
  -webkit-clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);
}
.trending-thumb-wrap::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(104deg,rgba(7,10,16,.76) 0%,rgba(7,10,16,.56) 14%,rgba(7,10,16,.28) 30%,rgba(7,10,16,.08) 48%,transparent 68%),
    linear-gradient(180deg,rgba(7,10,16,.16) 0%,rgba(7,10,16,.06) 24%,rgba(7,10,16,.04) 76%,rgba(7,10,16,.18) 100%),
    radial-gradient(104% 100% at 100% 50%,rgba(255,186,97,.06) 0%,rgba(255,186,97,.02) 18%,transparent 48%);
  opacity:.9
}
.trending-thumb-wrap::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(104deg,rgba(6,9,15,.7) 0%,rgba(6,9,15,.38) 12%,rgba(6,9,15,.12) 24%,transparent 42%),
    radial-gradient(84% 110% at 100% 50%,rgba(10,14,22,.14) 0%,rgba(10,14,22,.06) 34%,transparent 72%),
    linear-gradient(180deg,rgba(10,14,22,.07) 0%,transparent 36%,transparent 64%,rgba(10,14,22,.09) 100%);
  opacity:.86
}
.trending-pop-card .pop-thumb{
  width:100%;
  height:100%;
  margin-top:0;
  border-radius:0;
  filter:saturate(1.08) brightness(.94) contrast(1.03);
  object-fit:cover;
  box-shadow:none;
  transform:scale(1.06);
  transform-origin:right center
}
.trending-pop-card .pop-info{position:relative;z-index:3;padding:34px 48% 0 0}
.trending-pop-card .pop-title{
  position:absolute;
  left:0;
  top:12px;
  z-index:4;
  max-width:52%;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:1.05rem;
  color:#f5f7ff
}
.trending-pop-card .pop-meta{font-size:.74rem;color:#95a0b2}
.trending-pop-card .pop-rating{color:#ffd25f}
.trending-pop-card .pop-rank{position:relative;z-index:3;min-width:44px;margin-right:2px;font-size:1.34rem;color:#f5f6fb}
.trending-pop-card .rank-value{position:relative;z-index:3}
.phoenix-mark{
  position:absolute;left:-14px;top:-20px;width:68px;height:68px;z-index:1;pointer-events:none;
  opacity:.76;transform:rotate(-10deg) scale(.94);transition:opacity .28s ease,transform .28s ease,filter .28s ease;
  filter:drop-shadow(0 0 5px rgba(255,94,42,.38)) drop-shadow(0 0 10px rgba(255,180,66,.28))
}
.phoenix-svg{width:100%;height:100%;display:block}
.phoenix-core{fill:#ff7a2f;opacity:.92}
.phoenix-wing-left{fill:#ff4f32}
.phoenix-wing-right{fill:#ff7a29}
.phoenix-tail{fill:#ff5e2e}
.phoenix-tail-glow{fill:#ffc64f}
.trending-pop-card:is(:hover,:focus-visible,:active) .phoenix-svg{
  filter:drop-shadow(0 0 5px rgba(255,64,32,.54)) drop-shadow(0 0 12px rgba(255,149,40,.46)) drop-shadow(0 0 18px rgba(255,215,88,.38))
}
.trending-pop-card:hover .phoenix-mark,.trending-pop-card:focus-visible .phoenix-mark,.trending-pop-card:active .phoenix-mark{
  opacity:1;transform:rotate(-8deg) scale(1.03);filter:drop-shadow(0 0 10px rgba(255,84,35,.68)) drop-shadow(0 0 18px rgba(255,199,78,.5))
}
.home-trending-column--mobile{display:none}
@media (min-width:1200px){
  .home-content-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,470px);gap:24px;align-items:start}
  .home-trending-column{position:relative;top:0;align-self:start;padding-top:0;margin-top:34px}
  .home-trending-column .trending-sidebar-section{margin-top:0}
}
@media (max-width:1199px){
  .home-trending-column{margin-top:18px}
  .trending-pop-card .pop-info{padding-right:44%}
}
@media (max-width:900px){
  .home-trending-column--desktop{display:none}
  .home-trending-column--mobile{display:block}
}

/* ── Watch sidebar header ── */
.sidebar-pop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Recommendation tabs — sidebar compact variant ── */
.rec-tabs-sm {
  gap: 0;
  background: var(--bg-surface);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 0.85rem;
}
.rec-tabs-sm .rec-tab {
  font-size: 0.75rem;
  padding: 0.38rem 0.6rem;
}

/* Sidebar rec grid: 2 columns instead of 3 */
.rec-grid-sidebar {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

/* ═══════════════════════════════════════════
   A-Z LIST — Footer section (desktop only)
═══════════════════════════════════════════ */
.footer-azlist {
  display: none; /* hidden on mobile */
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-bottom: 1px solid color-mix(in srgb, var(--footer-accent-color, var(--color-primary)) 18%, transparent);
  padding-bottom: 0.45rem;
  margin-bottom: 0.65rem;
}

@media (min-width: 1024px) {
  .footer-azlist { display: block; }
}

.footer-azlist-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

.footer-azlist-title {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--footer-heading-color, var(--text-primary, #fff));
  white-space: nowrap;
}

.footer-azlist-divider {
  color: var(--footer-text-color, var(--text-muted, rgba(255,255,255,0.3)));
}

.footer-azlist-subtitle {
  font-size: 0.72rem;
  color: var(--footer-text-color, var(--text-muted, rgba(255,255,255,0.5)));
}

.footer-azlist-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem;
  justify-content: center;
}

.site-footer .az-letter-btn {
  min-width: 24px;
  height: 24px;
  padding: 0 0.28rem;
  border-radius: 4px;
  background: var(--footer-accent-color, var(--color-primary, #e94560));
  font-size: 0.72rem;
  line-height: 1;
}

/* Shared button style (footer + page) */
.az-letter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 0.45rem;
  border-radius: 6px;
  background: var(--color-primary, #e94560);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: opacity 0.18s, transform 0.15s;
}

.az-letter-btn:hover {
  opacity: 0.82;
  transform: translateY(-1px);
}

.az-letter-btn.active {
  background: #fff;
  color: var(--color-primary, #e94560);
  box-shadow: 0 0 0 2px var(--color-primary, #e94560);
}


/* ═══════════════════════════════════════════
   A-Z LIST — Dedicated page
═══════════════════════════════════════════ */
.azlist-page {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.azlist-page-header {
  margin-bottom: 1.5rem;
}

.azlist-page-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin-bottom: 0.35rem;
}

.azlist-page-title svg {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--color-primary, #e94560);
}

.azlist-page-subtitle {
  font-size: 0.88rem;
  color: var(--text-muted, rgba(255,255,255,0.5));
}

.azlist-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Desktop: horizontal wrapped rows */
.azlist-sidebar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.35rem;
  width: 100%;
  padding: 0.75rem;
  justify-content: center;
  background: var(--bg-surface, rgba(255,255,255,0.04));
  border-radius: 10px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.07));
}

.azlist-sidebar .az-letter-btn {
  min-width: 36px;
  height: 34px;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  border-radius: 6px;
}

.azlist-results {
  flex: 1;
  min-width: 0;
}

.azlist-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.azlist-results-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
}

.azlist-active-letter {
  color: var(--color-primary, #e94560);
  font-size: 1.2rem;
}

.azlist-count {
  font-size: 0.82rem;
  color: var(--text-muted, rgba(255,255,255,0.5));
  background: var(--bg-surface, rgba(255,255,255,0.05));
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
}

.azlist-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 4rem 1rem;
  color: var(--text-muted, rgba(255,255,255,0.4));
  text-align: center;
}

.azlist-empty svg {
  width: 3rem;
  height: 3rem;
  opacity: 0.4;
}

/* Mobile: 3 rows, no overlap, equal-width buttons */
@media (max-width: 767px) {
  .azlist-sidebar {
    padding: 0.5rem;
    gap: 0.28rem;
    justify-content: center;
  }
  .azlist-sidebar .az-letter-btn {
    /* 10 per row = 3 rows for 28 items. Use % minus gaps */
    flex: 0 0 calc((100% - 9 * 0.28rem) / 10);
    height: 30px;
    font-size: 0.7rem;
    padding: 0;
    min-width: 0;
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    justify-content: center;
  }
}


/* ═══════════════════════════════════════════
   A-Z LIST PAGE — Card Grid
   status-card was built for flex sliders;
   override here so it works in a CSS grid.
═══════════════════════════════════════════ */
.status-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.85rem;
}

/* Inside the grid, cards must NOT have a fixed flex width */
.status-card-grid .status-card {
  flex: none;
  width: 100%;
  scroll-snap-align: none;
}

@media (max-width: 480px) {
  .status-card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
}

@media (min-width: 768px) {
  .status-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  }
}

@media (min-width: 1200px) {
  .status-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════
   PROFILE PAGE — TAB SYSTEM, WATCH HISTORY, BOOKMARKS
   Full light + dark mode support via CSS variables
   ═══════════════════════════════════════════════════════════ */

/* ── Tab Nav ─────────────────────────────────────────────── */
.profile-tab-nav {
  display: flex;
  align-items: center;
  gap: .2rem;
  border-bottom: 1px solid var(--ptab-border);
  margin: 1.5rem 0 0;
  padding-bottom: 0;
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.profile-tab-nav::-webkit-scrollbar { display: none; }

.ptab-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ptab-btn-color);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.ptab-btn:hover     { color: var(--ptab-btn-hover); }
.ptab-btn.ptab-active {
  color: var(--ptab-active-color);
  border-bottom-color: var(--ptab-active-line);
}

.ptab-count {
  background: var(--ptab-count-bg);
  color: var(--ptab-count-color);
  font-size: .68rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .ptab-btn { padding: .5rem .75rem; font-size: .78rem; }
}

/* ── Tab Toolbar ─────────────────────────────────────────── */
.ptab-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 1.5rem 0 1rem;
  flex-wrap: wrap;
}
.ptab-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ptab-title-color);
  margin: 0;
}
.ptab-badge {
  background: var(--ptab-badge-bg);
  color: var(--ptab-badge-color);
  font-size: .7rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-weight: 700;
}

.ptab-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.ptab-action-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .38rem .7rem;
  font-size: .74rem;
  font-weight: 500;
  border: 1px solid var(--ptab-btn-border);
  border-radius: 6px;
  background: var(--ptab-btn-bg);
  color: var(--text-secondary, #9090b0);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ptab-action-btn:hover {
  background: var(--ptab-btn-hover-bg);
  color: var(--ptab-btn-hover-fg);
}
.ptab-action-danger { border-color: rgba(239,68,68,.35); color: #ef4444; }
.ptab-action-danger:hover { background: rgba(239,68,68,.1); color: #dc2626; }

/* ── Plan Info Bar ───────────────────────────────────────── */
.ptab-info-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: var(--ptab-infobar-color);
  background: var(--ptab-infobar-bg);
  border: 1px solid var(--ptab-infobar-bdr);
  border-radius: 6px;
  padding: .5rem .75rem;
  margin-bottom: 1rem;
}
.ptab-info-ok {
  color: var(--ptab-ok-color);
  background: var(--ptab-ok-bg);
  border-color: var(--ptab-ok-bdr);
}

/* ── Search ──────────────────────────────────────────────── */
.ptab-search-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--ptab-search-bg);
  border: 1px solid var(--ptab-search-border);
  border-radius: 8px;
  padding: .48rem .75rem;
  margin-bottom: 1.2rem;
}
.ptab-search-wrap svg { color: var(--text-muted); flex-shrink: 0; }
.ptab-search {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--ptab-search-color);
  font-size: .85rem;
}
.ptab-search::placeholder { color: var(--text-muted); }

/* ── Full Watch History List ─────────────────────────────── */
.wh-full-list { display: flex; flex-direction: column; gap: .55rem; }
.wh-full-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: var(--wh-item-bg);
  border: 1px solid var(--wh-item-border);
  border-radius: 10px;
  padding: .65rem;
  transition: background .15s;
}
.wh-full-item:hover { background: var(--wh-item-hover); }

.wh-full-thumb {
  flex-shrink: 0;
  width: 52px;
  height: 74px;
  border-radius: 6px;
  overflow: hidden;
  display: block;
}
.wh-full-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wh-full-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: var(--wh-thumb-ph-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.wh-full-info { flex: 1; min-width: 0; }

.wh-full-anime-title {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  color: var(--wh-title-color);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .2rem;
}
.wh-full-anime-title:hover { color: var(--wh-ep-color); }

.wh-full-ep-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .77rem;
  color: var(--wh-ep-color);
  text-decoration: none;
  margin-bottom: .25rem;
}
.wh-full-ep-link:hover { color: var(--wh-ep-hover); }
.wh-full-ep-title { color: var(--text-muted); }

.wh-full-prog-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .25rem;
}
.wh-full-prog-bar { flex: 1; height: 3px; background: #6366f1; border-radius: 2px; }
.wh-full-prog-pct { font-size: .7rem; color: var(--text-muted); flex-shrink: 0; }

.wh-full-meta {
  display: flex;
  align-items: center;
  gap: .3rem;
  color: var(--text-muted);
}
.wh-full-date { font-size: .71rem; }

.wh-full-remove { margin-left: auto; flex-shrink: 0; }
.wh-full-remove-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: .35rem;
  border-radius: 5px;
  transition: background .12s, color .12s;
}
.wh-full-remove-btn:hover { background: rgba(239,68,68,.12); color: #ef4444; }

/* ── Empty States ────────────────────────────────────────── */
.ptab-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}
.ptab-empty svg { margin: 0 auto .75rem; display: block; opacity: .35; }
.ptab-empty p { font-size: .88rem; }
.ptab-empty-search {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem 0;
  font-size: .85rem;
}

/* ── Toast Notification ──────────────────────────────────── */
.ptab-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--ptab-toast-bg);
  border: 1px solid var(--ptab-toast-border);
  color: var(--ptab-toast-color);
  padding: .6rem 1.2rem;
  border-radius: 8px;
  font-size: .82rem;
  z-index: 9999;
  opacity: 0;
  transition: transform .28s, opacity .28s;
  pointer-events: none;
  white-space: nowrap;
  max-width: 90vw;
}
.ptab-toast-show { transform: translateX(-50%) translateY(0); opacity: 1; }
.ptab-toast-ok   { border-color: rgba(34,197,94,.5);  color: #16a34a; }
.ptab-toast-warn { border-color: rgba(234,179,8,.5);  color: #ca8a04; }
.ptab-toast-err  { border-color: rgba(239,68,68,.5);  color: #dc2626; }
[data-theme="dark"] .ptab-toast-ok   { color: #86efac; }
[data-theme="dark"] .ptab-toast-warn { color: #fde68a; }
[data-theme="dark"] .ptab-toast-err  { color: #fca5a5; }

/* ── Bookmark cards in profile ───────────────────────────── */
.bm-profile-card { position: relative; }

/* ── Membership footer (shown under every tab) ───────────── */
.ptab-membership-footer {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ptab-divider);
}

/* ── Profile hero stat click hint ───────────────────────── */
.profile-stat[style*="cursor:pointer"]:hover .profile-stat-val,
.profile-stat[style*="cursor: pointer"]:hover .profile-stat-val {
  color: var(--ptab-active-line);
}
/* ============================================================
   Social Community Banner
   --sb-admin-bg/txt = set by admin via injected <style> tag
   Falls back to theme CSS variables when not set by admin
   ============================================================ */
.social-comm-banner {
  width: 100%;
  background: var(--sb-admin-bg, var(--sb-bg));
  color: var(--sb-admin-txt, var(--sb-text));
  border-bottom: 1px solid var(--sb-border);
  padding: .55rem 1.25rem;
}
.social-comm-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.social-comm-text {
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}
.social-comm-btns {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.social-comm-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .32rem .75rem;
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  background: var(--sb-btn-bg);
  border: 1px solid var(--sb-btn-border);
  transition: background .18s, border-color .18s, transform .15s;
  white-space: nowrap;
}
/* Platform accent on hover */
.social-comm-btn-facebook:hover  { border-color: #1877f2; }
.social-comm-btn-whatsapp:hover  { border-color: #25d366; }
.social-comm-btn-youtube:hover   { border-color: #ff0000; }
.social-comm-btn-telegram:hover  { border-color: #2aabee; }
.social-comm-btn-discord:hover   { border-color: #5865f2; }
.social-comm-btn-twitter:hover   { border-color: #888; }
.social-comm-btn-instagram:hover { border-color: #e1306c; }
.social-comm-btn-tiktok:hover    { border-color: #69c9d0; }
.social-comm-btn-reddit:hover    { border-color: #ff4500; }
@media (max-width: 480px) {
  .social-comm-inner { gap: .5rem; }
  .social-comm-text  { font-size: .78rem; }
  .social-comm-btn   { padding: .28rem .62rem; font-size: .74rem; }
}

/* ============================================================
   Watch Page — Announcement Banners  (all users)
   --wa-admin-bg/txt = set by admin via injected <style> tag
   Falls back to theme CSS variables when not set by admin
   ============================================================ */
.watch-announce {
  border-radius: 8px;
  padding: .7rem 1rem;
  font-size: .855rem;
  line-height: 1.55;
  margin-bottom: .8rem;
  background: var(--wa-admin-bg, var(--wa-bg));
  border: 1px solid var(--wa-border);
  color: var(--wa-admin-txt, var(--wa-text));
}
.watch-announce-after { margin-top: .8rem; margin-bottom: 0; }

/* ============================================================
   Watch Page — Ad Zones  (non-members only)
   ============================================================ */
.watch-ad-zone {
  width: 100%;
  overflow: hidden;
  text-align: center;
  background: var(--ad-bg);
}
.watch-ad-before { margin-bottom: .7rem; }
.watch-ad-after  { margin-top: .7rem; }
/* ============================================================
   FIREBASE / SOCIAL SIGN-IN  (lgn-or-divider, lgn-social-btn)
   ============================================================ */
.lgn-or-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
  color: var(--text-muted);
  font-size: .8rem;
}
.lgn-or-divider::before,
.lgn-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.lgn-firebase-btns {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: .5rem;
}
.lgn-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  width: 100%;
  padding: .7rem 1rem;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .15s;
  font-family: inherit;
}
.lgn-social-btn:hover {
  background: var(--bg-hover);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}
[data-theme="light"] .lgn-social-btn:hover { border-color: rgba(0,0,0,.2); }
.lgn-social-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ============================================================
   CHANGE PASSWORD / ACCOUNT SETTINGS  (chg-)
   ============================================================ */
.chg-section-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .75rem;
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.chg-section-label:first-of-type { margin-top: 0; }
.chg-required {
  color: var(--color-primary);
  font-size: .85rem;
  font-weight: 700;
}
.chg-optional {
  font-size: .68rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  opacity: .8;
}

/* "Change password" link on login page */
.lgn-change-pass {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: .75rem;
  font-size: .82rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .18s;
}
.lgn-change-pass:hover { color: var(--color-primary); }
.lgn-change-pass svg  { flex-shrink: 0; }

/* Inline alert success variant (used without fgp-success class) */
.lgn-alert--success {
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.3);
  color: #4ade80;
}
/* Inline alert warn variant */
.lgn-alert--warn {
  background: rgba(251,191,36,.1);
  border-color: rgba(251,191,36,.3);
  color: #fbbf24;
}
/* ============================================================
   AUTOFIT RESPONSIVE — Remove excessive left/right whitespace
   Makes all containers fluid and fills screen width properly
   ============================================================ */

/* Base container — fluid with clamp padding */
.container,
.watch-page:not(.watch-rebuild),
.footer-inner,
.nav-inner,
.social-comm-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: clamp(0.75rem, 3vw, 2rem) !important;
  padding-right: clamp(0.75rem, 3vw, 2rem) !important;
  box-sizing: border-box !important;
}

/* Watch page — keep its top/bottom padding, only override sides */
.watch-page:not(.watch-rebuild) {
  padding-top: 0.75rem !important;
  padding-bottom: 2rem !important;
}

/* Sidebar stretches to fill available space on wide screens */
.watch-page:not(.watch-rebuild) .watch-sidebar {
  width: clamp(260px, 22vw, 340px) !important;
}

/* Hero section — full width */
.hero-section,
.hero-slider,
.hero-slide {
  width: 100% !important;
  max-width: 100% !important;
}

/* Anime sections — full container */
.anime-section,
.anime-grid,
.section-header {
  width: 100% !important;
}

/* Detail / Info page */
.detail-page,
.detail-wrap,
.detail-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: clamp(0.75rem, 3vw, 2rem) !important;
  padding-right: clamp(0.75rem, 3vw, 2rem) !important;
}

/* Profile / membership pages */
.profile-wrap,
.mem-page,
.co-page {
  max-width: 100% !important;
  padding-left: clamp(0.75rem, 3vw, 2rem) !important;
  padding-right: clamp(0.75rem, 3vw, 2rem) !important;
}

/* Responsive breakpoints — tighter padding on small screens */
@media (max-width: 768px) {
  .container,
  .watch-page:not(.watch-rebuild),
  .footer-inner,
  .nav-inner,
  .social-comm-inner,
  .detail-page,
  .detail-wrap,
  .detail-container,
  .profile-wrap {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .watch-page:not(.watch-rebuild) .watch-sidebar {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .container,
  .watch-page:not(.watch-rebuild),
  .footer-inner,
  .nav-inner,
  .social-comm-inner,
  .detail-page,
  .detail-wrap,
  .detail-container,
  .profile-wrap {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* Large screens (1920px+) — use more horizontal space */
@media (min-width: 1920px) {
  .container,
  .watch-page:not(.watch-rebuild),
  .footer-inner,
  .nav-inner,
  .social-comm-inner {
    padding-left: clamp(2rem, 5vw, 5rem) !important;
    padding-right: clamp(2rem, 5vw, 5rem) !important;
  }
  .watch-sidebar {
    width: clamp(300px, 20vw, 420px) !important;
  }
}

/* 4K screens (2560px+) */
@media (min-width: 2560px) {
  .container,
  .watch-page:not(.watch-rebuild),
  .footer-inner,
  .nav-inner,
  .social-comm-inner {
    padding-left: clamp(3rem, 6vw, 8rem) !important;
    padding-right: clamp(3rem, 6vw, 8rem) !important;
  }
  .watch-sidebar {
    width: clamp(340px, 18vw, 500px) !important;
  }
}
/* ============================================================
   CHECKOUT PAGE — QR code & screenshot drop zone
   Prefix: .co-qr-*  .co-ss-*
   Extracted from Views/user/checkout.php
   ============================================================ */

/* QR Code */
.co-qr-block {
  margin: .85rem 0 .5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  padding: .9rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--nx-rule-hard, #2a2a3a);
  border-radius: .75rem;
}
.co-qr-label {
  font-size: .78rem;
  color: var(--nx-ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0;
}
.co-qr-img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  border-radius: .5rem;
  background: #fff;
  padding: 6px;
  cursor: pointer;
  display: block;
}
.co-qr-img-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.co-qr-img-overlay {
  position: absolute;
  inset: 0;
  border-radius: .5rem;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.co-qr-img-wrap:hover .co-qr-img-overlay { opacity: 1; }
.co-qr-download {
  font-size: .75rem;
  color: var(--nx-ink-3);
  display: flex;
  align-items: center;
  gap: .3rem;
  text-decoration: none;
  padding: .2rem .5rem;
  border-radius: .35rem;
  border: 1px solid var(--nx-rule-hard);
}
.co-qr-download:hover { color: var(--nx-ink-1); border-color: var(--nx-ink-3); }

/* Screenshot drop zone */
.co-ss-drop {
  border: 1.5px dashed var(--nx-rule-hard, #2a2a3a);
  border-radius: .7rem;
  padding: 1.2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: rgba(255,255,255,.02);
  position: relative;
}
.co-ss-drop.over {
  border-color: var(--nx-accent, #7c3aed);
  background: rgba(124,58,237,.06);
}
.co-ss-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  color: var(--nx-ink-3);
  font-size: .85rem;
}
.co-ss-browse {
  color: var(--nx-accent, #7c3aed);
  cursor: pointer;
  text-decoration: underline;
}
.co-ss-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.co-ss-uploading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--nx-ink-3);
  font-size: .85rem;
  padding: .5rem;
}
.co-ss-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.co-ss-thumb {
  max-width: 200px;
  max-height: 130px;
  object-fit: cover;
  border-radius: .5rem;
  border: 1.5px solid var(--nx-rule-hard);
}
.co-ss-preview-info {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
}
.co-ss-clear {
  background: none;
  border: 1px solid var(--nx-rule-hard);
  border-radius: .35rem;
  padding: .15rem .45rem;
  font-size: .73rem;
  cursor: pointer;
  color: var(--nx-ink-3);
}

/* ============================================================
   PROFILE PAGE — pf- component styles
   Extracted from Views/user/profile.php
   ============================================================ */

/* Profile page wrapper */
.pf-wrap { max-width: 720px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

/* Hero card */
.pf-hero {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.25rem 1.35rem;
  background: var(--nx-surface, #16161e);
  border: 1px solid var(--nx-rule, #23232f);
  border-radius: 1rem;
  margin-bottom: 1rem;
}
.pf-avatar-wrap { position: relative; flex-shrink: 0; }
.pf-avatar,
.pf-avatar-ph {
  width: 62px; height: 62px; border-radius: 50%;
  object-fit: cover; display: block;
}
.pf-avatar-ph {
  background: var(--nx-accent, #7c3aed);
  color: #fff; font-size: 1.5rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pf-avatar-btn { background: none; border: none; padding: 0; cursor: pointer; position: relative; }
.pf-avatar-overlay {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.pf-avatar-btn:hover .pf-avatar-overlay { opacity: 1; }
.pf-badge {
  position: absolute; bottom: -3px; right: -3px;
  font-size: .58rem; font-weight: 700; color: #fff;
  padding: .15rem .4rem; border-radius: 99px;
  white-space: nowrap; letter-spacing: .03em;
}
.pf-info { flex: 1; min-width: 0; }
.pf-name {
  font-size: 1.05rem; font-weight: 700; margin: 0 0 .1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-email { font-size: .8rem; color: var(--nx-ink-3); margin: 0 0 .5rem; }
.pf-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.pf-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .76rem; font-weight: 600; padding: .3rem .7rem;
  border-radius: .45rem; border: 1px solid var(--nx-rule-hard, #2a2a3a);
  background: transparent; cursor: pointer; color: var(--nx-ink-2);
  text-decoration: none; transition: border-color .15s, background .15s;
}
.pf-btn:hover { border-color: var(--nx-ink-3); background: rgba(255,255,255,.04); }
.pf-stats {
  display: flex; gap: 1.1rem; flex-shrink: 0;
  border-left: 1px solid var(--nx-rule, #23232f);
  padding-left: 1.1rem;
}
.pf-stat { text-align: center; }
.pf-stat-val { font-size: 1.1rem; font-weight: 700; display: block; }
.pf-stat-lbl { font-size: .68rem; color: var(--nx-ink-3); }
.pf-stat-val.ok   { color: #22c55e; }
.pf-stat-val.warn { color: #f59e0b; }

/* Membership card */
.pf-mem {
  padding: 1rem 1.35rem;
  background: var(--nx-surface, #16161e);
  border: 1px solid var(--nx-rule, #23232f);
  border-radius: .85rem;
  margin-bottom: 1rem;
}
.pf-mem-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.pf-mem-plan { font-size: .9rem; font-weight: 700; }
.pf-mem-dur  { font-size: .78rem; color: var(--nx-ink-3); }
.pf-mem-exp  { font-size: .78rem; color: var(--nx-ink-3); }
.pf-progress-wrap { margin: .4rem 0; }
.pf-progress-labels { display: flex; justify-content: space-between; font-size: .72rem; color: var(--nx-ink-3); margin-bottom: .3rem; }
.pf-progress-bar { height: 4px; background: var(--nx-rule-hard, #2a2a3a); border-radius: 99px; overflow: hidden; }
.pf-progress-fill { height: 100%; border-radius: 99px; transition: width .4s; }
.pf-mem-feats { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pf-mem-feats li {
  font-size: .73rem; color: var(--nx-ink-2);
  background: rgba(255,255,255,.04); border: 1px solid var(--nx-rule, #23232f);
  border-radius: .35rem; padding: .2rem .5rem;
  display: flex; align-items: center; gap: .3rem;
}
.pf-upgrade {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
  padding: .9rem 1.1rem;
  border: 1px dashed var(--nx-rule-hard, #2a2a3a);
  border-radius: .85rem; margin-bottom: 1rem;
}
.pf-upgrade-text h4 { margin: 0 0 .2rem; font-size: .88rem; }
.pf-upgrade-text p  { margin: 0; font-size: .78rem; color: var(--nx-ink-3); }
.pf-upgrade-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem 1rem; border-radius: .5rem;
  background: var(--nx-accent, #7c3aed); color: #fff;
  font-size: .82rem; font-weight: 600; text-decoration: none;
}

/* Tab nav */
.pf-tabs { display: flex; gap: .25rem; margin-bottom: .85rem; border-bottom: 1px solid var(--nx-rule, #23232f); }
.pf-tab {
  padding: .5rem .85rem; font-size: .82rem; font-weight: 600;
  border: none; background: none; cursor: pointer; color: var(--nx-ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; gap: .35rem; transition: color .15s;
}
.pf-tab.active { color: var(--nx-ink-1); border-bottom-color: var(--nx-accent, #7c3aed); }
.pf-tab-badge {
  font-size: .65rem; background: var(--nx-rule-hard, #2a2a3a);
  color: var(--nx-ink-3); border-radius: 99px; padding: .05rem .4rem;
}
.pf-tab.active .pf-tab-badge { background: var(--nx-accent, #7c3aed); color: #fff; }

/* Tab panes */
.pf-pane        { display: none; }
.pf-pane.active { display: block; }

/* Section header */
.pf-section-head  { display: flex; align-items: center; justify-content: space-between; margin-bottom: .65rem; }
.pf-section-title { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--nx-ink-3); margin: 0; }
.pf-section-link  { font-size: .78rem; color: var(--nx-ink-3); text-decoration: none; display: flex; align-items: center; gap: .2rem; }
.pf-section-link:hover { color: var(--nx-ink-1); }

/* Watch history list */
.pf-wh-list { display: flex; flex-direction: column; gap: 0; }
.pf-wh-item {
  display: flex; align-items: center; gap: .85rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--nx-rule, #23232f);
}
.pf-wh-item:last-child { border-bottom: none; }
.pf-wh-thumb {
  width: 56px; height: 38px; border-radius: .35rem;
  object-fit: cover; flex-shrink: 0; background: var(--nx-rule-hard);
}
.pf-wh-thumb-ph {
  width: 56px; height: 38px; border-radius: .35rem;
  background: var(--nx-rule-hard, #2a2a3a); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--nx-ink-3);
}
.pf-wh-info  { flex: 1; min-width: 0; }
.pf-wh-anime { font-size: .82rem; font-weight: 600; color: var(--nx-ink-1); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-wh-ep    { font-size: .74rem; color: var(--nx-ink-3); margin: .1rem 0; }
.pf-wh-prog  { height: 2px; background: var(--nx-rule-hard); border-radius: 99px; overflow: hidden; margin-top: .3rem; }
.pf-wh-prog-fill { height: 100%; background: var(--nx-accent, #7c3aed); border-radius: 99px; }
.pf-wh-remove {
  background: none; border: none; cursor: pointer; color: var(--nx-ink-3); padding: .25rem; flex-shrink: 0;
  border-radius: .35rem; transition: color .15s, background .15s;
}
.pf-wh-remove:hover { color: var(--nx-red, #ef4444); background: rgba(239,68,68,.08); }

/* Toolbar (history / bookmarks) */
.pf-toolbar       { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.pf-toolbar-title { font-size: .88rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .4rem; }
.pf-toolbar-acts  { display: flex; gap: .3rem; }
.pf-tool-btn {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; padding: .25rem .6rem;
  border: 1px solid var(--nx-rule-hard, #2a2a3a); border-radius: .4rem;
  background: transparent; cursor: pointer; color: var(--nx-ink-3);
}
.pf-tool-btn:hover { border-color: var(--nx-ink-3); color: var(--nx-ink-1); }
.pf-tool-btn.danger:hover { border-color: var(--nx-red, #ef4444); color: var(--nx-red, #ef4444); }

/* Search bar */
.pf-search-wrap {
  display: flex; align-items: center; gap: .5rem;
  background: var(--nx-surface, #16161e); border: 1px solid var(--nx-rule-hard, #2a2a3a);
  border-radius: .5rem; padding: .35rem .65rem; margin-bottom: .75rem;
}
.pf-search { flex: 1; background: none; border: none; outline: none; font-size: .83rem; color: var(--nx-ink-1); }
.pf-search::placeholder { color: var(--nx-ink-3); }

/* Empty state */
.pf-empty     { text-align: center; padding: 2rem 1rem; color: var(--nx-ink-3); }
.pf-empty svg { opacity: .35; margin-bottom: .6rem; }
.pf-empty p   { margin: .35rem 0; font-size: .88rem; }

/* Plans grid */
.pf-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; }
.pf-plan-card {
  padding: .85rem; border: 1.5px solid var(--nx-rule, #23232f);
  border-radius: .75rem; position: relative;
}
.pf-plan-card.current { border-color: var(--nx-accent, #7c3aed); background: rgba(124,58,237,.06); }
.pf-plan-badge { font-size: .65rem; font-weight: 700; color: #fff; padding: .15rem .45rem; border-radius: 99px; display: inline-block; margin-bottom: .4rem; }
.pf-plan-name  { font-size: .88rem; font-weight: 700; margin: 0 0 .2rem; }
.pf-plan-price { font-size: 1.05rem; font-weight: 800; margin: 0 0 .1rem; }
.pf-plan-dur   { font-size: .72rem; color: var(--nx-ink-3); margin-bottom: .5rem; }
.pf-plan-feats { list-style: none; padding: 0; margin: 0 0 .65rem; font-size: .73rem; color: var(--nx-ink-2); display: flex; flex-direction: column; gap: .2rem; }
.pf-plan-feats li { display: flex; align-items: center; gap: .3rem; }
.pf-plan-btn {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .4rem; border-radius: .45rem; font-size: .78rem; font-weight: 600;
  text-decoration: none; width: 100%; border: none; cursor: pointer;
}
.pf-plan-btn.current-btn { background: rgba(124,58,237,.12); color: var(--nx-accent, #7c3aed); }
.pf-plan-btn.get-btn     { color: #fff; }

/* Info bar */
.pf-info-bar {
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; color: var(--nx-ink-3);
  padding: .45rem .7rem; border-radius: .45rem;
  background: rgba(255,255,255,.03); border: 1px solid var(--nx-rule, #23232f);
  margin-bottom: .75rem;
}

/* Toast notification */
.pf-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--nx-surface, #16161e); border: 1px solid var(--nx-rule-hard, #2a2a3a);
  border-radius: .6rem; padding: .5rem 1rem; font-size: .82rem; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  z-index: 9999; white-space: nowrap;
}
.pf-toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.pf-toast.ok   { border-color: #22c55e; color: #22c55e; }
.pf-toast.warn { border-color: #f59e0b; color: #f59e0b; }
.pf-toast.err  { border-color: #ef4444; color: #ef4444; }

/* Bookmark card remove button */
.bm-card-remove {
  position: absolute; top: .35rem; right: .35rem;
  background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: .3rem;
  padding: .1rem .35rem; font-size: .72rem; cursor: pointer; opacity: 0;
  transition: opacity .15s;
}
.bm-profile-card:hover .bm-card-remove { opacity: 1; }

@media (max-width: 520px) {
  .pf-hero  { flex-wrap: wrap; }
  .pf-stats { border-left: none; border-top: 1px solid var(--nx-rule); padding-left: 0; padding-top: .75rem; width: 100%; justify-content: space-around; }
  .pf-plans { grid-template-columns: 1fr; }
}
/* ============================================================
   MAL / Jikan — Anime Detail Page Enhancements
   ============================================================ */

/* ── Info table (Japanese, English, Type, Aired, etc.) ───── */
.mal-info-section {
  margin: 1.25rem 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-surface);
}

.mal-info-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.mal-info-row {
  display: flex;
  gap: .55rem;
  padding: .55rem .85rem;
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
  line-height: 1.5;
}

.mal-info-row:nth-child(even) {
  background: rgba(255,255,255,.025);
}

.mal-info-row:last-child,
.mal-info-row:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}

.mal-info-label {
  color: var(--text-secondary);
  font-weight: 600;
  min-width: 72px;
  flex-shrink: 0;
  letter-spacing: .01em;
}

.mal-info-value {
  color: var(--text-primary);
  flex: 1;
}

.mal-info-link {
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity .2s;
}

.mal-info-link:hover {
  opacity: .75;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .mal-info-table {
    grid-template-columns: 1fr;
  }
  .mal-info-row:nth-child(even) {
    background: none;
  }
  .mal-info-row:nth-child(odd) {
    background: rgba(255,255,255,.02);
  }
  .mal-info-row:last-child {
    border-bottom: none;
  }
  .mal-info-row:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid var(--border);
  }
}

/* ── Section wrapper (Characters / Staff) ─────────────────── */
.mal-section {
  margin: 1.5rem 0;
}

.mal-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .85rem;
}

.mal-section-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.mal-section-title svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

/* ── Horizontal scrollable track ──────────────────────────── */
.mal-hscroll-track {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  padding-bottom: 6px;
}

.mal-hscroll-track::-webkit-scrollbar {
  height: 4px;
}

.mal-hscroll-track::-webkit-scrollbar-track {
  background: transparent;
}

.mal-hscroll-track::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.mal-hscroll-inner {
  display: flex;
  gap: .75rem;
  width: max-content;
}

/* ── Character card ───────────────────────────────────────── */
.mal-char-card {
  display: flex;
  flex-direction: column;
  width: 180px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s;
}

.mal-char-card:hover {
  border-color: var(--color-primary);
}

.mal-char-pair {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.mal-char-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  padding: .55rem .4rem .6rem;
  gap: .35rem;
}

.mal-char-person + .mal-char-person {
  border-left: 1px solid var(--border);
  background: rgba(255,255,255,.025);
}

.mal-char-img {
  width: 64px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg-hover);
  display: block;
}

.mal-char-name {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
}

.mal-char-role {
  font-size: .65rem;
  color: var(--text-muted);
  text-align: center;
}

.mal-char-va .mal-char-role {
  color: var(--color-primary);
}

/* ── Staff card ───────────────────────────────────────────── */
.mal-staff-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .65rem .5rem .7rem;
  gap: .35rem;
  text-align: center;
  transition: border-color .2s;
}

.mal-staff-card:hover {
  border-color: var(--color-primary);
}

.mal-staff-card .mal-char-img {
  width: 60px;
  height: 74px;
  border-radius: 50%;
}

/* ── Skeleton loaders ─────────────────────────────────────── */
.mal-skeleton-row {
  display: flex;
  gap: .75rem;
}

.mal-char-skeleton {
  width: 180px;
  height: 120px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: mal-shimmer 1.4s infinite;
}

@keyframes mal-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.mal-empty {
  color: var(--text-muted);
  font-size: .82rem;
  padding: .5rem 0;
}

/* ── MAL section loading badge & fade-in (detail page) ───── */

/* Loading badge shown next to section title while fetching */
.mal-loading-badge {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .2em .7em .2em .5em;
  letter-spacing: .01em;
  transition: background .3s, color .3s, border-color .3s;
}

/* Pulsing dot spinner inside the badge */
.mal-loading-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
  animation: mal-dot-pulse 1s ease-in-out infinite;
}

@keyframes mal-dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: .35; transform: scale(.7); }
}

/* Success state — briefly shown after load completes */
.mal-loading-badge.mal-loading-done {
  color: #4ade80;
  background: rgba(74,222,128,.08);
  border-color: rgba(74,222,128,.25);
}

/* Error state */
.mal-loading-badge.mal-loading-err {
  color: #f87171;
  background: rgba(248,113,113,.08);
  border-color: rgba(248,113,113,.25);
}

/* Cards fade + slide in once rendered */
.mal-card-fadein {
  animation: mal-fadein .35s ease both;
}

/* Stagger each card slightly so they cascade in */
.mal-hscroll-inner .mal-char-card:nth-child(1)  { animation-delay: .03s; }
.mal-hscroll-inner .mal-char-card:nth-child(2)  { animation-delay: .06s; }
.mal-hscroll-inner .mal-char-card:nth-child(3)  { animation-delay: .09s; }
.mal-hscroll-inner .mal-char-card:nth-child(4)  { animation-delay: .12s; }
.mal-hscroll-inner .mal-char-card:nth-child(5)  { animation-delay: .15s; }
.mal-hscroll-inner .mal-char-card:nth-child(6)  { animation-delay: .18s; }
.mal-hscroll-inner .mal-char-card:nth-child(7)  { animation-delay: .21s; }
.mal-hscroll-inner .mal-char-card:nth-child(8)  { animation-delay: .24s; }
.mal-hscroll-inner .mal-char-card:nth-child(n+9){ animation-delay: .27s; }

.mal-hscroll-inner .mal-staff-card:nth-child(1)  { animation-delay: .03s; }
.mal-hscroll-inner .mal-staff-card:nth-child(2)  { animation-delay: .06s; }
.mal-hscroll-inner .mal-staff-card:nth-child(3)  { animation-delay: .09s; }
.mal-hscroll-inner .mal-staff-card:nth-child(4)  { animation-delay: .12s; }
.mal-hscroll-inner .mal-staff-card:nth-child(5)  { animation-delay: .15s; }
.mal-hscroll-inner .mal-staff-card:nth-child(6)  { animation-delay: .18s; }
.mal-hscroll-inner .mal-staff-card:nth-child(7)  { animation-delay: .21s; }
.mal-hscroll-inner .mal-staff-card:nth-child(8)  { animation-delay: .24s; }
.mal-hscroll-inner .mal-staff-card:nth-child(n+9){ animation-delay: .27s; }

@keyframes mal-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ============================================================
   HOME PAGE — BROWSE GENRES INLINE SECTION
   ============================================================ */
.browse-genres-section {}

.browse-genres-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.browse-genre-card {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: 25px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
  white-space: nowrap;
}
.browse-genre-card:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

/* ============================================================
   FIXES & ADDITIONS — profile.php + checkout.php
   Added: nx-ink-1 fix, missing classes, PayPal section, icons
   ============================================================ */

/* ── Fix: --nx-ink-1 was never defined; alias it to --nx-ink ── */
:root {
  --nx-ink-1: var(--nx-ink);
  --nx-red:   #ef4444;
  --nx-green: #22c55e;
  --nx-surface: var(--nx-panel-bg);
}

/* ── Profile: pf-wh-card wrapper (recently watched) ── */
.pf-wh-card {
  background: var(--nx-panel-bg);
  border: 1px solid var(--nx-rule-hard);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.pf-wh-card .pf-wh-list { margin-bottom: 0; }

/* ── Profile: pf-section-link used as <button> needs reset ── */
button.pf-section-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

/* ── Profile: pf-stat clickable ── */
.pf-stat[onclick] { cursor: pointer; }
.pf-stat[onclick]:hover .pf-stat-val { color: var(--nx-accent); }

/* ── Profile: membership manage link ── */
.pf-mem-manage {
  font-size: .74rem;
  color: var(--nx-ink-3);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}
.pf-mem-manage:hover { color: var(--nx-ink); }

/* ── Profile: pf-mem-row right group ── */
.pf-mem-row-end {
  display: flex;
  align-items: center;
  gap: .65rem;
}

/* ── Profile: plan USDT suffix ── */
.pf-plan-price-suffix {
  font-size: .75rem;
  font-weight: 400;
  color: var(--nx-ink-3);
}

/* ── Profile: status dot ── */
.pf-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: .35rem;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Profile: overview section top margin ── */
.pf-section-head--top { margin-top: .5rem; }

/* ── Profile: hidden JS elements ── */
.pf-js-hidden { display: none; }

/* ── Profile: episode link (inherit color) ── */
.pf-ep-link {
  color: inherit;
  text-decoration: none;
}

/* ── Profile: watched-at date ── */
.pf-wh-date { color: var(--nx-ink-3); }

/* ── Profile: no-results text ── */
.pf-no-results {
  display: none;
  text-align: center;
  color: var(--nx-ink-3);
  font-size: .82rem;
  padding: 1rem;
}

/* ── Profile: import file input hidden ── */
.pf-file-hidden { display: none; }

/* ── Profile: import label button (cursor) ── */
label.pf-tool-btn { cursor: pointer; }

/* ── Profile: search icon color ── */
.pf-search-icon { color: var(--nx-ink-3); flex-shrink: 0; }

/* ── Profile: overview bookmark grid bottom margin ── */
.pf-bm-grid { margin-bottom: 1.25rem; }

/* ── Profile: history-grid alias (used in bookmarks overview) ── */
.history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }

/* ── Profile: upgrade link inside history bar ── */
.pf-info-bar a {
  color: inherit;
  margin-left: .3rem;
  font-weight: 600;
}

/* ============================================================
   CHECKOUT — PayPal section (moved from inline <style>)
   ============================================================ */
.co-paypal-section {
  border: 1.5px solid rgba(0,112,243,.35);
  border-radius: 12px;
  background: rgba(0,112,243,.04);
  margin-bottom: 1.1rem;
}
[data-theme="light"] .co-paypal-section {
  background: rgba(0,112,243,.03);
}
.co-paypal-desc {
  margin: 0 0 1rem;
  font-size: .85rem;
  color: var(--nx-ink-3);
  line-height: 1.55;
}
.co-paypal-btn-wrap { max-width: 420px; }

.co-paypal-status {
  margin-top: .75rem;
  padding: .6rem .85rem;
  border-radius: 8px;
  font-size: .84rem;
  line-height: 1.5;
}
.co-paypal-status--info  { background: rgba(99,102,241,.1);  color: #818cf8; border: 1px solid rgba(99,102,241,.25); }
.co-paypal-status--error { background: rgba(239,68,68,.08);  color: #f87171; border: 1px solid rgba(239,68,68,.25); }
.co-paypal-status--ok    { background: rgba(34,197,94,.08);  color: #4ade80; border: 1px solid rgba(34,197,94,.25); }
[data-theme="light"] .co-paypal-status--info  { color: #4f46e5; }
[data-theme="light"] .co-paypal-status--error { color: #dc2626; }
[data-theme="light"] .co-paypal-status--ok    { color: #16a34a; }

.co-paypal-divider {
  margin-top: 1.25rem;
  text-align: center;
  position: relative;
  font-size: .78rem;
  color: var(--nx-ink-3);
}
.co-paypal-divider::before,
.co-paypal-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: var(--nx-rule-hard);
}
.co-paypal-divider::before { left: 0; }
.co-paypal-divider::after  { right: 0; }

/* ── PayPal diagnostics button ── */
.co-pp-diag-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .6rem;
  padding: .35rem .8rem;
  font-size: .78rem;
  cursor: pointer;
  background: var(--nx-detail-bg);
  border: 1px solid var(--nx-rule-hard);
  border-radius: 6px;
  color: var(--nx-ink-3);
  font-family: inherit;
  transition: color .15s, border-color .15s;
}
.co-pp-diag-btn:hover { color: var(--nx-ink); border-color: var(--nx-ink-3); }
.co-pp-diag-report {
  font-size: .78rem;
  line-height: 1.8;
  font-family: monospace;
}

/* ── Checkout: section-title inline icon ── */
.co-section-title svg { vertical-align: middle; margin-right: .3rem; flex-shrink: 0; }

/* ── Checkout: plan-meta inline icon ── */
.co-plan-meta svg { vertical-align: middle; margin-right: .2rem; }

/* ── Checkout: pending inline icon ── */
.co-pending svg { vertical-align: middle; margin-right: .25rem; }

/* ── Checkout: optional/recommended label suffix ── */
.co-label-suffix {
  font-weight: 400;
  font-size: .78em;
  color: var(--nx-ink-3);
}

/* ── Checkout: ss-status div ── */
.co-ss-status { font-size: .78rem; margin-top: .35rem; }
.co-ss-status.ok  { color: var(--nx-green); }
.co-ss-status.err { color: var(--nx-red); }

/* ── Checkout: screenshot no-imgbb fallback hint ── */
.co-hint-box {
  padding: .55rem .7rem;
  background: var(--nx-detail-bg);
  border-radius: 6px;
  border: 1px solid var(--nx-rule-hard);
  font-size: .8rem;
  color: var(--nx-ink-3);
}

/* ── Checkout: type icon in detail panel (no emoji fallback) ── */
.co-type-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-type-icon svg { width: 22px; height: 22px; }

/* ── Checkout: no method error flash without extra margin ── */
.co-flash.co-flash--inline { margin: 0; }

/* ── Checkout: spinning animation for submit & upload ── */
.co-spin { animation: co-spin .7s linear infinite; }


/* ── pf-info-bar upgrade link (distinct from pf-info-bar a generic) ── */
.pf-info-bar-upgrade {
  color: inherit;
  margin-left: .3rem;
  font-weight: 600;
  text-decoration: none;
}
.pf-info-bar-upgrade:hover { text-decoration: underline; }

/* ── co-detail-icon-img (JS-injected logo inside detail icon) ── */
.co-detail-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

/* ── PayPal error hint list ── */
.co-pp-error-list {
  margin: .4rem 0 0 1.1rem;
  padding: 0;
  font-size: .78rem;
  line-height: 1.7;
}

/* ── co-flash--inline (no external margin) ── */
.co-flash.co-flash--inline { margin: 0; }

/* ════════════════════════════════════════════════════════════
   PAYMENT STATUS PAGE  (payment_status.php)
   Classes: .ps-section-header, .ps-section-icon, .ps-section-badge,
            .paypal-icon, .manual-icon, .paypal-card, .ps-paypal-auto-tag
════════════════════════════════════════════════════════════ */

/* ── Section headers ─────────────────────────── */
.ps-section-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.5rem 0 .75rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--nx-rule, rgba(255,255,255,.08));
}
.ps-section-header h2 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--nx-ink);
  margin: 0 0 .1rem;
}
.ps-section-sub {
  font-size: .75rem;
  color: var(--nx-ink-3);
}
.ps-section-icon {
  width: 34px;
  height: 34px;
  border-radius: .6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.paypal-icon {
  background: rgba(0,156,222,.12);
  color: #009cde;
  border: 1px solid rgba(0,156,222,.25);
}
.manual-icon {
  background: rgba(139,92,246,.12);
  color: #8b5cf6;
  border: 1px solid rgba(139,92,246,.25);
}
[data-theme="light"] .paypal-icon { background: rgba(0,156,222,.08); }
[data-theme="light"] .manual-icon { background: rgba(139,92,246,.08); }

/* ── Section count badge ─────────────────────── */
.ps-section-badge {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 999px;
}
.ps-section-badge.paypal {
  background: rgba(0,156,222,.15);
  color: #009cde;
}
.ps-section-badge.manual {
  background: rgba(139,92,246,.15);
  color: #8b5cf6;
}

/* ── PayPal card extras ──────────────────────── */
.paypal-card {
  border-color: rgba(0,156,222,.22) !important;
}
.ps-paypal-auto-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .71rem;
  font-weight: 600;
  color: #22c55e;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.22);
  border-radius: 999px;
  padding: .2rem .65rem;
  margin-bottom: .75rem;
}


/* ════════════════════════════════════════════════════════════
   PAYPAL SUCCESS PAGE  (paypal_success.php)
   Classes: .pp-success-wrap, .pp-success-card, .pp-check-ring,
            .pp-detail-grid, .pp-detail-row, .pp-detail-label,
            .pp-detail-val, .pp-plan-badge, .pp-amount-highlight,
            .pp-countdown-wrap, .pp-countdown-num, .pp-actions,
            .pp-btn-primary, .pp-btn-ghost, .pp-progress-bar,
            .pp-progress-fill, .pp-success-title, .pp-success-sub
════════════════════════════════════════════════════════════ */

.pp-success-wrap {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.pp-success-card {
  background: var(--nx-card-bg, var(--nx-detail-bg));
  border: 1px solid var(--nx-rule-hard, rgba(255,255,255,.08));
  border-radius: 1.25rem;
  padding: 2.5rem 2rem;
  max-width: 520px;
  width: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pp-success-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(34,197,94,.1) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Animated checkmark ring ─────────────────── */
.pp-check-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(34,197,94,.12);
  border: 2px solid rgba(34,197,94,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  animation: pp-pop .5s cubic-bezier(.36,1.6,.48,1) both;
}
@keyframes pp-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.pp-check-ring svg {
  animation: pp-draw .6s .3s ease both;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
@keyframes pp-draw { to { stroke-dashoffset: 0; } }

.pp-success-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nx-ink);
  margin: 0 0 .35rem;
}
.pp-success-sub {
  font-size: .875rem;
  color: var(--nx-ink-3);
  margin: 0 0 2rem;
}

/* ── Transaction detail grid ─────────────────── */
.pp-detail-grid {
  background: var(--nx-detail-bg, rgba(255,255,255,.04));
  border: 1px solid var(--nx-rule-hard, rgba(255,255,255,.07));
  border-radius: .875rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
  text-align: left;
}
.pp-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .7rem 1.1rem;
  gap: .75rem;
}
.pp-detail-row + .pp-detail-row {
  border-top: 1px solid var(--nx-rule-hard, rgba(255,255,255,.07));
}
.pp-detail-label {
  font-size: .78rem;
  color: var(--nx-ink-3);
  white-space: nowrap;
}
.pp-detail-val {
  font-size: .85rem;
  color: var(--nx-ink);
  font-weight: 500;
  word-break: break-all;
  text-align: right;
}
.pp-detail-val.mono {
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: .78rem;
}
.pp-plan-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 999px;
  color: #fff;
  margin-right: .35rem;
  vertical-align: middle;
}
.pp-amount-highlight {
  color: var(--nx-green, #22c55e);
  font-weight: 700;
  font-size: .95rem;
}

/* ── Countdown ───────────────────────────────── */
.pp-countdown-wrap {
  font-size: .82rem;
  color: var(--nx-ink-3);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.pp-countdown-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(34,197,94,.15);
  border: 1px solid rgba(34,197,94,.3);
  font-weight: 700;
  color: var(--nx-green, #22c55e);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

/* ── Action buttons ──────────────────────────── */
.pp-actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.pp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1.4rem;
  border-radius: .6rem;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
  transition: opacity .15s;
}
.pp-btn-primary:hover { opacity: .88; color: #fff; }
.pp-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1.2rem;
  border-radius: .6rem;
  border: 1px solid var(--nx-rule-hard, rgba(255,255,255,.12));
  color: var(--nx-ink-3);
  font-size: .875rem;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.pp-btn-ghost:hover {
  background: rgba(255,255,255,.06);
  color: var(--nx-ink);
}
[data-theme="light"] .pp-btn-ghost:hover { background: rgba(0,0,0,.04); }

/* ── Progress bar countdown ──────────────────── */
.pp-progress-bar {
  height: 3px;
  border-radius: 9999px;
  background: var(--nx-rule-hard, rgba(255,255,255,.08));
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.pp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 9999px;
  width: 100%;
  transform-origin: left;
  animation: pp-shrink 5s linear forwards;
}
@keyframes pp-shrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ============================================================
   CHECKOUT PAGE — Missing Classes
   ============================================================ */

/* ── Utility ─────────────────────────────────────────────── */
.co-hidden { display: none !important; }

/* ── Section title variant ───────────────────────────────── */
.co-section-title--step2 {
  padding-top: 1.25rem;
  border-top: 1px solid var(--nx-rule, rgba(255,255,255,.08));
  margin-top: 1.5rem;
}
[data-theme="light"] .co-section-title--step2 {
  border-color: rgba(0,0,0,.08);
}

/* ── Automatic payment section (PayPal + Crypto tabs) ────── */
.co-auto-section {
  margin-bottom: 1.5rem;
}
.co-auto-section-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}
.co-auto-section-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--nx-ink-3);
}
.co-auto-instant-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .65rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: rgba(34,197,94,.15);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,.25);
}

/* ── Tabs ────────────────────────────────────────────────── */
.co-auto-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: .85rem;
}
.co-auto-tab {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem .9rem;
  border-radius: .65rem;
  border: 1.5px solid var(--nx-rule-hard, rgba(255,255,255,.1));
  background: var(--nx-card-bg, rgba(255,255,255,.04));
  cursor: pointer;
  transition: border-color .15s, background .15s;
  text-align: left;
}
.co-auto-tab:hover {
  border-color: var(--nx-accent, #6366f1);
  background: rgba(99,102,241,.06);
}
.co-auto-tab.active {
  border-color: var(--nx-accent, #6366f1);
  background: rgba(99,102,241,.1);
}
[data-theme="light"] .co-auto-tab {
  background: #fff;
  border-color: #e2e8f0;
}
[data-theme="light"] .co-auto-tab:hover,
[data-theme="light"] .co-auto-tab.active {
  border-color: var(--nx-accent, #6366f1);
  background: rgba(99,102,241,.06);
}
.co-auto-tab-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .45rem;
  background: rgba(99,102,241,.12);
}
.co-auto-tab-icon img,
.co-auto-tab-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.co-auto-tab-text {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  flex: 1;
  min-width: 0;
}
.co-auto-tab-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--nx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.co-auto-tab-sub {
  font-size: .7rem;
  color: var(--nx-ink-3);
}
.co-auto-tab-badge {
  font-size: .6rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: rgba(34,197,94,.15);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,.25);
  white-space: nowrap;
}

/* ── Tab panels ──────────────────────────────────────────── */
.co-auto-panel {
  display: none;
}
.co-auto-panel.active {
  display: block;
}

/* ── Amount row ──────────────────────────────────────────── */
.co-auto-amount-row {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin-bottom: .85rem;
}
.co-auto-amount-label {
  font-size: .78rem;
  color: var(--nx-ink-3);
}
.co-auto-amount-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--nx-ink);
}

/* ── Payment status message ──────────────────────────────── */
.co-pay-status {
  padding: .65rem .9rem;
  border-radius: .6rem;
  font-size: .82rem;
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid transparent;
}
.co-pay-status.info {
  background: rgba(99,102,241,.1);
  border-color: rgba(99,102,241,.25);
  color: var(--nx-ink-2);
}
.co-pay-status.ok {
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.25);
  color: #22c55e;
}
.co-pay-status.err {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.25);
  color: #ef4444;
}

/* ── Polling indicator ───────────────────────────────────── */
.co-poll {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: var(--nx-ink-3);
  margin-top: .5rem;
}

/* ── NowPayments UI ──────────────────────────────────────── */
.co-np-pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  padding: .7rem 1.25rem;
  border-radius: .65rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity .15s;
}
.co-np-pay-btn:hover { opacity: .88; }
.co-np-pay-btn:disabled { opacity: .5; cursor: not-allowed; }

.co-np-invoice-ok {
  padding: .65rem .9rem;
  border-radius: .6rem;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.25);
  color: #22c55e;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .45rem;
}

.co-np-addr-box {
  background: var(--nx-card-bg, rgba(255,255,255,.04));
  border: 1px solid var(--nx-rule-hard, rgba(255,255,255,.1));
  border-radius: .7rem;
  padding: .85rem 1rem;
  margin-bottom: .85rem;
}
[data-theme="light"] .co-np-addr-box {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.co-np-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  font-size: .82rem;
}
.co-np-row + .co-np-row {
  border-top: 1px solid var(--nx-rule, rgba(255,255,255,.06));
}
[data-theme="light"] .co-np-row + .co-np-row {
  border-color: rgba(0,0,0,.06);
}
.co-np-lbl {
  color: var(--nx-ink-3);
  font-weight: 500;
  white-space: nowrap;
}
.co-np-val {
  font-weight: 600;
  color: var(--nx-ink);
  text-align: right;
  word-break: break-all;
}

.co-np-addr-row {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--nx-rule, rgba(255,255,255,.08));
}
[data-theme="light"] .co-np-addr-row {
  border-color: rgba(0,0,0,.08);
}
.co-np-addr-group {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .3rem;
}
.co-np-addr-val {
  flex: 1;
  font-size: .78rem;
  font-family: monospace;
  word-break: break-all;
  color: var(--nx-ink);
  background: rgba(99,102,241,.07);
  padding: .35rem .6rem;
  border-radius: .4rem;
  border: 1px solid rgba(99,102,241,.2);
}

.co-np-warn {
  font-size: .75rem;
  color: var(--nx-ink-3);
  padding: .5rem .75rem;
  border-radius: .5rem;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.2);
  margin-top: .65rem;
  display: flex;
  align-items: flex-start;
  gap: .4rem;
}

/* ── Copy address row ────────────────────────────────────── */
.co-copy-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.co-copy-addr {
  flex: 1;
  font-size: .78rem;
  font-family: monospace;
  word-break: break-all;
  color: var(--nx-ink);
}
.co-copy-btn {
  flex-shrink: 0;
  padding: .3rem .7rem;
  border-radius: .45rem;
  border: 1px solid var(--nx-rule-hard, rgba(255,255,255,.12));
  background: transparent;
  color: var(--nx-ink-3);
  font-size: .75rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.co-copy-btn:hover {
  background: rgba(255,255,255,.07);
  color: var(--nx-ink);
}
[data-theme="light"] .co-copy-btn:hover { background: rgba(0,0,0,.04); }

/* ── QR block ────────────────────────────────────────────── */
.co-qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin: .75rem 0;
}
.co-qr-img {
  width: 9rem;
  height: 9rem;
  border-radius: .6rem;
  background: #fff;
  padding: .35rem;
  display: block;
}
.co-qr-label {
  font-size: .72rem;
  color: var(--nx-ink-3);
}
.co-qr-download {
  font-size: .72rem;
  color: var(--nx-accent, #6366f1);
  text-decoration: underline;
  cursor: pointer;
}

/* ── Currency picker ─────────────────────────────────────── */
.co-cur-section {
  margin-bottom: 1rem;
}
.co-cur-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--nx-ink-3);
  margin-bottom: .5rem;
}
.co-cur-popular {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .65rem;
}
.co-cur-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  border: 1.5px solid var(--nx-rule-hard, rgba(255,255,255,.12));
  background: var(--nx-card-bg, rgba(255,255,255,.04));
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  color: var(--nx-ink-2);
}
.co-cur-chip:hover {
  border-color: var(--nx-accent, #6366f1);
  background: rgba(99,102,241,.08);
}
.co-cur-chip.sel {
  border-color: var(--nx-accent, #6366f1);
  background: rgba(99,102,241,.15);
  color: var(--nx-ink);
}
[data-theme="light"] .co-cur-chip {
  background: #fff;
  border-color: #d1d5db;
}
[data-theme="light"] .co-cur-chip.sel {
  background: rgba(99,102,241,.1);
  border-color: var(--nx-accent, #6366f1);
}
.co-cur-chip-icon {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  object-fit: cover;
}
.co-cur-chip-net {
  font-size: .65rem;
  color: var(--nx-ink-3);
  font-weight: 500;
}

.co-cur-search-wrap {
  position: relative;
  margin-bottom: .4rem;
}
.co-cur-search {
  width: 100%;
  padding: .5rem .85rem .5rem 2rem;
  border-radius: .55rem;
  border: 1.5px solid var(--nx-rule-hard, rgba(255,255,255,.1));
  background: var(--nx-input-bg, rgba(255,255,255,.06));
  color: var(--nx-ink);
  font-size: .82rem;
  outline: none;
  transition: border-color .15s;
}
.co-cur-search:focus {
  border-color: var(--nx-accent, #6366f1);
}
[data-theme="light"] .co-cur-search {
  background: #fff;
  border-color: #d1d5db;
  color: #0f172a;
}
.co-cur-search-ico {
  position: absolute;
  left: .6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nx-ink-3);
  pointer-events: none;
  width: 1rem;
  height: 1rem;
}

.co-cur-dropdown {
  position: absolute;
  z-index: 200;
  width: 100%;
  max-height: 12rem;
  overflow-y: auto;
  border-radius: .6rem;
  border: 1.5px solid var(--nx-rule-hard, rgba(255,255,255,.12));
  background: var(--nx-surface, #1e1e2e);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  margin-top: .2rem;
}
[data-theme="light"] .co-cur-dropdown {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.co-cur-opt {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .85rem;
  cursor: pointer;
  transition: background .12s;
  font-size: .82rem;
}
.co-cur-opt:hover {
  background: rgba(99,102,241,.1);
}
[data-theme="light"] .co-cur-opt:hover {
  background: rgba(99,102,241,.06);
}
.co-cur-opt-code {
  font-weight: 700;
  color: var(--nx-ink);
  white-space: nowrap;
}
.co-cur-opt-name {
  color: var(--nx-ink-3);
  font-size: .75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.co-cur-opt--empty {
  padding: .75rem .85rem;
  color: var(--nx-ink-3);
  font-size: .8rem;
  text-align: center;
  cursor: default;
}
.co-cur-sel-display {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .75rem;
  border-radius: .55rem;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.25);
  font-size: .82rem;
  font-weight: 600;
  color: var(--nx-ink);
  margin-top: .5rem;
}

/* ── Or divider ──────────────────────────────────────────── */
.co-or-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
  font-size: .75rem;
  color: var(--nx-ink-3);
}
.co-or-divider::before,
.co-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nx-rule, rgba(255,255,255,.08));
}
[data-theme="light"] .co-or-divider::before,
[data-theme="light"] .co-or-divider::after {
  background: rgba(0,0,0,.08);
}

/* ── Manual payment section ──────────────────────────────── */
.co-manual-section {
  margin-top: .5rem;
}
.co-manual-head {
  margin-bottom: .9rem;
}
.co-manual-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--nx-ink);
  margin-bottom: .2rem;
}
.co-manual-sub {
  font-size: .78rem;
  color: var(--nx-ink-3);
}

/* ── Screenshot upload small hint ───────────────────────── */
.co-ss-hint-small {
  font-size: .7rem;
  color: var(--nx-ink-3);
  margin-top: .3rem;
}
.co-ss-preview-name {
  font-size: .78rem;
  font-weight: 500;
  color: var(--nx-ink);
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}


/* ============================================================
   PAYMENT STATUS PAGE — Missing Classes
   ============================================================ */

/* ── Crypto section icon / card ──────────────────────────── */
.crypto-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: .45rem;
  background: rgba(139,92,246,.15);
  color: #8b5cf6;
  flex-shrink: 0;
}
.crypto-card {
  border-left: 3px solid #8b5cf6;
}

/* ── Auto-processing tags ────────────────────────────────── */
.ps-paypal-auto-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .68rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: rgba(59,130,246,.1);
  color: #3b82f6;
  border: 1px solid rgba(59,130,246,.25);
  vertical-align: middle;
}
.ps-crypto-auto-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .68rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: rgba(139,92,246,.1);
  color: #8b5cf6;
  border: 1px solid rgba(139,92,246,.25);
  vertical-align: middle;
}

/* ── Crypto currency tag ─────────────────────────────────── */
.ps-crypto-currency-tag {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .68rem;
  font-weight: 700;
  font-family: monospace;
  padding: .12rem .45rem;
  border-radius: .35rem;
  background: rgba(139,92,246,.1);
  color: #8b5cf6;
  border: 1px solid rgba(139,92,246,.2);
  vertical-align: middle;
}

/* ── Crypto pending note ─────────────────────────────────── */
.ps-crypto-pending-note {
  margin-top: .65rem;
  padding: .55rem .8rem;
  border-radius: .55rem;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.2);
  font-size: .78rem;
  color: var(--nx-ink-2);
  display: flex;
  align-items: flex-start;
  gap: .45rem;
}
.ps-crypto-pending-note svg {
  flex-shrink: 0;
  margin-top: .05rem;
  color: #f59e0b;
}

/* ── Detail icon inline ──────────────────────────────────── */
.ps-detail-icon-inline {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  vertical-align: middle;
}
.ps-detail-icon-inline svg {
  width: .9rem;
  height: .9rem;
  flex-shrink: 0;
  color: var(--nx-ink-3);
}

/* ════════════════════════════════════════════════════
   WEEKLY SCHEDULE SECTION
   ════════════════════════════════════════════════════ */
.wsch-section { margin: 1rem 0 4rem; }
.home-main-stack > .wsch-section { margin-top: 2.5rem; }
.wsch-mode-tabs {
  display:inline-flex;
  gap:.25rem;
  margin-bottom:1.4rem;
  padding:.25rem;
  border-radius:.55rem;
  background:rgba(148,163,184,.18);
}
.wsch-mode-btn {
  border:none;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:.78rem;
  font-weight:700;
  color:#9aa5b8;
  background:transparent;
  border-radius:.45rem;
  padding:.55rem .8rem;
  cursor:pointer;
}
.wsch-mode-btn.is-active { background:var(--wsch-accent, #14b8a6); color:#fff; }
.wsch-mode-panel { display:none; }
.wsch-mode-panel.is-active { display:block; }

/* Heading row */
.wsch-head  { display:flex; align-items:center; gap:.5rem; margin-bottom:1.1rem; }
.wsch-title { font-size:1.5rem; font-weight:900; color:var(--text,#1a1a2e); margin:0; letter-spacing:-.02em; }

/* Info icon + tooltip */
.wsch-info {
  color:#b0b8cc; line-height:0;
  position:relative; cursor:pointer;
  display:inline-flex; align-items:center;
}
.wsch-info svg { transition:color .15s; }
.wsch-info:hover svg,
.wsch-info.is-open svg { color:var(--wsch-accent, #14b8a6); }
.wsch-info-tooltip {
  display:none;
  position:absolute;
  top:calc(100% + .6rem);
  left:50%; transform:translateX(-50%);
  background:#1e293b; color:#e2e8f0;
  font-size:.78rem; font-weight:400; line-height:1.55;
  padding:.75rem 1rem; border-radius:.6rem;
  width:260px; box-shadow:0 8px 24px rgba(0,0,0,.18);
  z-index:99; text-align:left; pointer-events:none;
}
.wsch-info-tooltip::before {
  content:''; position:absolute;
  bottom:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-bottom-color:#1e293b;
}
.wsch-info.is-open .wsch-info-tooltip { display:block; }

/* Day selector */
.wsch-days-wrap {
  background:linear-gradient(135deg, rgba(148,163,184,.14), rgba(15,23,42,.12));
  border:1px solid rgba(148,163,184,.22);
  border-radius:1rem;
  padding:.56rem .48rem; margin-bottom:1.3rem;
}
.wsch-days-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem; }
.wsch-day-btn {
  display:flex; flex-direction:column; align-items:center;
  gap:.1rem; padding:.55rem .1rem; border-radius:.65rem;
  border:none; background:transparent; cursor:pointer;
  transition:.15s; color:#9aa5b8; font-family:inherit;
}
.wsch-day-name { font-size:.78rem; font-weight:600; line-height:1.2; }
.wsch-day-num  { font-size:.72rem; font-weight:500; line-height:1.2; }
.wsch-day-btn.is-wed .wsch-day-name,
.wsch-day-btn.is-wed .wsch-day-num { color:var(--wsch-accent, #14b8a6); }
.wsch-day-btn.is-today {
  background:var(--wsch-accent, #14b8a6); color:#fff;
  box-shadow:0 2px 8px color-mix(in srgb, var(--wsch-accent, #14b8a6) 48%, transparent);
}
.wsch-day-btn.is-today .wsch-day-name,
.wsch-day-btn.is-today .wsch-day-num { color:#fff; }
.wsch-day-btn:hover:not(.is-today) { background:color-mix(in srgb, var(--wsch-accent, #14b8a6) 14%, transparent); }
.wsch-day-btn:hover:not(.is-today) .wsch-day-name,
.wsch-day-btn:hover:not(.is-today) .wsch-day-num { color:var(--wsch-accent, #14b8a6); }

/* Day panels */
.wsch-day-panel           { display:none; }
.wsch-day-panel.is-active { display:block; }
.wsch-empty {
  border: 1px dashed rgba(148,163,184,.32);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  display: grid;
  gap: .4rem;
  justify-items: center;
  color:#b0b8cc;
}
.wsch-empty i { width: 17px; height: 17px; color: #2dd4bf; }
.wsch-empty h3 { margin: 0; font-size: .96rem; color: var(--text); }
.wsch-empty p { margin: 0; font-size: .82rem; }

/* ── Outer scroll: groups scroll horizontally ── */
.wsch-scroll-wrap {
  display:flex;
  gap:0;                        /* groups butt up — lines connect visually */
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:.5rem;
  align-items:flex-start;
  position:relative;
}
.wsch-scroll-wrap::-webkit-scrollbar { display:none; }

/* ── Time group ── */
.wsch-time-group {
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:0;
}

/* Header row: ───── 07:30 ───── */
.wsch-grp-header {
  display:flex;
  align-items:center;
  height:32px;               /* fixed height so all groups align */
  margin-bottom:0;
}
.wsch-grp-line {
  flex:1; height:1.5px;
  background:var(--wsch-accent, #14b8a6);
  opacity:.25;
  min-width:8px;
}
.wsch-tl-bubble {
  flex-shrink:0;
  background:rgba(15,23,42,.88);
  box-shadow:0 8px 18px rgba(2,6,23,.22);
  border: 1px solid color-mix(in srgb, var(--wsch-accent, #14b8a6) 45%, transparent);
  border-radius:.5rem;
  padding:.28rem .75rem;
  font-size:.78rem; font-weight:700; color:color-mix(in srgb, var(--wsch-accent, #14b8a6) 75%, #ffffff);
  white-space:nowrap;
  margin:0 .35rem;
  line-height:1.4;
}

/* ── Dots row: one dot per card, each dot centered over its card ── */
.wsch-grp-dots {
  display:flex;
  gap:.65rem;
  padding:0;
  margin-bottom:0;
}
.wsch-grp-dot-col {
  width:var(--wsch-card-w, 148px);
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.wsch-tl-connector {
  width:1.5px; height:18px;
  background:linear-gradient(to bottom,color-mix(in srgb, var(--wsch-accent, #14b8a6) 30%, transparent),var(--wsch-accent, #14b8a6));
}
.wsch-tl-dot {
  width:11px; height:11px; border-radius:50%;
  background:var(--wsch-accent, #14b8a6);
  border:2.5px solid #fff;
  box-shadow:0 0 0 2px var(--wsch-accent, #14b8a6);
  margin-bottom:.55rem;
}

/* ── Cards row ── */
.wsch-grp-cards {
  display:flex;
  gap:.65rem;
}

/* ── Card ── */
:root { --wsch-card-w: 148px; --wsch-card-h: 210px; }
@media (min-width: 1024px) {
  :root {
    --wsch-card-w: var(--home-card-unified-w, 170px);
    --wsch-card-h: var(--home-card-unified-h, 255px);
  }
}

.wsch-card {
  flex-shrink:0;
  width:var(--wsch-card-w);
  text-decoration:none; color:inherit; display:block;
}
.wsch-card:hover .wsch-card-title { color:var(--wsch-accent, #14b8a6); }

.wsch-card-img {
  position:relative;
  width:var(--wsch-card-w);
  height:var(--wsch-card-h);
  border-radius:.75rem; overflow:hidden;
  border: 1px solid rgba(148,163,184,.26);
  background:#e0e4ec;
}
.wsch-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.wsch-card-noimg   { width:100%; height:100%; background:#d0d4e0; }

/* Episode badge — top-left on Weekly Schedule cards */
.wsch-card-img .wsch-ep-badge {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 2;
  pointer-events: none;
}

/* Tags — bottom left */
.wsch-tags {
  position:absolute; bottom:.5rem; left:.5rem;
  display:flex; gap:.28rem; flex-wrap:wrap;
}

/* Card title */
.wsch-card-title {
  font-size:.8rem; font-weight:600; margin:.45rem 0 0;
  line-height:1.35; color:var(--text,#1a1a2e);
  transition:color .15s;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.frls-meta {
  margin:.2rem 0 0;
  font-size:.72rem;
  color:#8ea0be;
  line-height:1.25;
}
.frls-season { color:var(--wsch-accent, #14b8a6); font-weight:600; }
.frls-card .wsch-card-title { margin-top:.55rem; }
.frls-date-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0 0 1rem;
}
.frls-date-btn {
  border: 1px solid rgba(148,163,184,.35);
  background: transparent;
  color: var(--text-secondary);
  border-radius: .6rem;
  padding: .44rem .7rem;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  transition: .2s ease;
}
.frls-date-btn:hover {
  border-color: var(--wsch-accent, #14b8a6);
  color: var(--wsch-accent, #14b8a6);
}
.frls-date-btn.is-active {
  color: #fff;
  border-color: var(--wsch-accent, #14b8a6);
  background: var(--wsch-accent, #14b8a6);
}
.frls-date-panel { display: none; }
.frls-date-panel.is-active { display: block; }
.wsch-day-panel.is-entering,
.frls-date-panel.is-entering {
  animation: wschPanelEnter .4s ease both;
}
@keyframes wschPanelEnter {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile tweaks */
@media(max-width:420px){
  :root { --wsch-card-w:132px; --wsch-card-h:188px; }
  .wsch-day-name  { font-size:.66rem; }
  .wsch-day-num   { font-size:.6rem; }
  .wsch-tl-bubble { font-size:.72rem; padding:.22rem .55rem; }
  .wsch-days-wrap { padding: .5rem .35rem; }
}

/* ── Weekly Schedule: Light / Dark theme overrides ── */

/* Day selector strip */
[data-theme="dark"] .wsch-days-wrap {
  background: rgba(255,255,255,.06);
}
[data-theme="light"] .wsch-days-wrap {
  background: #f0f4f8;
}

/* Inactive day buttons */
[data-theme="dark"] .wsch-day-btn {
  color: #6b7a99;
}
[data-theme="dark"] .wsch-day-btn:hover:not(.is-today) {
  background: rgba(20,184,166,.15);
}

/* Wed highlight in dark mode */
[data-theme="dark"] .wsch-day-btn.is-wed .wsch-day-name,
[data-theme="dark"] .wsch-day-btn.is-wed .wsch-day-num {
  color: var(--wsch-accent, #14b8a6);
}

/* Timeline bubble */
[data-theme="dark"] .wsch-tl-bubble {
  background: #1e293b;
  color: var(--wsch-accent, #14b8a6);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
[data-theme="light"] .wsch-tl-bubble {
  background: #ffffff;
  color: color-mix(in srgb, var(--wsch-accent, #14b8a6) 75%, #0f172a);
  border-color: color-mix(in srgb, var(--wsch-accent, #14b8a6) 35%, transparent);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* Timeline dot border — match background so it "pops" */
[data-theme="dark"] .wsch-tl-dot {
  border-color: #0f172a;
}
[data-theme="light"] .wsch-tl-dot {
  border-color: #fff;
}

/* Card image placeholder / skeleton */
[data-theme="dark"] .wsch-card-img {
  background: #1e293b;
}
[data-theme="dark"] .wsch-card-noimg {
  background: #263045;
}
[data-theme="light"] .wsch-card-img {
  background: #e0e4ec;
}
[data-theme="light"] .wsch-card-noimg {
  background: #d0d4e0;
}

/* Card title */
[data-theme="dark"] .wsch-card-title {
  color: #e2e8f0;
}
[data-theme="light"] .wsch-card-title {
  color: #1a1a2e;
}

/* Empty state text */
[data-theme="dark"] .wsch-empty {
  color: #6b7280;
}

/* Section title */
[data-theme="dark"] .wsch-title {
  color: #e2e8f0;
}
[data-theme="light"] .wsch-title {
  color: #1a1a2e;
}

/* Info tooltip — already dark bg, fine in both modes */
[data-theme="light"] .wsch-info-tooltip {
  background: #1e293b;
  color: #e2e8f0;
}

/* Timeline connector line opacity */
[data-theme="dark"] .wsch-grp-line {
  opacity: .18;
}

/* ============================================================
   CHECKOUT PAGE — co-* / nph-*
   ============================================================ */

#npHistoryCard { margin-top: 16px; }

.co-nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.co-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pl-text-muted);
  background: var(--pl-card-bg);
  border: 1px solid var(--pl-border);
  border-radius: 8px;
  padding: 6px 12px;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.co-nav-link:hover {
  color: var(--pl-text);
  border-color: var(--pl-accent);
  background: rgba(99,102,241,.07);
}

.co-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--pl-text-muted);
  text-decoration: none;
  font-size: 12px;
}
.co-footer-link:hover { color: var(--pl-indigo-text); }

/* NowPayments history card */
.nph-card {
  background: var(--pl-card-bg);
  border: 1px solid var(--pl-accent);
  border-radius: 13px;
  overflow: hidden;
}
.nph-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--pl-border);
  gap: 10px;
}
.nph-header-left { display: flex; align-items: center; gap: 10px; }
.nph-icon {
  width: 34px; height: 34px;
  background: rgba(167,139,250,.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nph-title { font-size: 13px; font-weight: 700; color: var(--pl-text); }
.nph-sub   { font-size: 11.5px; color: var(--pl-text-muted); margin-top: 2px; }
.nph-badge {
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0;
}
.nph-badge.pending    { background: var(--pl-badge-bg);    color: var(--pl-badge-color); }
.nph-badge.confirming { background: rgba(99,102,241,.15);  color: var(--pl-indigo-text); }
.nph-badge.confirmed  { background: var(--pl-success-bg);  color: var(--pl-success-color); }
.nph-badge.failed     { background: var(--pl-error-bg);    color: var(--pl-error-color); }
.nph-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  padding: 14px 16px;
}
@media (max-width: 400px) { .nph-grid { grid-template-columns: 1fr; } }
.nph-lbl {
  font-size: 10.5px; font-weight: 600;
  color: var(--pl-text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 3px;
}
.nph-val       { font-size: 13px; color: var(--pl-text); word-break: break-all; }
.nph-val.mono  { font-family: 'Courier New', monospace; font-size: 12px; color: var(--pl-mono-color); }
.nph-status-row {
  margin: 0 16px 14px;
  font-size: 12px;
  color: var(--pl-text-muted);
  display: flex; align-items: center; gap: 6px;
}
.nph-actions {
  display: flex; gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--pl-border);
  flex-wrap: wrap;
}
.nph-lookup-btn, .nph-history-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  padding: 7px 13px; border-radius: 8px;
  text-decoration: none;
  transition: background .15s;
}
.nph-lookup-btn {
  background: rgba(99,102,241,.15);
  color: var(--pl-indigo-text);
  border: 1px solid rgba(99,102,241,.25);
}
.nph-lookup-btn:hover { background: rgba(99,102,241,.25); }
.nph-history-btn {
  background: var(--pl-history-btn-bg);
  color: var(--pl-text-muted);
  border: 1px solid var(--pl-border);
}
.nph-history-btn:hover { background: var(--pl-input-bg); color: var(--pl-text); }


/* ============================================================
   PAYMENT LOOKUP PAGE — pl-*
   ============================================================ */

.pl-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}
.pl-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--pl-text-muted);
  text-decoration: none;
  margin-bottom: 24px;
  transition: color .2s;
}
.pl-back:hover { color: var(--pl-text); }

.pl-head { margin-bottom: 28px; }
.pl-head h1 { font-size: 22px; font-weight: 700; margin: 0 0 6px; color: var(--pl-text); }
.pl-head p  { font-size: 13px; color: var(--pl-text-muted); margin: 0; line-height: 1.5; }

/* Flash */
.pl-flash {
  display: flex; align-items: flex-start;
  gap: 9px; padding: 12px 15px;
  border-radius: 10px; font-size: 13px;
  margin-bottom: 18px; line-height: 1.5;
}
.pl-flash.ok  { background: var(--pl-success-bg); color: var(--pl-success-color); border: 1px solid var(--pl-success-border); }
.pl-flash.err { background: var(--pl-error-bg);   color: var(--pl-error-color);   border: 1px solid var(--pl-error-border); }
.pl-flash.inf { background: rgba(99,102,241,.10);  color: var(--pl-indigo-text);   border: 1px solid rgba(99,102,241,.2); }

/* Search card */
.pl-search-card {
  background: var(--pl-card-bg);
  border: 1px solid var(--pl-border);
  border-radius: 14px;
  padding: 22px 20px;
  margin-bottom: 24px;
}
.pl-search-label {
  font-size: 12px; font-weight: 600;
  color: var(--pl-text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 10px;
}
.pl-search-row { display: flex; gap: 10px; align-items: stretch; }
.pl-search-input {
  flex: 1;
  background: var(--pl-input-bg);
  border: 1px solid var(--pl-input-border);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 13px;
  color: var(--pl-text);
  font-family: 'Courier New', monospace;
  outline: none;
  transition: border-color .2s;
}
.pl-search-input:focus       { border-color: var(--pl-accent); }
.pl-search-input::placeholder{ color: var(--pl-text-muted); font-family: inherit; }
.pl-search-btn {
  background: var(--pl-accent);
  color: #fff; border: none;
  border-radius: 9px;
  padding: 11px 20px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
  transition: background .2s, transform .1s;
}
.pl-search-btn:hover  { background: var(--pl-accent-hover); }
.pl-search-btn:active { transform: scale(.97); }
.pl-search-hint { font-size: 11.5px; color: var(--pl-text-muted); margin-top: 9px; line-height: 1.5; }
.pl-search-hint a { color: var(--pl-indigo-text); text-decoration: none; }
.pl-search-hint a:hover { text-decoration: underline; }

/* Result card */
.pl-result-card {
  background: var(--pl-card-bg);
  border: 1px solid var(--pl-border);
  border-radius: 14px; overflow: hidden; margin-bottom: 20px;
}
.pl-result-header {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--pl-border);
  display: flex; align-items: center; gap: 12px;
}
.pl-status-dot {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pl-result-header-text h3 { font-size: 15px; font-weight: 700; margin: 0 0 2px; color: var(--pl-text); }
.pl-result-header-text p  { font-size: 12px; color: var(--pl-text-muted); margin: 0; }
.pl-status-badge { margin-left: auto; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }

/* Status badge colours */
.status-finished,
.status-confirmed  { background: var(--pl-success-bg); color: var(--pl-success-color); }
.status-waiting,
.status-pending,
.status-partial    { background: var(--pl-badge-bg);   color: var(--pl-badge-color); }
.status-confirming { background: rgba(99,102,241,.15); color: var(--pl-indigo-text); }
.status-failed     { background: var(--pl-error-bg);   color: var(--pl-error-color); }

/* Details grid */
.pl-details-grid {
  padding: 16px 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px;
}
@media (max-width: 420px) { .pl-details-grid { grid-template-columns: 1fr; } }
.pl-detail-label {
  font-size: 11px; font-weight: 600;
  color: var(--pl-text-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}
.pl-detail-val      { font-size: 13px; color: var(--pl-text); word-break: break-all; }
.pl-detail-val.mono { font-family: 'Courier New', monospace; font-size: 12px; color: var(--pl-mono-color); }
.pl-detail-full     { grid-column: 1 / -1; }

/* Timeline */
.pl-timeline { padding: 0 20px 18px; border-top: 1px solid var(--pl-border); }
.pl-timeline-title {
  font-size: 11px; font-weight: 600;
  color: var(--pl-text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 14px 0 12px;
}
.pl-timeline-list { list-style: none; padding: 0; margin: 0; }
.pl-timeline-item { display: flex; gap: 12px; padding-bottom: 14px; position: relative; }
.pl-timeline-item:last-child { padding-bottom: 0; }
.pl-timeline-item::before {
  content: ''; position: absolute;
  left: 9px; top: 20px; width: 2px; bottom: 0;
  background: var(--pl-border);
}
.pl-timeline-item:last-child::before { display: none; }
.pl-timeline-dot {
  width: 20px; height: 20px; border-radius: 50%;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9px; margin-top: 1px;
}
.pl-timeline-dot.done   { background: rgba(16,185,129,.2); color: var(--pl-success-color); border: 1.5px solid #10b981; }
.pl-timeline-dot.active { background: rgba(99,102,241,.2); color: var(--pl-indigo-text);   border: 1.5px solid var(--pl-accent); }
.pl-timeline-dot.wait   { background: var(--pl-input-bg);  color: var(--pl-text-muted);    border: 1.5px solid var(--pl-border); }
.pl-timeline-text strong { font-size: 13px; color: var(--pl-text); }
.pl-timeline-text span   { font-size: 12px; color: var(--pl-text-muted); display: block; margin-top: 1px; }

/* Alert box */
.pl-alert-box {
  background: var(--pl-card-bg);
  border: 1px solid var(--pl-border);
  border-radius: 14px; padding: 20px; margin-bottom: 20px;
}
.pl-alert-box h3 {
  font-size: 14px; font-weight: 700; color: var(--pl-text);
  margin: 0 0 6px; display: flex; align-items: center; gap: 7px;
}
.pl-alert-box p { font-size: 13px; color: var(--pl-text-muted); margin: 0 0 14px; line-height: 1.5; }
.pl-alert-form-row { display: flex; gap: 9px; align-items: stretch; }
.pl-tg-btn {
  background: #2563eb; color: #fff; border: none;
  border-radius: 9px; padding: 10px 18px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; display: flex; align-items: center; gap: 7px;
  transition: background .2s, transform .1s;
}
.pl-tg-btn:hover    { background: #1d4ed8; }
.pl-tg-btn:active   { transform: scale(.97); }
.pl-tg-btn:disabled { opacity: .5; cursor: not-allowed; }
.pl-tg-note { font-size: 11.5px; color: var(--pl-text-muted); margin-top: 9px; line-height: 1.5; }

/* Not-found */
.pl-not-found { text-align: center; padding: 36px 20px; color: var(--pl-text-muted); }
.pl-not-found svg { margin-bottom: 12px; opacity: .4; }
.pl-not-found h3  { margin: 0 0 7px; font-size: 15px; color: var(--pl-text); }
.pl-not-found p   { font-size: 13px; margin: 0; line-height: 1.6; }

/* Spinner */
.pl-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--pl-spinner-border);
  border-top-color: var(--pl-spinner-top);
  border-radius: 50%;
  animation: pl-spin .8s linear infinite;
  vertical-align: middle;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }

/* History panel */
.pl-history-section       { margin-bottom: 24px; }
.pl-history-section--spaced { margin-top: 20px; }
.pl-history-title {
  font-size: 12px; font-weight: 700;
  color: var(--pl-text-muted);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 7px;
}
.pl-history-list { display: flex; flex-direction: column; gap: 8px; }
.pl-history-row {
  background: var(--pl-card-bg);
  border: 1px solid var(--pl-border);
  border-radius: 11px; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; text-decoration: none; color: inherit;
  transition: border-color .18s, background .18s;
}
.pl-history-row:hover        { border-color: var(--pl-accent); background: rgba(99,102,241,.06); }
.pl-history-row.is-active-row { border-color: var(--pl-accent); background: rgba(99,102,241,.08); }
.pl-history-row--static       { cursor: default; }
.pl-history-row--static:hover { border-color: var(--pl-border); background: var(--pl-card-bg); }

.pl-history-icon {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pl-history-icon.status-pending-icon  { background: var(--pl-badge-bg); }
.pl-history-icon.status-approved-icon { background: var(--pl-success-bg); }
.pl-history-icon.status-failed-icon   { background: var(--pl-error-bg); }

.pl-history-meta  { flex: 1; min-width: 0; }
.pl-history-plan  {
  font-size: 13px; font-weight: 600; color: var(--pl-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-history-sub   { font-size: 11.5px; color: var(--pl-text-muted); margin-top: 2px; font-family: 'Courier New', monospace; }
.pl-history-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.pl-history-amount { font-size: 13px; font-weight: 600; color: var(--pl-text); }
.pl-history-date   { font-size: 11px; color: var(--pl-text-muted); }

.pl-history-badge            { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.pl-history-badge.badge-pending    { background: var(--pl-badge-bg);   color: var(--pl-badge-color); }
.pl-history-badge.badge-approved   { background: var(--pl-success-bg); color: var(--pl-success-color); }
.pl-history-badge.badge-failed     { background: var(--pl-error-bg);   color: var(--pl-error-color); }
.pl-history-badge.badge-confirming { background: rgba(99,102,241,.12); color: var(--pl-indigo-text); }

.pl-history-check-btn {
  font-size: 11px; color: var(--pl-indigo-text);
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 6px; padding: 3px 8px;
  cursor: pointer; white-space: nowrap;
}

.pl-history-empty {
  text-align: center; padding: 18px;
  color: var(--pl-text-muted); font-size: 13px;
  background: var(--pl-card-bg);
  border: 1px solid var(--pl-border);
  border-radius: 11px;
}

.pl-open-checkout {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--pl-indigo-text);
  text-decoration: none; padding: 10px 0; font-weight: 500;
}
.pl-open-checkout:hover { color: var(--pl-accent); }

/* Collapsible search */
.pl-search-details { margin-bottom: 20px; }
.pl-search-details .pl-search-card {
  margin-top: 0;
  border-top-left-radius: 0; border-top-right-radius: 0; border-top: none;
}
.pl-search-summary {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--pl-card-bg);
  border: 1px solid var(--pl-border);
  border-radius: 11px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--pl-text);
  list-style: none; user-select: none;
  transition: background .15s, border-color .15s;
}
.pl-search-summary::-webkit-details-marker { display: none; }
.pl-search-summary::after {
  content: '▾'; margin-left: auto;
  color: var(--pl-text-muted); font-size: 12px; transition: transform .2s;
}
.pl-search-summary:hover { border-color: var(--pl-accent); }
.pl-search-details[open] .pl-search-summary {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-color: var(--pl-accent); background: rgba(99,102,241,.06);
}
.pl-search-details[open] .pl-search-summary::after { transform: rotate(180deg); }
.pl-summary-hint { font-size: 11px; font-weight: 400; color: var(--pl-text-muted); }
.pl-search-details[open] .pl-search-card {
  border: 1px solid var(--pl-accent); border-top: none; border-radius: 0 0 11px 11px;
}

/* Invoice card */
.pl-invoice-card {
  background: var(--pl-card-bg);
  border: 1.5px solid var(--pl-accent);
  border-radius: 14px; padding: 20px; margin-bottom: 20px;
  box-shadow: 0 0 0 4px rgba(99,102,241,.08);
}
.pl-invoice-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.pl-invoice-icon {
  width: 40px; height: 40px; background: rgba(167,139,250,.12);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pl-invoice-title { font-size: 15px; font-weight: 700; color: var(--pl-text); }
.pl-invoice-sub   { font-size: 12px; color: var(--pl-text-muted); margin-top: 2px; }
.pl-invoice-badge {
  margin-left: auto; font-size: 11.5px; font-weight: 700;
  padding: 3px 12px; border-radius: 20px;
  background: var(--pl-badge-bg); color: var(--pl-badge-color);
}
.pl-invoice-badge.confirmed { background: var(--pl-success-bg); color: var(--pl-success-color); }
.pl-invoice-badge.failed    { background: var(--pl-error-bg);   color: var(--pl-error-color); }
.pl-invoice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 520px) { .pl-invoice-grid { grid-template-columns: 1fr; } }
.pl-invoice-item--full { grid-column: 1 / -1; }
.pl-invoice-lbl { font-size: 10.5px; color: var(--pl-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.pl-invoice-val  { font-size: 14px; font-weight: 600; color: var(--pl-text); word-break: break-all; }
.pl-invoice-addr-row { display: flex; align-items: center; gap: 8px; }
.pl-invoice-addr { font-size: 12.5px; color: var(--pl-text); word-break: break-all; flex: 1; }
.mono { font-family: 'Courier New', monospace; }

.pl-copy-btn {
  font-size: 11px; padding: 4px 10px;
  background: rgba(99,102,241,.12); color: var(--pl-copy-btn-color);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 6px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background .15s;
}
.pl-copy-btn:hover  { background: rgba(99,102,241,.25); }
.pl-copy-btn.copied { background: var(--pl-success-bg); color: var(--pl-success-color); border-color: var(--pl-success-border); }

.pl-invoice-warn {
  font-size: 12px; color: var(--pl-warn-color);
  background: var(--pl-warn-bg);
  border: 1px solid var(--pl-warn-border);
  border-radius: 8px; padding: 10px 13px; margin-bottom: 12px;
}
.pl-invoice-poll { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--pl-text-muted); }
.pl-spin { animation: pl-spin 1s linear infinite; flex-shrink: 0; }

/* ================================================================
   UNIFIED PUBLIC BADGE SYSTEM — premium mech family
   B) SMOKED-GLASS MECH CHIP + A) ANCHORED MECH STATUS TAG
   ================================================================ */
:root {
  --badge-chip-h: clamp(19px, 1.72vw, 21px);
  --badge-chip-font: clamp(9px, 0.64vw, 10.2px);
  --badge-chip-pad-x: clamp(7px, 0.72vw, 10px);
  --badge-chip-radius: 9px;

  --badge-status-h: clamp(18px, 1.6vw, 20px);
  --badge-status-font: clamp(9px, 0.62vw, 9.8px);
  --badge-status-pad-x: clamp(7px, 0.74vw, 9px);
  --badge-status-radius: 8px;

  --badge-rating-h: clamp(19px, 1.7vw, 21px);
  --badge-rating-font: clamp(9px, 0.65vw, 10.2px);
  --badge-rating-pad-x: clamp(7px, 0.72vw, 9px);
  --badge-rating-radius: 9px;

  --badge-text: rgba(246,250,255,0.97);
  --badge-glass-bg: rgba(6, 10, 18, 0.58);
  --badge-glass-bg-strong: rgba(6, 10, 18, 0.66);
  --badge-glass-bg-dense: rgba(5, 9, 16, 0.78);
  --badge-glass-text: rgba(247, 251, 255, 0.98);
  --badge-glass-edge: rgba(214,228,255,0.18);
  --badge-glass-highlight: rgba(255,255,255,0.14);
  --badge-glass-sheen: rgba(255,255,255,0.07);
  --badge-neutral-accent: var(--color-primary);
}

.card-badge-episode,
.card-rating-badge,
.hero-badges .badge,
.status-badge,
.wic-sub-badge,
.wic-status-badge,
.sc-type,
.sc-rating,
.sc-sub,
.rec-sub,
.wsch-ep-badge,
.wsch-tag,
.dl-quality,
.badge-type,
.badge-ongoing,
.badge-completed,
.card-rating,
.card-ep-badge {
  --badge-accent: var(--badge-neutral-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--badge-chip-h);
  padding: 0 var(--badge-chip-pad-x);
  border-radius: var(--badge-chip-radius);
  font-size: var(--badge-chip-font);
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--badge-glass-text) !important;
  white-space: nowrap;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--badge-accent) 37%, var(--badge-glass-edge)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 36%),
    linear-gradient(122deg, color-mix(in srgb, var(--badge-accent) 18%, transparent), transparent 66%),
    color-mix(in srgb, var(--badge-accent) 12%, var(--badge-glass-bg-strong)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.13),
    inset 0 -1px 0 rgba(0,0,0,0.28),
    0 2px 6px color-mix(in srgb, var(--badge-accent) 11%, rgba(0,0,0,0.32)) !important;
  backdrop-filter: blur(5px) saturate(112%);
  -webkit-backdrop-filter: blur(5px) saturate(112%);
}

/* A) ANCHORED MECH STATUS TAG — top-left status badges only */
.card-badge-status,
.sc-ribbon {
  min-height: var(--badge-tab-h);
  padding: 0 var(--badge-tab-pad-x) 0 calc(var(--badge-tab-pad-x) + 2px);
  border-radius: var(--badge-tab-radius);
  font-size: var(--badge-tab-font);
  font-weight: 820;
  letter-spacing: 0.046em;
  border: 1px solid color-mix(in srgb, var(--badge-accent) 46%, rgba(220,233,255,0.3)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 30%),
    linear-gradient(128deg, color-mix(in srgb, var(--badge-accent) 24%, transparent), transparent 62%),
    color-mix(in srgb, var(--badge-accent) 15%, var(--badge-glass-bg-dense)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 2px 0 0 color-mix(in srgb, var(--badge-accent) 58%, rgba(255,255,255,0.15)),
    inset 3px 0 0 rgba(255,255,255,0.08),
    0 2px 7px color-mix(in srgb, var(--badge-accent) 13%, rgba(0,0,0,0.34)) !important;
  backdrop-filter: blur(4px) saturate(114%);
  -webkit-backdrop-filter: blur(4px) saturate(114%);
}

.card-badge-status,
.sc-ribbon {
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%) !important;
}

.card-badge-status::after,
.sc-ribbon::after {
  content: "";
  position: absolute;
  inset: 1px 8px auto 10px;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.62), rgba(255,255,255,0));
  opacity: 0.52;
  pointer-events: none;
}

.card-badge-status::before,
.sc-ribbon::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--badge-accent) 78%, rgba(255,255,255,0.3)), color-mix(in srgb, var(--badge-accent) 45%, transparent));
  opacity: 0.9;
  pointer-events: none;
}

/* Status */
.badge-status-ongoing,
.status-badge.ongoing,
.wic-status-ongoing,
.sc-ribbon.ongoing,
.hero-badges .badge-status.ongoing,
.badge-status.ongoing,
.badge-ongoing {
  --badge-accent: var(--badge-color-ongoing);
}

.badge-status-completed,
.status-badge.completed,
.wic-status-completed,
.sc-ribbon.completed,
.hero-badges .badge-status.completed,
.badge-status.completed,
.badge-completed {
  --badge-accent: var(--badge-color-completed);
}

.badge-status-upcoming,
.status-badge.upcoming,
.wic-status-upcoming,
.sc-ribbon.upcoming,
.hero-badges .badge-status.upcoming,
.badge-status.upcoming {
  --badge-accent: var(--badge-color-upcoming);
}

/* Type */
.badge-type-movie,
.sc-type.movie,
.card-badge-type.badge-type-movie,
.hero-badges .hero-type-movie {
  --badge-accent: var(--badge-color-movie);
}

.badge-type-ona,
.sc-type.ona,
.card-badge-type.badge-type-ona,
.hero-badges .hero-type-ona {
  --badge-accent: var(--badge-color-ona);
}

.badge-type-ova,
.sc-type.ova,
.card-badge-type.badge-type-ova,
.hero-badges .hero-type-ova {
  --badge-accent: var(--badge-color-ova);
}

/* Type-like variants without dedicated admin badge vars */
.sc-type.tv,
.sc-type.special,
.sc-type.music,
.sc-type.donghua,
.hero-badges .badge-primary,
.badge-type {
  --badge-accent: var(--color-primary);
}

/* Language */
.badge-lang-sub,
.sc-sub,
.rec-sub,
.wic-sub-badge,
.card-badge-language,
.badge--audio,
.wsch-tag-pink {
  --badge-accent: var(--badge-color-sub);
}

.badge-lang-dub,
.card-badge-language.badge-lang-dub,
.badge--audio.badge-lang-dub,
.wsch-tag-orange {
  --badge-accent: var(--badge-color-dub);
}

/* Quality */
.badge-quality-sd {
  --badge-accent: var(--badge-color-sd);
}
.badge-quality-hd {
  --badge-accent: var(--badge-color-hd);
}
.badge-quality-fhd,
.card-badge-quality.badge-quality-fhd,
.badge--quality.badge-quality-fhd,
.dl-quality.badge-quality-fhd,
.wsch-tag-blue {
  --badge-accent: var(--badge-color-fhd);
}
.badge-quality-4k,
.card-badge-quality.badge-quality-4k,
.badge--quality.badge-quality-4k,
.dl-quality.badge-quality-4k,
.wsch-tag-yellow {
  --badge-accent: var(--badge-color-4k);
}

.card-badge-quality.badge-quality-sd,
.badge--quality.badge-quality-sd,
.dl-quality.badge-quality-sd {
  --badge-accent: var(--badge-color-sd);
}
.card-badge-quality.badge-quality-hd,
.badge--quality.badge-quality-hd,
.dl-quality.badge-quality-hd {
  --badge-accent: var(--badge-color-hd);
}

/* Quality badge redesign (shape-only): compact beveled tech plate */
.badge-quality-sd,
.badge-quality-hd,
.badge-quality-fhd,
.badge-quality-4k,
.card-badge-quality,
.badge--quality,
.dl-quality {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0 clamp(9.8px, 0.88vw, 12.8px) !important;
  min-height: clamp(18.2px, 1.6vw, 21px);
  font-size: clamp(10.4px, 0.77vw, 11.4px);
  border-radius: 0 !important;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 4px), 0 4px);
  border: 1px solid color-mix(in srgb, var(--badge-accent) 56%, rgba(224,238,255,0.44)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 34%, rgba(255,255,255,0) 52%),
    linear-gradient(122deg, color-mix(in srgb, var(--badge-accent) 39%, rgba(5,10,18,0.64)), color-mix(in srgb, var(--badge-accent) 16%, rgba(4,8,14,0.95))) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.38),
    0 3px 8px color-mix(in srgb, var(--badge-accent) 24%, rgba(0,0,0,0.32)) !important;
  letter-spacing: 0.068em;
  font-weight: 800;
}

.badge-quality-sd::before,
.badge-quality-hd::before,
.badge-quality-fhd::before,
.badge-quality-4k::before,
.card-badge-quality::before,
.badge--quality::before,
.dl-quality::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  border: 1px solid color-mix(in srgb, var(--badge-accent) 38%, rgba(230,244,255,0.58));
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 3px), 0 3px);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0) 28%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0) 82%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 58%);
  opacity: 0.84;
  pointer-events: none;
}

.badge-quality-sd::after,
.badge-quality-hd::after,
.badge-quality-fhd::after,
.badge-quality-4k::after,
.card-badge-quality::after,
.badge--quality::after,
.dl-quality::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 4px), 0 4px);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.14) 0 1px, transparent 1px calc(100% - 1px), rgba(255,255,255,0.12) calc(100% - 1px)),
    linear-gradient(180deg, rgba(255,255,255,0.16) 0 1px, transparent 1px calc(100% - 1px), rgba(0,0,0,0.26) calc(100% - 1px));
  opacity: 0.7;
  pointer-events: none;
}

/* Episode */
.card-badge-episode,
.wsch-ep-badge,
.card-ep-badge,
.badge--episode {
  --badge-accent: var(--badge-color-episode);
}

/* Rating */
.card-rating-badge,
.sc-rating,
.card-rating,
.wic-rating,
.pop-rating {
  --badge-accent: var(--badge-color-rating);
}

/* Neutral / utility badges without dedicated admin vars */
.wsch-tag-gray,
.dl-quality {
  --badge-accent: var(--color-primary);
}

/* Final premium mech badge appearance overrides */
.card-badge,
.card-badge-type,
.card-badge-episode,
.card-badge-language,
.card-rating-badge,
.hero-badges .badge,
.status-badge,
.wic-sub-badge,
.wic-status-badge,
.sc-type,
.sc-rating,
.sc-sub,
.rec-sub,
.wsch-ep-badge,
.wsch-tag,
.badge-type,
.badge-ongoing,
.badge-completed,
.card-rating,
.card-ep-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--badge-chip-h);
  padding: 0 var(--badge-chip-pad-x);
  border-radius: var(--badge-chip-radius);
  font-size: var(--badge-chip-font);
  font-weight: 730;
  line-height: 1;
  letter-spacing: 0.058em;
  text-transform: uppercase;
  color: var(--badge-text) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.22);
  white-space: nowrap;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--badge-accent) 28%, var(--badge-glass-edge)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 24%, rgba(255,255,255,0) 48%),
    linear-gradient(135deg, color-mix(in srgb, var(--badge-accent) 18%, rgba(255,255,255,0.03)) 0%, transparent 58%),
    linear-gradient(90deg, color-mix(in srgb, var(--badge-accent) 10%, transparent) 0%, transparent 42%),
    color-mix(in srgb, var(--badge-accent) 9%, var(--badge-glass-bg)) !important;
  box-shadow:
    inset 0 1px 0 var(--badge-glass-highlight),
    inset 0 -1px 0 rgba(5,8,14,0.44),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 4px 10px color-mix(in srgb, var(--badge-accent) 9%, rgba(0,0,0,0.34)) !important;
  backdrop-filter: blur(7px) saturate(120%);
  -webkit-backdrop-filter: blur(7px) saturate(120%);
}

.card-badge-status,
.sc-ribbon {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: clamp(18px, 11%, 24px);
  height: clamp(96px, 62%, 152px);
  min-height: 0;
  max-height: calc(100% - 12px);
  padding: 7px 0;
  border-radius: 9px;
  font-size: var(--badge-status-font);
  font-weight: 780;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--badge-glass-text) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.24);
  white-space: nowrap;
  max-width: none;
  border: 1px solid color-mix(in srgb, var(--badge-accent) 34%, rgba(255,255,255,0.28)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 36%),
    linear-gradient(140deg, color-mix(in srgb, var(--badge-accent) 20%, rgba(255,255,255,0.02)) 0%, color-mix(in srgb, var(--badge-accent) 8%, transparent) 30%, transparent 31%, transparent 100%),
    color-mix(in srgb, var(--badge-accent) 11%, var(--badge-glass-bg-dense)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 3px 8px color-mix(in srgb, var(--badge-accent) 10%, rgba(0,0,0,0.34)) !important;
  backdrop-filter: blur(7px) saturate(122%);
  -webkit-backdrop-filter: blur(7px) saturate(122%);
  writing-mode: vertical-rl;
  text-orientation: upright;
  overflow: hidden;
}

.sc-ribbon-wrap .sc-ribbon {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: none;
}

.card-badge-status::after,
.sc-ribbon::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 8px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.62), rgba(255,255,255,0));
  opacity: 0.46;
  pointer-events: none;
}

.card-badge-status::before,
.sc-ribbon::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  right: 1px;
  height: 7px;
  border-radius: 6px 6px 0 0;
  background:
    linear-gradient(142deg, color-mix(in srgb, var(--badge-accent) 84%, rgba(255,255,255,0.28)) 0%, color-mix(in srgb, var(--badge-accent) 54%, rgba(255,255,255,0.04)) 38%, transparent 39%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 72%);
  opacity: 0.9;
  pointer-events: none;
}

.card-rating-badge,
.sc-rating,
.card-rating {
  min-height: var(--badge-rating-h);
  padding: 0 calc(var(--badge-rating-pad-x) - 1px);
  border-radius: var(--badge-rating-radius);
  font-size: var(--badge-rating-font);
  font-weight: 760;
  letter-spacing: 0.052em;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0) 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--badge-accent) 24%, rgba(255,255,255,0.03)) 0%, transparent 56%),
    linear-gradient(90deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 54%),
    color-mix(in srgb, var(--badge-accent) 13%, var(--badge-glass-bg-strong)) !important;
  border: 1px solid color-mix(in srgb, var(--badge-accent) 36%, rgba(255,255,255,0.24)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(5,8,14,0.40),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 4px 11px color-mix(in srgb, var(--badge-accent) 14%, rgba(0,0,0,0.37)) !important;
  backdrop-filter: blur(8px) saturate(124%);
  -webkit-backdrop-filter: blur(8px) saturate(124%);
}

/* ============================================
   WATCH PAGE REBUILD (Scoped to watch page only)
   ============================================ */
body.page-watch {
  --watch-breadcrumb-gap: clamp(14px, 1vw, 18px);
  --watch-navbar-top: 8px;
}
body.page-watch .navbar {
  position: absolute;
  top: var(--nav-top-gap);
}
body.page-watch .main-content {
  padding-top: var(--header-clearance);
}
.watch-page.watch-rebuild {
  --watch-gap: var(--watch-breadcrumb-gap);
  --watch-grid-gap: 28px;
  --watch-header-gap: 0;
  --watch-header-card-gap: 0;
  max-width: 1680px;
  margin: 0 auto 42px;
  padding: 0 12px 28px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: var(--watch-breadcrumb-gap);
  min-width: 0;
  box-sizing: border-box;
  background:
    radial-gradient(56% 44% at 20% 4%, rgba(66,127,193,.2), transparent 72%),
    radial-gradient(54% 42% at 88% 0%, rgba(101,79,168,.2), transparent 74%);
}
.watch-page.watch-rebuild .watch-top-grid {
  display: grid;
  grid-template-columns: minmax(220px,2fr) minmax(0,9fr) minmax(280px,3fr);
  gap: var(--watch-grid-gap);
  align-items: start;
  margin-top: var(--watch-header-card-gap);
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.watch-page.watch-rebuild .watch-left-col,
.watch-page.watch-rebuild .watch-center-col,
.watch-page.watch-rebuild .watch-right-col,
.watch-page.watch-rebuild .watch-panel,
.watch-page.watch-rebuild .video-outer,
.watch-page.watch-rebuild .watch-episodes-panel {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.watch-page.watch-rebuild .watch-page-header {
  position: relative;
  z-index: 2;
  margin: 0;
}
.watch-page.watch-rebuild .watch-page-header-main {
  display: inline-flex;
  width: fit-content;
  max-width: min(100%, 780px);
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #9fb2cb;
  font-size: .88rem;
  font-weight: 500;
  padding: 14px 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, #0c1726, #07101d 64%);
  border: 1px solid rgba(158,194,255,.14);
  box-shadow: 0 20px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  box-sizing: border-box;
}
.watch-page.watch-rebuild .watch-page-header-main a {
  color: #eef6ff;
}
.watch-page.watch-rebuild .watch-page-header-main a:hover {
  color: #ffab82;
}
.watch-page.watch-rebuild .watch-page-header-home {
  color: #ffffff;
  font-weight: 600;
}
.watch-page.watch-rebuild .watch-page-header-sep {
  color: #7f93ac;
}
body.page-watch .watch-page.watch-rebuild .watch-page-header.watch-panel {
  margin: 0;
  align-self: flex-start;
  display: inline-flex;
  width: fit-content;
  max-width: min(100%, 780px);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
body.page-watch .watch-page.watch-rebuild .watch-page-header-main a { color: #eef6ff; }
body.page-watch .watch-page.watch-rebuild .watch-page-header-main a:hover { color: #ffab82; }
body.page-watch .watch-page.watch-rebuild .watch-page-header-home { color: #ffffff; font-weight: 600; }
body.page-watch .watch-page.watch-rebuild .watch-page-header-sep { color: #7f93ac; }
.watch-page.watch-rebuild .watch-panel,
.watch-page.watch-rebuild .video-outer {
  background: linear-gradient(180deg, #0c1726, #07101d 64%);
  border: 1px solid rgba(158,194,255,.14);
  border-radius: 18px;
  box-shadow: 0 20px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.watch-page.watch-rebuild .watch-anime-card { overflow: hidden; display: flex; flex-direction: column; }
.watch-page.watch-rebuild .watch-poster-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: 208px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  overflow: hidden;
  isolation: isolate;
}
.watch-page.watch-rebuild .watch-poster-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.watch-page.watch-rebuild .watch-anime-poster-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(15px) brightness(.56);
  transform: scale(1.08);
  opacity: .75;
}
.watch-page.watch-rebuild .watch-anime-poster {
  width: auto;
  height: 100%;
  max-width: 74%;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.42);
  display:block;
}
.watch-page.watch-rebuild .watch-anime-content { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.watch-page.watch-rebuild .watch-anime-title { font-size: clamp(1.9rem, 1.2vw + 1rem, 2.35rem); line-height: 1.08; margin: 0; letter-spacing: -.015em; overflow-wrap: anywhere; }
.watch-page.watch-rebuild .watch-alt-title { color: #9aadc7; font-size: .9rem; line-height: 1.35; margin: 0; }
.watch-page.watch-rebuild .watch-badges { display:flex; flex-wrap:wrap; gap:6px; margin: 0; }
.watch-page.watch-rebuild .watch-chip { padding: 4px 9px; border-radius: 999px; background: rgba(255,143,72,.17); color:#ff9d63; font-size:.7rem; letter-spacing: .015em; text-transform: uppercase; font-weight: 600; }
.watch-page.watch-rebuild .watch-desc {
  font-size: .91rem;
  color:#d1dceb;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.watch-page.watch-rebuild .watch-meta-list {
  list-style:none;
  margin: 0;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap: 5px;
  min-height: 0;
}
.watch-page.watch-rebuild .watch-meta-list li {
  font-size: .84rem;
  color:#c2cfdf;
  display: grid;
  grid-template-columns: minmax(62px, 76px) minmax(0,1fr);
  gap: 8px;
  line-height: 1.3;
  align-items: start;
}
.watch-page.watch-rebuild .watch-meta-list span { color:#8499b3; font-weight: 500; text-transform: capitalize; }
.watch-page.watch-rebuild .watch-meta-list strong { color:#e4edf8; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.watch-page.watch-rebuild .watch-rating-box {
  margin-top: auto;
  padding: 12px 12px 11px;
  border-radius: 12px;
  border: 1px solid rgba(255,158,107,.22);
  background: linear-gradient(180deg, rgba(20,29,43,.92), rgba(15,22,34,.95));
}
.watch-page.watch-rebuild .watch-rating-prompt { margin: 0 0 4px; color: #fd9462; font-weight: 700; font-size: .84rem; }
.watch-page.watch-rebuild .watch-rating-score { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; color: #cad6e5; }
.watch-page.watch-rebuild .watch-rating-score strong { font-size: 1.4rem; line-height: 1; color: #f7f9fe; letter-spacing: -.02em; }
.watch-page.watch-rebuild .watch-rating-score span { font-size: .82rem; color: #92a6bf; }
.watch-page.watch-rebuild .watch-rating-stars { display: flex; gap: 2px; line-height: 1; }
.watch-page.watch-rebuild .watch-rating-star { color: rgba(142,161,184,.5); font-size: 1.16rem; font-weight: 800; }
.watch-page.watch-rebuild .watch-rating-star.is-active { color: #ff8e5a; }
.watch-page.watch-rebuild .video-wrapper { border-radius: 16px 16px 0 0; overflow: hidden; }
.watch-page.watch-rebuild .video-wrapper .video-frame { aspect-ratio: 16 / 9; min-height: min(62vh, 760px); width: 100%; }
.watch-page.watch-rebuild .watch-toolbar { border-radius: 0; border-top: 1px solid rgba(255,255,255,.07); display:flex; justify-content:space-between; gap:10px; padding:10px 14px; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)); overflow:hidden; }
.watch-page.watch-rebuild .watch-toolbar-group { display:flex; gap:8px; min-width:0; flex:1 1 0; }
.watch-page.watch-rebuild .watch-toolbar .watch-action-btn {
  border-radius: 0;
  border: 0;
  background: transparent;
  color:#d2dbe8;
  padding: 6px 8px;
  min-height: 36px;
  font-size:.88rem;
  line-height:1.15;
  font-weight:800;
  transition:all .2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex: 1 1 0;
  min-width: 0;
  white-space:nowrap;
}
.watch-page.watch-rebuild .watch-toolbar .watch-action-icon { width: 18px; height: 18px; line-height:1; opacity:.98; flex:0 0 auto; color:#b9c8db; }
.watch-page.watch-rebuild .watch-toolbar .watch-action-icon svg { width:100%; height:100%; display:block; fill:currentColor; }
.watch-page.watch-rebuild .watch-toolbar .watch-action-label { min-width:0; overflow:hidden; text-overflow:ellipsis; font-size: .9rem; font-weight: 800; letter-spacing: .01em; }
.watch-page.watch-rebuild .watch-toolbar .watch-toolbar-group:first-child .watch-action-btn:nth-child(3) .watch-action-icon,
.watch-page.watch-rebuild .watch-toolbar .watch-toolbar-group:first-child .watch-action-btn:nth-child(3) .watch-action-label { color:#ff8f5f; }
.watch-page.watch-rebuild .watch-toolbar .vc-btn:hover,
.watch-page.watch-rebuild .watch-toolbar .vc-icon-btn:hover { color:#fff; transform: translateY(-1px); }
.watch-page.watch-rebuild .watch-toolbar .shell-toggle.active { background:#ff7f45; border-color:#ff7f45; color:#fff; }
.watch-page.watch-rebuild .watch-status-strip { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:15px 18px 14px; border-top:1px solid rgba(255,255,255,.06); }
.watch-page.watch-rebuild .watch-status-strip h3 { margin:0 0 5px; font-size:1.22rem; line-height:1.22; }
.watch-page.watch-rebuild .watch-status-strip p { margin:0; color:#8da1bb; font-size:.92rem; max-width:50ch; }
.watch-page.watch-rebuild .watch-status-side { margin-left:auto; min-width:0; max-width: 240px; flex: 0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.watch-page.watch-rebuild .watch-copy-mobile { display: none; }
.watch-page.watch-rebuild .watch-status-sub { color:#f9f2ec; font-weight:800; font-size:1.01rem; padding: 2px 0; border-radius:0; border:0; background:transparent; display:inline-flex; align-items:center; gap:6px; }
.watch-page.watch-rebuild .watch-cc-chip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 21px;
  height: 18px;
  border-radius: 6px;
  border:1px solid rgba(255,127,69,.82);
  background:rgba(255,127,69,.18);
  color:#ff8e5b;
  font-size:.65rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.watch-page.watch-rebuild .watch-server-strip { display:flex; flex-direction:column; align-items:flex-end; gap:7px; border:0; border-radius:0; background:transparent; padding:0; margin:0; width:auto; max-width:100%; }
.watch-page.watch-rebuild .watch-server-strip .server-label { font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:#8ea4c0; }
.watch-page.watch-rebuild .watch-server-strip .server-actions { display:inline-flex; flex:0 0 auto; width:auto; max-width:100%; align-self:flex-end; justify-content:flex-end; flex-wrap:wrap; gap:6px; }
.watch-page.watch-rebuild .watch-server-strip .watch-subtitle-mode-actions {
  flex-wrap: nowrap;
  gap: 10px;
}
.watch-page.watch-rebuild .watch-server-strip .watch-subtitle-mode-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  opacity: .52;
  transition: opacity .18s ease, color .18s ease;
}
.watch-page.watch-rebuild .watch-server-strip .watch-subtitle-mode-btn .watch-cc-chip {
  border-color: rgba(255,255,255,.32);
  background: rgba(138,155,177,.12);
  color: #8ea1b9;
}
.watch-page.watch-rebuild .watch-server-strip .watch-subtitle-mode-btn.active {
  opacity: 1;
}
.watch-page.watch-rebuild .watch-server-strip .watch-subtitle-mode-btn.active .watch-cc-chip {
  border-color: rgba(255,127,69,.82);
  background: rgba(255,127,69,.18);
  color: #ff8e5b;
}
.watch-page.watch-rebuild .watch-server-strip .watch-server-group[hidden],
.watch-page.watch-rebuild .watch-server-strip .watch-server-group.is-hidden {
  display: none !important;
}
.watch-page.watch-rebuild .watch-server-strip .server-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 54px;
  max-width: clamp(78px, 7.6vw, 116px);
  width: auto;
  padding: 5px 11px;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 16px rgba(5,11,21,.28);
  line-height: 1;
}
.watch-page.watch-rebuild .watch-server-strip .server-btn.active {
  background: linear-gradient(145deg, #42d87a, #2eb867);
  border-color: rgba(95,249,156,.8);
  color: #06140d;
  box-shadow: 0 10px 18px rgba(37,193,107,.35), inset 0 1px 0 rgba(255,255,255,.34);
}
.watch-page.watch-rebuild .watch-seasons {
  margin: 14px;
  padding: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(160deg, rgba(20,33,52,.62), rgba(11,21,36,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 26px rgba(2,7,16,.22);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.watch-page.watch-rebuild .watch-seasons-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 10px; }
.watch-page.watch-rebuild .watch-seasons-head h3 { margin:0; }
.watch-page.watch-rebuild .watch-seasons-nav { display:none; align-items:center; gap:6px; }
.watch-page.watch-rebuild .watch-seasons-arrow {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 0;
  background: rgba(139, 157, 180, .22);
  color: #d4dfed;
  line-height: 0;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.watch-page.watch-rebuild .watch-seasons-arrow svg { width: 11px; height: 11px; fill: currentColor; }
.watch-page.watch-rebuild .watch-seasons-arrow:hover { color:#fff; background: rgba(172, 188, 207, .34); transform: translateY(-1px); }
.watch-page.watch-rebuild .watch-seasons-arrow:disabled { opacity: .45; cursor: default; transform:none; }
.watch-page.watch-rebuild .watch-seasons-rail { min-width:0; max-width:100%; overflow-x:auto; overflow-y:hidden; cursor: default; }
.watch-page.watch-rebuild .watch-seasons-rail.is-dragging { cursor: grabbing; }
.watch-page.watch-rebuild .watch-seasons-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; min-width:0; max-width:100%; }
.watch-page.watch-rebuild .watch-season-item {
  position:relative;
  overflow:hidden;
  min-height:80px;
  border-radius:12px;
  color:#f4f8ff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.2);
  transition:all .2s ease;
  background: linear-gradient(160deg, rgba(33,49,74,.48), rgba(16,27,43,.52));
}
.watch-page.watch-rebuild .watch-season-media,
.watch-page.watch-rebuild .watch-season-glass { position:absolute; inset:0; pointer-events:none; border-radius: inherit; }
.watch-page.watch-rebuild .watch-season-media::before { content:''; position:absolute; inset:0; background: linear-gradient(140deg, rgba(17,29,46,.22), rgba(9,14,24,.44)); z-index: 1; }
.watch-page.watch-rebuild .watch-season-media img { width:100%; height:100%; object-fit:cover; filter:saturate(1.18) contrast(.97); opacity:.95; }
.watch-page.watch-rebuild .watch-season-glass {
  background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 44%, rgba(0,0,0,.2));
  backdrop-filter: blur(2.5px);
  z-index: 2;
}
.watch-page.watch-rebuild .watch-season-content {
  position:relative;
  z-index:3;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  text-align:center;
  padding:10px 12px;
}
.watch-page.watch-rebuild .watch-season-item:hover { transform:translateY(-2px); border-color:rgba(255,127,69,.44); box-shadow:0 10px 18px rgba(7,11,25,.4); }
.watch-page.watch-rebuild .watch-season-name { font-weight:700; font-size:1rem; line-height:1.12; text-shadow:0 2px 6px rgba(0,0,0,.4); color: #f2f6fd; }
.watch-page.watch-rebuild .watch-season-eps {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size:.72rem;
  color:#fff;
  background: rgba(116, 131, 150, .88);
  letter-spacing: .01em;
  text-transform:none;
  font-weight: 700;
}
.watch-page.watch-rebuild .watch-season-item.active {
  border-color: rgba(255,148,104,.7);
  box-shadow: inset 0 0 0 1px rgba(255,167,129,.22), 0 10px 20px rgba(12,17,33,.36);
}
.watch-page.watch-rebuild .watch-season-item.active .watch-season-glass { background: linear-gradient(160deg, rgba(255,142,93,.32), rgba(255,255,255,.07), rgba(0,0,0,.22)); }
.watch-page.watch-rebuild .watch-season-item.active .watch-season-eps { color:#fff3ea; background: rgba(255,112,56,.94); }
.watch-page.watch-rebuild .watch-episodes-panel { padding: 16px; min-height: min(78vh, 920px); position: sticky; top: calc(var(--nav-height,64px) + 12px); min-width:0; max-width:100%; overflow-x:hidden; display:flex; flex-direction:column; align-items:stretch; }
.watch-page.watch-rebuild .sidebar-ep-header { margin-bottom: 12px; display:flex; flex-direction:column; gap:10px; position:relative; z-index:6; flex:0 0 auto; align-content:start; }
.watch-page.watch-rebuild .sidebar-ep-head-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; max-width:100%; }
.watch-page.watch-rebuild .sidebar-title { margin:0; font-size:1.9rem; line-height:1; font-weight:700; letter-spacing:-.01em; flex:0 0 auto; }
.watch-page.watch-rebuild .sidebar-ep-top-tools { display:grid; grid-template-columns:minmax(0,1fr) 32px 32px 32px; gap:7px; align-items:center; min-width:0; max-width:100%; flex:1 1 auto; }
.watch-page.watch-rebuild .sidebar-ep-search-wrap,
.watch-page.watch-rebuild .sidebar-ep-tool,
.watch-page.watch-rebuild .sidebar-season-nav,
.watch-page.watch-rebuild .sidebar-season-current {
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.05);
  color:#d5deec;
  min-height:30px;
}
.watch-page.watch-rebuild .sidebar-ep-search-wrap { display:flex; align-items:center; gap:6px; padding:0 9px; min-width:0; max-width:100%; }
.watch-page.watch-rebuild .sidebar-ep-search-icon { color:#72879f; font-size:.95rem; line-height:1; font-weight:700; flex-shrink:0; }
.watch-page.watch-rebuild .sidebar-ep-search { width:100%; min-width:0; background:transparent; border:none; outline:none; color:#dce6f6; font-size:.86rem; line-height:1.1; height:28px; padding:0; }
.watch-page.watch-rebuild .sidebar-ep-search::placeholder { color:#7f91a8; }
.watch-page.watch-rebuild .sidebar-ep-tool { display:inline-flex; align-items:center; justify-content:center; font-weight:700; text-transform:uppercase; font-size:.72rem; letter-spacing:.02em; padding:0; transition:background .2s ease,border-color .2s ease,color .2s ease; }
.watch-page.watch-rebuild .sidebar-ep-tool:hover { border-color:rgba(255,255,255,.2); color:#fff; }
.watch-page.watch-rebuild .sidebar-cc-btn.is-active { background:rgba(255,119,74,.22); color:#ff7f45; border-color:rgba(255,127,69,.45); }
.watch-page.watch-rebuild .sidebar-layout-toggle .layout-icon-list { display:none; font-size:.84rem; }
.watch-page.watch-rebuild .sidebar-order-toggle { position:relative; }
.watch-page.watch-rebuild .sidebar-order-toggle .order-icon { font-size:.88rem; line-height:1; color:#b7ccdf; transition:transform .34s cubic-bezier(.22,.61,.36,1), color .24s ease; }
.watch-page.watch-rebuild .sidebar-order-toggle.is-desc { border-color: rgba(77,214,255,.62); box-shadow: inset 0 0 0 1px rgba(57,213,255,.22), 0 0 12px rgba(57,213,255,.18); }
.watch-page.watch-rebuild .sidebar-order-toggle.is-desc .order-icon { color:#dff8ff; transform:rotate(180deg); }
.watch-page.watch-rebuild .sidebar-layout-toggle.is-list .layout-icon-grid { display:none; }
.watch-page.watch-rebuild .sidebar-layout-toggle.is-list .layout-icon-list { display:inline; }
.watch-page.watch-rebuild .sidebar-ep-range-row { display:grid; grid-template-columns:30px minmax(0,1fr) 30px; gap:8px; align-items:center; position:relative; }
.watch-page.watch-rebuild .sidebar-season-current { position:relative; width:100%; max-width:100%; min-width:0; font-weight:700; font-size:.96rem; line-height:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 28px; }
.watch-page.watch-rebuild .sidebar-season-current #sidebarRangeText { display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.02em; }
.watch-page.watch-rebuild .sidebar-season-current .sidebar-range-chevron { font-size:.72rem; color:#98abc2; transform:translateY(1px); }
.watch-page.watch-rebuild .sidebar-season-current.is-open .sidebar-range-chevron { transform:translateY(-1px) rotate(180deg); }
.watch-page.watch-rebuild .sidebar-season-nav { font-size:1.15rem; display:flex; align-items:center; justify-content:center; }
.watch-page.watch-rebuild .sidebar-season-nav:disabled { opacity:.35; cursor:not-allowed; }
.watch-page.watch-rebuild .sidebar-range-dropdown {
  position:absolute;
  top:calc(100% + 6px);
  left:38px;
  right:38px;
  background:#13202d;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:6px;
  box-shadow:0 12px 22px rgba(0,0,0,.45);
  display:grid;
  gap:4px;
  z-index:8;
}
.watch-page.watch-rebuild .sidebar-range-dropdown.hidden { display:none; }
.watch-page.watch-rebuild .sidebar-range-option { border:none; background:transparent; color:#cbd8e9; border-radius:8px; min-height:32px; font-size:.88rem; font-weight:650; text-align:center; padding:0 10px; }
.watch-page.watch-rebuild .sidebar-range-option.is-active { background:#39d86e; color:#042214; }
.watch-page.watch-rebuild .sidebar-range-option:hover { background:rgba(255,255,255,.08); color:#fff; }
.watch-page.watch-rebuild .sidebar-ep-grid { max-height: min(68vh, 760px); overflow:auto; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; padding-right:2px; align-content:start; transition: gap .32s ease, padding .32s ease; min-width:0; max-width:100%; flex:1 1 auto; }
.watch-page.watch-rebuild .sidebar-ep-pill { text-align:center; border-radius:9px; background:rgba(9,20,35,.78); min-height:34px; padding:8px 0; font-size:.88rem; border:1px solid rgba(255,255,255,.03); transition:background .28s ease,border-color .28s ease,color .28s ease,transform .42s cubic-bezier(.22,.61,.36,1),opacity .42s ease; color:#eaf2ff; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:6px; width:100%; max-width:100%; height:auto; box-sizing:border-box; min-width:0; }
.watch-page.watch-rebuild .sidebar-ep-pill .sidebar-ep-pill-title { display:none; }
.watch-page.watch-rebuild .sidebar-ep-pill:hover { border-color:rgba(255,127,69,.4); background:rgba(255,127,69,.12); }
.watch-page.watch-rebuild .sidebar-ep-pill.active { background:#ff7f45; color:#fff; border-color:transparent; }
.watch-page.watch-rebuild .sidebar-ep-pill.sidebar-ep-vip:not(.active) { box-shadow: inset 0 0 0 1px rgba(255,176,127,.2); }
.watch-page.watch-rebuild .sidebar-ep-grid[data-layout="list"] { grid-template-columns:minmax(0,1fr); gap:6px; padding-right:4px; min-width:0; max-width:100%; }
.watch-page.watch-rebuild .sidebar-ep-grid[data-layout="list"] .sidebar-ep-pill {
  justify-content:flex-start;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  min-height:44px;
  border-radius:12px;
  padding:7px 10px 7px 8px;
  gap:12px;
  overflow:hidden;
  background: linear-gradient(160deg, rgba(6,16,30,.95), rgba(8,18,34,.92));
  border:1px solid rgba(84,113,145,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.watch-page.watch-rebuild .sidebar-ep-grid[data-layout="list"] .sidebar-ep-pill:hover { border-color: rgba(92, 210, 255, .52); background: linear-gradient(160deg, rgba(10,26,46,.96), rgba(8,24,41,.94)); }
.watch-page.watch-rebuild .sidebar-ep-grid[data-layout="list"] .sidebar-ep-pill.active { border-color: rgba(109, 233, 255, .7); box-shadow: inset 0 0 0 1px rgba(85,216,255,.23), 0 0 0 1px rgba(85,216,255,.08); background: linear-gradient(160deg, rgba(10,32,58,.98), rgba(8,26,45,.96)); }
.watch-page.watch-rebuild .sidebar-ep-grid[data-layout="list"] .sidebar-ep-pill-no { width:40px; flex:0 0 40px; min-height:28px; border-radius:8px; border:1px solid rgba(74,117,146,.5); background:rgba(23,54,81,.84); text-align:center; font-weight:700; display:inline-flex; align-items:center; justify-content:center; font-size:.86rem; color:#53dfff; }
.watch-page.watch-rebuild .sidebar-ep-grid[data-layout="list"] .sidebar-ep-pill-title {
  display:block;
  font-size:.97rem;
  font-weight:600;
  color:#eaf5ff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  flex:1 1 auto;
  text-align:left;
}
.watch-page.watch-rebuild .sidebar-ep-grid[data-layout="list"] .sidebar-ep-pill.active .sidebar-ep-pill-title { color:#fff; }

@media (min-width: 1200px) {
  .watch-page.watch-rebuild .watch-top-grid { align-items: stretch; }
  .watch-page.watch-rebuild .watch-left-col,
  .watch-page.watch-rebuild .watch-right-col { display:flex; min-height: 100%; }
  .watch-page.watch-rebuild .watch-anime-card,
  .watch-page.watch-rebuild .watch-episodes-panel { height: 100%; }

  .watch-page.watch-rebuild .watch-anime-content { flex:1; }

  .watch-page.watch-rebuild .watch-toolbar {
    gap: 8px;
    padding: 10px 14px;
    align-items: center;
    flex-wrap: nowrap;
  }
  .watch-page.watch-rebuild .watch-toolbar-group { gap: 6px; flex-wrap: nowrap; }
  .watch-page.watch-rebuild .watch-toolbar .watch-action-btn {
    min-height: 33px;
    padding: 6px 7px;
    font-size: .83rem;
    gap: 5px;
    flex: 1 1 0;
  }
  .watch-page.watch-rebuild .watch-toolbar .watch-action-icon { width: 16px; height: 16px; }
  .watch-page.watch-rebuild .watch-status-strip { padding: 14px 18px 12px; }
  .watch-page.watch-rebuild .watch-status-strip h3 { font-size: 1.1rem; }
  .watch-page.watch-rebuild .watch-status-strip p { font-size: .89rem; max-width: 46ch; }

  .watch-page.watch-rebuild .watch-status-side {
    min-width: 232px;
  }

  .watch-page.watch-rebuild .watch-seasons { margin: 12px 14px 14px; padding: 14px; }
  .watch-page.watch-rebuild .watch-seasons-head { margin-bottom: 10px; }
  .watch-page.watch-rebuild .watch-seasons-nav { display:flex; }
  .watch-page.watch-rebuild .watch-seasons-rail {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    cursor: grab;
    touch-action: pan-x;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
  }
  .watch-page.watch-rebuild .watch-seasons-grid {
    display:flex;
    gap: 10px;
    min-width: 0;
    width: max-content;
    max-width: 100%;
  }
  .watch-page.watch-rebuild .watch-season-item {
    width: 156px;
    min-height: 72px;
    justify-content: center;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .watch-page.watch-rebuild .watch-season-name {
    font-size: 1rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .watch-page.watch-rebuild .watch-season-eps { font-size: .68rem; }

  .watch-page.watch-rebuild .watch-episodes-panel {
    display:flex;
    flex-direction:column;
    min-height: unset;
    position: static;
    padding: 14px;
  }
  .watch-page.watch-rebuild .sidebar-title { font-size: 2rem; }
  .watch-page.watch-rebuild .sidebar-ep-grid {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }
  .watch-page.watch-rebuild .sidebar-ep-pill { font-size: .89rem; padding: 10px 0; border-radius: 9px; }
}
.watch-page.watch-rebuild.expanded .watch-left-col,
.watch-page.watch-rebuild.expanded .watch-right-col { display:none; }
.watch-page.watch-rebuild.expanded .watch-top-grid { grid-template-columns: minmax(0,1fr); }
.watch-page.watch-rebuild .mob-ep-bar { display:none; }


@media (max-width: 1440px) {
  .watch-page.watch-rebuild { padding-inline: 16px; }
  .watch-page.watch-rebuild .watch-top-grid { grid-template-columns: minmax(190px,2fr) minmax(0,8fr) minmax(280px,3fr); }
}
@media (max-width: 1180px) {
  .watch-page.watch-rebuild { padding-inline: 14px; }
  .watch-page.watch-rebuild .watch-top-grid { grid-template-columns: minmax(170px,2fr) minmax(0,7fr) minmax(270px,3fr); }
  .watch-page.watch-rebuild .watch-anime-content h1 { font-size: 1.62rem; }
  .watch-page.watch-rebuild .watch-seasons-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .watch-page.watch-rebuild .sidebar-ep-grid { grid-template-columns:repeat(4,1fr); }
}
@media (max-width: 980px) {
  body.page-watch { --watch-breadcrumb-gap: 16px; }
  .watch-page.watch-rebuild { padding: 0 14px 20px; gap: var(--watch-breadcrumb-gap); }
  .watch-page.watch-rebuild .watch-page-header {
    position: relative;
    z-index: 2;
    margin: 0;
  }
  .watch-page.watch-rebuild .watch-top-grid { grid-template-columns: 1fr; }
  .watch-page.watch-rebuild .watch-center-col { order: 1; }
  .watch-page.watch-rebuild .watch-right-col { order: 2; }
  .watch-page.watch-rebuild .watch-left-col { order: 3; }
  .watch-page.watch-rebuild .watch-seasons-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .watch-page.watch-rebuild .watch-episodes-panel { display:flex; flex-direction:column; align-items:stretch; }
  .watch-page.watch-rebuild .mob-ep-bar { display:none; }
  .watch-page.watch-rebuild .video-wrapper .video-frame { min-height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 900px) {
  body.page-watch { --watch-navbar-top: 10px; }
}
@media (max-width: 700px) {
  body.page-watch .watch-page.watch-rebuild .watch-page-header-main {
    font-size: .82rem;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 13px;
  }
}
@media (max-width: 680px) {
  body.page-watch { --watch-breadcrumb-gap: 14px; }
  .watch-page.watch-rebuild { padding: 0 12px 18px; gap: var(--watch-breadcrumb-gap); }

  .watch-page.watch-rebuild .watch-page-header-main { gap: 6px; font-size: .86rem; }
  .watch-page.watch-rebuild .watch-panel, .watch-page.watch-rebuild .video-outer { border-radius: 14px; }
  .watch-page.watch-rebuild .watch-toolbar { padding:10px; gap:8px; flex-wrap:wrap; }
  .watch-page.watch-rebuild .watch-toolbar .watch-action-btn { font-size:.78rem; padding:6px 7px; }
  .watch-page.watch-rebuild .watch-toolbar .watch-action-label { display:none; }
  .watch-page.watch-rebuild .watch-status-strip { padding:12px; flex-direction:column; }
  .watch-page.watch-rebuild .watch-status-side { width:100%; align-items:flex-start; }
  .watch-page.watch-rebuild .watch-seasons { margin: 10px; padding: 12px; }
  .watch-page.watch-rebuild .watch-anime-content { padding: 14px; }
  .watch-page.watch-rebuild .watch-anime-content h1 { font-size: 1.45rem; }
  .watch-page.watch-rebuild .sidebar-ep-header { display:grid; grid-template-rows:auto auto; gap:10px; align-items:stretch; align-content:start; }
  .watch-page.watch-rebuild .sidebar-ep-head-row {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:center;
    gap:8px;
    min-width:0;
    width:100%;
  }
  .watch-page.watch-rebuild .sidebar-title { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .watch-page.watch-rebuild .sidebar-ep-top-tools {
    justify-self:stretch;
    width:100%;
    max-width:100%;
    min-width:0;
    grid-template-columns:minmax(0,1fr) 32px 32px 32px;
  }
  .watch-page.watch-rebuild .sidebar-ep-range-row { width:100%; margin-top:0; }
  .watch-page.watch-rebuild .sidebar-ep-grid { width:100%; margin-top:10px; }
}
@media (max-width: 480px) {
  .watch-page.watch-rebuild .watch-episodes-panel { padding: 10px; }
  .watch-page.watch-rebuild .sidebar-title { font-size: 1.02rem; }
  .watch-page.watch-rebuild .sidebar-ep-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; max-height: min(46vh, 340px); }
  .watch-page.watch-rebuild .sidebar-ep-pill { font-size: .88rem; min-height: 34px; padding: 8px 0; border-radius: 9px; }
  .watch-page.watch-rebuild .sidebar-ep-head-row {
    grid-template-columns:minmax(0,1fr);
    align-items:start;
  }
  .watch-page.watch-rebuild .sidebar-ep-top-tools {
    justify-self:start;
    width:100%;
  }
}

@media (min-width: 981px) {
  .watch-page.watch-rebuild {
    --watch-shell-max: 1880px;
    width: min(96vw, var(--watch-shell-max));
    max-width: var(--watch-shell-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

.watch-page.watch-rebuild .sidebar-ep-grid[data-layout="list"] {
  grid-template-columns: 1fr;
  gap: 3px;
}

/* ===== SERIES DETAIL DESKTOP POLISH (scoped overrides) ===== */
/* Keep series-detail visual polish scoped so mobile layout stays stable. */
.dv-breadcrumb-bar {
  margin-top: 6px;
  padding: 0;
  background: transparent;
  border: 0;
}
.dv-breadcrumb-bar .container {
  padding: 0 12px;
}
.detail-breadcrumb.watch-page-header-main {
  display: inline-flex;
  width: fit-content;
  max-width: min(100%, 780px);
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #9fb2cb;
  font-size: .88rem;
  font-weight: 500;
  padding: 14px 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, #0c1726, #07101d 64%);
  border: 1px solid rgba(158,194,255,.14);
  box-shadow: 0 20px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.detail-breadcrumb.watch-page-header-main a { color: #eef6ff; }
.detail-breadcrumb.watch-page-header-main a:hover { color: #ffab82; }
.detail-breadcrumb.watch-page-header-main .watch-page-header-home { color: #ffffff; font-weight: 600; }
.detail-breadcrumb.watch-page-header-main .watch-page-header-sep { color: #7f93ac; }
.dv-bc-current {
  color: #f4f8ff;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(44vw, 420px);
}

/* Episode + season design language refresh (detail page only). */
.dv-franchise-meta .dv-franchise-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 124px;
  padding: .62rem 1.05rem;
  border-radius: 12px;
  border: 1px solid rgba(122,158,201,.34);
  background: linear-gradient(160deg, rgba(26,35,53,.94), rgba(13,21,35,.98));
  color: #eaf2ff;
  font-weight: 700;
  font-size: .89rem;
  line-height: 1.1;
  letter-spacing: .015em;
  text-wrap: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(3,7,18,.32), 0 0 12px rgba(83,177,255,.2);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.dv-franchise-meta .dv-franchise-pill::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(78,148,255,.58), rgba(255,122,76,.58));
  opacity: 1;
  z-index: -1;
  filter: blur(8px);
  transition: opacity .2s ease;
}
.dv-franchise-meta .dv-franchise-pill:hover,
.dv-franchise-meta .dv-franchise-pill:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,169,128,.62);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 13px 24px rgba(9,14,30,.45), 0 0 0 1px rgba(101,150,221,.24);
}
.dv-franchise-meta .dv-franchise-pill:hover::before,
.dv-franchise-meta .dv-franchise-pill:focus-visible::before { opacity: 1; }
.dv-franchise-meta .dv-franchise-pill.active {
  border-color: rgba(255,190,162,.8);
  color: #fff7ee;
  background: linear-gradient(140deg, rgba(39,49,73,.97), rgba(19,24,40,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 26px rgba(20,30,54,.48), 0 0 22px rgba(255,122,76,.42), 0 0 10px rgba(92,192,255,.34);
}
.dv-franchise-meta .dv-franchise-pill.active::before {
  opacity: 1;
  background: linear-gradient(135deg, rgba(82,186,255,.88), rgba(255,128,84,.92));
}

.dv-episodes-title {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: clamp(1rem, 1.1vw, 1.22rem);
}
.dv-episodes-title::before {
  content: '◉';
  font-size: .84em;
  color: #ffad63;
  text-shadow: 0 0 10px rgba(255,146,88,.45);
}
.dv-episodes-title .icon-sm { color: #ffb26d; }

.dv-episodes-section {
  background: linear-gradient(180deg, #0c1726, #07101d 64%);
  border: 1px solid rgba(158,194,255,.14);
  border-radius: 18px;
  box-shadow: 0 20px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 16px;
}
.dv-episodes-header {
  margin-bottom: .95rem;
}
.series-episodes-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.series-episodes-panel .sidebar-title { margin: 0; }
.series-episodes-panel .sidebar-ep-header { display: grid; gap: 10px; }
.series-episodes-panel .sidebar-ep-head-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.series-episodes-panel .sidebar-ep-top-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.series-episodes-panel .sidebar-ep-search-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: min(188px, 100%);
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(124,147,176,.34);
  background: rgba(9,14,24,.85);
  color: #8ca2be;
  padding: 0 10px;
}
.series-episodes-panel .sidebar-ep-search {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #e7efff;
  font: inherit;
  font-size: .82rem;
}
.series-episodes-panel .sidebar-ep-search::placeholder { color: #8ca2be; }
.series-episodes-panel .sidebar-ep-tool,
.series-episodes-panel .sidebar-season-nav,
.series-episodes-panel .sidebar-season-current {
  border: 1px solid rgba(122,158,201,.34);
  background: linear-gradient(160deg, rgba(26,35,53,.94), rgba(13,21,35,.98));
  color: #eaf2ff;
  border-radius: 10px;
  min-height: 36px;
}
.series-episodes-panel .sidebar-ep-tool {
  min-width: 36px;
  padding: 0 10px;
  font-weight: 700;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.series-episodes-panel .sidebar-ep-tool:hover,
.series-episodes-panel .sidebar-ep-tool:focus-visible,
.series-episodes-panel .sidebar-ep-tool.is-active,
.series-episodes-panel .sidebar-layout-toggle.is-list,
.series-episodes-panel .sidebar-order-toggle.is-desc {
  border-color: rgba(255,171,130,.56);
  box-shadow: 0 0 0 1px rgba(94,139,200,.25), 0 0 16px rgba(90,179,255,.2);
}
.series-episodes-panel .sidebar-ep-range-row { display: grid; grid-template-columns: 32px 1fr 32px; gap: 8px; align-items: center; position: relative; }
.series-episodes-panel .sidebar-season-nav { font-size: 1.15rem; padding: 0; }
.series-episodes-panel .sidebar-season-nav:disabled { opacity: .35; cursor: not-allowed; }
.series-episodes-panel .sidebar-season-current {
  position: relative;
  width: 100%;
  font-weight: 700;
  font-size: .92rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 26px;
}
.series-episodes-panel .sidebar-range-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 40px;
  right: 40px;
  z-index: 6;
  display: grid;
  gap: 4px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid rgba(122,158,201,.3);
  background: linear-gradient(180deg, rgba(12,23,38,.98), rgba(7,16,29,.98));
}
.series-episodes-panel .sidebar-range-dropdown.hidden { display: none; }
.series-episodes-panel .sidebar-range-option {
  border: 0;
  border-radius: 8px;
  min-height: 30px;
  color: #e7efff;
  background: rgba(23,33,50,.72);
}
.series-episodes-panel .sidebar-range-option.is-active {
  background: rgba(255,122,76,.22);
  box-shadow: inset 0 0 0 1px rgba(255,122,76,.38);
}
.series-episodes-panel .sidebar-ep-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  max-height: min(56vh, 430px);
  overflow: auto;
  padding-right: 2px;
}
.series-episodes-panel .sidebar-ep-grid[data-layout="list"] { grid-template-columns: 1fr; }
.series-episodes-panel .sidebar-ep-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid rgba(148,180,218,.26);
  background: linear-gradient(150deg, rgba(30,44,66,.9), rgba(13,21,35,.96));
  color: #edf4ff;
  text-decoration: none;
  font-weight: 700;
}
.series-episodes-panel .sidebar-ep-pill-title { display: none; }
.series-episodes-panel .sidebar-ep-grid[data-layout="list"] .sidebar-ep-pill {
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  padding: 7px 10px 7px 8px;
  gap: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(6,16,30,.95), rgba(8,18,34,.92));
  border: 1px solid rgba(84,113,145,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.series-episodes-panel .sidebar-ep-grid[data-layout="list"] .sidebar-ep-pill:hover {
  border-color: rgba(92, 210, 255, .52);
  background: linear-gradient(160deg, rgba(10,26,46,.96), rgba(8,24,41,.94));
}
.series-episodes-panel .sidebar-ep-grid[data-layout="list"] .sidebar-ep-pill.active {
  border-color: rgba(109, 233, 255, .7);
  box-shadow: inset 0 0 0 1px rgba(85,216,255,.23), 0 0 0 1px rgba(85,216,255,.08);
  background: linear-gradient(160deg, rgba(10,32,58,.98), rgba(8,26,45,.96));
}
.series-episodes-panel .sidebar-ep-grid[data-layout="list"] .sidebar-ep-pill-no {
  width: 40px;
  flex: 0 0 40px;
  min-height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(74,117,146,.5);
  background: rgba(23,54,81,.84);
  text-align: center;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .86rem;
  color: #53dfff;
}
.series-episodes-panel .sidebar-ep-grid[data-layout="list"] .sidebar-ep-pill-title {
  display: block;
  font-size: .97rem;
  font-weight: 600;
  color: #eaf5ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}
.series-episodes-panel .sidebar-ep-grid[data-layout="list"] .sidebar-ep-pill.active .sidebar-ep-pill-title {
  color: #fff;
}
.series-episodes-panel .sidebar-ep-pill.active {
  border-color: rgba(255,190,162,.8);
  box-shadow: 0 0 0 1px rgba(101,150,221,.24), 0 0 16px rgba(255,122,76,.3);
}
.series-episodes-panel .sidebar-ep-pill.hidden { display: none; }

.ep-search-input {
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(124,147,176,.34);
  background: rgba(9,14,24,.85);
  color: #e7efff;
  font-size: .82rem;
  min-width: min(220px, 100%);
}
.ep-search-input::placeholder { color: #8ca2be; }
.ep-search-input:focus {
  border-color: rgba(255,145,95,.72);
  box-shadow: 0 0 0 2px rgba(255,143,91,.2);
}

#episodesGrid .ep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(48px, 4vw, 70px);
  min-height: clamp(36px, 3vw, 52px);
  padding: .35rem .72rem;
  border-radius: 11px;
  border: 1px solid rgba(148,180,218,.26);
  background: linear-gradient(150deg, rgba(30,44,66,.9), rgba(13,21,35,.96));
  color: #edf4ff;
  font-size: clamp(.84rem, .95vw, .98rem);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#episodesGrid .ep-btn .ep-btn-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  line-height: 1;
}
  #episodesGrid .ep-btn:hover,
  #episodesGrid .ep-btn:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,171,130,.56);
  background: linear-gradient(150deg, rgba(43,61,88,.95), rgba(19,31,49,.98));
  box-shadow: 0 12px 20px rgba(6,11,24,.34), 0 0 0 1px rgba(94,139,200,.25);
}

@media (min-width: 1024px) {
  .detail-banner-wrap {
    height: clamp(340px, 36vw, 480px);
    max-width: min(98vw, 1700px);
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
  }
  .detail-banner {
    background-size: cover;
    background-position: center 28%;
    transform: scale(1.03);
  }
  .detail-banner-overlay {
    background:
      linear-gradient(92deg, rgba(6,10,18,.62) 0%, rgba(7,12,20,.42) 36%, rgba(7,12,20,.24) 63%, rgba(8,12,20,.58) 100%),
      linear-gradient(to bottom, rgba(8,12,20,.04) 0%, rgba(8,12,20,.5) 78%, rgba(8,12,20,.82) 100%);
  }

  .dv-wrap {
    display: grid;
    grid-template-columns: minmax(230px, clamp(250px, 20vw, 320px)) minmax(0, 1fr);
    align-items: end;
    gap: clamp(1.1rem, 1.8vw, 2rem);
    margin-top: clamp(-140px, -10.4vw, -100px);
    padding: 0 clamp(.6rem, 1.6vw, 1.25rem) .85rem;
    max-width: min(96vw, 1380px);
    margin-left: auto;
    margin-right: auto;
  }
  .dv-left { align-items: flex-start; }
  .dv-poster-box,
  .dv-poster-img,
  .dv-poster-ph { width: clamp(230px, 20vw, 320px); border-radius: 18px; }
  .dv-poster-img {
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 25px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05) inset;
  }
  .dv-right { max-width: 960px; text-align: left; }
  .dv-title { font-size: clamp(1.95rem, 2.8vw, 2.9rem); text-align: left; }
  .dv-alt-title { font-size: clamp(.95rem, 1.1vw, 1.12rem); text-align: left; }
  .dv-seo-inline { font-size: clamp(.96rem, 1vw, 1.05rem); max-width: 82ch; }
  .dv-info-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: .42rem clamp(.85rem, 1.6vw, 1.35rem);
    font-size: clamp(.88rem, .9vw, .98rem);
  }
  .dv-genres,
  .dv-action-row,
  .dv-rating-inline { justify-content: flex-start; }
  .dv-btn-watch,
  .dv-btn-secondary,
  .dv-btn-trailer {
    font-size: clamp(.9rem, .9vw, 1rem);
    padding: .65rem 1.05rem;
    border-radius: 11px;
  }
  .dv-synopsis-block {
    background: linear-gradient(180deg, rgba(8,14,24,.66), rgba(7,12,21,.9));
    border: 1px solid rgba(130,165,209,.2);
    border-radius: 14px;
    padding: .9rem 1rem;
  }
  .dv-genre-tag {
    border-radius: 999px;
    border-color: rgba(159,192,232,.28);
    box-shadow: 0 8px 18px rgba(4,9,18,.24);
  }
}

@media (max-width: 700px) {
  .dv-breadcrumb-bar { margin-top: 4px; }
  .dv-breadcrumb-bar .container { padding: 0 .75rem; }
  .detail-breadcrumb.watch-page-header-main {
    font-size: .82rem;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 13px;
  }
  .dv-bc-current { max-width: 58vw; }

  .detail-banner-wrap {
    height: 158px;
    border-radius: 18px;
    overflow: hidden;
  }
  .detail-banner { background-position: center 25%; transform: none; }
  .detail-banner-overlay {
    background:
      linear-gradient(180deg, rgba(7,11,19,.08) 0%, rgba(7,11,19,.44) 66%, rgba(7,11,19,.74) 100%);
  }

  .dv-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    margin-top: -70px;
    padding: 0 .35rem .5rem;
  }
  .dv-left,
  .dv-right { align-items: center; text-align: center; }
  .dv-poster-box,
  .dv-poster-img,
  .dv-poster-ph { width: clamp(114px, 33vw, 140px); }
  .dv-title { font-size: clamp(1.06rem, 5.4vw, 1.34rem); line-height: 1.22; }
  .dv-alt-title { font-size: .82rem; line-height: 1.35; }
  .dv-seo-inline { font-size: .82rem; line-height: 1.52; margin-bottom: .72rem; }
  .dv-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .28rem .46rem;
    font-size: .79rem;
    width: 100%;
  }
  .dv-info-item {
    min-width: 0;
    padding: .42rem .52rem;
    border-radius: 8px;
  }
  .dv-info-label,
  .dv-info-val {
    font-size: .74rem;
    line-height: 1.26;
  }
  .dv-info-val {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .dv-genres,
  .dv-action-row,
  .dv-rating-inline {
    justify-content: center;
    gap: .42rem;
  }
  .dv-action-row { margin-top: .66rem; }
  .dv-btn-watch,
  .dv-btn-secondary,
  .dv-btn-trailer {
    font-size: .75rem;
    padding: .42rem .72rem;
    border-radius: 9px;
  }
  .dv-rating-num { font-size: .74rem; }

  .dv-franchise-meta { gap: .42rem; }
  .dv-franchise-meta .dv-franchise-pill {
    min-height: 39px;
    min-width: 108px;
    padding: .5rem .78rem;
    font-size: .78rem;
    border-radius: 10px;
  }

  #episodesGrid {
    gap: .35rem;
  }
  #episodesGrid .ep-btn {
    min-width: 46px;
    min-height: 34px;
    padding: .3rem .48rem;
    border-radius: 9px;
    font-size: .76rem;
  }
  .dv-episodes-section {
    border-radius: 14px;
    padding: 12px;
  }
  .ep-search-input {
    min-height: 34px;
    min-width: min(168px, 100%);
    font-size: .78rem;
  }
  .series-episodes-panel .sidebar-ep-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .series-episodes-panel .sidebar-ep-top-tools { gap: 6px; }
  .series-episodes-panel .sidebar-ep-search-wrap { min-width: min(148px, 100%); }
}

@media (max-width: 420px) {
  .dv-info-grid {
    grid-template-columns: 1fr 1fr;
    gap: .24rem .34rem;
  }
  .dv-info-label,
  .dv-info-val { font-size: .71rem; }
  .dv-franchise-meta .dv-franchise-pill {
    min-width: 100px;
    font-size: .75rem;
  }
}

/* =========================================================
   Mobile-only tap highlight reset
   Removes Android/Chrome/WebView transparent glass flash on tap
   Desktop behavior must remain untouched
   ========================================================= */
@media (hover: none), (pointer: coarse) {
  html,
  body,
  a,
  button,
  input,
  select,
  textarea,
  label,
  summary,
  [role="button"],
  [tabindex],
  .btn,
  .nav-action,
  .menu-toggle,
  .theme-toggle,
  .lang-btn,
  .theme-option,
  .lang-item,
  .server-btn,
  .ep-btn,
  .sidebar-ep-pill,
  .sidebar-ep-tool,
  .sidebar-cc-btn,
  .sidebar-order-toggle,
  .watch-season-item,
  .watch-subtitle-mode-btn,
  .shell-toggle,
  .wsch-mode-btn,
  .wsch-date-btn,
  .rec-tab,
  .pop-tab,
  .ptab-btn,
  .az-letter-btn,
  .card-link,
  .anime-card,
  .cw-thumb-link {
    -webkit-tap-highlight-color: transparent;
  }

  a:focus,
  button:focus,
  [role="button"]:focus,
  [tabindex]:focus {
    outline: none;
  }
}

/* ===== SERIES DETAIL HERO — MODERN REBUILD (scoped, non-invasive) ===== */
.detail-banner-wrap {
  --sd-banner-radius-desktop: 24px;
  --sd-banner-radius-mobile: 18px;
  border-radius: var(--sd-banner-radius-desktop);
  overflow: hidden;
  isolation: isolate;
}

.dv-left { position: relative; }

.dv-poster-box {
  --sd-poster-float-lift: -10px;
  --sd-poster-float-settle: -4px;
  animation: dvPosterFloat 6.8s cubic-bezier(.45, 0, .25, 1) infinite;
  transform: translate3d(0, 0, 0);
  transform-origin: center bottom;
  will-change: transform;
}

.dv-poster-img {
  transform: translateZ(0);
  backface-visibility: hidden;
}

@keyframes dvPosterFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(.001deg);
  }
  35% {
    transform: translate3d(0, var(--sd-poster-float-lift, -10px), 0) rotate(-.35deg);
  }
  65% {
    transform: translate3d(0, var(--sd-poster-float-settle, -4px), 0) rotate(.25deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dv-poster-box { animation: none; transform: none; }
}

@media (min-width: 1024px) {
  .detail-banner-wrap {
    border-radius: var(--sd-banner-radius-desktop);
    overflow: hidden;
  }
  .detail-banner-overlay {
    background:
      linear-gradient(96deg, rgba(6,10,18,.56) 0%, rgba(7,12,20,.36) 36%, rgba(7,12,20,.2) 62%, rgba(8,12,20,.54) 100%),
      linear-gradient(to bottom, rgba(8,12,20,.05) 0%, rgba(8,12,20,.52) 72%, rgba(8,12,20,.86) 100%);
  }
  .dv-wrap { margin-top: clamp(-118px, -8.4vw, -92px); align-items: end; }
  .dv-right { padding-bottom: .35rem; }
  .dv-title { line-height: 1.14; max-width: 22ch; }
}

@media (max-width: 700px) {
  .detail-banner-wrap {
    height: clamp(178px, 44vw, 228px);
    border-radius: var(--sd-banner-radius-mobile);
  }
  .dv-wrap {
    margin-top: clamp(-58px, -12vw, -42px);
    gap: .82rem;
  }
  .dv-poster-box,
  .dv-poster-img,
  .dv-poster-ph { width: clamp(122px, 34vw, 148px); }
  .dv-right { width: min(100%, 720px); }
  .dv-title { max-width: 18ch; margin-inline: auto; }
}