/* ============================================
   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;
  --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;
}

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

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

html { scroll-behavior: smooth; overflow-x: hidden; }

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

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }

/* ---- 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 ============ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: rgba(10,10,26,0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  transition: box-shadow 0.3s;
}

[data-theme="light"] .navbar { background: rgba(255,255,255,0.95); }

.navbar.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.3); }

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

.nav-logo { flex-shrink: 0; }
.logo-text {
  font-size: 1.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--color-primary), #ff6b8a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}
.nav-logo img { height: 36px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin-left: 0.5rem;
}

.nav-links a {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s;
  white-space: nowrap;
}

.nav-links a:hover, .nav-links a.active {
  color: var(--color-primary);
  background: rgba(233,69,96,0.1);
}

/* 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.15rem; margin-left: auto; }

/* Search */
.nav-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 0.75rem;
  height: 38px;
  width: 260px;
  transition: border-color 0.2s;
  flex-shrink: 1;
}
.nav-search:focus-within { border-color: var(--color-primary); }
.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: none;
  border: none;
  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: 40px;
  height: 40px;
  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: 20px; height: 20px; }

/* Mobile: full navbar overlay */
.navbar-search-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--bg-surface);
  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-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: var(--nav-height);
  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: 768px) {
  .nav-search { display: none; }
  .search-icon-btn { display: flex; }
  .nav-inner { max-width: 100%; padding: 0 0.75rem; gap: 0.5rem; }
}
.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 toggle button ── */
.theme-toggle {
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--text-secondary);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  /* Critical: overflow:hidden stops Lucide icons from
     adding layout height before position:absolute resolves */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* position:relative so the absolute icons are
     contained inside the button's 40×40 box */
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.theme-toggle:hover {
  background: var(--bg-hover);
  color: var(--color-primary);
}

/* Both icons sit in the same 40×40 space; only one is visible */
.icon-sun,
.icon-moon {
  width: 18px;
  height: 18px;
  /* position:absolute removes both icons from normal flow
     so they never add height to the button or the navbar */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .2s;
  /* display:block prevents inline spacing gaps */
  display: block;
  flex-shrink: 0;
}

/* Show sun in dark mode, moon in light mode */
[data-theme="dark"]  .icon-sun  { opacity: 1; }
[data-theme="dark"]  .icon-moon { opacity: 0; }
[data-theme="light"] .icon-sun  { opacity: 0; }
[data-theme="light"] .icon-moon { opacity: 1; }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: 8px;
}
.menu-toggle svg { width: 22px; height: 22px; }

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

/* Icons */
.icon-xs svg, [data-lucide].icon-xs { width: 14px; height: 14px; }
.icon-sm svg, [data-lucide].icon-sm { width: 16px; height: 16px; }
svg { display: inline-block; vertical-align: middle; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--color-primary); color: white; }
.btn-primary:hover { background: #ff2050; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(233,69,96,0.4); }
.btn-ghost { background: rgba(255,255,255,0.08); color: var(--text-primary); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg-hover); }
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.btn-lg { padding: 0.8rem 1.6rem; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }

/* ============ BADGES ============ */
.badge { display: inline-block; padding: 0.25rem 0.6rem; border-radius: 6px; font-size: 0.75rem; font-weight: 700; }
.badge-primary { background: var(--color-primary); color: white; }
.badge-status { background: rgba(255,255,255,0.1); color: white; }
.badge-status.ongoing { background: #22c55e; }
.badge-status.completed { background: #3b82f6; }
.badge-status.upcoming { background: #f59e0b; }

/* ============ HERO SLIDER - YOUTUBE THUMBNAIL SIZE (FIXED) ============ */
.hero-section {
  position: relative;
  width: 100%;
  height: auto;  /* height auto karo */
  max-height: 500px;  /* Maximum height limit */
  overflow: hidden;
  background: var(--bg-base);
}

.hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px; /* Minimum height for mobile */
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center 20%; /* Thoda upar se show karo */
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
  display: flex;
  align-items: flex-end;
  visibility: hidden;
}

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

/* Responsive height for different screens */
@media (min-width: 1280px) {
  .hero-section {
    max-height: 550px;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-section {
    max-height: 450px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section {
    max-height: 400px;
  }
}

@media (max-width: 767px) {
  .hero-section {
    max-height: 350px;
  }
}

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

/* Gradient Overlay - adjust for smaller height */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10, 10, 26, 0.95) 0%,
    rgba(10, 10, 26, 0.75) 35%,
    rgba(10, 10, 26, 0.15) 60%,
    transparent 75%
  ),
  linear-gradient(
    to top,
    rgba(10, 10, 26, 0.9) 0%,
    transparent 40%
  );
  pointer-events: none;
}

/* Light theme overlay */
[data-theme="light"] .hero-overlay {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.75) 35%,
    rgba(255, 255, 255, 0.15) 60%,
    transparent 75%
  ),
  linear-gradient(
    to top,
    rgba(255, 255, 255, 0.85) 0%,
    transparent 40%
  );
}

