/* ============ NEXUS — Cinematic Streaming UI ============ */
*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: #050912; color: #e8f0ff;
  font-family: 'Barlow', -apple-system, system-ui, sans-serif; font-weight: 400;
  overflow-x: hidden; min-height: 100vh; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }
input, select, textarea { font-family: inherit; }
::selection { background: rgba(var(--accent-rgb), .35); color: #fff; }

/* === Custom Cursor === */
/* Only on non-touch, non-reduced-motion environments */
@media (pointer: fine) and (hover: hover) {
  *, *::before, *::after { cursor: none !important; }

  #cursor-dot {
    position: fixed; top: -100px; left: -100px; z-index: 99999;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), .9), 0 0 20px rgba(var(--accent-rgb), .4);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width .15s, height .15s, background .3s, opacity .2s;
    will-change: transform;
  }
  #cursor-ring {
    position: fixed; top: -100px; left: -100px; z-index: 99998;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1.5px solid rgba(var(--accent-rgb), .65);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), .2), inset 0 0 8px rgba(var(--accent-rgb), .05);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1),
                border-color .3s, box-shadow .3s, background .3s, opacity .2s;
    will-change: transform;
  }

  /* Hover state — ring expands + fills slightly */
  body.cursor-hover #cursor-dot {
    width: 5px; height: 5px;
    background: #fff;
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 1);
  }
  body.cursor-hover #cursor-ring {
    width: 54px; height: 54px;
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), .06);
    box-shadow: 0 0 24px rgba(var(--accent-rgb), .35), inset 0 0 12px rgba(var(--accent-rgb), .08);
  }

  /* Click state */
  body.cursor-click #cursor-dot {
    width: 12px; height: 12px;
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 1);
  }
  body.cursor-click #cursor-ring {
    width: 28px; height: 28px;
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), .12);
  }

  /* Hide when leaving window */
  body.cursor-out #cursor-dot,
  body.cursor-out #cursor-ring { opacity: 0; }

  /* Dragging in marquee */
  body.cursor-drag #cursor-dot { width: 14px; height: 14px; background: var(--accent); }
  body.cursor-drag #cursor-ring { width: 44px; height: 44px; border-style: dashed; }
}
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

:root {
  --bg: #050912;
  --bg-2: #0a1220;
  --surface: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.20);
  --text: #e8f0ff;
  --muted: rgba(232,240,255,0.55);
  --muted-2: rgba(232,240,255,0.35);
  --gold: #f5c518;
  --danger: #ff5b67;
  --success: #10c08a;
  --accent: #00c6ff;
  --accent2: #0072ff;
  --accent-rgb: 0,198,255;
  --accent2-rgb: 0,114,255;
  --nav-h: 72px;
}

/* === Ambient === */
#particles-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .35; }
.ambient-blob { position: fixed; border-radius: 50%; filter: blur(140px); pointer-events: none; z-index: 0; transition: background 1.5s; }
#blob1 { width: 700px; height: 700px; top: -200px; left: -200px; background: rgba(var(--accent2-rgb), .10); animation: blobFloat1 12s ease-in-out infinite; }
#blob2 { width: 600px; height: 600px; bottom: -200px; right: -150px; background: rgba(var(--accent-rgb), .08); animation: blobFloat2 14s ease-in-out infinite; }
@keyframes blobFloat1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.1); } }
@keyframes blobFloat2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, -30px) scale(1.05); } }
#app { position: relative; z-index: 1; min-height: 80vh; }

/* === NAVBAR (restored old design) === */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0 3rem; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  transition: background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
#navbar.scrolled {
  background: rgba(5,9,18,0.85);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom-color: var(--border);
}
.logo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 1.7rem; letter-spacing: 5px;
  background: linear-gradient(135deg, var(--accent), #fff 55%, var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; color: transparent;
  text-shadow: 0 0 30px rgba(var(--accent-rgb), .4);
}
.nav-links { display: flex; gap: 1.75rem; list-style: none; }
.nav-links a {
  color: var(--muted); font-size: .78rem; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  position: relative; padding: .4rem 0;
  transition: color .25s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.nav-links a:hover, .nav-links a.active { color: #fff; text-shadow: 0 0 18px rgba(var(--accent-rgb), .6); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

.nav-right { display: flex; align-items: center; gap: 1rem; }
.search-btn {
  background: var(--surface); border: 1px solid var(--border);
  padding: .45rem 1rem; border-radius: 50px;
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 500; letter-spacing: 1.5px;
  color: var(--muted); transition: all .25s; text-transform: uppercase;
}
.search-btn:hover { border-color: rgba(var(--accent-rgb), .5); color: var(--accent); box-shadow: 0 0 20px rgba(var(--accent-rgb), .25); }
.nav-cta {
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  padding: .5rem 1.2rem; border-radius: 50px;
  font-size: .78rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: #fff; transition: transform .25s, box-shadow .25s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 25px rgba(var(--accent-rgb), .4); }

.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; color: #fff;
  border: 2px solid transparent; cursor: pointer;
  transition: all .25s; background: linear-gradient(135deg, var(--accent2), var(--accent));
  background-size: cover; background-position: center top;
}
.avatar.avatar-sm { width: 32px; height: 32px; font-size: .75rem; }
.avatar:hover { border-color: rgba(var(--accent-rgb), .6); box-shadow: 0 0 22px rgba(var(--accent-rgb), .4); }

.profile-menu { position: relative; }
.profile-dropdown {
  position: absolute; top: calc(100% + .8rem); right: 0;
  min-width: 240px;
  background: rgba(10, 18, 32, .97); backdrop-filter: blur(24px);
  border: 1px solid var(--border); border-radius: 12px;
  padding: .5rem;
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity .25s, transform .25s;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.profile-menu:hover .profile-dropdown,
.profile-menu:focus-within .profile-dropdown { opacity: 1; pointer-events: all; transform: translateY(0); }
.profile-dropdown .dropdown-name { padding: .6rem .8rem; border-bottom: 1px solid var(--border); margin-bottom: .4rem; font-weight: 700; font-size: .85rem; }
.profile-dropdown .dropdown-name span { font-weight: 400; font-size: .72rem; color: var(--muted); }
.profile-dropdown a, .profile-dropdown .logout-btn {
  display: block; padding: .55rem .8rem; border-radius: 8px;
  font-size: .82rem; color: var(--muted); text-align: left; width: 100%;
  transition: background .2s, color .2s;
}
.profile-dropdown a:hover, .profile-dropdown .logout-btn:hover { background: var(--surface-2); color: #fff; }
.logout-btn { cursor: pointer; }

.nav-toggle { display: none; flex-direction: column; gap: 4px; padding: .5rem; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }

/* === MAIN HERO (homepage) === */
#hero {
  position: relative;
  min-height: 100vh; /* full viewport */
  display: flex; align-items: flex-end;
  padding: 0 3rem 6rem;
  overflow: hidden;
}
.hero-bg-layer, .hero-bg-next {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: opacity 1s ease-in-out; will-change: opacity;
}
.hero-bg-next { opacity: 0; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(5,9,18,0.95) 0%, rgba(5,9,18,0.75) 30%, rgba(5,9,18,0.2) 70%, transparent 100%),
    linear-gradient(to top, rgba(5,9,18,0.98) 0%, rgba(5,9,18,0.4) 50%, transparent 100%);
}
.hero-noise {
  position: absolute; inset: 0; z-index: 1; opacity: .04; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}
.hero-content { position: relative; z-index: 2; max-width: 720px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem;
  background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .3);
  border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: 2px;
  color: var(--accent); margin-bottom: 1.5rem; text-transform: uppercase;
}
.hero-badge .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 8px var(--accent); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.hero-logo-wrap { margin-bottom: 1.5rem; min-height: 80px; }
.hero-logo-wrap img { max-height: 140px; max-width: 380px; filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .6)); }
.hero-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.2rem, 5.5vw, 4.5rem); font-weight: 900; line-height: 1;
  margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .5);
}
.hero-meta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.2rem; align-items: center; font-size: .85rem; color: var(--muted); }
.hero-meta .meta-pill, .meta-pill {
  padding: .25rem .7rem; background: rgba(255, 255, 255, .07); border: 1px solid var(--border);
  border-radius: 6px; font-size: .72rem; letter-spacing: 1px; text-transform: uppercase;
}
.meta-pill-muted { opacity: .65; }
.meta-pill-hd { background: linear-gradient(135deg, rgba(var(--accent-rgb), .2), rgba(var(--accent2-rgb), .15)); color: var(--accent); border-color: rgba(var(--accent-rgb), .3); font-weight: 600; }
.hero-meta .star { color: var(--gold); font-weight: 700; }
.hero-desc { font-size: 1rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.8rem; max-width: 580px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.hero-btns { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Hero bar indicators (image-2 horizontal stacked) */
.hero-bars {
  position: absolute; right: 3rem; bottom: 6.5rem; z-index: 3;
  display: flex; flex-direction: column; gap: .7rem; align-items: flex-end;
}
.hero-bar {
  width: 84px; height: 4px; background: rgba(255, 255, 255, .18);
  border-radius: 4px; padding: 0; position: relative; overflow: hidden;
  transition: width .4s ease, background .3s ease, box-shadow .3s;
}
.hero-bar:hover { background: rgba(255, 255, 255, .32); }
.hero-bar.active { width: 132px; background: rgba(var(--accent-rgb), .25); box-shadow: 0 0 14px rgba(var(--accent-rgb), .5); }
.hero-bar-fill {
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--accent), var(--accent2));
  transform: scaleX(0); transform-origin: left; border-radius: 4px;
}
.hero-bar.active .hero-bar-fill { animation: heroFill var(--rotate-dur, 7s) linear forwards; }
@keyframes heroFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 720px) { .hero-bars { display: none; } }

.hero-scroll-cue {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 1.8rem; z-index: 2;
  display: flex; flex-direction: column; gap: .3rem; align-items: center;
  color: var(--muted-2); font-size: .65rem; letter-spacing: 3px; font-weight: 500;
  animation: bounce 2.5s ease-in-out infinite;
}
@keyframes bounce { 0%, 100% { transform: translate(-50%, 0); opacity: .6; } 50% { transform: translate(-50%, 8px); opacity: 1; } }

/* === SUB-HERO (movies/tv/channels/collection pages) === */
.sub-hero {
  position: relative; min-height: 100vh; padding: 0 0 3rem; margin-top: calc(var(--nav-h) * -1);
  overflow: hidden; display: flex; align-items: flex-end;
}
.sub-hero .detail-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.sub-hero-inner { position: relative; z-index: 2; padding: 0 3rem 1rem; max-width: 780px; padding-top: 5rem; }
.detail-bg-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(5,9,18,0.95) 0%, rgba(5,9,18,0.75) 30%, rgba(5,9,18,0.2) 70%, transparent 100%),
    linear-gradient(to top, rgba(5,9,18,0.98) 0%, rgba(5,9,18,0.4) 50%, transparent 100%);
}
.detail-bg-vignette { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, transparent 30%, rgba(5, 9, 18, .7) 100%); }

/* === BUTTONS === */
.btn-primary, .btn-secondary, .btn-icon {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.8rem; border-radius: 8px;
  font-weight: 700; font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase;
  transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
  cursor: pointer; position: relative; overflow: hidden;
}
.btn-primary { background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff; box-shadow: 0 8px 25px rgba(var(--accent-rgb), .35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(var(--accent-rgb), .5); }
.btn-glow { position: relative; }
.btn-glow::after { content: ''; position: absolute; inset: -2px; border-radius: 12px; background: linear-gradient(135deg, var(--accent2), var(--accent)); filter: blur(12px); opacity: .4; z-index: -1; }
.btn-secondary { background: rgba(255, 255, 255, .08); border: 1px solid var(--border-strong); color: #fff; }
.btn-secondary:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); }
.btn-icon { width: 40px; height: 40px; padding: 0; justify-content: center; background: rgba(255, 255, 255, .08); border: 1px solid var(--border); color: var(--muted); }
.btn-icon:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.btn-icon.btn-danger:hover { background: rgba(255, 91, 103, .18); color: var(--danger); border-color: rgba(255, 91, 103, .4); }
.btn-watchlist.in-list { background: rgba(var(--accent-rgb), .18); color: var(--accent); border-color: rgba(var(--accent-rgb), .4); }
.btn-link { background: none; border: none; color: var(--accent); cursor: pointer; font-weight: 600; font-size: .82rem; padding: .3rem .6rem; border-radius: 6px; }
.btn-link:hover { background: rgba(var(--accent-rgb), .1); }

/* === SECTION HEADER (above content-section) === */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2.8rem 3rem 1.2rem; position: relative;
}
.section-header::before {
  content: ''; position: absolute; left: 3rem; top: 50%; transform: translateY(-50%);
  width: 4px; height: 1.4rem; background: linear-gradient(180deg, var(--accent), var(--accent2));
  border-radius: 4px; box-shadow: 0 0 12px rgba(var(--accent-rgb), .6);
}
.section-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 800;
  letter-spacing: 3px; text-transform: uppercase; padding-left: 1.2rem;
}
.section-title-page { font-size: 2.2rem; }
.row-controls { display: flex; gap: .5rem; align-items: center; }
.see-all { font-size: .72rem; color: var(--muted); padding: .4rem .8rem; border-radius: 6px; transition: all .2s; margin-right: .3rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
.see-all:hover { color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.row-arrow {
  width: 36px; height: 36px; background: rgba(255, 255, 255, .06); border: 1px solid var(--border);
  border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.row-arrow:hover { background: rgba(var(--accent-rgb), .15); border-color: rgba(var(--accent-rgb), .3); color: var(--accent); }
.section-header-channel { padding-bottom: 2.2rem; }
.section-header-channel::after {
  content: ''; position: absolute; left: 3rem; right: 3rem; bottom: .6rem;
  height: 1px; background: linear-gradient(to right, rgba(var(--accent-rgb), .3), transparent);
}

.content-section { padding: 0 0 0 48px;; margin-bottom: 1.5rem; }
.content-section-flush { padding: 0 3rem; }

/* === CARD ROW + CARD (info on hover only, slide-up from bottom) === */
/* Horizontal padding lives INSIDE the row so scaled cards don't clip on the left edge */
.cards-row, .cast-row, .cards-row-progress {
  display: flex; gap: 1rem;
  overflow-x: auto; scroll-behavior: smooth;
  padding: 1.5rem 3rem 2rem 24px; /* TOP gives hover scale room, LEFT/RIGHT match section padding */
  scroll-snap-type: x proximity;
}
.card {
  flex: 0 0 175px; border-radius: 10px; overflow: hidden;
  position: relative; display: block; scroll-snap-align: start;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.card:hover { transform: scale(1.07) translateY(-8px); z-index: 5; }
.card-img-wrap { position: relative; width: 100%; aspect-ratio: 2/3; background: var(--bg-2); border-radius: 10px; overflow: hidden; }
.card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .3s; }
.card:hover .card-img { transform: scale(1.05); }
.card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,9,18,0.95) 0%, rgba(5,9,18,0.4) 40%, transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.card:hover .card-overlay { opacity: 1; }
.card-glow {
  position: absolute; inset: 0; border-radius: 10px;
  border: 1.5px solid transparent; pointer-events: none;
  transition: border-color .3s, box-shadow .3s;
}
.card:hover .card-glow { border-color: rgba(var(--accent-rgb), .5); box-shadow: 0 0 35px rgba(var(--accent-rgb), .25), 0 20px 50px rgba(0, 0, 0, .6); }
.card-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0);
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(var(--accent-rgb), .95);
  display: flex; align-items: center; justify-content: center;
  color: #fff; backdrop-filter: blur(10px);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.card:hover .card-play { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 35px rgba(var(--accent-rgb), .6); }
.card-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: .7rem .8rem;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.card:hover .card-info { transform: translateY(0); }
.card-title { font-size: .82rem; font-weight: 700; letter-spacing: .3px; margin-bottom: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { display: flex; gap: .6rem; align-items: center; font-size: .7rem; color: var(--muted); }
.card-rating { color: var(--gold); font-weight: 600; }
.card-wide { flex: 0 0 290px; }
.card-wide .card-img-wrap { aspect-ratio: 16/9; }

/* Watchlist button on card hover (top-right) */
.card-watchlist-btn {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0, 0, 0, .7); border: 1px solid rgba(255, 255, 255, .15);
  color: #fff; backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.7);
  transition: opacity .2s, transform .2s, background .2s, border-color .2s;
  cursor: pointer; padding: 0;
}
.card:hover .card-watchlist-btn { opacity: 1; transform: scale(1); }
.card-watchlist-btn:hover { background: rgba(var(--accent-rgb), .95); border-color: var(--accent); box-shadow: 0 0 18px rgba(var(--accent-rgb), .5); transform: scale(1.08); }
.card-watchlist-btn .wl-check { display: none; }
.card-watchlist-btn.in-list .wl-add { display: none; }
.card-watchlist-btn.in-list .wl-check { display: block; }
.card-watchlist-btn.in-list { background: rgba(var(--accent-rgb), .9); border-color: var(--accent); color: #fff; opacity: 1; transform: scale(1); }

/* Progress strip for continue-watching — always visible with bigger height for the look user wants */
.card-progress .progress-strip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: rgba(0, 0, 0, .6); z-index: 3; overflow: hidden;
}
.card-progress .progress-fill {
  height: 100%; min-width: 3%;
  background: linear-gradient(to right, var(--accent), var(--accent2));
  box-shadow: 0 0 10px rgba(var(--accent-rgb), .8);
  transition: width .4s ease;
}

/* === GRID VIEW === */
.grid-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.6rem 1rem; padding: 1.5rem 0; }

/* === ACCORDION (homepage collections + collection-detail carousel) === */
.accordion {
  display: flex; gap: 0; height: 380px;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-2);
  position: relative;
}
.acc-panel {
  flex: 1; min-width: 0;
  background-size: cover; background-position: center;
  position: relative; overflow: hidden; cursor: pointer;
  transition: flex .75s cubic-bezier(.4, 0, .2, 1);
}
.acc-panel.active { flex: 6; }
.acc-panel:hover:not(.active) { flex: 1.4; }

/* Edge shadow between adjacent panels for a cleaner divider */
.acc-panel:not(:first-child)::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 24px;
  background: linear-gradient(to right, rgba(0, 0, 0, .55), transparent);
  z-index: 2; pointer-events: none;
}
.acc-panel:not(:last-child)::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 24px;
  background: linear-gradient(to left, rgba(0, 0, 0, .55), transparent);
  z-index: 2; pointer-events: none;
  opacity: .8;
}
.acc-panel.active::before, .acc-panel.active::after { opacity: 0; transition: opacity .4s; }

.acc-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(5,9,18,0.92) 0%, rgba(5,9,18,0.55) 35%, rgba(5,9,18,0.2) 70%, transparent 100%),
    linear-gradient(to top, rgba(5,9,18,0.85) 0%, transparent 50%);
}
.acc-collapsed-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.2rem .8rem; display: flex; align-items: flex-end; justify-content: flex-start;
  font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; opacity: 1; transition: opacity .3s ease;
  z-index: 3;
}
.acc-collapsed-label span {
  display: block;
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; padding: .5rem 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.95), 0 0 24px rgba(0,0,0,0.85);
}
.acc-panel.active .acc-collapsed-label { opacity: 0; pointer-events: none; }
.acc-content {
  position: absolute; left: 0; bottom: 0; right: 0; padding: 2rem 2.4rem;
  display: flex; flex-direction: column; gap: .6rem;
  opacity: 0; transform: translateY(20px); transition: all .5s .2s ease-out;
  max-width: 560px; z-index: 3;
}
.acc-panel.active .acc-content { opacity: 1; transform: translateY(0); }
.acc-label { font-size: .68rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); }
.acc-name { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 900; line-height: 1.05; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 4px 20px rgba(0, 0, 0, .5); }
.acc-logo {
  max-height: 90px; max-width: 360px; width: auto;
  margin: .1rem 0 .2rem;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .75)) drop-shadow(0 0 16px rgba(0, 0, 0, .65));
  object-fit: contain;
}
.acc-sub { color: var(--muted); font-size: 1rem; line-height: 1.4; }
.acc-sub-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.acc-meta-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.acc-meta-row .meta-pill.star { color: var(--gold); }
.acc-cta { margin-top: .6rem; display: inline-block; padding: .55rem 1.1rem; background: linear-gradient(135deg, var(--accent2), var(--accent)); border-radius: 8px; font-weight: 700; font-size: .78rem; letter-spacing: 2px; text-transform: uppercase; color: #fff; box-shadow: 0 4px 20px rgba(var(--accent-rgb), .3); align-self: flex-start; }

/* Collection detail variant — slightly taller for more breathing room */
.collection-accordion { height: 460px; }

@media (max-width: 720px) {
  .accordion { height: auto; flex-direction: column; }
  .collection-accordion { height: auto; }
  .acc-panel, .acc-panel.active { flex: 0 0 auto; height: 200px; }
  .acc-collapsed-label span { writing-mode: horizontal-tb; transform: none; padding: 0; }
  .acc-panel:not(:first-child)::before, .acc-panel:not(:last-child)::after { display: none; }
  .acc-logo { max-height: 60px; }
}

/* === MARQUEE (channels) === */
.marquee {
  position: relative; overflow: hidden;
  margin-top: .5rem; padding: 1rem 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  user-select: none; cursor: grab;
}
.marquee.dragging { cursor: grabbing; }
.marquee-track { display: flex; gap: .75rem; width: max-content; will-change: transform; transition: none; }
.ch-tile {
  flex-shrink: 0; height: 90px; width: 200px;
  border-radius: 14px; padding: 1rem;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  position: relative; overflow: hidden;
  border: 1px solid var(--border);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.ch-tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .06), transparent 60%); pointer-events: none; }
.ch-tile:hover { transform: scale(1.04); box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(var(--accent-rgb), .5); border-color: rgba(var(--accent-rgb), .4); }
.ch-tile { --ch-glow: rgba(255, 255, 255, .85); }
.ch-logo {
  max-height: 56px; max-width: 80%; object-fit: contain;
  /* Glow uses the channel's text_color (set inline as --ch-glow) so it always
     contrasts with the tile's gradient — white on dark, dark on light tiles. */
  filter:
    drop-shadow(0 0 8px var(--ch-glow))
    drop-shadow(0 0 18px var(--ch-glow))
    drop-shadow(0 0 3px rgba(0, 0, 0, .35));
}
.ch-name { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); }

/* === INLINE PLAYER === */
.inline-player { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.inline-player.open { max-height: 1500px; margin-bottom: 1.5rem; }
.inline-player .ip-inner { padding: 0 3rem; max-width: 1100px; margin: 0 auto; }
.ip-header { display: flex; align-items: center; justify-content: space-between; padding: 1.8rem 0 1rem; }
.ip-frame { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 16px 50px rgba(0, 0, 0, .5); max-width: 960px; margin: 0 auto; }
.ip-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.ip-now-playing { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; padding: 1.4rem 0 .6rem; justify-content: center; }

/* Always-visible episode picker */
.ep-picker {
  display: grid; grid-template-columns: 240px 1fr; gap: 1.2rem; align-items: start;
  max-width: 1100px; margin: 0 auto;  /* centered */
}
.ep-picker-seasons {
  display: flex; flex-direction: column; gap: .4rem;
  max-height: 480px; overflow-y: auto; padding-right: .3rem;
  padding-top: 24px;
}
.ep-season-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; color: var(--muted); text-align: left; transition: all .2s;
  width: 100%; position: relative;
}
.ep-season-btn:hover { background: var(--surface-2); color: #fff; border-color: var(--border-strong); }

/* "browsing" — user clicked this season but hasn't played it yet */
.ep-season-btn.browsing {
  background: rgba(var(--accent-rgb), .12);
  border-color: rgba(var(--accent-rgb), .4);
  color: var(--accent);
}

/* "playing" — this season's episode is currently in the player */
.ep-season-btn.playing {
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  border-color: var(--accent); color: #fff;
  box-shadow: 0 0 22px rgba(var(--accent-rgb), .4), inset 0 0 0 1px rgba(255, 255, 255, .15);
}
.ep-season-btn.playing .ep-season-count { color: rgba(255, 255, 255, .85); }

/* Both at once — bright + a small "playing" dot */
.ep-season-btn.playing::after {
  content: '●';
  position: absolute; top: .6rem; right: .8rem;
  color: #fff; font-size: .6rem;
  animation: playingPulse 1.4s ease-in-out infinite;
  text-shadow: 0 0 8px #fff;
}
@keyframes playingPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.ep-season-num { font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.ep-season-count { font-size: .72rem; color: var(--muted-2); letter-spacing: 1px; text-transform: uppercase; }
.ep-season-btn.browsing .ep-season-count { color: var(--accent); opacity: .8; }

.ep-picker-episodes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .5rem; align-content: start; max-height: 480px; overflow-y: auto;
  padding-top: 24px;
}
.ep-btn {
  padding: .8rem .5rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; color: var(--muted); font-weight: 700; font-size: .85rem; letter-spacing: 1px;
  text-align: center; transition: all .2s; display: flex; flex-direction: column; gap: .15rem;
  text-transform: uppercase; position: relative;
}
.ep-btn:hover:not(.unaired) { background: var(--surface-2); color: #fff; border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }

/* "playing" — this exact episode is in the player */
.ep-btn.playing {
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color: #fff; border-color: var(--accent);
  box-shadow: 0 0 22px rgba(var(--accent-rgb), .45), inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.ep-btn.playing::after {
  content: ''; position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 8px #fff;
  animation: playingPulse 1.4s ease-in-out infinite;
}

/* "unaired" — TMDB air_date is in the future, vidlink can't have it */
.ep-btn.unaired {
  opacity: .3; cursor: not-allowed; pointer-events: none;
  background: var(--surface); border-style: dashed;
}
.ep-btn.unaired::before {
  content: 'TBA'; position: absolute; top: 4px; right: 6px;
  font-size: .55rem; color: var(--muted-2); letter-spacing: 1px;
  background: rgba(0, 0, 0, .4); padding: 1px 4px; border-radius: 3px;
}

.ep-btn .ep-num { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 900; line-height: 1; }
.ep-btn .ep-label { font-size: .62rem; opacity: .85; letter-spacing: 1px; }
.ep-picker-current { font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; }
@media (max-width: 720px) {
  .ep-picker { grid-template-columns: 1fr; }
  .ep-picker-seasons { flex-direction: row; max-height: none; overflow-x: auto; padding-bottom: .5rem; }
  .ep-season-btn { flex: 0 0 auto; min-width: 140px; }
}
.ip-controls { padding: 1.4rem 0 .6rem; display: flex; flex-direction: column; gap: 1rem; }
.ip-now-playing { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.ip-np-label { font-size: .68rem; letter-spacing: 3px; color: var(--accent); font-weight: 700; text-transform: uppercase; }
.ip-np-title { font-weight: 700; font-size: 1.05rem; }
.ip-np-sub { color: var(--muted); font-size: .92rem; }
.ip-season-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.ip-season {
  padding: .5rem .95rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; color: var(--muted); font-weight: 600; font-size: .82rem; letter-spacing: 1px; text-transform: uppercase;
  transition: all .2s;
}
.ip-season:hover { background: var(--surface-2); color: #fff; }
.ip-season.active { background: rgba(var(--accent-rgb), .18); border-color: rgba(var(--accent-rgb), .4); color: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .3); }
.ip-episodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: .5rem; }
.ip-ep {
  padding: .65rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; color: var(--muted); font-weight: 600; font-size: .8rem;
  letter-spacing: 1px; text-align: center; transition: all .2s;
}
.ip-ep:hover { background: var(--surface-2); color: #fff; border-color: var(--border-strong); }
.ip-ep.active { background: rgba(var(--accent-rgb), .18); border-color: rgba(var(--accent-rgb), .4); color: var(--accent); }

/* === DETAIL HERO (movie/tv page) === */
.detail-hero {
  position: relative; min-height: 88vh; padding: 7rem 3rem 4rem;
  display: flex; align-items: flex-end; overflow: hidden;
}
.detail-bg { position: absolute; inset: 0; background-size: cover; background-position: center 20%; }
.detail-hero-inner { position: relative; z-index: 2; max-width: 880px; }
.detail-logo { max-height: 200px; max-width: 460px; margin-bottom: 1.5rem; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .5)); }
.detail-title-big { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.4rem, 5vw, 4.5rem); font-weight: 900; line-height: 1; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 1px; }
.detail-tagline { font-style: italic; color: var(--muted); margin-bottom: 1.2rem; font-size: 1.05rem; }
.detail-meta-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.2rem; align-items: center; }
.detail-badge { padding: .3rem .8rem; background: linear-gradient(135deg, var(--accent2), var(--accent)); border-radius: 6px; font-size: .7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.detail-rating { color: var(--gold); font-weight: 700; font-size: 1.15rem; }
.rating-out { color: var(--muted-2); font-size: .8rem; font-weight: 400; }
.detail-genres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.genre-chip { padding: .35rem .9rem; background: rgba(255, 255, 255, .06); border: 1px solid var(--border); border-radius: 999px; font-size: .76rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); transition: all .2s; }
.genre-chip:hover { background: rgba(var(--accent-rgb), .15); color: var(--accent); border-color: rgba(var(--accent-rgb), .4); }
.detail-desc { font-size: 1.05rem; color: var(--muted); line-height: 1.7; max-width: 720px; margin-bottom: 2rem; }
.detail-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.detail-body { padding-bottom: 4rem; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; padding: 2.5rem 3rem 0; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem 1.4rem; }
.stat-label { font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.stat-val { font-family: 'Barlow Condensed', sans-serif; font-size: 2.2rem; font-weight: 800; line-height: 1; margin: .4rem 0 .3rem; }
.stat-val span { font-size: 1rem; color: var(--muted-2); }
.stat-sub { font-size: .8rem; color: var(--muted-2); }
.crew-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; padding: 2.5rem 3rem 0; }
.crew-label { font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-2); font-weight: 600; margin-bottom: .4rem; }
.crew-val a { color: #fff; font-weight: 600; }
.crew-val a:hover { color: var(--accent); }
.collection-banner { display: block; margin: 2.5rem 3rem 0; aspect-ratio: 4/1; border-radius: 14px; background-size: cover; background-position: center; position: relative; overflow: hidden; transition: transform .3s; border: 1px solid var(--border); }
.collection-banner:hover { transform: scale(1.01); }
.cb-overlay { position: absolute; inset: 0; padding: 1.5rem 2rem; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to right, rgba(5, 9, 18, .85) 30%, transparent 70%); }
.cb-label { font-size: .68rem; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.cb-name { font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 800; margin: .3rem 0; text-transform: uppercase; }
.cb-cta { color: var(--muted); font-size: .82rem; letter-spacing: 1px; text-transform: uppercase; }

.cast-item { flex: 0 0 140px; text-align: center; transition: transform .25s; display: block; }
.cast-item:hover { transform: translateY(-4px); }
.cast-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin-bottom: .5rem; background: var(--bg-2); border: 1px solid var(--border); transition: border-color .25s, box-shadow .25s; }
.cast-item:hover img { border-color: var(--accent); box-shadow: 0 0 25px rgba(var(--accent-rgb), .3); }
.cast-name { font-weight: 600; font-size: .85rem; }
.cast-char { font-size: .74rem; color: var(--muted-2); margin-top: .2rem; }

/* === TIMELINE (collection detail page) === */
.timeline { display: flex; flex-direction: column; gap: 1rem; padding: 0 3rem; max-width: 1100px; margin: 0 auto; }
.timeline-item {
  display: grid; grid-template-columns: 60px 100px 1fr 30px;
  gap: 1.5rem; align-items: center; padding: 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.timeline-item:hover { transform: translateX(8px); border-color: rgba(var(--accent-rgb), .4); box-shadow: 0 15px 40px rgba(0, 0, 0, .4), 0 0 30px rgba(var(--accent-rgb), .15); }
.timeline-num { font-family: 'Barlow Condensed', sans-serif; font-size: 2.5rem; font-weight: 900; color: var(--accent); opacity: .7; text-align: center; }
.timeline-item img { width: 100px; height: 150px; object-fit: cover; border-radius: 8px; background: var(--bg-2); }
.timeline-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .4rem; }
.timeline-meta { display: flex; gap: .7rem; align-items: center; margin-bottom: .5rem; font-size: .75rem; color: var(--muted); }
.rating-pill { color: var(--gold); font-weight: 700; }
.timeline-desc { font-size: .85rem; line-height: 1.55; color: var(--muted); max-width: 560px; }
.timeline-arrow { font-size: 1.3rem; color: var(--accent); opacity: .5; transition: opacity .25s, transform .25s; }
.timeline-item:hover .timeline-arrow { opacity: 1; transform: translateX(6px); }

/* === BROWSE FILTERS === */
.browse-page { padding: calc(var(--nav-h) + 2rem) 3rem 3rem; }
.browse-header { margin-bottom: 2rem; }
.browse-header .page-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: 2px; text-transform: uppercase; margin-bottom: .4rem; }
.browse-header .page-sub { color: var(--muted); font-size: 1rem; max-width: 700px; }
.filter-bar { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; margin-bottom: 2rem; backdrop-filter: blur(10px); }
.filter-segment { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 50px; padding: .25rem; margin-bottom: 1.2rem; gap: .25rem; }
.filter-segment input { display: none; }
.filter-segment label, .filter-segment a {
  padding: .5rem 1.2rem; border-radius: 50px;
  font-size: .72rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); cursor: pointer; transition: all .2s;
}
.filter-segment input:checked + label, .filter-segment a.active { background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.filter-field label { display: block; font-size: .68rem; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: .4rem; }
.filter-field select, .filter-field input[type="text"] {
  width: 100%; padding: .7rem .9rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; color: #fff; font-size: .85rem;
  transition: border-color .2s, box-shadow .2s;
}
.filter-field select:focus, .filter-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
.person-search-wrap { position: relative; }
.person-results { position: absolute; top: 100%; left: 0; right: 0; background: rgba(10, 18, 32, .97); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 8px; margin-top: .3rem; max-height: 300px; overflow-y: auto; z-index: 10; display: none; }
.person-results.show { display: block; }
.person-result { display: flex; gap: .7rem; align-items: center; padding: .5rem .8rem; cursor: pointer; border-bottom: 1px solid var(--border); }
.person-result:hover { background: var(--surface-2); }
.person-result img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--bg-2); }
.filter-actions { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.result-count { margin-left: auto; font-size: .76rem; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }

/* === Pagination === */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding: 2rem 3rem; margin-top: 1rem; }
.page-btn { padding: .6rem 1.4rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-size: .72rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; transition: all .2s; }
.page-btn:hover:not(.disabled) { background: rgba(var(--accent-rgb), .15); border-color: var(--accent); color: var(--accent); }
.page-btn.disabled { opacity: .3; pointer-events: none; }
.page-info { font-size: .85rem; color: var(--muted); font-weight: 600; }

/* === GENRE CHIPS ROW === */
.genre-chips-row { padding: 0 3rem 1.5rem; display: flex; gap: .5rem; flex-wrap: wrap; }

/* === PEOPLE GRID === */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.2rem; padding: 0 3rem; }
.people-card { text-align: center; transition: transform .25s; display: block; }
.people-card:hover { transform: translateY(-4px); }
.people-card img { width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; margin-bottom: .7rem; background: var(--bg-2); border: 1px solid var(--border); transition: border-color .25s, box-shadow .25s; }
.people-card:hover img { border-color: var(--accent); box-shadow: 0 0 25px rgba(var(--accent-rgb), .3); }
.people-name { font-weight: 700; font-size: .85rem; margin-bottom: .2rem; }
.people-job { font-size: .68rem; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }

/* === EMPTY STATE === */
.empty-state { text-align: center; padding: 4rem 2rem; color: var(--muted); background: var(--surface); border: 1px dashed var(--border); border-radius: 14px; }
.empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .5; font-family: 'Barlow Condensed', sans-serif; }
.empty-state h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: .5rem; color: #fff; }

/* === SEARCH OVERLAY === */
#search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5, 9, 18, .97); backdrop-filter: blur(24px);
  display: flex; flex-direction: column; padding: 6rem 3rem 2rem;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