/* Content styling - make it compact */
.hero-content {
  position: relative;
  z-index: 3;
  padding: 1.5rem 2rem 1.8rem;
  max-width: 550px;
  width: 100%;
}

.hero-badges {
  margin-bottom: 0.5rem;
}

.hero-badges .badge {
  padding: 0.15rem 0.5rem;
  font-size: 0.65rem;
}

.hero-title {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.15rem;
}

.hero-alt-title {
  font-size: 0.8rem;
  margin-bottom: 0.35rem;
}

.hero-meta {
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
}

.hero-meta svg {
  width: 12px;
  height: 12px;
}

.hero-ep-count {
  font-size: 0.75rem;
}

.hero-desc {
  font-size: 0.8rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  -webkit-line-clamp: 1;
  max-width: 450px;
}

.hero-actions {
  gap: 0.6rem;
}

.btn-hero {
  padding: 0.4rem 1.2rem;
  font-size: 0.8rem;
}

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

.btn-glass {
  padding: 0.35rem 1rem;
  font-size: 0.75rem;
}

/* ============ HERO SLIDER CONTROLS ============ */
.hero-controls {
  position: absolute;
  bottom: 1.5rem;
  right: 2rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Dots container */
.hero-dots {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Individual dot */
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  margin: 0;
}

/* Light theme dots */
[data-theme="light"] .hero-dot {
  background: rgba(0, 0, 0, 0.3);
}

/* Active dot */
.hero-dot.active {
  background: var(--color-primary);
  width: 28px;
  border-radius: 12px;
}

/* Dot hover effect */
.hero-dot:hover {
  background: var(--color-primary);
  transform: scale(1.2);
}

.hero-dot.active:hover {
  transform: scale(1);
}

/* Arrow buttons */
.hero-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  padding: 0;
}

/* Light theme arrows */
[data-theme="light"] .hero-arrow {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.15);
  color: #1a1a1a;
}

/* Arrow hover effect */
.hero-arrow:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.1);
  color: white;
}

/* Arrow icons */
.hero-arrow svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.5;
  transition: transform 0.2s ease;
}

/* Arrow hover icon animation */
.hero-prev:hover svg {
  transform: translateX(-2px);
}

.hero-next:hover svg {
  transform: translateX(2px);
}

/* Disabled state (optional) */
.hero-arrow.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.hero-arrow.disabled:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  transform: none;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  .hero-controls {
    bottom: 1rem;
    right: 1rem;
    gap: 0.75rem;
  }

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

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

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

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