#search-overlay.open { opacity: 1; visibility: visible; }
.search-wrap { display: flex; align-items: center; gap: 1rem; background: rgba(255, 255, 255, .08); border: 1px solid var(--border-strong); border-radius: 14px; padding: .5rem 1rem; max-width: 1100px; margin: 0 auto; width: 100%; }
.search-icon-wrap { color: var(--muted); flex-shrink: 0; display: flex; }
.search-input { flex: 1; background: none; border: none; padding: 1rem .5rem; font-size: 1.2rem; outline: none; color: #fff; }
.search-close { background: rgba(255, 255, 255, .1); padding: .4rem .7rem; border-radius: 8px; color: #fff; }
/* === Search suggestions & results — SAME max width === */
.search-suggestions, .search-results { max-width: 1100px; margin: 1.5rem auto 0; width: 100%; }
.search-results { overflow-y: auto; flex: 1; padding-right: 0; }
.sugg-label { font-size: .68rem; letter-spacing: 3px; text-transform: uppercase; color: var(--muted-2); margin-bottom: .8rem; }
.sugg-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.sugg-pills button {
  padding: .5rem 1rem; background: rgba(255, 255, 255, .08); border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); font-size: .82rem; transition: all .2s; letter-spacing: 1px;
}
.sugg-pills button:hover { background: rgba(var(--accent-rgb), .15); color: var(--accent); border-color: rgba(var(--accent-rgb), .4); }
.search-result-section { margin-bottom: 1.5rem; }
.search-result-section h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin-bottom: .7rem; padding-left: .3rem; }
.search-result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .8rem; }
.search-result-card { display: flex; flex-direction: column; gap: .4rem; padding: .5rem; border-radius: 10px; transition: background .2s; }
.search-result-card:hover { background: rgba(255, 255, 255, .06); }
.search-result-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px; background: var(--bg-2); }
.search-result-card .src-title { font-weight: 600; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-card .src-sub { font-size: .72rem; color: var(--muted); }
.src-empty { text-align: center; color: var(--muted); padding: 3rem 0; }
.src-loading { text-align: center; color: var(--muted); padding: 2rem 0; font-size: .85rem; letter-spacing: 1px; }

/* === Trailer modal === */
.player-modal { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .85); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; padding: 2rem; }
.player-modal.open { display: flex; }
.player-inner { width: min(1100px, 100%); aspect-ratio: 16/9; position: relative; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.player-close { position: absolute; top: .8rem; right: .8rem; z-index: 10; width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, .7); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: 1.1rem; }
.player-frame { width: 100%; height: 100%; }
.player-frame iframe { width: 100%; height: 100%; border: none; }

/* === Page padding, forms, settings === */
.page-pad { padding: calc(var(--nav-h) + 2rem) 3rem 3rem; max-width: 1440px; margin: 0 auto; }
.page-narrow { max-width: 880px; }
.page-header { margin-bottom: 2rem; }
.page-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: 2px; text-transform: uppercase; margin-bottom: .4rem; }
.page-sub { color: var(--muted); font-size: 1rem; }

.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; margin-bottom: 2rem; }
.form-card label { display: block; margin-bottom: 1rem; }
.form-card label > span { display: block; font-size: .72rem; color: var(--muted); margin-bottom: .5rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.form-card input[type="text"], .form-card input[type="email"], .form-card input[type="password"], .form-card input[type="number"], .form-card textarea, .form-card select,
.admin-form input, .admin-form select, .admin-form textarea {
  width: 100%; padding: .7rem .9rem; background: rgba(0, 0, 0, .3); border: 1px solid var(--border-strong);
  border-radius: 8px; color: #fff; font-size: .9rem; transition: border-color .2s;
}
.form-card input:focus, .form-card textarea:focus, .form-card select:focus,
.admin-form input:focus, .admin-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.form-card input[type="color"] { width: 100%; height: 44px; padding: 4px; cursor: pointer; }
.form-section-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.3rem; letter-spacing: 2px; text-transform: uppercase; margin: 1.5rem 0 .4rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.form-sub { font-size: .82rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 1.4rem 0 .6rem; }
.form-actions { display: flex; gap: .7rem; margin-top: 1.5rem; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem 1rem; }
.hint { color: var(--muted-2); font-size: .82rem; margin-bottom: 1rem; }
.hint small { display: block; color: var(--muted-2); font-size: .76rem; margin-top: .2rem; }

.toggle-grid { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.toggle-row strong { display: block; font-weight: 600; font-size: .9rem; }
.toggle-row p { font-size: .8rem; color: var(--muted); margin: .2rem 0 0; }
.toggle-row input[type="checkbox"] { appearance: none; width: 44px; height: 24px; background: rgba(255, 255, 255, .12); border-radius: 999px; position: relative; transition: background .2s; flex-shrink: 0; cursor: pointer; }
.toggle-row input[type="checkbox"]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: left .2s; }
.toggle-row input[type="checkbox"]:checked { background: var(--accent); }
.toggle-row input[type="checkbox"]:checked::after { left: 23px; }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .7rem; margin-bottom: 1.5rem; }
.theme-tile { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .8rem; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all .2s; }
.theme-tile:hover { background: var(--surface-2); }
.theme-tile.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(var(--accent-rgb), .25); }
.theme-tile input { display: none; }
.theme-swatch { width: 56px; height: 56px; border-radius: 12px; }
.theme-custom { background: conic-gradient(from 0deg, #ff6b6b, #fbbf24, #1ce783, #00c6ff, #a78bfa, #ff6b6b); }
.theme-tile span { font-size: .78rem; font-weight: 600; letter-spacing: 1px; }
.custom-colors { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1.5rem; }
.theme-preview { padding: 1rem; background: rgba(0, 0, 0, .3); border-radius: 12px; margin-bottom: 1rem; }
.preview-row { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.preview-card { width: 90px; height: 60px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .76rem; color: #fff; letter-spacing: 1px; text-transform: uppercase; }
.preview-btn { padding: .55rem 1rem; background: linear-gradient(135deg, var(--accent2), var(--accent)); border-radius: 8px; font-weight: 600; color: #fff; font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; }
.preview-pill { padding: .3rem .7rem; background: rgba(var(--accent-rgb), .18); color: var(--accent); border-radius: 6px; font-size: .72rem; font-weight: 600; letter-spacing: 1px; }

/* === Compact Player Customization === */
.player-customize-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1.2rem; margin: 1rem 0 1.5rem;
}
@media (max-width: 900px) { .player-customize-grid { grid-template-columns: 1fr; } }

.player-controls-col { display: flex; flex-direction: column; gap: .9rem; }
.player-row-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .85rem; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--muted);
  padding: .4rem 0 .2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .4rem;
}
.color-swatch-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.color-swatch {
  display: flex; flex-direction: column; gap: .4rem;
  padding: .65rem .7rem; background: rgba(0, 0, 0, .25); border: 1px solid var(--border);
  border-radius: 10px; transition: border-color .2s;
}
.color-swatch:hover { border-color: var(--border-strong); }
.color-swatch span { font-size: .68rem; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
.color-swatch input[type="color"] {
  width: 100%; height: 36px; padding: 2px;
  background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.player-select-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.player-select-row label { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.player-select-row label > span { font-size: .68rem; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; margin: 0; }
.player-select-row select { padding: .55rem .7rem; background: rgba(0, 0, 0, .25); border: 1px solid var(--border); border-radius: 8px; color: #fff; font-size: .85rem; }

.player-chip-toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .55rem; }
.chip-toggle {
  position: relative; padding: .7rem .85rem;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--border);
  border-radius: 11px; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; gap: .65rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .3px;
  color: var(--muted); user-select: none;
}
.chip-toggle:hover { border-color: var(--border-strong); }
.chip-toggle input { position: absolute; opacity: 0; pointer-events: none; }
/* the pill switch */
.chip-toggle::before {
  /*content: ''; width: 34px; height: 19px; border-radius: 999px; flex-shrink: 0; */
  /*background: rgba(255, 255, 255, .14); transition: background .18s; */
  display: none;
}
.chip-toggle::after {
  /*content: ''; position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); */
  /*width: 13px; height: 13px; border-radius: 50%; background: #fff; */
  /*transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.4); */
  display: none;
}
.chip-toggle:has(input:checked) {
  border-color: rgba(var(--accent-rgb), .5); color: #fff;
  background: rgba(var(--accent-rgb), .08);
}
.chip-toggle:has(input:checked)::before { background: var(--accent); }
.chip-toggle:has(input:checked)::after { transform: translateY(-50%) translateX(15px); }

.player-text-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.player-text-grid label { display: flex; flex-direction: column; gap: .35rem; margin: 0; }
.player-text-grid label > span { font-size: .68rem; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; margin: 0; font-family: ui-monospace, monospace; }
.player-text-grid input { padding: .55rem .7rem; background: rgba(0, 0, 0, .25); border: 1px solid var(--border); border-radius: 8px; color: #fff; font-size: .82rem; font-family: ui-monospace, monospace; }
.player-text-grid input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
@media (max-width: 540px) { .color-swatch-row, .player-select-row, .player-text-grid { grid-template-columns: 1fr; } }

.player-preview-col { display: flex; flex-direction: column; }
.player-preview-card {
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 14px;
  padding: 1rem; box-shadow: 0 0 30px rgba(var(--accent-rgb), .1);
  display: flex; flex-direction: column; gap: .7rem;
  position: sticky; top: calc(var(--nav-h) + 1rem);
}
.player-preview-head { display: flex; align-items: center; justify-content: space-between; }
.player-preview-label { font-size: .68rem; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.player-preview-frame { aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000; }
.player-preview-frame iframe { width: 100%; height: 100%; border: none; }
.player-preview-url { display: flex; gap: .5rem; align-items: center; font-size: .78rem; }
.player-preview-url code {
  display: inline-block; flex: 1; min-width: 0;
  padding: .5rem .7rem; background: rgba(0, 0, 0, .5); border-radius: 6px;
  color: var(--accent); font-family: ui-monospace, monospace; font-size: .68rem;
  overflow-x: auto; white-space: nowrap;
}

/* === Collections page logo + cards === */
.cc-logo {
  max-width: 220px; max-height: 60px; width: auto; height: auto;
  margin: .2rem 0 .3rem;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .75)) drop-shadow(0 0 12px rgba(0, 0, 0, .5));
  object-fit: contain;
}

/* === Profile page: color picker row + avatar preview === */
.color-picker-row {
  display: flex; align-items: center; gap: 1rem;
}
.color-picker-row input[type="color"] {
  width: 56px; height: 56px; padding: 4px;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--border-strong);
  border-radius: 12px; cursor: pointer;
}
.avatar-preview {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.4rem; color: #fff;
  border: 2px solid rgba(255, 255, 255, .15);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}

/* === Channel hero === */
.channel-hero { padding: calc(var(--nav-h) + 3rem) 3rem 2rem; text-align: center; background: radial-gradient(ellipse at top, rgba(var(--accent-rgb), .15), transparent 60%); }
.channel-hero-logo img {
  max-height: 90px; margin: 0 auto 1rem;
  /* No invert — preserve original logo colors. Two-layer glow: tight accent
     halo for contrast + soft white outer for visibility on dark hero. */
  filter:
    drop-shadow(0 0 10px rgba(var(--accent-rgb), .55))
    drop-shadow(0 0 22px rgba(255, 255, 255, .35))
    drop-shadow(0 4px 14px rgba(0, 0, 0, .55));
}
.channel-name { font-family: 'Barlow Condensed', sans-serif; font-size: 3rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
.channel-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1rem 0; }
.channel-desc { max-width: 740px; margin: 1rem auto; color: var(--muted); line-height: 1.6; }
.channel-link { display: inline-block; margin-top: .5rem; color: var(--accent); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: .82rem; }
.channel-link:hover { text-decoration: underline; }

/* === Collections page grid === */
.collections-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; padding: 1rem 0; }
.collection-card { display: block; aspect-ratio: 16/9; border-radius: 14px; background-size: cover; background-position: center; background-color: var(--bg-2); position: relative; overflow: hidden; border: 1px solid var(--border); transition: transform .3s, box-shadow .3s; }
.collection-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(var(--accent-rgb), .4); }
.cc-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 9, 18, .95) 30%, transparent 80%); }
.cc-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.2rem 1.4rem; }
.cc-label { font-size: .66rem; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: .2rem; }
.cc-name { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 900; line-height: 1.1; text-transform: uppercase; letter-spacing: 1px; }
.cc-sub { color: var(--muted); font-size: .85rem; margin-top: .2rem; }
.cc-cta { margin-top: .6rem; font-size: .76rem; color: var(--accent); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }

/* === FOOTER === */
.site-footer { padding: 3rem 3rem 2rem; border-top: 1px solid var(--border); margin-top: 4rem; }
.footer-inner { max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.site-footer .logo { font-family: 'Barlow Condensed', sans-serif; font-size: 1.8rem; font-weight: 900; letter-spacing: 5px; background: linear-gradient(135deg, var(--accent), #fff 55%, var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; font-size: .82rem; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.footer-links a:hover { color: var(--accent); }
.footer-meta { color: var(--muted-2); font-size: .8rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.r3tr0-brand {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  letter-spacing: 3px;
  font-size: 1rem;
  background: linear-gradient(135deg, var(--accent), #fff 55%, var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  text-transform: uppercase;
}
.r3tr0-suffix { -webkit-text-fill-color: var(--accent); color: var(--accent); }
.footer-tmdb { font-size: .68rem; color: var(--muted-2); opacity: .7; letter-spacing: .5px; }

/* === Flash messages — auto-dismissing toast === */
.flash {
  position: fixed; top: calc(var(--nav-h) + 1rem); left: 50%;
  transform: translate(-50%, -20px);
  z-index: 1000; padding: .9rem 1.4rem; border-radius: 12px;
  font-weight: 600; font-size: .88rem; letter-spacing: .5px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  display: flex; align-items: center; gap: .6rem;
  min-width: 280px; max-width: 90vw;
  opacity: 0; pointer-events: none;
  animation: flashIn 4.5s cubic-bezier(.4, 0, .2, 1) forwards;
  margin: 0; box-shadow: 0 16px 50px rgba(0, 0, 0, .35);
}
.flash::before {
  content: ''; flex-shrink: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}
.flash-success { background: rgba(16, 192, 138, .15); border: 1px solid rgba(16, 192, 138, .45); color: var(--success); }
.flash-error { background: rgba(255, 91, 103, .15); border: 1px solid rgba(255, 91, 103, .45); color: var(--danger); }
@keyframes flashIn {
  0% { opacity: 0; transform: translate(-50%, -20px); }
  10% { opacity: 1; transform: translate(-50%, 0); }
  88% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -20px); pointer-events: none; }
}

/* === Toast === */
#toast { position: fixed; bottom: 2rem; left: 50%; transform: translate(-50%, 100px); z-index: 500; padding: .8rem 1.4rem; background: rgba(15, 22, 38, .95); border: 1px solid var(--border-strong); border-radius: 10px; backdrop-filter: blur(20px); transition: transform .3s; }
#toast.show { transform: translate(-50%, 0); }

/* === ADMIN PANEL === */
body.admin-body { background: var(--bg); display: flex; min-height: 100vh; }
.admin-sidebar { width: 250px; background: rgba(10, 18, 32, .65); backdrop-filter: blur(20px); border-right: 1px solid var(--border); padding: 1.5rem 1rem; flex-shrink: 0; display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 0; height: 100vh; }
.admin-logo { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 900; letter-spacing: 5px; padding: 0 .5rem 1rem; border-bottom: 1px solid var(--border); }
.admin-logo span { color: var(--accent); font-weight: 600; font-size: .85rem; letter-spacing: 2px; }
.admin-nav { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.admin-nav a { padding: .7rem .9rem; border-radius: 8px; color: var(--muted); font-weight: 500; font-size: .85rem; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: .7rem; transition: all .15s; }
.admin-nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.admin-nav a.active { background: rgba(var(--accent-rgb), .15); color: var(--accent); }
.admin-sb-foot { padding-top: 1rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .5rem; }
.admin-sb-foot a, .admin-sb-foot button { padding: .5rem .7rem; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: .76rem; text-align: center; letter-spacing: 1px; text-transform: uppercase; }
.admin-sb-foot a:hover, .admin-sb-foot button:hover { background: var(--surface-2); color: #fff; }
.admin-main { flex: 1; padding: 2rem; min-width: 0; }
.admin-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.admin-crumb { font-family: 'Barlow Condensed', sans-serif; font-size: 1.8rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.admin-greeting { color: var(--muted); font-size: .82rem; margin: .2rem 0 0; letter-spacing: 1px; }
.admin-greeting strong { color: #fff; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.admin-stats .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem 1.4rem; }
.admin-cards { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.admin-cards-split { grid-template-columns: 1fr 1.4fr; }
@media (max-width: 1100px) { .admin-cards-split { grid-template-columns: 1fr; } }
.admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; }
.admin-card h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; padding: .7rem .6rem; font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-2); border-bottom: 1px solid var(--border); font-weight: 600; }
.admin-table td { padding: .8rem .6rem; border-bottom: 1px solid rgba(255, 255, 255, .04); font-size: .9rem; vertical-align: middle; }
.admin-table tr:hover td { background: rgba(255, 255, 255, .02); }
.admin-table small { color: var(--muted-2); font-size: .76rem; }
.user-cell { display: flex; align-items: center; gap: .7rem; }
.role-admin { padding: .18rem .55rem; background: rgba(var(--accent-rgb), .18); color: var(--accent); border-radius: 4px; font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.role-user { padding: .18rem .55rem; background: rgba(255, 255, 255, .07); color: var(--muted); border-radius: 4px; font-size: .68rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.badge-on { padding: .18rem .55rem; background: rgba(16, 192, 138, .18); color: var(--success); border-radius: 4px; font-size: .68rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.badge-off { padding: .18rem .55rem; background: rgba(255, 255, 255, .08); color: var(--muted-2); border-radius: 4px; font-size: .68rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.kind-pill { padding: .18rem .55rem; background: rgba(255, 255, 255, .07); border-radius: 4px; font-size: .68rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.kind-pill.kind-company { background: rgba(var(--accent-rgb), .14); color: var(--accent); }
.row-actions { display: flex; gap: .4rem; align-items: center; }
.row-actions form { display: inline; }
.row-actions .btn-icon { width: 32px; height: 32px; padding: 0; }
.thumb-cell { width: 80px; height: 45px; background-size: cover; background-position: center; border-radius: 6px; background-color: var(--bg-2); }
.ch-cell-preview { width: 70px; height: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; }
.admin-form { display: flex; flex-direction: column; gap: .6rem; }
.admin-form label { display: block; }
.admin-form label > span { display: block; font-size: .72rem; color: var(--muted); margin-bottom: .35rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.admin-form input[type="color"] { height: 44px; padding: 4px; }
.admin-form input[type="range"] { width: 100%; }
.admin-form output { color: var(--accent); font-weight: 700; }
.quick-actions { display: grid; gap: .5rem; }
.qa { padding: .8rem 1rem; background: rgba(0, 0, 0, .25); border: 1px solid var(--border); border-radius: 10px; transition: all .15s; }
.qa:hover { background: rgba(var(--accent-rgb), .08); border-color: rgba(var(--accent-rgb), .3); }
.qa strong { display: block; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: .82rem; }
.qa span { display: block; font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.marquee-preview { background: rgba(0, 0, 0, .3); border: 1px solid var(--border); border-radius: 10px; }

/* === Auth forms === */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 3rem; background: radial-gradient(ellipse at top, rgba(var(--accent2-rgb), .18), transparent 60%); }
.auth-card { width: min(440px, 100%); background: rgba(15, 22, 38, .7); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 18px; padding: 2.5rem; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.auth-card h1 { font-family: 'Barlow Condensed', sans-serif; font-size: 2.2rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; margin-bottom: .4rem; }
.auth-sub { color: var(--muted); margin-bottom: 2rem; }
.auth-card label { display: block; margin-bottom: 1rem; }
.auth-card label > span { display: block; font-size: .72rem; color: var(--muted); margin-bottom: .4rem; letter-spacing: 1.5px; text-transform: uppercase; }
.auth-card input { width: 100%; padding: .75rem 1rem; background: rgba(0, 0, 0, .35); border: 1px solid var(--border-strong); border-radius: 10px; color: #fff; font-size: 1rem; }
.auth-card input:focus { outline: none; border-color: var(--accent); }
.auth-card .btn-primary { width: 100%; justify-content: center; }
.auth-meta { text-align: center; margin-top: 1.5rem; color: var(--muted); font-size: .85rem; }
.auth-meta a { color: var(--accent); font-weight: 600; }
.auth-note { background: rgba(0, 0, 0, .3); border: 1px dashed var(--border-strong); border-radius: 10px; padding: .8rem 1rem; margin: 1.2rem 0; font-size: .82rem; color: var(--muted); line-height: 1.55; text-align: left; }
.auth-note strong { color: var(--accent); }

/* === Person page === */
.person-page { padding: calc(var(--nav-h) + 2rem) 3rem 3rem; max-width: 1440px; margin: 0 auto; }

/* === Profile page === */
.profile-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: visible; margin-bottom: 2rem; }
.profile-banner { position: relative; height: 180px; background: linear-gradient(135deg, var(--accent2), var(--accent)); overflow: hidden; border-radius: 16px 16px 0 0; }
.profile-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 9, 18, .9), transparent 65%); }
.profile-banner-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, .2), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(0, 0, 0, .25), transparent 50%),
    repeating-linear-gradient(45deg, transparent 0px, transparent 18px, rgba(255, 255, 255, .03) 18px, rgba(255, 255, 255, .03) 19px);
}
/* Avatar sits below the banner and pulls up over it — no z-index fights */
.profile-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-top: -62px;
  margin-left: 2rem;
  margin-bottom: 0;
  width: 124px; height: 124px;
  z-index: 5;
}
.profile-avatar-big {
  width: 124px; height: 124px; border-radius: 50%;
  border: 5px solid var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 3.2rem; font-weight: 900; color: #fff; letter-spacing: 0;
  background-size: cover; background-position: center top;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .7), 0 0 24px rgba(var(--accent-rgb), .35);
  overflow: hidden;
}
.profile-avatar-big .pab-initial { line-height: 1; pointer-events: none; }
.avatar-edit-btn {
  position: absolute; bottom: 2px; right: 2px; z-index: 6;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff;
  border: 3px solid var(--bg); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, box-shadow .15s;
}
.avatar-edit-btn:hover { transform: scale(1.12); box-shadow: 0 4px 16px rgba(var(--accent-rgb), .6); }
.profile-meta { padding: 1rem 2rem 2rem; }
.profile-meta h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; margin-bottom: .3rem; }
.profile-meta p { color: var(--muted); font-size: .9rem; margin-bottom: 1.4rem; }
.profile-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.profile-stats > div { display: flex; flex-direction: column; }
.profile-stats strong { font-family: 'Barlow Condensed', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--accent); line-height: 1; }
.profile-stats strong.stat-on { color: #10c08a; text-shadow: 0 0 14px rgba(16,192,138,.5); }
.profile-stats span { font-size: .68rem; color: var(--muted-2); letter-spacing: 2px; text-transform: uppercase; margin-top: .3rem; font-weight: 600; }

/* Avatar picker modal — must be appended to body via JS for reliable fixed positioning */
.avatar-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9000;
  background: rgba(3, 6, 14, .85);
  display: none;
  align-items: center; justify-content: center;
  padding: 1.5rem;
}
.avatar-modal.open { display: flex; }
.avatar-modal-box {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 18px; width: 100%; max-width: 600px;
  max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.avatar-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 1.4rem .4rem;
}
.avatar-modal-head h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
.avatar-modal-close {
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  color: var(--muted); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: .9rem;
}
.avatar-modal-close:hover { color: #fff; border-color: var(--border-strong); }
.avatar-modal-sub { padding: 0 1.4rem; margin: .2rem 0 .8rem; }
.avatar-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: .7rem; padding: .6rem 1.4rem 1rem; overflow-y: auto;
}
.avatar-grid-loading { grid-column: 1/-1; text-align: center; color: var(--muted); padding: 2rem 0; }
.avatar-option {
  aspect-ratio: 1; border-radius: 50%; cursor: pointer;
  background-size: cover; background-position: center top;
  border: 3px solid transparent; transition: transform .12s, border-color .12s;
  position: relative;
}
.avatar-option:hover { transform: scale(1.08); border-color: var(--border-strong); }
.avatar-option.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(var(--accent-rgb),.5); }
.avatar-modal-foot {
  padding: 1rem 1.4rem; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end;
}

/* 2FA panes inside profile */
.twofa-pane { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.twofa-pane .hint { margin-bottom: 1rem; }
.color-picker-note { font-size: .72rem; color: var(--muted-2); text-transform: none; letter-spacing: 0; }
/* profile-meta name spacing */
.profile-meta { padding: 1rem 2rem 2rem; }
.profile-meta h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; margin: .8rem 0 .3rem; }
.profile-meta > p { color: var(--muted); font-size: .9rem; margin-bottom: 1.4rem; }

/* === Auth pages (login / register) === */
.auth-page {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 3rem;
  overflow: hidden;
}
.auth-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 60% at 20% 30%, rgba(var(--accent2-rgb), .28), transparent 70%),
    radial-gradient(ellipse 60% 60% at 80% 70%, rgba(var(--accent-rgb), .22), transparent 70%);
}
.auth-bg::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(255, 255, 255, .8), transparent 60%),
    radial-gradient(1.5px 1.5px at 24% 67%, rgba(var(--accent-rgb), .85), transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 18%, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(2px 2px at 58% 78%, rgba(var(--accent2-rgb), .9), transparent 60%),
    radial-gradient(1.5px 1.5px at 73% 32%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 88%, rgba(var(--accent-rgb), .75), transparent 60%),
    radial-gradient(2px 2px at 38% 51%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 14%, rgba(var(--accent2-rgb), .65), transparent 60%);
  animation: authStars 14s ease-in-out infinite;
}
.auth-bg::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 8% 88%, rgba(var(--accent-rgb), .7), transparent 60%),
    radial-gradient(2px 2px at 64% 12%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 42%, rgba(var(--accent2-rgb), .8), transparent 60%),
    radial-gradient(1.5px 1.5px at 52% 64%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(2px 2px at 90% 48%, rgba(var(--accent-rgb), .85), transparent 60%);
  animation: authStars 19s ease-in-out -3s infinite reverse;
}
@keyframes authStars {
  0%, 100% { opacity: .55; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-14px); }
}