@media (max-width: 480px) {
  .hero-controls {
    bottom: 0.75rem;
    right: 0.75rem;
    gap: 0.5rem;
  }

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

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

  .hero-dots {
    gap: 0.35rem;
  }

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

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

/* Touch devices - larger hit area */
@media (hover: none) and (pointer: coarse) {
  .hero-arrow {
    width: 44px;
    height: 44px;
  }

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

/* Mobile adjustments */
@media (max-width: 768px) {
  .hero-content {
    padding: 1rem 1.5rem;
  }
  
  .hero-title {
    font-size: 1.3rem;
  }
  
  .hero-meta span:nth-child(3) {
    display: none; /* Hide genre on mobile */
  }
  
  .hero-desc {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-section {
    max-height: 250px;
  }
  
  .hero-content {
    padding: 0.75rem 1rem;
  }
  
  .hero-title {
    font-size: 1.1rem;
  }
  
  .hero-badges .badge:not(:first-child) {
    display: none; /* Show only first badge */
  }
  
  .hero-meta span:nth-child(2) {
    display: none; /* Hide year on mobile */
  }
  
  .hero-actions {
    gap: 0.4rem;
  }
  
  .btn-hero {
    padding: 0.3rem 0.8rem;
    font-size: 0.7rem;
  }
  
  .btn-glass {
    padding: 0.25rem 0.7rem;
    font-size: 0.65rem;
  }
}

/* ============ 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; }

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

/* ============ ANIME CARD ============ */
.anime-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.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 - All Badges in One Place
   ================================================================ */

/* Status Ribbon - Diagonal (Top Left) */
/* Ribbon: overflow-hidden triangle corner */
.bdg-wrap {
    position: absolute;
    top: 0; left: 0;
    width: 62px;
    height: 62px;
    overflow: hidden;
    z-index: 11;
    pointer-events: none;
}
.bdg {
    position: absolute;
    left: -18px;
    top: 15px;
    width: 88px;
    padding: 5px 0 4px;
    text-align: center;
    transform: rotate(-45deg);
    font-size: 8px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
.bdg.ongoing   { background: linear-gradient(180deg, #22c55e, #15803d); }
.bdg.completed { background: linear-gradient(180deg, #ef4444, #991b1b); }
.bdg.upcoming  { background: linear-gradient(180deg, #f59e0b, #b45309); }

/* Type badge - top right (TV / Movie / ONA) */
.card-type-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
  z-index: 3;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #6c63ff, #4f46e5);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.card-type-badge.tv      { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.card-type-badge.movie   { background: linear-gradient(135deg, #f59e0b, #b45309); }
.card-type-badge.ona     { background: linear-gradient(135deg, #e94560, #9f1239); }
.card-type-badge.ova     { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.card-type-badge.special { background: linear-gradient(135deg, #0d9488, #0f766e); }
.card-type-badge.music   { background: linear-gradient(135deg, #ec4899, #be185d); }
.card-type-badge.donghua { background: linear-gradient(135deg, #f97316, #c2410c); }

/* 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: space-between;
  padding: 20px 8px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,0.45) 60%);
  z-index: 3;
}
.card-ep-label {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.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: none; border: none; }
.card-title {
  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);
}
.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;
}
.card-ep-badge {
  background: rgba(233,69,96,0.9);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  position: absolute;
  bottom: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.card-badges {
  position: absolute;
  top: 0.5rem; left: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.badge-type, .badge-ongoing, .badge-completed {
  display: inline-block;
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3px;
}
.badge-type { background: rgba(10,10,26,0.82); color: rgba(255,255,255,0.9); backdrop-filter: blur(4px); }
.badge-ongoing { background: #22c55e; color: white; }
.badge-completed { background: #3b82f6; color: white; }
.card-rating {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  background: rgba(10,10,26,0.82);
  backdrop-filter: blur(4px);
  padding: 0.18rem 0.45rem;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}


/* ============ 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: rgba(34,197,94,.13);  border-color: rgba(34,197,94,.25);  color: #4ade80; }
.detail-chip.is-status-completed { background: rgba(59,130,246,.13); border-color: rgba(59,130,246,.25); color: #93c5fd; }
.detail-chip.is-status-upcoming  { background: rgba(245,158,11,.13); border-color: rgba(245,158,11,.25); color: #fbbf24; }
.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; }

/* ── Status badge ─────────────────────────── */
.status-badge { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 5px; font-size: 0.73rem; font-weight: 700; }
.status-badge.ongoing   { background: rgba(34,197,94,0.15);  color: #22c55e; }
.status-badge.completed { background: rgba(59,130,246,0.15); color: #3b82f6; }
.status-badge.upcoming  { background: rgba(245,158,11,0.15); color: #f59e0b; }

/* ── 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;
}
.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;
}

/* Coloured status values */
.dv-status-completed { color: #3b82f6; font-weight: 700; }
.dv-status-ongoing   { color: #22c55e; font-weight: 700; }
.dv-status-upcoming  { color: #f59e0b; 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;
}
.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-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;
}

/* ── 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 {
  display: flex;
  gap: 1.25rem;
  padding: 0.75rem 1.25rem 2rem;
  max-width: 1400px;
  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-btn {
  padding: 0.28rem 0.8rem; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary);
  font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.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;
}
.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: .97rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  margin: 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: rgba(34,197,94,.15);  color: #22c55e; }
.wic-status-completed { background: rgba(59,130,246,.15); color: #3b82f6; }
.wic-status-upcoming  { background: rgba(245,158,11,.15); color: #f59e0b; }
.wic-rating {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .72rem;
  font-weight: 700;
  color: #fbbf24;
}

/* Series row */
.wic-series-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
}
.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); }

/* Share buttons */
.wic-share-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-top: .1rem;
}
.wic-share-btn {
  width: 36px;
  height: 36px;
  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;
  width: 42px; height: 36px; 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(--bg-surface);
  border-top: 1px solid var(--border);
  padding: 3rem 0 1.5rem;
  margin-top: 3rem;
  position: relative;
  z-index: 2;
}
.footer-inner { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
.footer-top { display: flex; gap: 3rem; flex-wrap: wrap; margin-bottom: 2rem; }
.footer-brand { flex: 2; min-width: 200px; }
.footer-logo { font-size: 1.4rem; font-weight: 900; color: var(--color-primary); display: block; margin-bottom: 0.5rem; }
.footer-brand p { font-size: 0.85rem; color: var(--text-muted); }
.footer-links { flex: 1; min-width: 120px; }
.footer-links h4 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.75rem; color: var(--text-muted); }
.footer-links ul { list-style: none; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { font-size: 0.85rem; color: var(--text-secondary); transition: color 0.2s; }
.footer-links a:hover { color: var(--color-primary); }
.footer-bottom { padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; align-items: center; }
.footer-bottom p { font-size: 0.8rem; color: var(--text-muted); }
.footer-note { font-size: 0.75rem !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) {
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; position: fixed; top: var(--nav-height); left: 0; right: 0; background: var(--bg-surface); padding: 1rem; border-bottom: 1px solid var(--border); z-index: 999; }
  .menu-toggle { display: flex; }
  .hero-section { height: 420px; }
  .hero-title { font-size: 1.6rem; }
  .hero-content { padding: 1rem 1rem 3.5rem; max-width: 100%; }
  .hero-desc { display: none; }
  .hero-controls { right: 1rem; bottom: 1rem; }
  /* anime-grid handled by viewport breakpoints above */
  /* Watch page: single column, no sidebar */
  .watch-sidebar  { display: none !important; }
  .watch-page     { flex-direction: column !important; padding: 0 !important; gap: 0 !important; max-width: 100% !important; }
  .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%; }
}

@media (max-width: 480px) {
  .hero-content { padding: 0.75rem 0.75rem 3.5rem; }
  .hero-title { font-size: 1.3rem; }
  .hero-arrow { display: none; }
  .container { padding: 0 0.75rem; }
}

/* ── 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: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  padding: 0 6px;
  height: 36px;
  cursor: pointer;
  font-size: 12px; 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: transparent; }
.lang-btn svg {
  width: 15px; height: 15px;
  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-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;
}

@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-btn span { display: none; }
@media (min-width: 640px) { .nav-login-btn span { display: inline; } }

.nav-user-wrap { position: relative; }

/* Button — border/background container hata diya, sirf clean icon */
.nav-user-btn {
  display: flex; align-items: center; gap: 0.3rem;
  background: none; border: none;
  border-radius: 99px; padding: 0.2rem;
  cursor: pointer; transition: opacity 0.2s;
}
.nav-user-btn:hover { opacity: 0.8; }

/* Initials avatar (jab koi image nahi) */
.nav-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-primary);
  color: white; font-size: 0.78rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Profile image avatar */
.nav-user-avatar-img {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; display: block; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.18);
}
.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:hover { background: var(--bg-card); color: var(--text-primary); }
.nav-user-logout:hover { color: var(--color-primary); }


/* ============================================================
   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(--nav-height);
  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-quality {
  font-size: .7rem;
  background: rgba(255,255,255,.1);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: .03em;
}
[data-theme="light"] .dl-quality {
  background: rgba(0,0,0,.08);
}
.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;
}
@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: diagonal status ribbon ── */
.sc-ribbon-wrap {
  position: absolute;
  top: 0; left: 0;
  width: 70px;
  height: 70px;
  overflow: hidden;
  z-index: 11;
  pointer-events: none;
}
.sc-ribbon {
  position: absolute;
  left: -22px;
  top: 15px;
  width: 100px;
  padding: 5px 0 4px;
  text-align: center;
  transform: rotate(-45deg);
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1;
  font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  box-shadow: 0 2px 8px rgba(0,0,0,0.55);
  white-space: nowrap;
}
.sc-ribbon.ongoing   { background: linear-gradient(180deg, #22c55e, #15803d); }
.sc-ribbon.upcoming  { background: linear-gradient(180deg, #f59e0b, #b45309); }
.sc-ribbon.completed { background: linear-gradient(180deg, #ef4444, #991b1b); }

/* ── 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);
}
.sc-type.tv      { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.sc-type.movie   { background: linear-gradient(135deg, #f59e0b, #b45309); }
.sc-type.ona     { background: linear-gradient(135deg, #e94560, #9f1239); }
.sc-type.ova     { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.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: #fbbf24;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 20px;
  z-index: 10;
  backdrop-filter: blur(4px);
}

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

/* ── 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;
}

/* 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;
  }
}


/* 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: #f59e0b;
  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: #fbbf24;
  flex-shrink: 0;
}

/* ── 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));
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}

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

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

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

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

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

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

/* 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,
.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 {
  padding-top: 0.75rem !important;
  padding-bottom: 2rem !important;
}

/* Sidebar stretches to fill available space on wide screens */
.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,
  .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-sidebar {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .container,
  .watch-page,
  .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,
  .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,
  .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: 0 0 2.5rem; }

/* 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:#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:#f0f4f8; border-radius:1rem;
  padding:.6rem .5rem; margin-bottom:1.5rem;
}
.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:#14b8a6; }
.wsch-day-btn.is-today {
  background:#14b8a6; color:#fff;
  box-shadow:0 2px 8px rgba(20,184,166,.35);
}
.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:rgba(20,184,166,.12); }
.wsch-day-btn:hover:not(.is-today) .wsch-day-name,
.wsch-day-btn:hover:not(.is-today) .wsch-day-num { color:#14b8a6; }

/* Day panels */
.wsch-day-panel           { display:none; }
.wsch-day-panel.is-active { display:block; }
.wsch-empty { color:#b0b8cc; font-size:.9rem; padding:1.5rem 0; text-align:center; }

/* ── 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:#14b8a6;
  opacity:.25;
  min-width:8px;
}
.wsch-tl-bubble {
  flex-shrink:0;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  border-radius:.5rem;
  padding:.28rem .75rem;
  font-size:.78rem; font-weight:700; color:#14b8a6;
  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,rgba(20,184,166,.3),#14b8a6);
}
.wsch-tl-dot {
  width:11px; height:11px; border-radius:50%;
  background:#14b8a6;
  border:2.5px solid #fff;
  box-shadow:0 0 0 2px #14b8a6;
  margin-bottom:.55rem;
}

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

/* ── Card ── */
:root { --wsch-card-w: 148px; --wsch-card-h: 210px; }

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

.wsch-card-img {
  position:relative;
  width:var(--wsch-card-w);
  height:var(--wsch-card-h);
  border-radius:.75rem; overflow:hidden;
  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 info box — top left dark pill */
.wsch-ep-badge {
  position:absolute; top:.5rem; left:.5rem;
  background:rgba(20,20,50,.78);
  color:#fff; font-size:.7rem; font-weight:700;
  padding:.25rem .65rem; border-radius:.4rem;
  backdrop-filter:blur(6px);
  max-width:calc(100% - 1rem);
  line-height:1.35;
}

/* Tags — bottom left */
.wsch-tags {
  position:absolute; bottom:.5rem; left:.5rem;
  display:flex; gap:.28rem; flex-wrap:wrap;
}
.wsch-tag {
  font-size:.64rem; font-weight:800;
  padding:.16rem .48rem; border-radius:.28rem; line-height:1.4;
  letter-spacing:.02em; text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.wsch-tag-yellow { background:linear-gradient(135deg,#f5a623,#e8960c); color:#fff; }
.wsch-tag-pink   { background:linear-gradient(135deg,#f0748a,#e8607a); color:#fff; }
.wsch-tag-blue   { background:linear-gradient(135deg,#60a5fa,#3b82f6); color:#fff; }
.wsch-tag-orange { background:linear-gradient(135deg,#fb923c,#f4631a); color:#fff; }
.wsch-tag-gray   { background:rgba(20,20,45,.7); color:#fff; }

/* 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;
}

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

/* ── 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: #14b8a6;
}

/* Timeline bubble */
[data-theme="dark"] .wsch-tl-bubble {
  background: #1e293b;
  color: #14b8a6;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
[data-theme="light"] .wsch-tl-bubble {
  background: #fff;
  color: #14b8a6;
  box-shadow: 0 2px 10px 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: #4b5568;
}

/* 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; }