.auth-card {
  position: relative; z-index: 1;
  width: min(440px, 100%);
  background: rgba(15, 22, 38, .72);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 2.5rem 2.2rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(var(--accent-rgb), .12);
}
.auth-logo {
  display: block; text-align: center; margin-bottom: 1.4rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 1.8rem; letter-spacing: 6px;
  background: linear-gradient(135deg, var(--accent), #fff 55%, var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.auth-card h1 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.8rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; margin-bottom: .4rem; text-align: center; }
.auth-sub { color: var(--muted); font-size: .85rem; text-align: center; margin-bottom: 1.6rem; }
.auth-form { display: flex; flex-direction: column; gap: .8rem; }
.auth-form label { display: flex; flex-direction: column; gap: .35rem; }
.auth-form label > span { font-size: .68rem; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; padding-left: .2rem; }
.auth-form input {
  padding: .8rem 1rem; background: rgba(0, 0, 0, .35);
  border: 1px solid var(--border-strong); border-radius: 10px;
  color: #fff; font-size: .95rem; transition: border-color .2s, box-shadow .2s;
}
.auth-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.btn-block { display: flex; width: 100%; justify-content: center; margin-top: .4rem; }
.auth-foot { text-align: center; margin-top: 1.4rem; color: var(--muted); font-size: .85rem; }
.auth-foot a { color: var(--accent); font-weight: 600; }
.auth-foot a:hover { text-decoration: underline; }
.flash.inline { position: static; transform: none; opacity: 1; pointer-events: auto; animation: none; margin: 0 0 1rem; width: 100%; min-width: 0; }


/* === Responsive === */
@media (max-width: 980px) {
  #navbar { padding: 0 1.5rem; }
  .nav-toggle { display: flex; }
  .nav-links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; background: rgba(5, 9, 18, .97); backdrop-filter: blur(20px); padding: 1rem 1.5rem; gap: .5rem; border-bottom: 1px solid var(--border); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .7rem 0; font-size: .85rem; }
  .nav-right .search-btn span { display: none; }
}
@media (max-width: 720px) {
  #hero, .sub-hero, .detail-hero, .channel-hero, .browse-page, .page-pad, .section-header, .content-section, .cards-row, .stats-grid, .crew-grid, .timeline, .pagination, .genre-chips-row, .people-grid, .site-footer, .inline-player .ip-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
  .hero-bars { right: 1.5rem; }
  .section-header::before { left: 1.5rem; }
  .section-header-channel::after { left: 1.5rem; right: 1.5rem; }
  .card { flex: 0 0 140px; }
  .card-wide { flex: 0 0 240px; }
  .timeline-item { grid-template-columns: 50px 80px 1fr; gap: .8rem; }
  .timeline-item img { width: 80px; height: 120px; }
  .timeline-arrow { display: none; }
  .filter-grid { grid-template-columns: 1fr; }
}

/* === Auth: forgot/2fa supplemental === */
.auth-meta-row { text-align: center; margin-top: .8rem; }
.auth-link-muted { color: var(--muted); font-size: .82rem; letter-spacing: .5px; }
.auth-link-muted:hover { color: var(--accent); text-decoration: underline; }

.otp-input-big {
  width: 100%; max-width: 280px; margin: 0 auto;
  text-align: center; letter-spacing: 14px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 1.8rem; font-weight: 700;
  padding: 1rem .5rem 1rem 1.5rem; /* extra left padding compensates for letter-spacing visual offset */
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--border-strong); border-radius: 12px;
  color: var(--accent);
}
.otp-input-big:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18); }

/* === Security page === */
.security-status-card {
  display: flex; align-items: center; gap: 1.4rem;
  padding: 1.4rem 1.6rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; margin-bottom: 2rem;
}
.security-status-card.on  { border-color: rgba(16,192,138,.45); background: rgba(16,192,138,.06); }
.security-status-card.off { border-color: rgba(255,91,103,.3);  background: rgba(255,91,103,.04); }
.ssc-icon { font-size: 2.2rem; line-height: 1; }
.ssc-body { flex: 1; }
.ssc-body h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: .25rem; color: #fff; }
.ssc-body p  { color: var(--muted); font-size: .88rem; line-height: 1.55; margin: 0; }
.ssc-state   { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 900; letter-spacing: 3px; }
.security-status-card.on  .ssc-state { color: #10c08a; text-shadow: 0 0 18px rgba(16,192,138,.55); }
.security-status-card.off .ssc-state { color: var(--muted-2); }

.sec-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2rem;
  margin-bottom: 1.6rem;
}
.sec-panel-danger { border-color: rgba(255,91,103,.3); background: rgba(255,91,103,.03); }
.sec-panel-header { display: flex; gap: 1.2rem; align-items: flex-start; margin-bottom: 1.4rem; }
.sec-panel-icon { font-size: 2rem; line-height: 1; margin-top: .1rem; flex-shrink: 0; }
.sec-panel-header h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #fff; margin-bottom: .3rem; }
.sec-panel-header p  { color: var(--muted); font-size: .9rem; line-height: 1.6; margin: 0; }
.sec-app-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.sec-badge {
  padding: .3rem .75rem;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: .75rem; font-weight: 600; letter-spacing: .5px; color: var(--muted);
}
.sec-divider { border: none; border-top: 1px solid var(--border); margin: 1.6rem 0; }
.otp-confirm-row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.otp-input-big {
  width: 200px;
  text-align: center; letter-spacing: 10px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 1.6rem; font-weight: 700;
  padding: .9rem .5rem .9rem 1rem;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--border-strong); border-radius: 12px;
  color: var(--accent);
}
.otp-input-big:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.18); }
.qr-setup-grid {
  display: grid; grid-template-columns: 264px 1fr;
  gap: 2rem; margin: 0 0 1.4rem; align-items: center;
}
/* ═══ QR Card — compact dark variant with scan line + glow badge ═══ */
.qr-card {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 22px;
  background: linear-gradient(145deg, #161f2c, #0a0f15);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 0 20px rgba(255,255,255,.04),
    inset 0 0 50px rgba(55,191,255,.08),
    0 20px 60px rgba(0,0,0,.65),
    0 0 40px rgba(55,191,255,.18);
}
/* Animated outer glow halo */
.qr-card::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(55,191,255,0), rgba(55,191,255,.35), rgba(55,191,255,0));
  z-index: -1;
  filter: blur(14px);
  animation: qrBorderGlow 4s ease infinite;
}
@keyframes qrBorderGlow {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}
/* Scan line — BEHIND the QR (z-index 0) */
.qr-scan-line {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  top: -10%;
  background: linear-gradient(90deg, transparent, #6fe8ff, transparent);
  box-shadow: 0 0 14px #6fe8ff;
  animation: qrScan 4s linear infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes qrScan {
  from { top: -10%; }
  to   { top: 110%; }
}
/* Inner QR area — sits ABOVE the scan line */
.qr-inner {
  position: relative;
  z-index: 2;
  width: 240px; height: 240px;
  border-radius: 14px;
  background: #0a0f15;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 0 20px rgba(255,255,255,.04),
    0 0 24px rgba(55,191,255,.10);
}
.qr-inner canvas { display: block; position: relative; z-index: 1; }
/* Centered NEXUS badge */
.qr-center-badge {
  position: absolute;
  z-index: 5;
  padding: 5px 12px;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(10,18,28,.95), rgba(5,10,18,.88));
  border: 1px solid rgba(100,200,255,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 0 14px rgba(55,191,255,.18),
    inset 0 0 8px rgba(255,255,255,.03);
  color: #fff;
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: 0 0 8px #37bfff, 0 0 18px #37bfff;
  animation: qrBadgeGlow 2s ease infinite alternate;
  pointer-events: none;
}
@keyframes qrBadgeGlow {
  from { text-shadow: 0 0 8px #37bfff, 0 0 16px #37bfff; }
  to   { text-shadow: 0 0 14px #6fe8ff, 0 0 28px #37bfff, 0 0 44px #37bfff; }
}
.qr-instructions ol { padding-left: 1.2rem; color: var(--muted); line-height: 1.7; margin: 0; }
.qr-instructions li { margin-bottom: .45rem; font-size: .9rem; }
.qr-instructions strong { color: #fff; }
.manual-key {
  padding: .65rem .9rem;
  background: rgba(0,0,0,.5);
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  font-family: ui-monospace, monospace; font-size: .95rem;
  color: var(--accent); letter-spacing: 2px; user-select: all;
}
.form-stack { display: flex; flex-direction: column; gap: .8rem; max-width: 400px; }
.btn-danger {
  padding: .75rem 1.5rem;
  background: linear-gradient(135deg, #ff5577, #ff7e3f);
  color: #fff; border: none; border-radius: 10px;
  font-weight: 700; font-size: .82rem; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; align-self: flex-start;
}
.btn-danger:hover { box-shadow: 0 6px 20px rgba(255,91,103,.4); }
@media (max-width: 720px) {
  .qr-setup-grid { grid-template-columns: 1fr; }
  .qr-card { margin: 0 auto; }
  .otp-confirm-row { flex-direction: column; align-items: flex-start; }
}

/* === Admin form-grid-2 (used by SMTP page) === */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
.form-grid-2 label { display: flex; flex-direction: column; gap: .35rem; }
.form-grid-2 label > span { font-size: .68rem; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
.form-grid-2 input, .form-grid-2 select {
  padding: .65rem .8rem;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--border);
  border-radius: 8px; color: #fff; font-size: .9rem;
}
.form-grid-2 input:focus, .form-grid-2 select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
.form-grid-2-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid-2 { grid-template-columns: 1fr; } }

@media (max-width: 720px) {
  .qr-setup-grid { grid-template-columns: 1fr; }
  .qr-card { margin: 0 auto; }
}

/* OTP input fix */
.otp-input-big {
  color: var(--accent) !important;
  background: rgba(0,0,0,.5) !important;
  caret-color: var(--accent);
}
.otp-input-big::placeholder { color: rgba(255,255,255,.25); letter-spacing: 6px; }

/* ── 404 Error Page ── */
.error-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem var(--pad, 3rem);
  overflow: hidden;
  gap: 1.2rem;
}

/* Radial glow backdrop — two orbs pulsing */
.error-page::before,
.error-page::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  animation: errOrb 6s ease-in-out infinite;
}
.error-page::before {
  width: 600px; height: 600px;
  top: -200px; left: -150px;
  background: radial-gradient(circle, rgba(var(--accent2-rgb), .28), transparent 70%);
  animation-delay: 0s;
}
.error-page::after {
  width: 500px; height: 500px;
  bottom: -150px; right: -100px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .25), transparent 70%);
  animation-delay: -3s;
}
@keyframes errOrb {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: .7; }
  50%       { transform: scale(1.2) translate(30px, -20px); opacity: 1; }
}

/* Everything in front of the orbs */
.error-page > * { position: relative; z-index: 1; }

/* Scanline sweep overlay */
.error-page .error-code::before {
  content: '';
  position: absolute; inset: -40px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0, 0, 0, .12) 3px, rgba(0, 0, 0, .12) 4px
  );
  pointer-events: none; z-index: 2;
  animation: scanlines 8s linear infinite;
}
@keyframes scanlines {
  from { background-position: 0 0; }
  to   { background-position: 0 80px; }
}

/* ─── 404 number with RGB glitch ─── */
.error-code {
  position: relative;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(8rem, 22vw, 18rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -4px;
  /* Gradient fill */
  background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 50%, #fff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Outer glow around the text */
  filter:
    drop-shadow(0 0 30px rgba(var(--accent-rgb), .7))
    drop-shadow(0 0 80px rgba(var(--accent2-rgb), .4));
  animation: errFloat 4s ease-in-out infinite, errIn .8s cubic-bezier(.4,0,.2,1) both;
  user-select: none;
}

/* Glitch layers via pseudo-elements */
.error-code::after {
  content: '404';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glitch 3.5s steps(1) infinite;
  pointer-events: none; z-index: 3;
}
@keyframes glitch {
  0%,  93%, 100% { transform: translate(0,0);  opacity: 0; clip-path: inset(0 0 100% 0); }
  94%            { transform: translate(-4px, 2px);  opacity: .6; clip-path: inset(28% 0 50% 0); }
  95%            { transform: translate( 3px, -1px); opacity: .5; clip-path: inset(55% 0 20% 0); }
  96%            { transform: translate(-2px,  3px); opacity: .7; clip-path: inset(10% 0 70% 0); }
  97%            { transform: translate( 4px, -2px); opacity: .4; clip-path: inset(75% 0  5% 0); }
  98%            { transform: translate(-3px,  1px); opacity: .6; clip-path: inset(40% 0 35% 0); }
  99%            { transform: translate( 0,   0);    opacity: 0;  clip-path: inset(0 0 100% 0); }
}

@keyframes errFloat {
  0%, 100% { transform: translateY(0);   }
  50%      { transform: translateY(-14px); }
}

/* Entrance animations */
@keyframes errIn      { from { opacity: 0; transform: scale(1.18) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes errFadeUp  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

.error-page h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 30px rgba(var(--accent-rgb), .5);
  animation: errFadeUp .7s .35s cubic-bezier(.4,0,.2,1) both;
}
.error-page p {
  color: var(--muted, rgba(232,240,255,.55));
  font-size: 1.05rem;
  max-width: 400px;
  line-height: 1.6;
  animation: errFadeUp .7s .5s cubic-bezier(.4,0,.2,1) both;
}
.error-page .btn-primary {
  animation: errFadeUp .7s .65s cubic-bezier(.4,0,.2,1) both;
  margin-top: .4rem;
}

/* Floating accent dots around the giant number */
.error-page .error-code ~ * { } /* spacer selector, targets nothing */
.error-page::before { /* repurposed above */ }

/* Extra floating particles unique to 404 (CSS-only, no JS needed) */
.error-page .error-code {
  /* Subtle sparkle grid via background-image */
}

@keyframes errSparkle { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1); } }

.err-spark {
  position: absolute;
  width: var(--s, 5px);
  height: var(--s, 5px);
  left: var(--x, 50%);
  top: var(--y, 50%);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 20px rgba(var(--accent-rgb), .6);
  pointer-events: none;
  z-index: 0;
  animation: errSparkle 2.8s var(--d, 0s) ease-in-out infinite;
}
/* Every other one uses accent2 */
.err-spark:nth-child(even) {
  background: var(--accent2);
  box-shadow: 0 0 8px var(--accent2), 0 0 20px rgba(var(--accent2-rgb), .6);
}
/* ═══ 2FA OTP — final overrides (centered, numeric, themed) ═══ */
.otp-confirm-row {
  display: flex; gap: .8rem; align-items: center; justify-content: center;
  flex-wrap: wrap;
}
.otp-input-big {
  text-align: center; letter-spacing: 10px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 1.6rem; font-weight: 700;
  width: 220px; padding: .9rem 1rem;
  background: rgba(0,0,0,.5) !important;
  border: 1px solid var(--border-strong); border-radius: 12px;
  color: var(--accent) !important; caret-color: var(--accent);
}
.otp-input-big::placeholder { color: rgba(255,255,255,.25); letter-spacing: 8px; }
#twofa-pending form[data-twofa="confirm"] { text-align: center; }
#twofa-pending form[data-twofa="confirm"] .hint { text-align: center; }
@media (max-width: 720px) {
  .otp-confirm-row { flex-direction: column; align-items: center; }
  .otp-input-big { width: 100%; max-width: 260px; }
}

/* ═══ 2FA Recovery / Backup Codes ═══ */
.recovery-block, .recovery-reveal {
  background: rgba(0,114,255,.05);
  border: 1px solid rgba(0,114,255,.25);
  border-radius: 14px;
  padding: 1.2rem 1.3rem;
}
.recovery-reveal {
  background: rgba(245,158,11,.06);
  border-color: rgba(245,158,11,.35);
}
.recovery-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.15rem; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: #fff; margin-bottom: .5rem;
}
.recovery-count { font-size: .85rem; color: var(--muted); margin-top: .6rem; }
.recovery-count strong { color: var(--accent2); font-size: 1rem; }
.recovery-codes-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .55rem; margin: 1rem 0;
}
.recovery-code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 1rem; font-weight: 700; letter-spacing: 2px;
  text-align: center; padding: .6rem .4rem;
  background: rgba(0,0,0,.45);
  border: 1px solid var(--border-strong);
  border-radius: 9px; color: #fff;
  user-select: all;
}
.recovery-actions {
  display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem;
}
.recovery-actions .btn-primary,
.recovery-actions .btn-secondary { font-size: .8rem; padding: .6rem 1.1rem; }
@media (max-width: 540px) {
  .recovery-codes-grid { grid-template-columns: 1fr; }
}

/* ═══ Person page — hero layout (portrait + bio side-by-side) ═══ */
.person-hero {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  padding: calc(var(--nav-h) + 2.5rem) 3rem 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.person-portrait {
  flex-shrink: 0;
  width: 260px;
}
.person-portrait img {
  width: 100%;
  border-radius: 16px;
  aspect-ratio: 2/3;
  object-fit: cover;
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  border: 1px solid var(--border);
}
.person-bio {
  flex: 1;
  min-width: 0;
  padding-top: .5rem;
}
.person-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--accent), #fff 55%, var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.person-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.8rem;
}
.person-bio-text {
  margin-bottom: 1.8rem;
}
.person-bio-text h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .7rem;
}
.person-bio-text p {
  color: rgba(255,255,255,.78);
  line-height: 1.75;
  font-size: .97rem;
  max-width: 680px;
}

/* ═══ Watchlist page — remove button ═══ */
.remove-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: .75rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, color .15s, background .15s;
  line-height: 1;
  padding: 0;
}
.remove-btn:hover {
  border-color: rgba(255,85,119,.5);
  color: #ff5577;
  background: rgba(255,85,119,.1);
}

/* ═══ Person page responsive ═══ */
@media (max-width: 720px) {
  .person-hero {
    flex-direction: column;
    padding: calc(var(--nav-h) + 1.5rem) 1.5rem 2rem;
    gap: 1.5rem;
  }
  .person-portrait {
    width: 160px;
    margin: 0 auto;
  }
  .person-name { text-align: center; }
  .person-meta { justify-content: center; }
}

/* ═══ Person page — hero layout (portrait + bio side-by-side) ═══ */
.person-hero {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  padding: calc(var(--nav-h) + 2.5rem) 3rem 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.person-portrait {
  flex-shrink: 0;
  width: 260px;
}
.person-portrait img {
  width: 100%;
  border-radius: 16px;
  aspect-ratio: 2/3;
  object-fit: cover;
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  border: 1px solid var(--border);
}
.person-bio {
  flex: 1;
  min-width: 0;
  padding-top: .5rem;
}
.person-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--accent), #fff 55%, var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.person-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.8rem;
}
.person-bio-text {
  margin-bottom: 1.8rem;
}
.person-bio-text h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .7rem;
}
.person-bio-text p {
  color: rgba(255,255,255,.78);
  line-height: 1.75;
  font-size: .97rem;
  max-width: 680px;
}

/* ═══ Watchlist page — remove button ═══ */
.remove-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: .75rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, color .15s, background .15s;
  line-height: 1;
  padding: 0;
}
.remove-btn:hover {
  border-color: rgba(255,85,119,.5);
  color: #ff5577;
  background: rgba(255,85,119,.1);
}

/* ═══ Person page responsive ═══ */
@media (max-width: 720px) {
  .person-hero {
    flex-direction: column;
    padding: calc(var(--nav-h) + 1.5rem) 1.5rem 2rem;
    gap: 1.5rem;
  }
  .person-portrait { width: 160px; margin: 0 auto; }
  .person-name { text-align: center; }
  .person-meta { justify-content: center; }
}

/* ═══ OTP input row — centered ═══ */
.otp-input-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
}

/* ═══ Password show/hide toggle ═══ */
.pw-wrap {
  position: relative;
  display: block;
}
.pw-wrap input {
  width: 100%;
  padding-right: 2.8rem !important;
}
.pw-eye {
  position: absolute;
  right: .65rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: .25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color .15s;
  line-height: 0;
  z-index: 2;
}
.pw-eye:hover { color: var(--accent2); }
.pw-eye svg { width: 18px; height: 18px; }

/* ═══ Search page ═══ */
.search-page-form {
  display: flex;
  gap: .6rem;
  align-items: center;
  max-width: 720px;
  margin: 0 0 1.8rem;
  position: relative;
}
.search-page-form .search-icon-wrap {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  line-height: 0;
}
.search-page-input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .9rem 1.1rem .9rem 2.6rem;
  color: #fff;
  font-size: .95rem;
  transition: border-color .15s, background .15s;
}
.search-page-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface2);
  box-shadow: 0 0 0 4px rgba(0,114,255,.15);
}
.search-page-input::placeholder { color: var(--muted2); }
.search-page-form .btn-primary { padding: .9rem 1.6rem; flex-shrink: 0; }

.search-tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.search-tabs a {
  padding: .7rem 1.2rem;
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .5px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.search-tabs a:hover { color: #fff; }
.search-tabs a.active {
  color: var(--accent2);
  border-bottom-color: var(--accent2);
}

.result-summary {
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 1.3rem;
}
.result-summary strong { color: #fff; }

/* People grid in search results */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.2rem;
}
.people-card {
  text-decoration: none;
  text-align: center;
  transition: transform .15s;
}
.people-card:hover { transform: translateY(-4px); }
.people-card img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: .6rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.people-name {
  font-weight: 700;
  font-size: .88rem;
  color: #fff;
  margin-bottom: .15rem;
  line-height: 1.3;
}
.people-job {
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .5px;
}

@media (max-width: 540px) {
  .search-page-form { flex-direction: column; align-items: stretch; }
  .search-page-form .search-icon-wrap { top: 1.3rem; }
  .search-page-form .btn-primary { width: 100%; }
}

/* ═══════════════════════════════════════════
   FRIENDS PAGE
═══════════════════════════════════════════ */

/* Navbar badge */
.nav-friends-link { position: relative; display: inline-flex; align-items: center; gap: .4rem; }
.nav-pending-badge {
  background: #ff5577; color: #fff;
  border-radius: 99px; font-size: .6rem; font-weight: 800;
  padding: .1rem .4rem; line-height: 1.4; min-width: 18px; text-align: center;
}

.friends-search-form { display: flex; gap: .6rem; }
.friends-search-input {
  flex: 1; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: .75rem 1rem; color: #fff; font-size: .9rem;
}
.friends-search-input:focus { outline: none; border-color: var(--accent); }

.friend-row {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border);
}
.friend-row:last-child { border-bottom: none; }
.friend-avatar-wrap { position: relative; flex-shrink: 0; }
.friend-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 800; color: #fff; overflow: hidden;
}
.friend-avatar img { width: 100%; height: 100%; object-fit: cover; }
.friend-online-dot {
  position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--surface);
}
.friend-online-dot.online  { background: #10c08a; }
.friend-online-dot.offline { background: var(--muted2); }
.friend-info { flex: 1; min-width: 0; }
.friend-name { font-weight: 700; font-size: .9rem; color: #fff; }
.friend-sub  { font-size: .75rem; color: var(--muted); margin-top: .1rem; }
.friend-sub.online-text { color: #10c08a; }
.friend-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.btn-sm { padding: .4rem .85rem; font-size: .75rem; }
.btn-danger-hover:hover { border-color: rgba(255,85,119,.5); color: #ff5577; }
.badge-count {
  background: var(--surface2); border-radius: 99px;
  padding: .05rem .45rem; font-size: .65rem; font-weight: 700; color: var(--accent2);
}

/* ═══ Username#tag handle display ═══ */
.profile-handle {
  font-size: .95rem;
  font-weight: 600;
  margin-top: .2rem;
  letter-spacing: .5px;
  user-select: all;        /* easy to copy */
  cursor: text;
}
.handle-name { color: rgba(255,255,255,.75); }
.handle-tag  { color: var(--accent2); font-weight: 800; }

/* Friends list + chat — tag suffix */
.friend-tag {
  color: var(--muted);
  font-size: .78em;
  font-weight: 600;
  margin-left: .05rem;
}

/* ═══════════════════════════════════════════
   SERVER PICKER — futuristic dropdown
═══════════════════════════════════════════ */
.server-picker {
  position: relative;
  margin-right: auto;
  margin-left: 1rem;
}

.srv-trigger {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .85rem;
  background: linear-gradient(135deg, rgba(0,114,255,.06), rgba(0,198,255,.04));
  border: 1px solid rgba(0,198,255,.22);
  border-radius: 10px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .15s;
  position: relative;
}
.srv-trigger:hover {
  border-color: rgba(0,198,255,.5);
  background: linear-gradient(135deg, rgba(0,114,255,.1), rgba(0,198,255,.08));
}
.server-picker.open .srv-trigger {
  border-color: var(--accent2);
  background: linear-gradient(135deg, rgba(0,114,255,.14), rgba(0,198,255,.12));
}
.srv-trigger .srv-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
  animation: srvPulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 8px currentColor;
}
@keyframes srvPulse {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 6px currentColor; }
  50%      { transform: scale(1.35); opacity: .65; box-shadow: 0 0 14px currentColor; }
}
.srv-trigger .srv-label { color: var(--muted); }
.srv-trigger .srv-name  { font-weight: 800; letter-spacing: 1px; text-transform: none; font-size: .82rem; }
.srv-trigger .srv-chev  { color: var(--muted); transition: transform .2s; }
.server-picker.open .srv-trigger .srv-chev { transform: rotate(180deg); color: var(--accent2); }

.srv-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: linear-gradient(160deg, #131c2a, #0a0f15);
  border: 1px solid rgba(0,198,255,.22);
  border-radius: 12px;
  padding: .45rem;
  box-shadow:
    0 20px 50px rgba(0,0,0,.6),
    0 0 30px rgba(0,198,255,.12);
  z-index: 100;
  animation: srvMenuIn .18s cubic-bezier(.22,1,.36,1);
}
@keyframes srvMenuIn {
  from { opacity: 0; transform: translateY(-8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.srv-menu-hint {
  font-size: .65rem;
  color: var(--muted2);
  padding: .35rem .55rem .55rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: .35rem;
  letter-spacing: .5px;
}
.srv-option {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .55rem .6rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255,255,255,.85);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background .12s, color .12s;
}
.srv-option:hover {
  background: rgba(0,198,255,.08);
  color: #fff;
}
.srv-option.active {
  background: linear-gradient(90deg, rgba(0,114,255,.18), rgba(0,198,255,.10));
  color: #fff;
}
.srv-option.active .srv-opt-name { font-weight: 700; }
.srv-option .srv-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.srv-option .srv-opt-name { flex: 1; }
.srv-option .srv-num {
  font-size: .68rem; color: var(--muted2);
  font-family: ui-monospace, monospace;
  letter-spacing: .5px;
}
.srv-option svg { color: var(--accent2); flex-shrink: 0; }

@media (max-width: 540px) {
  .server-picker { margin-left: .5rem; }
  .srv-trigger .srv-label { display: none; }
  .srv-trigger { padding: .4rem .7rem; }
}

/* ═══════════════════════════════════════════
   FRIEND CHAT DOCK
═══════════════════════════════════════════ */
.chat-dock {
  position: fixed !important;
  bottom: 1.4rem !important;
  right: 1.4rem !important;
  top: auto !important;
  left: auto !important;
  z-index: 9000;
  font-family: inherit;
  transform: translateZ(0);
  contain: layout;
}

/* ── Floating bubble (collapsed) ── */
.chat-dock-bubble {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #0072ff, #00c6ff);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 8px 24px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 24px rgba(0,150,255,.35);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.chat-dock-bubble:hover {
  transform: scale(1.06);
  box-shadow:
    0 12px 32px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.1) inset,
    0 0 36px rgba(0,150,255,.55);
}
.chat-dock-bubble.has-unread {
  animation: chatBubblePulse 2s ease-in-out infinite;
}
@keyframes chatBubblePulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 20px rgba(0,150,255,.35); }
  50%      { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 36px rgba(0,210,255,.7); }
}
.chat-bubble-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #ff5577;
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #0a0f15;
}
.chat-dock[data-open="true"] .chat-dock-bubble { display: none; }

/* ── Expanded panel ── */
.chat-panel {
  width: 360px;
  height: 540px;
  max-height: calc(100vh - 5rem);
  background: linear-gradient(160deg, #131c2a, #0a0f15);
  border: 1px solid rgba(0,198,255,.18);
  border-radius: 18px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.7),
    0 0 40px rgba(0,150,255,.15),
    0 0 0 1px rgba(255,255,255,.04) inset;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(.96);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.22,1,.36,1), opacity .2s;
  /* Anchored to bottom-right, grows upward */
  position: absolute;
  bottom: calc(100% + .75rem);
  right: 0;
}
.chat-panel.show {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* ── Panel header ── */
.chat-panel-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  flex-shrink: 0;
}
.chat-back-btn, .chat-close-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: .35rem;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.chat-back-btn:hover, .chat-close-btn:hover { color: #fff; background: rgba(255,255,255,.06); }
.chat-panel-title {
  flex: 1;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .5px;
  color: #fff;
  display: flex; align-items: center; gap: .55rem;
  min-width: 0;
}
.chat-conv-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.chat-conv-info { min-width: 0; flex: 1; }
.chat-conv-name {
  font-size: .85rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-conv-status {
  font-size: .68rem; font-weight: 600; color: var(--muted);
}
.chat-conv-status.online { color: #10c08a; }

/* ── List view ── */
.chat-list-view { flex: 1; overflow-y: auto; }
.chat-list-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--muted);
}
.chat-empty-icon { font-size: 2.5rem; margin-bottom: .8rem; }
.chat-empty-title { font-weight: 700; color: #fff; margin-bottom: .3rem; }
.chat-empty-sub { font-size: .82rem; }
.chat-list-row {
  display: flex; align-items: center; gap: .7rem;
  width: 100%;
  padding: .7rem 1rem;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.chat-list-row:hover { background: rgba(0,198,255,.05); }
.chat-row-avatar-wrap { position: relative; flex-shrink: 0; }
.chat-row-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 800; color: #fff;
}
.chat-row-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid #0a0f15;
}
.chat-row-dot.online { background: #10c08a; }
.chat-row-dot.offline { background: #5a6478; }
.chat-row-body { flex: 1; min-width: 0; }
.chat-row-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: .5rem;
}
.chat-row-name {
  font-size: .85rem; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-row-time { font-size: .68rem; color: var(--muted2); flex-shrink: 0; }
.chat-row-last {
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: .1rem;
}
.chat-row-last.unread { color: #fff; font-weight: 600; }
.chat-row-unread {
  background: #ff5577;
  color: #fff;
  font-size: .65rem; font-weight: 800;
  border-radius: 99px;
  padding: .15rem .45rem;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Conversation view ── */
.chat-conv-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: .8rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 0;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,198,255,.2) transparent;
}
.chat-messages::-webkit-scrollbar { width: 3px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0,198,255,.25);
  border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(0,198,255,.5); }
.chat-loading, .chat-no-msgs {
  text-align: center;
  color: var(--muted2);
  font-size: .82rem;
  padding: 2rem 1rem;
}
.chat-msg {
  display: flex; flex-direction: column;
  max-width: 78%;
  gap: .15rem;
}
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.theirs { align-self: flex-start; align-items: flex-start; }
.chat-msg-bubble {
  padding: .55rem .8rem;
  border-radius: 16px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}
.chat-msg.mine .chat-msg-bubble {
  background: linear-gradient(135deg, #0072ff, #00c6ff);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg.theirs .chat-msg-bubble {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.95);
  border-bottom-left-radius: 4px;
}
.chat-msg-text { font-size: .86rem; line-height: 1.4; }
.chat-msg-text.big-emoji { font-size: 2.2rem; line-height: 1.1; padding: .1rem; background: transparent !important; }
.chat-msg.mine .chat-msg-text.big-emoji,
.chat-msg.theirs .chat-msg-text.big-emoji { background: transparent; }
.chat-msg-text a { color: inherit; text-decoration: underline; }
.chat-msg-time {
  font-size: .65rem; color: var(--muted2);
  padding: 0 .3rem;
}
.chat-msg-gif {
  display: block;
  max-width: 100%;
  max-height: 200px;
  border-radius: 12px;
  object-fit: cover;
}
.chat-msg.mine .chat-msg-bubble:has(.chat-msg-gif),
.chat-msg.theirs .chat-msg-bubble:has(.chat-msg-gif) {
  padding: 3px; background: rgba(255,255,255,.06);
}
.chat-msg.mine .chat-msg-bubble:has(.chat-msg-gif) {
  background: linear-gradient(135deg, rgba(0,114,255,.5), rgba(0,198,255,.5));
}

/* ── Composer ── */
.chat-composer {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .65rem;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  flex-shrink: 0;
}
.chat-tool-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: .4rem;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.chat-tool-btn:hover { color: var(--accent2); background: rgba(0,198,255,.08); }
.chat-gif-tag {
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .5px;
  border: 1.5px solid currentColor;
  padding: .1rem .3rem;
  border-radius: 5px;
  line-height: 1;
}
.chat-composer-input {
  flex: 1;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: .5rem .85rem;
  color: #fff;
  font-size: .85rem;
  outline: none;
  transition: border-color .15s;
}
.chat-composer-input:focus { border-color: var(--accent2); }
.chat-composer-input::placeholder { color: var(--muted2); }
.chat-send-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0072ff, #00c6ff);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: opacity .15s, transform .15s;
}
.chat-send-btn:hover { transform: scale(1.05); }
.chat-send-btn svg { transform: translateX(-1px); }

/* ── Emoji panel ── */
.chat-emoji-panel {
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  padding: .55rem;
  max-height: 200px;
  overflow-y: auto;
}
.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .15rem;
}
.chat-emoji-btn {
  background: none; border: none;
  font-size: 1.25rem;
  padding: .35rem;
  cursor: pointer;
  border-radius: 7px;
  transition: background .12s, transform .12s;
}
.chat-emoji-btn:hover { background: rgba(255,255,255,.08); transform: scale(1.2); }

/* ── GIF panel ── */
.chat-gif-panel {
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  padding: .55rem;
  max-height: 260px;
  display: flex;
  flex-direction: column;
}
.chat-gif-search-wrap { margin-bottom: .5rem; }
.chat-gif-search {
  width: 100%;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: .45rem .75rem;
  color: #fff;
  font-size: .82rem;
  outline: none;
}
.chat-gif-search:focus { border-color: var(--accent2); }
.chat-gif-results {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .4rem;
  align-content: start;
}
.chat-gif-thumb {
  background: rgba(255,255,255,.04);
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  height: 100px;
  transition: transform .15s, box-shadow .15s;
}
.chat-gif-thumb:hover { transform: scale(1.03); box-shadow: 0 4px 14px rgba(0,198,255,.3); }
.chat-gif-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat-gif-placeholder {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted2);
  font-size: .8rem;
  padding: 1rem;
}
.chat-gif-attribution {
  text-align: right;
  color: var(--muted2);
  font-size: .65rem;
  margin-top: .35rem;
  padding-right: .25rem;
}

/* ── Mobile adaptations ── */
@media (max-width: 540px) {
  .chat-dock { bottom: .8rem; right: .8rem; }
  .chat-panel {
    width: calc(100vw - 1.6rem);
    height: calc(100vh - 5rem);
    max-height: 600px;
  }
  .chat-emoji-grid { grid-template-columns: repeat(6, 1fr); }
}

/* d-none — reliable display:none override, works even inside flex parents */
.d-none { display: none !important; }

/* ═══════════════════════════════════════════
   ANIME SECTION
═══════════════════════════════════════════ */
.anime-hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(135deg, #0a0f15 0%, #0d1b2a 50%, #0a0f15 100%);
  overflow: hidden;
  padding: 0 0 2rem;
  margin-bottom: 2rem;
}
.anime-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(124,92,255,.18), transparent),
              radial-gradient(ellipse 40% 40% at 20% 30%, rgba(0,198,255,.08), transparent);
}
.anime-hero-content {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 4rem 2rem 0;
  text-align: center;
  width: 100%;
}
.anime-hero-eyebrow { font-size: .75rem; letter-spacing: 4px; text-transform: uppercase; color: #a78bfa; margin-bottom: .5rem; }
.anime-hero-title { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900; letter-spacing: -1px; color: #fff; margin: 0; }
.anime-hero-sub { color: var(--muted); margin-top: .75rem; font-size: .95rem; }

/* Filters */
.anime-page { max-width: 1400px; margin: 0 auto; padding: 0 2rem 4rem; }
.anime-filters {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 1rem 1.2rem;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
}
.anime-tabs { display: flex; gap: .4rem; flex: 1; flex-wrap: wrap; }
.anime-tab {
  padding: .5rem 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.anime-tab:hover { color: #fff; border-color: rgba(255,255,255,.18); }
.anime-tab.active { background: rgba(124,92,255,.15); border-color: #a78bfa; color: #a78bfa; }
.anime-search-wrap { position: relative; }
.anime-search-inp {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: .5rem .75rem .5rem 2.2rem;
  color: #fff;
  font-size: .85rem;
  width: 200px;
  outline: none;
  transition: border-color .15s;
}
.anime-search-inp:focus { border-color: #a78bfa; }
.anime-search-icon { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.anime-genre-select {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: .5rem .75rem;
  color: #fff;
  font-size: .82rem;
  outline: none;
}

/* Anime card grid */
.anime-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.anime-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.anime-card:hover {
  transform: translateY(-4px);
  border-color: #a78bfa;
  box-shadow: 0 8px 24px rgba(124,92,255,.2);
}
.anime-card-img { aspect-ratio: 2/3; overflow: hidden; background: rgba(255,255,255,.04); }
.anime-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.anime-card:hover .anime-card-img img { transform: scale(1.04); }
.anime-card-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, rgba(124,92,255,.1), rgba(0,198,255,.05)); }
.anime-card-info { padding: .65rem .75rem; flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.anime-card-title { font-size: .82rem; font-weight: 700; color: #fff; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.anime-card-meta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.ac-tag  { font-size: .65rem; background: rgba(124,92,255,.15); color: #a78bfa; border-radius: 4px; padding: .1rem .35rem; font-weight: 600; }
.ac-eps  { font-size: .65rem; color: var(--muted); }
.ac-score { font-size: .7rem; color: #f59e0b; font-weight: 700; }
.anime-card-genres { font-size: .65rem; color: var(--muted2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anime-no-results { text-align: center; color: var(--muted); padding: 3rem; grid-column: 1/-1; }

/* Load more */
.anime-load-more-wrap { text-align: center; margin-top: 2rem; }
.anime-load-more { padding: .65rem 2rem; font-size: .85rem; }
.anime-loading { text-align: center; padding: 2rem; }
.anime-spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid rgba(124,92,255,.2); border-top-color: #a78bfa; border-radius: 50%; animation: spin .7s linear infinite; }

/* Sub/Dub toggle */
.anime-dub-toggle { display: flex; gap: .4rem; margin-bottom: 1.2rem; }
.dub-btn {
  padding: .45rem 1.1rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .15s;
}
.dub-btn.active { background: rgba(124,92,255,.18); border-color: #a78bfa; color: #a78bfa; }

/* Anime episode grid */
.anime-ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: .5rem;
}
.anime-ep-grid .ep-btn {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  padding: .4rem;
}
.anime-ep-grid .ep-btn:hover { border-color: #a78bfa; background: rgba(124,92,255,.1); }
.anime-ep-grid .ep-btn.active { background: rgba(124,92,255,.2); border-color: #a78bfa; color: #a78bfa; }
.anime-ep-grid .ep-num { font-size: 1rem; font-weight: 800; line-height: 1; }
.anime-ep-grid .ep-label { font-size: .55rem; color: var(--muted2); margin-top: .15rem; }

/* Detail stats */
.detail-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}
.detail-stat-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}
.stat-val { font-size: 1.8rem; font-weight: 900; color: #fff; }
.stat-val span { font-size: .9rem; color: var(--muted); }
.stat-label { font-size: .72rem; color: var(--muted2); margin-top: .2rem; text-transform: uppercase; letter-spacing: 1px; }

/* Related scroll */
.related-scroll { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; scrollbar-color: rgba(124,92,255,.2) transparent; }
.related-card { flex-shrink: 0; width: 120px; text-decoration: none; }
.related-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px; display: block; }
.related-label { font-size: .65rem; color: #a78bfa; margin-top: .4rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.related-title { font-size: .78rem; color: #fff; font-weight: 600; margin-top: .2rem; line-height: 1.3; }
.related-format { font-size: .65rem; color: var(--muted2); }

@media (max-width: 640px) {
  .anime-page { padding: 0 1rem 3rem; }
  .anime-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .anime-filters { flex-direction: column; align-items: stretch; }
  .anime-search-inp { width: 100%; }
}

/* ── Anime genre chips (multi-select) ── */
.anime-genre-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.anime-genre-chip {
  padding: .35rem .85rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 99px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.anime-genre-chip:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.anime-genre-chip.active {
  background: rgba(124,92,255,.18);
  border-color: #a78bfa;
  color: #a78bfa;
}
.anime-genre-clear {
  color: var(--muted2) !important;
  border-style: dashed !important;
}

/* Sub/Dub toggle */
.anime-dub-toggle { display: flex; gap: .4rem; }
.dub-btn {
  padding: .4rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .15s;
}
.dub-btn.active { background: rgba(124,92,255,.18); border-color: #a78bfa; color: #a78bfa; }

/* Anime episode grid (same as ep-picker-episodes but tighter) */
.anime-ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: .5rem;
}
.anime-ep-grid .ep-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  color: var(--text);
}
.anime-ep-grid .ep-btn:hover { border-color: #a78bfa; background: rgba(124,92,255,.1); }
.anime-ep-grid .ep-btn.active { background: rgba(124,92,255,.2); border-color: #a78bfa; color: #a78bfa; }
.anime-ep-grid .ep-num { font-size: 1rem; font-weight: 800; line-height: 1; }
.anime-ep-grid .ep-label { font-size: .55rem; color: var(--muted2); margin-top: .15rem; }

/* Browse results grid — same card width as rows */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

/* Anime card score badge */
.card-score {
  position: absolute;
  top: .5rem;
  left: .5rem;
  background: rgba(0,0,0,.7);
  color: #f59e0b;
  font-size: .7rem;
  font-weight: 700;
  padding: .18rem .45rem;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

/* Anime spinner */
.anime-spinner {
  display: inline-block;
  width: 32px; height: 32px;
  border: 3px solid rgba(124,92,255,.2);
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ── Anime toolbar ── */
.anime-toolbar {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
}
.anime-search-wrap { position: relative; }
.anime-search-inp {
  padding: .42rem .75rem .42rem 2.1rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #fff; font-size: .82rem; outline: none;
  width: 170px; transition: border-color .15s, background .15s;
}
.anime-search-inp:focus { border-color: var(--accent2); background: rgba(255,255,255,.09); }
.anime-search-inp::placeholder { color: var(--muted2); }

/* Format pills */
.anime-format-pills { display: flex; gap: .3rem; flex-wrap: wrap; }
.fmt-pill {
  padding: .35rem .75rem; border-radius: 99px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  color: var(--muted); font-size: .76rem; font-weight: 600;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.fmt-pill:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.fmt-pill.active { background: rgba(0,198,255,.12); border-color: var(--accent2); color: var(--accent2); }

/* Browse results grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
/* Make cards-grid items behave like cards-row items */
.cards-grid .card { flex: none; width: auto; }

/* ═══════════════════════════════════════════
   MISSING / NEW VIEW STYLES
═══════════════════════════════════════════ */

/* Hero title fallback (used when no logo image) */
.hero-title-fallback {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: -1px;
  color: #fff;
  margin: 0 0 .5rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
  line-height: 1.1;
}

/* btn-outline — ghost bordered button */
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .55rem 1.2rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  color: rgba(255,255,255,.8);
  font-size: .85rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.btn-outline:hover {
  border-color: var(--accent2);
  color: var(--accent2);
  background: rgba(0,198,255,.06);
}

/* Admin section layout */
.admin-section { padding: 1.5rem 2rem 3rem; max-width: 960px; }
.admin-section-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.admin-section-title { font-size: 1.3rem; font-weight: 800; color: #fff; margin: 0 0 .3rem; }
.admin-section-sub { font-size: .82rem; color: var(--muted); margin: 0; }

/* Admin server list rows */
.srv-admin-list { display: flex; flex-direction: column; gap: .75rem; }
.srv-admin-row {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 1rem 1.2rem;
  transition: border-color .15s, opacity .15s;
  cursor: grab;
}
.srv-admin-row.inactive { opacity: .5; }
.srv-admin-row.dragging { opacity: .3; border-color: var(--accent2); }
.srv-admin-row.drag-over { border-color: var(--accent2); background: rgba(0,198,255,.05); }
.srv-admin-drag { color: rgba(255,255,255,.25); flex-shrink: 0; }
.srv-admin-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
.srv-admin-info { flex: 1; min-width: 0; }
.srv-admin-name {
  font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem;
  color: #fff;
}
.srv-admin-caps { display: flex; gap: .5rem; font-size: .75rem; color: var(--muted); margin-bottom: .3rem; }
.srv-admin-urls code {
  font-size: .68rem; color: var(--muted2);
  background: rgba(255,255,255,.04); padding: .15rem .4rem; border-radius: 4px;
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srv-admin-note { font-size: .72rem; color: var(--muted2); margin-top: .3rem; font-style: italic; }
.srv-admin-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

/* Server admin badges */
.badge-beta {
  font-size: .6rem; background: #f59e0b; color: #000;
  border-radius: 4px; padding: .1rem .35rem; font-weight: 800; letter-spacing: .5px;
}
.badge-off {
  font-size: .6rem; background: rgba(255,255,255,.1); color: var(--muted);
  border-radius: 4px; padding: .1rem .35rem; font-weight: 700;
}

/* Server toggle button in admin */
.srv-toggle-btn {
  padding: .4rem .8rem; border-radius: 8px; border: none;
  font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .15s;
}
.srv-toggle-btn.on  { background: rgba(16,192,138,.15); color: #10c08a; border: 1px solid rgba(16,192,138,.3); }
.srv-toggle-btn.off { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid rgba(255,255,255,.1); }

/* Live test modal */
.srv-test-modal {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center;
}
.srv-test-modal[hidden] { display: none; }
.srv-test-modal-inner {
  width: min(900px, 95vw); height: 75vh;
  background: #0a0f15;
  border: 1px solid rgba(0,198,255,.25);
  border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden;
}
.srv-test-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.07);
  font-weight: 700; color: #fff;
}
.srv-test-note {
  font-size: .75rem; color: var(--muted2);
  padding: .5rem 1rem; border-bottom: 1px solid rgba(255,255,255,.05);
}
.srv-test-iframe { flex: 1; width: 100%; border: none; }
.srv-test-close {
  background: none; border: none; color: var(--muted);
  font-size: 1.1rem; cursor: pointer; padding: .2rem .5rem; border-radius: 6px;
  transition: color .15s;
}
.srv-test-close:hover { color: #fff; }

/* Anime dub toggle */
.anime-dub-toggle { display: flex; gap: .4rem; margin-bottom: 1.2rem; }
.dub-btn {
  padding: .4rem 1rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: var(--muted); font-size: .78rem; font-weight: 800;
  letter-spacing: 1px; cursor: pointer; transition: all .15s;
}
.dub-btn.active { background: rgba(124,92,255,.18); border-color: #a78bfa; color: #a78bfa; }

/* Anime episode grid */
.anime-ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: .5rem;
}
.anime-ep-grid .ep-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  aspect-ratio: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; cursor: pointer; color: var(--text);
  transition: all .15s;
}
.anime-ep-grid .ep-btn:hover { border-color: #a78bfa; background: rgba(124,92,255,.1); }
.anime-ep-grid .ep-btn.active { background: rgba(124,92,255,.2); border-color: #a78bfa; color: #a78bfa; }
.anime-ep-grid .ep-num { font-size: 1rem; font-weight: 800; line-height: 1; }
.anime-ep-grid .ep-label { font-size: .55rem; color: var(--muted2); margin-top: .15rem; }

/* Cards browse grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.cards-grid .card { flex: none; width: auto; }

/* Card score badge */
.card-score {
  position: absolute; top: .5rem; left: .5rem;
  background: rgba(0,0,0,.7); color: #f59e0b;
  font-size: .7rem; font-weight: 700;
  padding: .18rem .45rem; border-radius: 6px;
  backdrop-filter: blur(4px);
}

/* Anime genre chips */
.anime-genre-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.anime-genre-chip {
  padding: .35rem .85rem; border-radius: 99px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  color: var(--muted); font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.anime-genre-chip:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.anime-genre-chip.active { background: rgba(124,92,255,.18); border-color: #a78bfa; color: #a78bfa; }
.anime-genre-clear { color: var(--muted2) !important; border-style: dashed !important; }

/* Anime toolbar */
.anime-toolbar { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.anime-search-wrap { position: relative; }
.anime-search-inp {
  padding: .42rem .75rem .42rem 2.1rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; color: #fff; font-size: .82rem; outline: none;
  width: 170px; transition: border-color .15s, background .15s;
}
.anime-search-inp:focus { border-color: var(--accent2); background: rgba(255,255,255,.09); }
.anime-search-inp::placeholder { color: var(--muted2); }

/* Format pills */
.anime-format-pills { display: flex; gap: .3rem; flex-wrap: wrap; }
.fmt-pill {
  padding: .35rem .75rem; border-radius: 99px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  color: var(--muted); font-size: .76rem; font-weight: 600;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.fmt-pill:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.fmt-pill.active { background: rgba(0,198,255,.12); border-color: var(--accent2); color: var(--accent2); }

/* Anime loading spinner */
.anime-spinner {
  display: inline-block; width: 32px; height: 32px;
  border: 3px solid rgba(124,92,255,.2);
  border-top-color: #a78bfa; border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* Anime stats grid on detail page */
.detail-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.detail-stat-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px; padding: 1rem; text-align: center;
}
.stat-val { font-size: 1.8rem; font-weight: 900; color: #fff; }
.stat-val span { font-size: .9rem; color: var(--muted); }
.stat-label { font-size: .72rem; color: var(--muted2); margin-top: .2rem; text-transform: uppercase; letter-spacing: 1px; }
.stat-sub { font-size: .7rem; color: var(--muted2); margin-top: .15rem; }

/* Related anime scroll */
.related-scroll {
  display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem;
  scrollbar-width: thin; scrollbar-color: rgba(124,92,255,.2) transparent;
}
.related-card { flex-shrink: 0; width: 120px; text-decoration: none; }
.related-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px; display: block; }
.related-label { font-size: .65rem; color: #a78bfa; margin-top: .4rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.related-title { font-size: .78rem; color: #fff; font-weight: 600; margin-top: .2rem; line-height: 1.3; }
.related-format { font-size: .65rem; color: var(--muted2); }

/* ip-close is already btn-icon — just needs cursor */
.ip-close { cursor: pointer; }

/* ═══════════════════════════════════════════
   MISSING / NEW VIEW STYLES — COMPLETE FIX
═══════════════════════════════════════════ */

/* Hero title fallback (used on anime page when no logo image) */
.hero-title-fallback {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: -1px;
  color: #fff;
  margin: 0 0 .5rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
  line-height: 1.1;
}

/* btn-outline — ghost bordered button used on anime browse */
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .55rem 1.2rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  color: rgba(255,255,255,.8);
  font-size: .85rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.btn-outline:hover { border-color: var(--accent2); color: var(--accent2); background: rgba(0,198,255,.06); }

/* Admin section layout */
.admin-section { padding: 1.5rem 2rem 3rem; max-width: 960px; }
.admin-section-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.admin-section-title { font-size: 1.3rem; font-weight: 800; color: #fff; margin: 0 0 .3rem; }
.admin-section-sub { font-size: .82rem; color: var(--muted); margin: 0; }

/* Admin stream server list */
.srv-admin-list { display: flex; flex-direction: column; gap: .75rem; }
.srv-admin-row {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 1rem 1.2rem;
  transition: border-color .15s, opacity .15s;
  cursor: grab;
}
.srv-admin-row.inactive { opacity: .5; }
.srv-admin-row.dragging { opacity: .3; border-color: var(--accent2); }
.srv-admin-row.drag-over { border-color: var(--accent2); background: rgba(0,198,255,.05); }
.srv-admin-drag { color: rgba(255,255,255,.25); flex-shrink: 0; }
.srv-admin-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
.srv-admin-info { flex: 1; min-width: 0; }
.srv-admin-name { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; color: #fff; }
.srv-admin-caps { display: flex; gap: .5rem; font-size: .75rem; color: var(--muted); margin-bottom: .3rem; }
.srv-admin-urls code {
  font-size: .68rem; color: var(--muted2);
  background: rgba(255,255,255,.04); padding: .15rem .4rem; border-radius: 4px;
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srv-admin-note { font-size: .72rem; color: var(--muted2); margin-top: .3rem; font-style: italic; }
.srv-admin-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

/* Badges */
.badge-beta { font-size: .6rem; background: #f59e0b; color: #000; border-radius: 4px; padding: .1rem .35rem; font-weight: 800; letter-spacing: .5px; }
.badge-off  { font-size: .6rem; background: rgba(255,255,255,.1); color: var(--muted); border-radius: 4px; padding: .1rem .35rem; font-weight: 700; }

/* Toggle button in admin server list */
.srv-toggle-btn { padding: .4rem .8rem; border-radius: 8px; border: none; font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .15s; }
.srv-toggle-btn.on  { background: rgba(16,192,138,.15); color: #10c08a; border: 1px solid rgba(16,192,138,.3); }
.srv-toggle-btn.off { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid rgba(255,255,255,.1); }

/* Live server test modal */
.srv-test-modal { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; }
.srv-test-modal[hidden] { display: none; }
.srv-test-modal-inner { width: min(900px,95vw); height: 75vh; background: #0a0f15; border: 1px solid rgba(0,198,255,.25); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
.srv-test-modal-head { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.07); font-weight: 700; color: #fff; }
.srv-test-note { font-size: .75rem; color: var(--muted2); padding: .5rem 1rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.srv-test-iframe { flex: 1; width: 100%; border: none; }
.srv-test-close { background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: .2rem .5rem; border-radius: 6px; transition: color .15s; }
.srv-test-close:hover { color: #fff; }

/* Anime detail — stats strip */
.detail-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 1rem; margin-bottom: 2rem; }
.detail-stat-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 1rem; text-align: center; }
.stat-val { font-size: 1.8rem; font-weight: 900; color: #fff; }
.stat-val span { font-size: .9rem; color: var(--muted); }
.stat-label { font-size: .72rem; color: var(--muted2); margin-top: .2rem; text-transform: uppercase; letter-spacing: 1px; }
.stat-sub { font-size: .7rem; color: var(--muted2); margin-top: .15rem; }

/* Related anime horizontal scroll */
.related-scroll { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; scrollbar-color: rgba(124,92,255,.2) transparent; }
.related-card { flex-shrink: 0; width: 120px; text-decoration: none; }
.related-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px; display: block; }
.related-label { font-size: .65rem; color: #a78bfa; margin-top: .4rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.related-title { font-size: .78rem; color: #fff; font-weight: 600; margin-top: .2rem; line-height: 1.3; }
.related-format { font-size: .65rem; color: var(--muted2); }

/* Card score badge (absolute overlay) */
.card-score { position: absolute; top: .5rem; left: .5rem; background: rgba(0,0,0,.7); color: #f59e0b; font-size: .7rem; font-weight: 700; padding: .18rem .45rem; border-radius: 6px; backdrop-filter: blur(4px); }

/* Cards browse grid */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 1rem; }
.cards-grid .card { flex: none; width: auto; }

/* Anime genre chips */
.anime-genre-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.anime-genre-chip { padding: .35rem .85rem; border-radius: 99px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); color: var(--muted); font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; }
.anime-genre-chip:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.anime-genre-chip.active { background: rgba(124,92,255,.18); border-color: #a78bfa; color: #a78bfa; }
.anime-genre-clear { color: var(--muted2) !important; border-style: dashed !important; }

/* Anime toolbar + search */
.anime-toolbar { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.anime-search-wrap { position: relative; }
.anime-search-inp { padding: .42rem .75rem .42rem 2.1rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: #fff; font-size: .82rem; outline: none; width: 170px; transition: border-color .15s; }
.anime-search-inp:focus { border-color: var(--accent2); }
.anime-search-inp::placeholder { color: var(--muted2); }

/* Format pills */
.anime-format-pills { display: flex; gap: .3rem; flex-wrap: wrap; }
.fmt-pill { padding: .35rem .75rem; border-radius: 99px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); color: var(--muted); font-size: .76rem; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; }
.fmt-pill:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.fmt-pill.active { background: rgba(0,198,255,.12); border-color: var(--accent2); color: var(--accent2); }

/* Sub/dub toggle */
.anime-dub-toggle { display: flex; gap: .4rem; }
.dub-btn { padding: .4rem 1rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: 1px; cursor: pointer; transition: all .15s; }
.dub-btn.active { background: rgba(124,92,255,.18); border-color: #a78bfa; color: #a78bfa; }

/* Anime episode grid */
.anime-ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px,1fr)); gap: .5rem; }
.anime-ep-grid .ep-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; cursor: pointer; color: var(--text); transition: all .15s; }
.anime-ep-grid .ep-btn:hover { border-color: #a78bfa; background: rgba(124,92,255,.1); }
.anime-ep-grid .ep-btn.active { background: rgba(124,92,255,.2); border-color: #a78bfa; color: #a78bfa; }
.anime-ep-grid .ep-num { font-size: 1rem; font-weight: 800; line-height: 1; }
.anime-ep-grid .ep-label { font-size: .55rem; color: var(--muted2); margin-top: .15rem; }

/* Anime loading spinner */
.anime-spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid rgba(124,92,255,.2); border-top-color: #a78bfa; border-radius: 50%; animation: spin .7s linear infinite; }

/* ip-close needs explicit cursor since btn-icon may not set it */
.ip-close { cursor: pointer; }

/* ── Continue Watching — remove button + time left ── */
.cw-item { position: relative; }
.cw-link { display: flex; flex-direction: column; text-decoration: none; height: 100%; }
.cw-pct { font-size: .68rem; color: var(--accent2); font-weight: 700; }
/* Fade out on remove */
.cw-item.removing {
  opacity: 0; transform: scale(.96);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}

/* ═══════════════════════════════════════════
   ANIME PALETTE FIX — use site accent colors
   (overrides hardcoded purples from earlier appends)
═══════════════════════════════════════════ */

/* crew-val — was missing color entirely */
.crew-val { color: rgba(255,255,255,.9); font-size: .92rem; }
.crew-val a { color: #fff; font-weight: 600; }
.crew-val a:hover { color: var(--accent2); }

/* dub toggle — use site palette */
.dub-btn { padding: .4rem 1rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: 1px; cursor: pointer; transition: all .15s; }
.dub-btn.active { background: rgba(var(--accent-rgb),.15); border-color: var(--accent2); color: var(--accent2); }

/* Episode buttons — use site palette */
.anime-ep-grid .ep-btn:hover { border-color: var(--accent2); background: rgba(var(--accent-rgb),.08); color: var(--accent2); }
.anime-ep-grid .ep-btn.active { background: rgba(var(--accent-rgb),.18); border-color: var(--accent2); color: var(--accent2); }

/* Genre chips — already correct but ensure site accent on hover */
.genre-chip:hover { background: rgba(var(--accent-rgb),.12); color: var(--accent2); border-color: var(--accent2); }

/* detail-badge — already uses site gradient, just ensure no override */
.detail-badge { background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff !important; }

/* ── Anime card image quality — ensure crisp rendering at all sizes ── */
.card-img { image-rendering: auto; }
.cards-row .card { min-width: 150px; }
.cards-grid .card .card-img-wrap { aspect-ratio: 2/3; }
.cards-grid .card .card-img { object-position: top center; }

/* ── Anime Parts & Seasons row ── */
.anime-parts-row {
  display: flex; gap: 1rem; overflow-x: auto;
  padding-bottom: .75rem;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent;
}
.anime-part-card {
  flex-shrink: 0; width: 130px;
  text-decoration: none; color: inherit;
  border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  transition: border-color .15s, transform .15s;
}
.anime-part-card:hover { border-color: var(--accent2); transform: translateY(-2px); }
.anime-part-card--current {
  border-color: var(--accent2);
  background: rgba(var(--accent-rgb),.08);
  cursor: default;
}
.anime-part-card--current:hover { transform: none; }
.anime-part-thumb {
  position: relative; aspect-ratio: 2/3;
  overflow: hidden; background: rgba(255,255,255,.04);
}
.anime-part-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anime-part-now {
  position: absolute; bottom: .35rem; left: .35rem;
  background: var(--accent2); color: #000;
  font-size: .6rem; font-weight: 800; padding: .15rem .4rem;
  border-radius: 4px; letter-spacing: .5px;
}
.anime-part-rel {
  position: absolute; bottom: .35rem; left: .35rem;
  background: rgba(0,0,0,.75); color: rgba(255,255,255,.85);
  font-size: .58rem; font-weight: 700; padding: .15rem .4rem;
  border-radius: 4px; backdrop-filter: blur(4px);
}
.anime-part-info { padding: .5rem .6rem .6rem; }
.anime-part-title {
  font-size: .72rem; font-weight: 700; color: #fff;
  line-height: 1.3; margin-bottom: .2rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.anime-part-meta { font-size: .65rem; color: var(--muted2); }

/* ═══════════════════════════════════════════
   NOTIFICATIONS + WATCHLIST + COMING SOON
═══════════════════════════════════════════ */

/* Notification bell */
.notif-wrap { position: relative; }
.notif-bell {
  background: none; border: none; color: var(--muted);
  cursor: pointer; padding: .4rem; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s; position: relative;
}
.notif-bell:hover { color: #fff; background: rgba(255,255,255,.07); }
.notif-badge {
  position: absolute; top: -.2rem; right: -.2rem;
  background: #ef4444; color: #fff;
  font-size: .6rem; font-weight: 800;
  min-width: 16px; height: 16px;
  border-radius: 99px; padding: 0 .3rem;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}
.notif-panel {
  position: absolute; right: 0; top: calc(100% + .5rem);
  width: 320px; max-height: 420px;
  background: #111827; border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; box-shadow: 0 16px 50px rgba(0,0,0,.6);
  overflow: hidden; display: flex; flex-direction: column;
  z-index: 9999;
}
.notif-panel[hidden] { display: none; }
.notif-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.07);
  font-weight: 700; font-size: .85rem; color: #fff;
}
.notif-read-all {
  background: none; border: none; color: var(--accent2); font-size: .72rem;
  cursor: pointer; font-weight: 600;
}
.notif-list { overflow-y: auto; flex: 1; }
.notif-empty { padding: 2rem; text-align: center; color: var(--muted); font-size: .85rem; }
.notif-item {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.04);
  text-decoration: none; color: inherit; transition: background .1s;
}
.notif-item:hover { background: rgba(255,255,255,.04); }
.notif-item.unread { background: rgba(var(--accent-rgb),.05); }
.notif-thumb { width: 40px; height: 56px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.notif-thumb-placeholder { width: 40px; height: 56px; border-radius: 6px; background: rgba(255,255,255,.08); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-weight: 700; font-size: .82rem; color: #fff; margin-bottom: .2rem; }
.notif-msg { font-size: .75rem; color: var(--muted); line-height: 1.4; }
.notif-time { font-size: .65rem; color: var(--muted2); margin-top: .25rem; }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent2); flex-shrink: 0; margin-top: .35rem; }

/* Anime watchlist button */
.wl-anime-btn { transition: color .15s, background .15s; }
.wl-anime-btn.active { color: #f59e0b; background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); }

/* WL toast */
.wl-toast {
  position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%);
  background: #1f2937; color: #fff; padding: .65rem 1.5rem;
  border-radius: 99px; font-size: .85rem; font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,.4); z-index: 99999;
  border: 1px solid rgba(255,255,255,.1);
  animation: toastIn .2s ease;
}
@keyframes toastIn { from { opacity:0; transform:translateX(-50%) translateY(8px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

/* Next episode notice */
.next-episode-notice {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .75rem; padding: .4rem .85rem;
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3);
  border-radius: 99px; color: #f59e0b; font-size: .78rem; font-weight: 600;
}

/* Coming Soon badge */
.coming-soon-badge {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .65rem 1.4rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px; color: var(--muted);
  font-size: .95rem; font-weight: 700;
}
.coming-soon-date {
  background: rgba(0,198,255,.15); border: 1px solid rgba(0,198,255,.3);
  color: var(--accent2); border-radius: 8px;
  padding: .2rem .65rem; font-size: .78rem; font-weight: 800;
}

/* Library tabs */
.lib-tabs { display: flex; gap: .5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.lib-tab {
  padding: .45rem 1.1rem; border-radius: 99px; text-decoration: none;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: var(--muted); font-size: .82rem; font-weight: 600; transition: all .15s;
}
.lib-tab:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.lib-tab.active { background: rgba(var(--accent-rgb),.12); border-color: var(--accent2); color: var(--accent2); }

/* Type badge */
.badge-type {
  font-size: .62rem; font-weight: 800; padding: .1rem .4rem;
  border-radius: 4px; background: rgba(255,255,255,.08); color: var(--muted2);
  letter-spacing: .5px;
}



/* ── Filler episode coloring ── */
.ep-btn.ep-filler {
  background: rgba(107,114,128,.08) !important;
  border-color: rgba(107,114,128,.15) !important;
}
.ep-btn.ep-filler .ep-num { color: #6b7280 !important; }
.ep-btn.ep-filler .ep-label { color: #9ca3af !important; }
.ep-btn.ep-filler::before {
  content: 'F';
  position: absolute; top: .2rem; right: .25rem;
  font-size: .5rem; font-weight: 800;
  color: #9ca3af; letter-spacing: 0;
}
.ep-btn.ep-recap {
  background: rgba(234,179,8,.07) !important;
  border-color: rgba(234,179,8,.15) !important;
}
.ep-btn.ep-recap .ep-num { color: #ca8a04 !important; }
.ep-btn.ep-recap::before {
  content: 'R';
  position: absolute; top: .2rem; right: .25rem;
  font-size: .5rem; font-weight: 800;
  color: #ca8a04; letter-spacing: 0;
}
.ep-btn { position: relative; } /* needed for ::before positioning */

/* Filler legend */
.ep-filler-legend {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .5rem 0 .75rem;
  font-size: .72rem; color: var(--muted);
}
.fl-item { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.fl-dot { width: 10px; height: 10px; border-radius: 3px; }
.fl-normal .fl-dot { background: rgba(0,198,255,.3); border: 1px solid rgba(0,198,255,.4); }
.fl-filler .fl-dot { background: rgba(107,114,128,.2); border: 1px solid rgba(107,114,128,.3); }
.fl-recap  .fl-dot { background: rgba(234,179,8,.2);   border: 1px solid rgba(234,179,8,.3); }

/* ═══════════════════════════════════════════
   ANIME PARTS PICKER
   — vertical column, same as ep-picker-seasons
   — cover art fills button bg, overlay + text on top
═══════════════════════════════════════════ */

/* Override: column layout (same as TMDB seasons) */
.anime-parts-picker {
  flex-direction: column !important;
  max-height: 480px;
  overflow-y: auto;
  overflow-x: hidden;
  gap: .4rem;
  padding-right: .3rem;
  padding-top: 24px;
}

/* Anime part button — same base dimensions as ep-season-btn */
.anime-part-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  position: relative;
  overflow: hidden;
  padding: .85rem 1rem !important;
  min-height: 66px;
  cursor: pointer;
  text-decoration: none;
}

/* Cover image fills button background */
.ep-season-thumb-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ep-season-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

/* Dark gradient overlay — same direction as TMDB left-fade */
.anime-part-btn::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to right,
    rgba(5,9,18,.95) 0%,
    rgba(5,9,18,.82) 55%,
    rgba(5,9,18,.55) 100%
  );
  transition: background .2s;
}
.anime-part-btn:hover::before {
  background: linear-gradient(
    to right,
    rgba(5,9,18,.85) 0%,
    rgba(5,9,18,.68) 55%,
    rgba(5,9,18,.4) 100%
  );
}

/* Text rendered above overlay */
.anime-part-btn .ep-season-num,
.anime-part-btn .ep-season-count {
  position: relative; z-index: 2;
  padding: 0 !important;
}

/* Browsing state (user selected, not playing) */
.anime-part-btn.browsing {
  border-color: rgba(var(--accent-rgb), .4) !important;
}
.anime-part-btn.browsing::before {
  background: linear-gradient(to right, rgba(var(--accent-rgb),.55) 0%, rgba(var(--accent-rgb),.25) 100%) !important;
}

/* Playing state (currently in player) */
.anime-part-btn.playing {
  border-color: var(--accent) !important;
  box-shadow: 0 0 22px rgba(var(--accent-rgb),.4), inset 0 0 0 1px rgba(255,255,255,.15);
}
.anime-part-btn.playing::before {
  background: linear-gradient(to right, rgba(var(--accent-rgb),.7) 0%, rgba(var(--accent-rgb),.35) 100%) !important;
}
.anime-part-btn.playing .ep-season-count { color: rgba(255,255,255,.85) !important; }
/* Pulsing dot */
.anime-part-btn.playing::after {
  content: '●';
  position: absolute; top: .6rem; right: .8rem; z-index: 3;
  color: #fff; font-size: .6rem;
  animation: playingPulse 1.4s ease-in-out infinite;
  text-shadow: 0 0 8px #fff;
}

/* Season not yet released */
.ep-season-btn.season-upcoming {
  opacity: .65; cursor: default;
  border-style: dashed;
}
.ep-season-btn.season-upcoming:hover {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
.season-date {
  color: #f59e0b !important;
  font-size: .65rem !important;
}



/* ── Continue Watching remove button ── */
.cw-remove-btn {
  position: absolute; top: .5rem; right: .5rem; z-index: 20;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.75); border: 1px solid rgba(255,255,255,.2);
  color: #fff; cursor: pointer; pointer-events: auto !important;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, background .15s;
}
.cw-item:hover .cw-remove-btn { opacity: 1; }
.cw-remove-btn:hover { background: rgba(220,38,38,.9); border-color: transparent; }
.cw-pct { font-size: .68rem; color: var(--accent2); font-weight: 700; }
.cw-item.removing { opacity: 0; transform: scale(.96); transition: opacity .25s, transform .25s; pointer-events: none; }

/* ── Continue Watching remove button ── */
.cw-remove-btn {
  position: absolute; top: .5rem; right: .5rem; z-index: 20;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.75); border: 1px solid rgba(255,255,255,.2);
  color: #fff; cursor: pointer; pointer-events: auto !important;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, background .15s;
}
.cw-item:hover .cw-remove-btn { opacity: 1; }
.cw-remove-btn:hover { background: rgba(220,38,38,.9); border-color: transparent; }
.cw-pct { font-size: .68rem; color: var(--accent2); font-weight: 700; }
.cw-item.removing { opacity: 0; transform: scale(.96); transition: opacity .25s, transform .25s; pointer-events: none; }

/* ── Admin Analytics / Tracking ── */
.track-grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 1rem; }
.track-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 800px) { .track-grid-2 { grid-template-columns: 1fr; } }

.track-card {
  border-radius: 14px; padding: 1.4rem 1.2rem;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  position: relative; overflow: hidden;
}
.track-card::before { content:''; position:absolute; inset:0; opacity:.06; pointer-events:none; }
.track-card--blue::before  { background: radial-gradient(circle at 80% 20%, #00c6ff, transparent 70%); }
.track-card--green::before { background: radial-gradient(circle at 80% 20%, #10c08a, transparent 70%); }
.track-card--purple::before{ background: radial-gradient(circle at 80% 20%, #a78bfa, transparent 70%); }
.track-card--amber::before { background: radial-gradient(circle at 80% 20%, #f59e0b, transparent 70%); }
.track-icon { font-size: 1.3rem; margin-bottom: .5rem; }
.track-val { font-size: 2rem; font-weight: 900; color: #fff; letter-spacing: -1px; line-height: 1; }
.track-label { font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted2); margin: .3rem 0 .2rem; font-weight: 700; }
.track-sub { font-size: .72rem; color: var(--muted2); }

.track-panel {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; padding: 1.2rem 1.4rem;
}
.track-panel-title { font-size: .82rem; font-weight: 800; color: #fff; letter-spacing: .5px; margin-bottom: 1rem; text-transform: uppercase; }

.track-bar-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.track-bar-label { font-size: .78rem; color: var(--muted); width: 70px; flex-shrink: 0; }
.track-bar-wrap { flex: 1; height: 8px; background: rgba(255,255,255,.06); border-radius: 99px; overflow: hidden; }
.track-bar-fill { height: 100%; border-radius: 99px; transition: width .5s; min-width: 2px; }
.track-bar-val { font-size: .75rem; color: #fff; font-weight: 600; width: 90px; text-align: right; flex-shrink: 0; }
.track-bar-val small { color: var(--muted2); font-weight: 400; }

.track-chart { display: flex; align-items: flex-end; gap: 3px; height: 100px; padding: .5rem 0; }
.track-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-width: 0; cursor: default; }
.track-chart-bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; transition: height .4s; }
.track-chart-lbl { font-size: .6rem; color: var(--muted2); white-space: nowrap; }
.track-chart-legend { font-size: .75rem; color: var(--muted2); margin-top: .5rem; }

.track-content-list { display: flex; flex-direction: column; gap: .6rem; }
.track-content-row { display: flex; align-items: center; gap: .75rem; }
.track-rank { width: 1.2rem; font-size: .72rem; font-weight: 800; color: var(--muted2); text-align: center; flex-shrink: 0; }
.track-poster { width: 32px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.track-content-info { flex: 1; min-width: 0; }
.track-content-title { font-size: .82rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-content-meta { display: flex; gap: .5rem; font-size: .7rem; color: var(--muted); margin-top: .1rem; flex-wrap: wrap; }
.track-type { background: rgba(255,255,255,.08); border-radius: 4px; padding: .05rem .35rem; font-weight: 700; font-size: .62rem; }

.track-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.track-table th { text-align: left; padding: .5rem .75rem; font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted2); border-bottom: 1px solid rgba(255,255,255,.07); }
.track-table td { padding: .65rem .75rem; border-bottom: 1px solid rgba(255,255,255,.04); color: #fff; }
.track-table tr:last-child td { border-bottom: none; }
.track-table tr:hover td { background: rgba(255,255,255,.02); }

/* ═══════════════════════════════════════════
   NEXUS LOADER
═══════════════════════════════════════════ */
#nexus-loader {
  position: fixed; inset: 0; z-index: 99999;
  background: #050912;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .7s ease, visibility .7s ease;
  pointer-events: none;
}
/* Re-enable pointer events on inner content so particles/clicks still work */
#nexus-loader .nl-center {
  pointer-events: none;
}
#nexus-loader.nl-done {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.nl-blob { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.nl-blob1 { width: 600px; height: 600px; top: -200px; left: -150px; background: radial-gradient(circle, rgba(var(--accent2-rgb),.18), transparent 70%); animation: nlBlob1 8s ease-in-out infinite; }
.nl-blob2 { width: 500px; height: 500px; bottom: -150px; right: -100px; background: radial-gradient(circle, rgba(var(--accent-rgb),.14), transparent 70%); animation: nlBlob2 10s ease-in-out infinite; }
@keyframes nlBlob1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(60px,40px) scale(1.15)} }
@keyframes nlBlob2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,-30px) scale(1.1)} }

.nl-center { display: flex; flex-direction: column; align-items: center; gap: 0; }

/* Stage — brackets wrap only the logo */
.nl-stage {
  position: relative; width: 360px; height: 120px;
  display: flex; align-items: center; justify-content: center;
}

/* Brackets */
.nl-brackets { position: absolute; inset: 0; pointer-events: none; }
.nl-bracket { position: absolute; width: 20px; height: 20px; opacity: 0; animation: nlBracketIn .4s ease forwards; }
.nl-bracket::before,.nl-bracket::after { content:''; position:absolute; background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb),.8); }
.nl-bracket::before { width:100%; height:1.5px; top:0; left:0; }
.nl-bracket::after  { width:1.5px; height:100%; top:0; left:0; }
.nl-tl { top:0; left:0; animation-delay:1.3s; }
.nl-tr { top:0; right:0; transform:scaleX(-1); animation-delay:1.4s; }
.nl-bl { bottom:0; left:0; transform:scaleY(-1); animation-delay:1.5s; }
.nl-br { bottom:0; right:0; transform:scale(-1,-1); animation-delay:1.6s; }
@keyframes nlBracketIn { to { opacity:.85; } }

/* Scan lines */
.nl-scanline { position:absolute; left:-60px; right:-60px; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.6),rgba(255,255,255,.5),rgba(var(--accent-rgb),.6),transparent); animation:nlScan 3s ease-in-out infinite; pointer-events:none; }
.nl-scanline:nth-child(2){animation-delay:-1.5s;opacity:.35;}
@keyframes nlScan { 0%{top:-20px;opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{top:140px;opacity:0} }

/* Morph ring */
.nl-ring { position:absolute; width:100%; height:100%; top:0; left:0; overflow:visible; pointer-events:none; }
.nl-ellipse { animation: nlMorph 3s ease-in-out infinite; }
.nl-e2 { animation-delay:-1s; }
.nl-e3 { animation-delay:-2s; }
@keyframes nlMorph {
  0%  { rx:172; ry:52; } 25% { rx:185; ry:44; }
  50% { rx:160; ry:58; } 75% { rx:188; ry:48; } 100%{ rx:172; ry:52; }
}

/* Orbit particles */
.nl-orbit { position:absolute; width:100%; height:100%; top:0; left:0; pointer-events:none; }
.nl-p { position:absolute; border-radius:50%; top:50%; left:50%; background:var(--accent); box-shadow:0 0 6px var(--accent),0 0 12px rgba(var(--accent-rgb),.5); }
.nl-p1{width:4px;height:4px;margin:-2px 0 0 -2px;animation:nlOrb1 3.2s linear infinite;}
.nl-p2{width:3px;height:3px;margin:-1.5px 0 0 -1.5px;background:var(--accent2);box-shadow:0 0 6px var(--accent2);animation:nlOrb2 4.1s linear infinite;}
.nl-p3{width:2px;height:2px;margin:-1px 0 0 -1px;animation:nlOrb1 2.6s linear -1.3s infinite;opacity:.6;}
.nl-p4{width:3px;height:3px;margin:-1.5px 0 0 -1.5px;background:#fff;box-shadow:0 0 5px #fff;animation:nlOrb2 5s linear -2s infinite;opacity:.45;}
.nl-p5{width:2px;height:2px;margin:-1px 0 0 -1px;animation:nlOrb1 3.8s linear -1.8s infinite;opacity:.55;}
@keyframes nlOrb1{from{transform:rotate(0deg) translateX(200px) rotate(0deg)} to{transform:rotate(360deg) translateX(200px) rotate(-360deg)}}
@keyframes nlOrb2{from{transform:rotate(60deg) translateX(200px) rotate(-60deg)} to{transform:rotate(420deg) translateX(200px) rotate(-420deg)}}

/* Logo SVG */
.nl-logo { position:relative; z-index:2; overflow:visible; }
.nl-txt-stroke {
  font-family:'Barlow Condensed','Arial Black',sans-serif; font-weight:900; font-size:96px; letter-spacing:5px;
  fill:none; stroke:url(#nlGlare); stroke-width:1.5; stroke-linejoin:round;
  filter:url(#nlGlow);
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:nlDraw 1.2s cubic-bezier(.4,0,.2,1) .15s forwards, nlPulse 2.4s 1.35s ease-in-out infinite;
}
.nl-txt-fill {
  font-family:'Barlow Condensed','Arial Black',sans-serif; font-weight:900; font-size:96px; letter-spacing:5px;
  fill:url(#nlFill); stroke:none; filter:url(#nlGlow);
  opacity:0; animation:nlFillFade .6s ease 1.35s forwards;
}
@keyframes nlDraw    { to { stroke-dashoffset:0; } }
@keyframes nlFillFade{ to { opacity:1; } }
@keyframes nlPulse   { 0%,100%{filter:url(#nlGlow)} 50%{filter:url(#nlGlowBright)} }

/* Progress */
.nl-progress { margin-top:28px; width:220px; opacity:0; animation:nlFadeUp .5s ease 1.5s forwards; }
.nl-track { height:1.5px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; }
.nl-fill  { height:100%; width:0%; border-radius:2px; background:linear-gradient(90deg,var(--accent2),var(--accent),#fff); box-shadow:0 0 8px rgba(var(--accent-rgb),.8); animation:nlBar 2.2s cubic-bezier(.4,0,.2,1) 1.5s forwards; }
@keyframes nlBar { 0%{width:0%} 60%{width:75%} 85%{width:88%} 100%{width:100%} }
.nl-label { margin-top:.55rem; text-align:center; font-size:.6rem; letter-spacing:4px; text-transform:uppercase; color:rgba(232,240,255,.3); font-family:system-ui; animation:nlFlicker 2s ease 1.5s infinite; }
@keyframes nlFlicker { 0%,100%{opacity:.3} 50%{opacity:.7} }
@keyframes nlFadeUp  { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* Hero watchlist button inherits from btn-secondary and btn-watchlist */

/* ═══════════════════════════════════════════
   DUAL MODE — TV/Film ↔ Anime switch
═══════════════════════════════════════════ */

/* Logo anime tag */
.logo-mode-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .65rem; font-weight: 900;
  letter-spacing: 3px; text-transform: uppercase;
  background: linear-gradient(135deg, #a78bfa, #c084fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-left: .3rem; align-self: flex-end; padding-bottom: .05rem;
}

/* Mode switch pill */
.mode-switch {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 50px; padding: .2rem;
  transition: border-color .25s;
  flex-shrink: 0;
}
.mode-switch:hover { border-color: var(--border-strong); }

.mode-switch-option {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .75rem; border-radius: 50px;
  font-size: .7rem; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted);
  transition: all .2s; white-space: nowrap;
}

.mode-switch-divider {
  width: 1px; height: 14px; background: var(--border);
  flex-shrink: 0; margin: 0 .1rem;
}

/* Active state — normal mode */
body:not(.anime-mode) .mode-switch #ms-normal {
  background: rgba(255,255,255,.1);
  color: #fff;
}
/* Active state — anime mode */
body.anime-mode .mode-switch #ms-anime {
  background: rgba(167,139,250,.18);
  color: #a78bfa;
  box-shadow: 0 0 14px rgba(167,139,250,.25);
}
body.anime-mode .mode-switch {
  border-color: rgba(167,139,250,.3);
}
body.anime-mode .mode-switch:hover {
  border-color: rgba(167,139,250,.5);
}

/* Hide/show nav link sets */
body:not(.anime-mode) #nav-links-anime { display: none !important; }
body.anime-mode #nav-links-normal { display: none !important; }

/* Anime mode — navbar accent glow */
body.anime-mode #navbar.scrolled {
  box-shadow: 0 0 0 1px rgba(167,139,250,.15) inset;
}
body.anime-mode #nav-logo .logo-nexus {
  background: linear-gradient(135deg, #a78bfa, #fff 55%, #c084fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Anime nav links — subtle purple active */
body.anime-mode .nav-links a.active,
body.anime-mode .nav-links-anime a.active {
  color: #a78bfa;
  text-shadow: 0 0 18px rgba(167,139,250,.6);
}
body.anime-mode .nav-links a:hover,
body.anime-mode .nav-links-anime a:hover { color: #fff; }
body.anime-mode .nav-links a::after,
body.anime-mode .nav-links-anime a::after {
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
}

/* Anime mode search btn */
body.anime-mode .search-btn:hover {
  border-color: rgba(167,139,250,.5);
  color: #a78bfa;
  box-shadow: 0 0 20px rgba(167,139,250,.25);
}

/* Mobile: mode switch in menu */
@media (max-width: 980px) {
  .mode-switch { order: -1; margin-right: auto; }
  .mode-switch-option { padding: .28rem .6rem; font-size: .65rem; }
}

/* Mode switch — no transition (removed) */

/* ═══════════════════════════════════════════
   SEASON STRIP — anime detail page
═══════════════════════════════════════════ */

.season-strip {
  display: flex; gap: .65rem;
  overflow-x: auto; padding: .25rem .1rem 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.season-strip::-webkit-scrollbar { height: 4px; }
.season-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.season-card {
  flex: 0 0 90px; scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--surface); border: 2px solid transparent;
  border-radius: 10px; overflow: hidden; cursor: pointer;
  transition: border-color .2s, transform .15s, box-shadow .2s;
  text-align: center;
}
.season-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.season-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), .35);
}
body.anime-mode .season-card.active {
  border-color: #a78bfa;
  box-shadow: 0 0 16px rgba(167,139,250,.35);
}

.season-card-cover {
  position: relative; width: 100%; aspect-ratio: 2/3;
  background: var(--surface2); overflow: hidden;
}
.season-card-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.season-card-no-img {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem; font-weight: 900; color: var(--muted);
}

.season-card-now {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #000;
  font-size: .55rem; font-weight: 800; letter-spacing: 1.5px;
  padding: .18rem .45rem; border-radius: 99px; white-space: nowrap;
}
body.anime-mode .season-card-now { background: #a78bfa; }

.season-card-airing {
  position: absolute; top: 5px; right: 5px;
  background: rgba(245,158,11,.9); color: #000;
  font-size: .5rem; font-weight: 800; letter-spacing: 1px;
  padding: .15rem .4rem; border-radius: 4px;
}

.season-card-info {
  padding: .4rem .3rem .45rem;
  display: flex; flex-direction: column; gap: .15rem; align-items: center;
}
.season-card-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .85rem; font-weight: 800; color: #fff; letter-spacing: .5px;
}
.season-card-eps {
  font-size: .62rem; color: var(--muted); letter-spacing: .3px;
}
.season-card.active .season-card-num { color: var(--accent); }
body.anime-mode .season-card.active .season-card-num { color: #a78bfa; }