/* ── Reset & tokens ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg0:  #050010;
  --bg1:  #0a001e;
  --bg2:  #100028;
  --bg3:  #180038;
  --p1:   #7c22ff;
  --p2:   #9b5fff;
  --p3:   #c8a0ff;
  --acc:  #d655ff;
  --text: #ede0ff;
  --muted:#7a5fa0;
  --err:  #ff5566;
  --ok:   #55cc88;
  --rad:  12px;
  --t:    0.2s ease;

  /* AAA Theme Variables (Purple Default) */
  --glass-bg: rgba(10,0,30,.88);
  --glass-border: rgba(124,34,255,.14);
  --card-bg: rgba(8,0,24,.4);
  --card-border: rgba(124,34,255,.1);
  --card-hover-border: rgba(124,34,255,.45);
  --card-hover-y: -4px;
  --card-hover-glow: 0 16px 50px rgba(124,34,255,.28), 0 4px 16px rgba(0,0,0,.4);
  --glow-primary: rgba(124,34,255,.45);
  --film-opacity: .032;
  --scrollbar-thumb: rgba(124,34,255,.28);

  /* Semantic visual system. Theme blocks only need to change the palette above;
     shared components consume these roles instead of carrying purple literals. */
  --surface-0: var(--bg0);
  --surface-1: var(--bg1);
  --surface-2: var(--bg2);
  --surface-3: var(--bg3);
  --surface-card: var(--card-bg);
  --surface-glass: var(--glass-bg);
  --surface-hover: color-mix(in srgb, var(--p1) 12%, transparent);
  --surface-active: color-mix(in srgb, var(--p1) 20%, transparent);
  --surface-input: color-mix(in srgb, var(--bg2) 82%, transparent);
  --border-subtle: var(--card-border);
  --border-strong: var(--card-hover-border);
  --accent-soft: color-mix(in srgb, var(--p1) 14%, transparent);
  --accent-medium: color-mix(in srgb, var(--p1) 28%, transparent);
  --accent-border: color-mix(in srgb, var(--p1) 38%, transparent);
  --accent-shadow: color-mix(in srgb, var(--p1) 30%, transparent);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-on-accent: #fff;
  --overlay-strong: rgba(0,0,0,.92);
  --overlay-medium: rgba(0,0,0,.72);
  --overlay-soft: rgba(0,0,0,.42);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--p1) 24%, transparent);
  --shadow-card: 0 8px 28px rgba(0,0,0,.28);
  --shadow-raised: 0 18px 50px rgba(0,0,0,.48);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --motion-fast: 140ms;
  --motion-normal: 220ms;
  --motion-layout: 420ms;
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --ease-emphasized: cubic-bezier(.2,1,.3,1);
}

html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg0);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

:where(button, a, input, textarea, select, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--p2);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

/* ── Film grain ──────────────────────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9998;
  opacity: var(--film-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100vh; }
main { flex: 1; overflow: hidden; position: relative; }
.view {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
  display: flex; flex-direction: column;
}
.view.active { opacity: 1; pointer-events: all; }

/* ── Header ──────────────────────────────────────────────────────────────── */
header {
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px; height: 54px;
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0; z-index: 100; position: relative;
}

/* ── Home: transparent header overlaid on the hero ───────────────────────────
   On the home view the header floats over the hero so the key art bleeds all the
   way to the top edge (instead of a solid bar pushing it down). Taking the header
   out of flow lets `main` (and the hero) fill the full viewport height. A soft
   top scrim keeps the logo/search legible over bright art. */
body.home-active header {
  position: absolute; top: 0; left: 0; right: 0;
  /* No scrim ON the header itself — its hard 54px bottom edge read as a black
     hairline across the hero. Legibility now comes from a TALLER, gradual scrim
     on the hero (below) that fades over ~150px, so there's no perceptible edge. */
  background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background .25s ease, border-color .25s ease;
}
/* Gradual top scrim on the hero for header legibility — sits above the slides
   but below the header (z-index 2 < header's 100), and fades smoothly so it
   never draws a line where it ends (the old header scrim's flaw). */
body.home-active .home-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 150px;
  background: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, rgba(0,0,0,.28) 42%, transparent 100%);
  z-index: 2; pointer-events: none;
}
/* Once scrolled past the hero the header goes solid glass, so the hero scrim is
   redundant — fade it out to avoid a faint band over the now-dark page. */
body.home-active.home-scrolled .home-hero::before { opacity: 0; transition: opacity .25s ease; }
/* Once scrolled past the hero, snap back to the solid glass header so content
   below stays readable underneath it. */
body.home-active.home-scrolled header {
  background: var(--glass-bg);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom-color: var(--glass-border);
}

.settings-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 6px; border-radius: 50%;
  transition: color var(--t), background var(--t);
}
.settings-btn:hover {
  color: var(--text); background: rgba(255,255,255,.1);
}

.logo { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; flex-shrink: 0; }
.logo-img { height: 36px; width: 36px; border-radius: 10px; object-fit: cover; }
.auth-logo-img { height: 56px; width: 56px; border-radius: 14px; }
.logo-sub  { color: var(--muted); font-weight: 400; }

.search-wrap { display: flex; flex: 1; min-width: 0; max-width: 560px; position: relative; }
.search-wrap input {
  flex: 1; width: 100%; min-width: 0; padding: 8px 44px 8px 16px;
  background: rgba(16,0,40,.8);
  border: 1px solid rgba(124,34,255,.18);
  backdrop-filter: blur(10px);
  border-radius: 10px; color: var(--text); font-size: 14px; font-family: inherit; outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.search-wrap input:focus {
  border-color: rgba(124,34,255,.55);
  box-shadow: 0 0 0 3px rgba(124,34,255,.12), 0 0 18px rgba(124,34,255,.08);
}
.search-wrap input::placeholder { color: var(--muted); }
.search-wrap button {
  position: absolute; right: 0; top: 0; bottom: 0; width: 42px;
  background: none; border: none; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0 10px 10px 0; transition: color var(--t);
}
.search-wrap button:hover { color: var(--p2); }

/* ── Home ────────────────────────────────────────────────────────────────── */
#view-home { overflow-y: auto; align-items: center; gap: 0; }
#view-home::-webkit-scrollbar { width: 5px; }
#view-home::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* ── Hero Carousel ────────────────────────────────────────────────────────── */
.home-hero {
  position: relative;
  width: 100%;
  /* Near-full-viewport cinematic hero. The header overlays it (see
     body.home-active header), so the art bleeds to the very top; ~92vh leaves a
     sliver of the next row peeking to invite scrolling. */
  height: 92vh;
  min-height: 620px;
  max-height: 1000px;
  overflow: hidden;
  background: var(--bg0);
}
.hero-slider {
  position: absolute; inset: 0;
  display: flex;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  touch-action: pan-y;    /* horizontal = our drag; vertical = page scroll */
  cursor: grab;
}
.hero-slider:active { cursor: grabbing; }
.hero-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  cursor: pointer;
}
.hero-slide-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.85);
}
.hero-slide-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg0) 0%, transparent 60%), linear-gradient(to right, var(--bg0) 0%, rgba(5,0,16,0.3) 50%, transparent 100%);
}
.hero-slide-content {
  position: absolute; bottom: 12%; left: 4%; width: 90%; max-width: 800px;
  z-index: 2;
}
.hero-slide-title {
  font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; color: #fff;
  line-height: 1.1; margin-bottom: 12px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}
.hero-slide-meta {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px;
}
.hero-slide-synopsis {
  font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 24px; text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.hero-indicators {
  position: absolute; bottom: 20px; right: 4%;
  display: flex; gap: 8px; z-index: 3;
}
.hero-indicator {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer; transition: background 0.3s, transform 0.3s;
}
.hero-indicator.active {
  background: var(--p1); transform: scale(1.2);
}
.hero-watch-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 28px; background: #fff; color: #000;
  font-weight: 700; border-radius: 4px; font-size: 15px;
  transition: transform 0.2s, background 0.2s;
}
.hero-watch-btn:hover { background: rgba(255,255,255,0.8); transform: scale(1.05); }

.home-content {
  position: relative; z-index: 10;
  /* Sit just below the hero. A negative margin here pulled the first child
     (the watch-time stat card) up into the hero's bottom band, where it
     collided with the "Watch Now" button. A small gap reads cleaner. */
  margin-top: 18px;
  display: flex; flex-direction: column; gap: 30px;
  padding-bottom: 60px;
  /* #view-home is a centered flex column (align-items:center), which would
     otherwise let this size to its content width — the rows' max-width:1600px
     then blows it past the viewport on mobile, so the carousel tracks become
     1600px wide and rows with few cards (Continue Watching) can't scroll.
     Pin to the container width and allow shrinking so tracks scroll internally. */
  width: 100%;
  min-width: 0;
}

/* ── Watch-time stat card (home page, above Continue Watching) ─────────── */
.watchtime-section { width: 100%; max-width: 1600px; padding: 0 4%; margin: 0 auto; }
.watchtime-card {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 20px 14px 16px;
  /* Theme-aware: tint from the accent so it follows every theme (was hardcoded
     purple, which survived as a wash under dark/oled/etc.). */
  background: linear-gradient(135deg, color-mix(in srgb, var(--p1) 22%, transparent), color-mix(in srgb, var(--acc) 8%, transparent) 70%, var(--card-bg));
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.04);
}
.watchtime-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p1), var(--p2));
  color: #fff;
  box-shadow: 0 6px 18px var(--glow-primary);
  flex: 0 0 auto;
}
.watchtime-text { display: flex; flex-direction: column; gap: 2px; }
.watchtime-value {
  font-size: 22px; font-weight: 800; letter-spacing: -.4px;
  background: linear-gradient(135deg, var(--p2) 0%, var(--acc) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1.1;
}
.watchtime-label {
  font-size: 11.5px; font-weight: 500; letter-spacing: .3px;
  color: var(--muted); text-transform: uppercase;
}
@media (max-width: 720px) {
  .watchtime-card { padding: 12px 16px 12px 14px; gap: 12px; }
  .watchtime-icon { width: 34px; height: 34px; }
  .watchtime-value { font-size: 19px; }
  .watchtime-label { font-size: 10.5px; }
}

/* ── Home Rows & Carousels ───────────────────────────────────────────────── */
.home-row { width: 100%; max-width: 1600px; margin: 0 auto; }
.row-header { display: flex; align-items: center; justify-content: space-between; padding: 0 4%; margin-bottom: 12px; }
.row-title { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: 0.5px; border-left: 4px solid var(--p1); padding-left: 10px; }
.row-clear { background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer; transition: color 0.2s; }
.row-clear:hover { color: var(--err); }

.row-carousel-wrap { position: relative; }
.carousel-track {
  display: flex; gap: 22px; padding: 0 4% 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
/* Larger posters with more gap so the cover art has room to breathe. */
.carousel-track > * { flex: 0 0 clamp(160px, 16.5vw, 260px); }

.carousel-nav {
  position: absolute; top: 0; bottom: 0; width: 4%; min-width: 40px;
  background: rgba(5,0,16,0.6); color: #fff; border: none; font-size: 32px; font-weight: 200;
  cursor: pointer; opacity: 0; transition: opacity 0.2s, background 0.2s; z-index: 5;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.row-carousel-wrap:hover .carousel-nav { opacity: 1; }
.carousel-nav:hover { background: rgba(5,0,16,0.9); color: var(--p1); }
.nav-prev { left: 0; }
.nav-next { right: 0; }
@media (max-width: 768px) { .carousel-nav { display: none; } }

.continue-grid { display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }

/* ── Home: Latest Comments row ───────────────────────────────────────────── */
.latest-comments-track {
  display: flex; gap: 14px; padding: 0 4% 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth; scrollbar-width: none;
}
.latest-comments-track::-webkit-scrollbar { display: none; }
.comment-card {
  flex: 0 0 clamp(220px, 22vw, 300px);
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.comment-card:hover {
  border-color: var(--card-hover-border);
  transform: translateY(-3px);
  box-shadow: var(--card-hover-glow);
}
.comment-card-top { display: flex; align-items: baseline; gap: 8px; }
.comment-card-anime {
  flex: 1 1 auto; min-width: 0;
  font-size: 12px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.comment-card-ep {
  flex: 0 1 auto; min-width: 0; max-width: 48%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10.5px; font-weight: 600; color: var(--p3);
  padding: 2px 7px; background: color-mix(in srgb, var(--p1) 16%, transparent); border-radius: 5px;
}
.comment-card-text {
  font-size: 13px; line-height: 1.45; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.comment-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.comment-card-avatar { width: 24px; height: 24px; font-size: 11px; }
.comment-card-user { font-size: 12px; font-weight: 600; color: var(--p3); }
.comment-card-time { font-size: 11px; color: var(--muted); margin-left: auto; }

/* ── Home: Top Rated leaderboards ────────────────────────────────────────── */
.toprated-row { padding: 0 4%; }
.toprated-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
/* min-width:0 lets the grid columns shrink below their nowrap-title content
   width so the rows stay inside the viewport and the title ellipsis engages. */
.toprated-col { min-width: 0; }
.toprated-col .row-header { padding: 0; }
.ranked-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ranked-item {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px 8px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.ranked-item:hover {
  background: var(--card-bg);
  border-color: var(--card-hover-border);
  transform: translateX(3px);
}
.ranked-num {
  flex: 0 0 26px;
  text-align: center;
  font-size: 16px; font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Top three wear the accent; the medal tints step down 1→2→3 so the podium
   reads at a glance without copying anyone's gold/silver/bronze. */
.ranked-top .ranked-num { color: var(--p2); }
.ranked-1 .ranked-num { font-size: 19px; color: var(--p1); text-shadow: 0 0 14px rgba(124,34,255,.55); }
.ranked-2 .ranked-num { color: var(--p2); }
.ranked-3 .ranked-num { color: var(--p3); }
.ranked-thumb {
  flex: 0 0 40px; width: 40px; height: 56px;
  border-radius: 7px; overflow: hidden;
  background: var(--bg2);
}
.ranked-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ranked-body { flex: 1; min-width: 0; }
.ranked-title {
  font-size: 13.5px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ranked-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.ranked-score {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.04);
}
.score-dot { width: 7px; height: 7px; border-radius: 50%; }
.ranked-score.score-high { color: #55cc88; } .score-high .score-dot { background: #55cc88; box-shadow: 0 0 8px rgba(85,204,136,.6); }
.ranked-score.score-mid  { color: #e0b34d; } .score-mid  .score-dot { background: #e0b34d; box-shadow: 0 0 8px rgba(224,179,77,.5); }
.ranked-score.score-low  { color: #ff5566; } .score-low  .score-dot { background: #ff5566; box-shadow: 0 0 8px rgba(255,85,102,.5); }
@media (max-width: 760px) {
  .toprated-cols { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Shared card ─────────────────────────────────────────────────────────── */
.result-card, .continue-card {
  border-radius: var(--rad); overflow: hidden; cursor: pointer;
  border: 1px solid var(--card-border);
  background: var(--card-bg); position: relative;
  will-change: transform;
  transform: perspective(700px) rotateX(0deg) rotateY(0deg) scale(1);
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s cubic-bezier(.175,.885,.32,1.275);
}
.result-card:hover, .continue-card:hover {
  border-color: var(--card-hover-border);
  box-shadow: var(--card-hover-glow);
  transform: perspective(700px) rotateX(0deg) rotateY(0deg) scale(1.03) translateY(var(--card-hover-y));
}

.card-img-wrap { position: relative; aspect-ratio: 2/3; overflow: hidden; }
.card-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg3);
  transition: transform .5s ease;
}
.result-card:hover .card-img-wrap img,
.continue-card:hover .card-img-wrap img { transform: scale(1.07); }

/* ── Loading skeletons — Yoru night-sky theme ─────────────────────────────────
   Instead of generic grey boxes, placeholder posters take on the brand's night
   palette with a moonlight shimmer sweep and a few twinkling stars, echoing the
   hero scene. Pure CSS, GPU-cheap (opacity/transform + background-position).   */
@keyframes sk-shimmer { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
@keyframes sk-twinkle { 0%, 100% { opacity: .12; transform: scale(.7); } 50% { opacity: .9; transform: scale(1); } }
.skeleton-card { pointer-events: none; cursor: default; }
.skeleton-card .sk-box {
  background:
    linear-gradient(100deg, transparent 18%, rgba(176,166,214,.10) 42%, rgba(176,166,214,.18) 50%, rgba(176,166,214,.10) 58%, transparent 82%),
    linear-gradient(150deg, var(--bg2), var(--bg3));
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: sk-shimmer 1.7s linear infinite;
}
.sk-star {
  position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 4px 1px rgba(255,255,255,.5);
  opacity: .12; pointer-events: none;
  animation: sk-twinkle var(--d, 4s) ease-in-out var(--dl, 0s) infinite;
}
.sk-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 10px 10px; }
.sk-line {
  display: block; height: 9px; border-radius: 4px; margin-top: 6px;
  background:
    linear-gradient(100deg, transparent 18%, rgba(176,166,214,.16) 50%, transparent 82%),
    rgba(176,166,214,.08);
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: sk-shimmer 1.7s linear infinite;
}
.sk-line.short { width: 56%; }
/* Hero skeleton — the big banner gets the same moonlight sweep while it loads. */
.home-hero.hero-loading { position: relative; overflow: hidden; }
.home-hero.hero-loading::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, transparent 32%, rgba(176,166,214,.09) 50%, transparent 68%),
    linear-gradient(150deg, var(--bg2), var(--bg3));
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: sk-shimmer 2.1s linear infinite;
}

/* ── Empty row state — friendly placeholder for signed-in users with no data ── */
.row-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 100%; padding: 26px 20px 30px; gap: 7px;
}
.row-empty-logo {
  width: 48px; height: 48px; object-fit: cover; margin-bottom: 6px;
  border-radius: 14px;   /* clip the SVG's square corners → flush, no stray corners */
  box-shadow: 0 6px 20px rgba(124,34,255,.35);
  animation: logo-breathe 3.6s ease-in-out infinite;
}
@keyframes logo-breathe { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.04); opacity: 1; } }
.row-empty-title { font-size: 15px; font-weight: 700; color: var(--text); }
.row-empty-text { font-size: 12.5px; line-height: 1.55; color: var(--muted); max-width: 380px; }
.row-empty-btn {
  margin-top: 10px; padding: 8px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: #fff; border: 1px solid var(--card-hover-border);
  background: linear-gradient(135deg, var(--p1), var(--acc));
  transition: transform .2s ease, box-shadow .2s ease;
}
.row-empty-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(124,34,255,.35); }

.card-foot {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 44px 10px 10px;
  background: linear-gradient(to top, rgba(5,0,16,.97) 0%, rgba(5,0,16,.75) 40%, transparent 100%);
}
.card-title {
  font-size: 12px; font-weight: 600; color: #fff; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  letter-spacing: .01em;
}
.card-meta { font-size: 10.5px; color: rgba(200,160,255,.5); margin-top: 3px; }

/* Continue bar inside card-img-wrap */
.continue-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.08); }
.continue-bar-fill { height: 100%; background: linear-gradient(90deg, var(--p1), var(--acc)); border-radius: 0 2px 0 0; }

.no-results { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--muted); }

/* ── Search results ──────────────────────────────────────────────────────── */
#view-search { overflow-y: auto; padding: 20px; }
#view-search::-webkit-scrollbar { width: 5px; }
#view-search::-webkit-scrollbar-thumb { background: rgba(124,34,255,.28); border-radius: 3px; }
#results-grid { display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 16px; max-width: 1300px; margin: 0 auto; }

/* ── Player view (YouTube-style: video + episodes sidebar, info below) ──── */
#view-player { overflow: hidden; }

/* Ambient glow layers */
.amb {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 1.6s ease;
  filter: blur(72px);
}
.amb.on { opacity: .18; }

/* Scrollable container fills the view. Use absolute positioning inside the
   absolute .view parent — sidesteps flex-child sizing inconsistencies that
   were preventing wheel scrolling from working. */
.watch-scroll {
  position: absolute; inset: 0;
  z-index: 1;
  overflow-y: auto; overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
.watch-scroll::-webkit-scrollbar { width: 8px; }
.watch-scroll::-webkit-scrollbar-thumb { background: rgba(124,34,255,.25); border-radius: 4px; }
.watch-scroll::-webkit-scrollbar-track { background: transparent; }

/* Main grid: video+info on the left, episodes panel on the right.
   Theater mode REFLOWS the sidebar into a row below the video (YouTube-style)
   instead of hiding it — the user keeps access to episodes by scrolling.
   `grid-template-columns` is animatable in modern browsers; for the reflow of
   the sidebar from right-column to below-row we lean on the View Transitions
   API (called from toggleTheater), which morphs the captured before/after. */
.watch-grid {
  /* Viewport-responsive: fills 96% of viewport width up to 2400px so the
     video scales sensibly from 1080p through 4K monitors. Sidebar grows with
     the viewport too (clamp 360 to 26vw, capped at 500). */
  max-width: min(2400px, 96vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 26vw, 500px);
  grid-template-areas: "main side";
  gap: 28px;
  padding: 24px 0 64px;
}

.watch-main    { grid-area: main; min-width: 0; display: flex; flex-direction: column; view-transition-name: vt-watch-main; }
.watch-sidebar { grid-area: side; view-transition-name: vt-watch-side; }

/* Theater mode — true YouTube-style: video fills viewport horizontally with
   natural pillarbox bars on the sides, episodes panel + info + recs reflow
   below at a centered/readable width. The smooth morph between layouts is
   handled by the View Transitions API in toggleTheater(). */
#view-player.theater .watch-grid {
  grid-template-columns: 1fr;
  grid-template-areas:
    "main"
    "side";
  max-width: 100%;
  padding: 0 0 64px;
  gap: 0;
}
#view-player.theater .watch-main { max-width: 100%; margin: 0; }

/* Video box: edge-to-edge, viewport-height-capped. aspect-ratio removed so
   the box is a rectangle of whatever shape — the <video> inside uses
   object-fit:contain to letterbox/pillarbox naturally, which IS what creates
   the theater bars. */
#view-player.theater .video-box {
  width: 100%;
  height: calc(100vh - 180px);
  max-height: calc(100vh - 180px);
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
}

/* Everything BELOW the video is centered with a comfortable max-width so
   text stays readable even on huge monitors. */
#view-player.theater .watch-episode-bar,
#view-player.theater .watch-info,
#view-player.theater .watch-comments,
#view-player.theater .watch-recs-section,
#view-player.theater .watch-sidebar {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  width: calc(100% - 48px);
}
#view-player.theater .watch-episode-bar { padding: 22px 0 0; width: calc(100% - 48px); }

/* Episodes sidebar: stops being sticky, becomes an in-flow block below */
#view-player.theater .watch-sidebar {
  position: static; top: auto; max-height: none;
  margin: 28px auto 0;
}

/* Inner episode list switches from vertical scroll to a grid of cards in
   theater mode — visually matches "related videos grid" pattern. */
#view-player.theater .ep-rich-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  max-height: none;
}
#view-player.theater .ep-rich { margin-bottom: 0; }

/* ── View Transitions polish (Chrome/Edge/Safari 18+) ────────────────────── */
::view-transition-old(vt-watch-main),
::view-transition-new(vt-watch-main),
::view-transition-old(vt-watch-side),
::view-transition-new(vt-watch-side) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.25,.8,.25,1);
}

/* ── Video box (fixed aspect ratio, the page's centerpiece) ──────────── */
.video-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  view-transition-name: vt-video;
  box-shadow:
    0 0 0 1px rgba(124,34,255,.08),
    0 20px 60px rgba(0,0,0,.55),
    0 4px 12px rgba(0,0,0,.4);
  transition: border-radius .4s ease, box-shadow .4s ease;
}
::view-transition-old(vt-video),
::view-transition-new(vt-video) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.25,.8,.25,1);
}
/* In fullscreen the box must FILL the screen — without this it keeps its 16:9
   aspect-ratio and letterboxes inside the fullscreen surface ("it just encloses
   it"). Drop the aspect lock and let the video contain-fit the real screen. */
.video-box:fullscreen,
.video-box:-webkit-full-screen {
  width: 100%; height: 100%; aspect-ratio: auto;
  border-radius: 0; box-shadow: none;
}
#vid       { width: 100%; height: 100%; display: block; object-fit: contain; cursor: pointer; background: #000; }
#vid-frame { width: 100%; height: 100%; border: none; }

/* ── Type pills (SUB/DUB/RAW) — shared across watch page and detail page ─ */
.type-pills { display: flex; gap: 4px; }
.type-pill {
  flex: 1; padding: 6px 2px;
  border: 1px solid rgba(124,34,255,.18);
  background: rgba(8,0,24,.25);
  border-radius: 8px;
  color: var(--muted); font-size: 10.5px;
  font-weight: 700; letter-spacing: .3px; cursor: pointer; font-family: inherit;
  white-space: nowrap;            /* keep "HARD SUB" / "SOFT SUB" on one line */
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.type-pill:hover {
  background: rgba(124,34,255,.16);
  color: var(--text);
  border-color: rgba(124,34,255,.4);
  transform: translateY(-1px);
}
.type-pill.active {
  background: linear-gradient(135deg, var(--p1), var(--p2));
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 14px rgba(124,34,255,.42), inset 0 0 0 1px rgba(155,95,255,.3);
}
.type-pill.disabled {
  opacity: .35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.type-pill.disabled:hover { background: transparent; }

/* ── Episode title bar (below video) ─────────────────────────────────── */
.watch-episode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 4px 0;
}
#watch-ep-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  min-width: 0;
  line-height: 1.3;
  letter-spacing: -.2px;
}
.watch-episode-bar .type-pills {
  flex: 0 0 auto;
  width: 220px;
}

/* Watch Party button — same pill shape as the auto-skip toggle so they live
   together cleanly in the episode bar. Active state when you're in a party. */
.party-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px;
  background: rgba(8,0,24,.25);
  border: 1px solid rgba(124,34,255,.22);
  border-radius: 999px;
  color: var(--muted);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  letter-spacing: .2px; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  flex: 0 0 auto;
}
.party-btn:hover {
  background: rgba(124,34,255,.16);
  border-color: rgba(124,34,255,.45);
  color: var(--text);
  transform: translateY(-1px);
}
.party-btn svg { opacity: .8; }
.party-btn:hover svg { opacity: 1; }
.party-btn.on {
  background: linear-gradient(135deg, rgba(214,85,255,.95), rgba(155,95,255,.95));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(214,85,255,.45), inset 0 0 0 1px rgba(214,85,255,.3);
}
.party-btn.on svg { opacity: 1; }
.party-btn-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  background: rgba(255,255,255,.22);
  border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #fff;
}

/* Chat sidebar — slides in from the right when in a party. Fixed-position,
   above everything else, scrollable message area, sticky compose bar. */
.party-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 340px; max-width: 92vw;
  background: rgba(10,0,30,.96);
  border-left: 1px solid rgba(124,34,255,.28);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  display: flex; flex-direction: column;
  z-index: 9999;
  box-shadow: -16px 0 60px rgba(0,0,0,.6);
  transform: translateX(0);
  transition: transform .3s ease;
}
.party-panel.hidden { transform: translateX(100%); display: flex; }   /* keep flex layout, slide off */
.party-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(124,34,255,.18);
}
.party-panel-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--p3);
}
.party-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 8px rgba(214,85,255,.7);
  animation: party-pulse 1.6s ease-in-out infinite;
}
@keyframes party-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.party-panel-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px;
  background: rgba(124,34,255,.22);
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  color: var(--text); margin-left: 4px;
  letter-spacing: 0;
}
.party-panel-close {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 24px; line-height: 1; padding: 0 6px;
  transition: color var(--t);
}
.party-panel-close:hover { color: var(--text); }

.party-invite {
  display: flex; gap: 6px; padding: 12px 16px 4px;
}
.party-invite-link {
  flex: 1;
  padding: 8px 10px;
  background: rgba(8,0,24,.6);
  border: 1px solid rgba(124,34,255,.18);
  border-radius: 8px;
  color: var(--text); font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; outline: none;
}
.party-invite-link:focus { border-color: rgba(124,34,255,.5); }
.party-invite-copy {
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--p1), var(--p2));
  border: none; border-radius: 8px;
  color: #fff; font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: opacity var(--t);
}
.party-invite-copy:hover { opacity: .9; }
.party-invite-copy.copied { background: linear-gradient(135deg, var(--ok), #44b377); }

.party-host-badge {
  margin: 8px 16px 4px;
  padding: 8px 12px;
  background: rgba(124,34,255,.12);
  border: 1px solid rgba(124,34,255,.22);
  border-radius: 8px;
  font-size: 11.5px; color: var(--p3); line-height: 1.4;
}
.party-host-badge.hidden { display: none; }

.party-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.party-messages::-webkit-scrollbar { width: 6px; }
.party-messages::-webkit-scrollbar-thumb { background: rgba(124,34,255,.25); border-radius: 3px; }
.party-msg {
  font-size: 13px; line-height: 1.4;
  padding: 6px 10px;
  background: rgba(8,0,24,.45);
  border-radius: 8px;
  word-wrap: break-word;
}
.party-msg-user { font-weight: 700; color: var(--p3); margin-right: 6px; }
.party-msg.system {
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-style: italic;
  text-align: center;
  padding: 2px 0;
}
.party-msg.system .party-msg-user { display: none; }

.party-input {
  display: flex; gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid rgba(124,34,255,.18);
}
.party-input input {
  flex: 1;
  padding: 9px 12px;
  background: rgba(8,0,24,.6);
  border: 1px solid rgba(124,34,255,.18);
  border-radius: 8px;
  color: var(--text); font-family: inherit; font-size: 13px;
  outline: none;
  transition: border-color var(--t);
}
.party-input input:focus { border-color: rgba(124,34,255,.55); }
.party-input button {
  padding: 0 14px;
  background: linear-gradient(135deg, var(--p1), var(--p2));
  border: none; border-radius: 8px;
  color: #fff; cursor: pointer;
  display: flex; align-items: center;
  transition: opacity var(--t);
}
.party-input button:hover { opacity: .9; }

.party-leave-btn {
  margin: 0 16px 14px;
  padding: 9px;
  background: transparent;
  border: 1px solid rgba(255,85,102,.4);
  border-radius: 8px;
  color: var(--err);
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background var(--t), color var(--t);
}
.party-leave-btn:hover { background: rgba(255,85,102,.12); color: #ff8899; }

/* Auto-skip OP/ED toggle — labeled pill in the episode bar so it's
   discoverable. Off: muted outline. On: purple gradient + "On" badge. */
.autoskip-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px;
  background: rgba(8,0,24,.25);
  border: 1px solid rgba(124,34,255,.22);
  border-radius: 999px;
  color: var(--muted);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  letter-spacing: .2px; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  flex: 0 0 auto;
}
.autoskip-toggle:hover {
  background: rgba(124,34,255,.16);
  border-color: rgba(124,34,255,.45);
  color: var(--text);
  transform: translateY(-1px);
}
.autoskip-toggle svg { opacity: .8; transition: opacity .2s ease; }
.autoskip-toggle:hover svg { opacity: 1; }
.autoskip-state {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  background: rgba(124,34,255,.12);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted);
  transition: background .2s ease, color .2s ease;
}
.autoskip-toggle.on {
  background: linear-gradient(135deg, var(--p1), var(--p2));
  border-color: transparent;
  color: var(--text-on-accent);
  box-shadow: 0 4px 14px var(--accent-shadow), inset 0 0 0 1px var(--accent-border);
}
.autoskip-toggle.on svg { opacity: 1; }
.autoskip-toggle.on .autoskip-state {
  background: rgba(255,255,255,.22);
  color: #fff;
}

/* ── Anime info card (below episode bar) — primary block ─────────────── */
.watch-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  grid-template-areas: "text cover";
  gap: 28px;
  margin-top: 26px;
  padding: 22px;
  background: rgba(8,0,24,.4);
  border: 1px solid rgba(124,34,255,.1);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
/* No usable cover — collapse to a single full-width column so text fills the
   card instead of leaving an empty poster track beside it. Named areas keep
   placement explicit regardless of DOM order. */
.watch-info.no-cover { grid-template-columns: 1fr; grid-template-areas: "text"; }
.watch-info.no-cover .watch-info-cover { display: none; }
.watch-info-cover {
  grid-area: cover;
  align-self: start;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--bg3);
  display: block;
  border: 1px solid rgba(124,34,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: transform .25s ease, box-shadow .25s ease;
}
.watch-info-cover:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(124,34,255,.3);
}
.watch-info-text { grid-area: text; min-width: 0; }
#watch-info-title {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: 10px;
  letter-spacing: -.4px;
}
.watch-info-meta {
  display: flex; flex-wrap: wrap; gap: 7px 14px;
  font-size: 12.5px; color: var(--muted);
  margin-bottom: 12px;
}
.watch-info-genres { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.watch-info-synopsis {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(237,224,255,.78);
  margin: 0;
  max-width: 80ch;   /* keep a readable line length on wide monitors */
}

/* ── Comments placeholder (structural only — no backend yet) ─────────── */
.watch-comments {
  margin-top: 30px;
  padding: 22px;
  background: rgba(8,0,24,.3);
  border: 1px solid rgba(124,34,255,.08);
  border-radius: 14px;
}
.watch-comments-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.watch-comments-head .section-title { font-size: 13px; }
.watch-comments-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.comments-sort {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: rgba(124,34,255,.07);
  border-radius: 999px;
}
.comments-sort-btn {
  background: none; border: none; cursor: pointer;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  transition: background var(--t), color var(--t);
}
.comments-sort-btn:hover { color: var(--p3); }
.comments-sort-btn.active { background: var(--p1); color: #fff; }
.watch-comments-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 18px;
  border-bottom: 1px solid rgba(124,34,255,.08);
  margin-bottom: 20px;
}
.comment-avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  font-size: 13px;
}
.watch-comments-input input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(124,34,255,.18);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 4px;
  outline: none;
  transition: border-color .2s;
}
.watch-comments-input input::placeholder { color: var(--muted); }
.watch-comments-input input:focus { border-bottom-color: var(--p1); }
.comment-post-btn {
  flex-shrink: 0;
  padding: 8px 18px;
  background: linear-gradient(135deg, var(--p1), var(--p2));
  border: none; border-radius: 8px;
  color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: opacity var(--t), transform var(--t);
}
.comment-post-btn:hover { opacity: .9; }
.comment-post-btn:active { transform: scale(.97); }
.comment-post-btn:disabled { opacity: .5; cursor: default; }

/* ── Comment list ─────────────────────────────────────────────────────── */
.watch-comments-list { display: flex; flex-direction: column; gap: 18px; }
.watch-comments-list:empty { display: none; }
.comment-item { display: flex; gap: 12px; }
.comment-item-avatar { width: 34px; height: 34px; flex-shrink: 0; font-size: 13px; }
.comment-item-body { flex: 1; min-width: 0; }
.comment-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.comment-item-user { font-size: 13px; font-weight: 700; color: #fff; }
.comment-item-time { font-size: 11.5px; color: var(--muted); }
.comment-del {
  margin-left: auto;
  background: none; border: none; color: var(--muted);
  font-size: 12px; cursor: pointer; padding: 2px 4px; line-height: 1;
  opacity: 0; transition: opacity var(--t), color var(--t);
}
.comment-item:hover .comment-del { opacity: 1; }
.comment-del:hover { color: var(--err); }
.comment-item-text {
  font-size: 13.5px; line-height: 1.5; color: #d8cdee;
  word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap;
}
.comment-actions { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.comment-votes { display: flex; align-items: center; gap: 4px; }
.comment-vote {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid transparent; border-radius: 999px;
  padding: 3px 9px; min-width: 38px;
  color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1;
  cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t);
}
.comment-vote svg { display: block; }
.comment-vote .cv-count { font-variant-numeric: tabular-nums; }
.comment-vote:hover { background: rgba(124,34,255,.10); color: var(--p3); }
.comment-vote.like.active {
  color: var(--p2); background: rgba(124,34,255,.16); border-color: rgba(124,34,255,.35);
}
.comment-vote.dislike.active {
  color: var(--err); background: rgba(255,85,102,.13); border-color: rgba(255,85,102,.32);
}
/* The thumbs-down glyph reads better nudged down a hair. */
.comment-vote.dislike svg { transform: translateY(1px); }
.comment-card-likes {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--p3);
}
.comment-card-likes svg { width: 12px; height: 12px; }
.watch-comments-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 20px 16px;
  color: var(--muted);
  text-align: center;
}
.comments-icon-wrap {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124,34,255,.08);
  border-radius: 50%;
  color: var(--p3);
}
.watch-comments-empty p {
  font-size: 13px;
  line-height: 1.5;
  max-width: 360px;
}

/* ── Recommendations row inside watch page ────────────────────────────── */
.watch-recs-section { margin-top: 34px; }
.watch-recs-section .section-header { margin-bottom: 14px; }

/* ── Sidebar with rich episode list ──────────────────────────────────── */
.watch-sidebar {
  background: rgba(8,0,24,.45);
  border: 1px solid rgba(124,34,255,.1);
  border-radius: 14px;
  padding: 14px;
  position: sticky;
  top: 28px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: padding .35s ease, max-height .35s ease;
}
.watch-sidebar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 6px 10px;
}
.watch-sidebar-title { font-weight: 700; font-size: 14px; color: var(--text); }
.watch-sidebar-count { font-size: 11.5px; color: var(--muted); }

/* Episode filter input */
.ep-search-wrap { padding: 0 0 10px; }
.ep-search-wrap input {
  width: 100%; padding: 7px 12px;
  background: rgba(16,0,40,.6); border: 1px solid rgba(124,34,255,.15);
  border-radius: 8px; color: var(--text); font-size: 12.5px; font-family: inherit; outline: none;
  transition: border-color var(--t);
}
.ep-search-wrap input:focus { border-color: rgba(124,34,255,.5); }
.ep-search-wrap input::placeholder { color: var(--muted); }

/* Rich episode list — thumbnail + title + (description) */
.ep-rich-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  min-height: 0;
}
.ep-rich-list::-webkit-scrollbar { width: 5px; }
.ep-rich-list::-webkit-scrollbar-thumb { background: rgba(124,34,255,.3); border-radius: 3px; }

.ep-rich {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 2px;
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
  align-items: start;
}
.ep-rich:hover {
  background: rgba(124,34,255,.1);
  transform: translateX(2px);
}
.ep-rich.active {
  background: rgba(124,34,255,.16);
  box-shadow: inset 0 0 0 1px rgba(155,95,255,.3), 0 0 18px rgba(124,34,255,.12);
}

.ep-rich-thumb {
  position: relative;
  width: 100px;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--bg2), var(--bg3));
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.ep-rich-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Fallback: when AniList has no episode thumbnail, use the anime cover blurred
   and dimmed as a backdrop, with the episode number prominent on top. */
.ep-rich-thumb .ep-rich-fallback-bg {
  filter: brightness(.35) saturate(.7) blur(1.5px);
  transform: scale(1.06);   /* hide blur edge bleed */
}
.ep-rich-thumb .ep-rich-numbadge {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: #fff;
  letter-spacing: -1px;
  text-shadow: 0 2px 8px rgba(0,0,0,.7), 0 0 16px rgba(124,34,255,.4);
  pointer-events: none;
  z-index: 2;
}
/* Hide the number badge ONLY when a real AniList thumbnail is present */
.ep-rich-thumb.has-thumb .ep-rich-numbadge { display: none; }
.ep-rich-prog {
  position: absolute; bottom: 0; left: 0;
  height: 3px; background: linear-gradient(90deg, var(--p1), var(--acc));
  pointer-events: none;
  z-index: 3;
}
/* Watched tick — green check badge in the thumb corner for finished episodes. */
.ep-rich-check {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ok); color: #06210f;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0,0,0,.55);
  pointer-events: none;
  z-index: 4;
}
/* Dim a watched episode's thumbnail so the row reads as "done" at a glance. */
.ep-rich.watched .ep-rich-thumb img { filter: brightness(.62); }

.ep-rich-text { min-width: 0; padding-top: 1px; }
.ep-rich-num {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .8px;
}
.ep-rich.active .ep-rich-num { color: var(--p3); }
.ep-rich-date {
  font-weight: 600;
  letter-spacing: .2px;
  text-transform: none;
  color: var(--muted);
  opacity: .8;
}
.ep-rich-date::before {
  content: "·";
  margin: 0 5px;
  opacity: .7;
}
.ep-rich-new {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, var(--p1), var(--acc));
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.ep-rich-title {
  font-size: 12.5px; font-weight: 600;
  color: var(--text); line-height: 1.35;
  margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ep-rich.watched .ep-rich-title { color: var(--ok); }
.ep-rich.active .ep-rich-title { color: #fff; }
.ep-rich-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Backward-compat: keep these so legacy code paths don't break */
.ep-item { display: none; }

/* Video overlays */
.video-overlay {
  position: absolute; inset: 0; background: var(--overlay-strong);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; z-index: 10; color: var(--muted); font-size: 13px;
}
.video-overlay.hidden { display: none; }

.ring {
  width: 44px; height: 44px;
  border: 2.5px solid rgba(124,34,255,.18);
  border-top-color: var(--p2); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.err-icon { font-size: 2rem; color: var(--err); }
#retry-btn {
  padding: 7px 22px;
  background: linear-gradient(135deg, var(--p1), var(--p2));
  border: none; border-radius: 8px; color: #fff; cursor: pointer;
  font-size: 13px; font-family: inherit; transition: opacity var(--t);
}
#retry-btn:hover { opacity: .85; }

/* Double-tap seek feedback — covers the left or right half of the video
   with a translucent radial highlight + a centered icon + "10" label that
   pulses briefly when the user double-taps that side. pointer-events:none
   so it never blocks the underlying tap/click for pause toggling. */
.dtap-feedback {
  position: absolute; top: 0; bottom: 0;
  width: 50%;
  z-index: 17;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
}
.dtap-back { left: 0;  background: radial-gradient(ellipse at left center,  rgba(124,34,255,.22), rgba(0,0,0,0) 55%); }
.dtap-fwd  { right: 0; background: radial-gradient(ellipse at right center, rgba(124,34,255,.22), rgba(0,0,0,0) 55%); }
.dtap-feedback.show { animation: dtap-pulse .55s ease-out; }
@keyframes dtap-pulse {
  0%   { opacity: 0;   transform: scale(.9); }
  25%  { opacity: 1;   transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.05); }
}
.dtap-feedback-inner {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 22px;
  background: rgba(8,0,24,.7);
  border: 1px solid rgba(155,95,255,.35);
  border-radius: 999px;
  color: #fff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
}
.dtap-feedback-num { font-size: 12px; font-weight: 700; letter-spacing: .4px; }
@media (max-width: 720px) {
  .dtap-feedback-inner { padding: 10px 16px; }
  .dtap-feedback-inner svg { width: 26px; height: 26px; }
}

/* Skip-back / skip-forward buttons in the controls bar. The "10" label sits
   inside the rotational arrow; we layer it absolutely over the SVG. */
.ctrl-seek { position: relative; }
.ctrl-seek-num {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 1px));
  font-size: 8px; font-weight: 800; letter-spacing: -.2px;
  color: currentColor; pointer-events: none;
  font-family: inherit;
}

/* Pause indicator — centered scrim + icon that fades in when video pauses
   mid-playback. Suppressed during loading, error, autoplay countdown, and
   end-of-video so it doesn't double up with other overlays. */
.pause-indicator {
  position: absolute; inset: 0;
  z-index: 18;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.32);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.video-box.paused .pause-indicator { opacity: 1; }
.pause-indicator-icon {
  width: 92px; height: 92px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,0,24,.7);
  border: 1px solid rgba(155,95,255,.35);
  border-radius: 50%;
  color: #fff;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(124,34,255,.18);
  transform: scale(.85);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.video-box.paused .pause-indicator-icon { transform: scale(1); }
@media (max-width: 720px) {
  .pause-indicator-icon { width: 68px; height: 68px; }
  .pause-indicator-icon svg { width: 32px; height: 32px; }
}

/* Transient toast (top-center of video) — used for non-blocking notices like
   "DUB not available, playing SUB". Doesn't intercept clicks. */
.player-toast {
  position: absolute; top: 14px; left: 50%; transform: translate(-50%, -8px);
  z-index: 25; pointer-events: none;
  background: rgba(8,0,24,.92);
  border: 1px solid rgba(124,34,255,.32);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: 999px; padding: 8px 16px;
  color: var(--text); font-size: 12.5px; font-weight: 500;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  opacity: 0; transition: opacity .3s ease, transform .3s ease;
  max-width: 80%; text-align: center;
}
.player-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Skip intro/outro pill — sits above the controls bar, bottom-right corner
   of the video. Slides in when currentTime enters an OP/ED interval. */
.skip-btn {
  position: absolute; bottom: 76px; right: 18px;
  z-index: 22;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: rgba(8,0,24,.92);
  border: 1px solid rgba(124,34,255,.45);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: 999px;
  color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: .2px; cursor: pointer;
  box-shadow: 0 10px 32px rgba(0,0,0,.55), 0 0 0 0 rgba(124,34,255,0);
  transform: translateY(8px); opacity: 0;
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
}
.skip-btn:not(.hidden) { opacity: 1; transform: translateY(0); }
.skip-btn:hover {
  border-color: rgba(155,95,255,.85);
  background: rgba(20,4,48,.95);
  box-shadow: 0 12px 38px rgba(0,0,0,.6), 0 0 0 4px rgba(124,34,255,.15);
}
.skip-btn:active { transform: translateY(1px); }
.skip-btn svg { opacity: .9; }

/* Auto-play overlay */
.autoplay-overlay { position: absolute; bottom: 76px; right: 18px; z-index: 20; pointer-events: all; }
.autoplay-overlay.hidden { display: none; }
.autoplay-card {
  background: rgba(8,0,24,.93);
  border: 1px solid rgba(124,34,255,.22);
  border-radius: var(--rad); padding: 14px 16px; min-width: 224px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.autoplay-tag { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.autoplay-name { font-size: 13px; color: var(--text); margin-bottom: 10px; font-weight: 600; }
.autoplay-track { height: 2px; background: rgba(124,34,255,.18); border-radius: 2px; margin-bottom: 10px; overflow: hidden; }
.autoplay-fill { height: 100%; background: linear-gradient(90deg, var(--p1), var(--acc)); border-radius: 2px; transition: width .1s linear; }
.autoplay-btns { display: flex; gap: 8px; }
.btn-ghost {
  flex: 1; padding: 6px; background: none; border: 1px solid rgba(124,34,255,.2);
  border-radius: 7px; color: var(--muted); font-size: 12px; cursor: pointer; font-family: inherit;
  transition: border-color var(--t), color var(--t);
}
.btn-ghost:hover { border-color: rgba(124,34,255,.5); color: var(--text); }
.btn-solid {
  flex: 1; padding: 6px;
  background: linear-gradient(135deg, var(--p1), var(--p2));
  border: none; border-radius: 7px; color: #fff; font-size: 12px; cursor: pointer; font-family: inherit;
  transition: opacity var(--t);
}
.btn-solid:hover { opacity: .85; }

/* ── Auto-hide controls overlay ──────────────────────────────────────────── */
.player-controls {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 30;
  padding: 26px 12px 10px;
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 55%, transparent 100%);
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.video-box.show-controls .player-controls {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.video-box.cursor-hide { cursor: none; }
.video-box.cursor-hide #vid { cursor: none; }

/* ── Quality dropdown (in controls bar, left of volume) ──────────────────── */
.ctrl-quality.hidden { display: none; }
.ctrl-quality #quality-btn {
  min-width: 48px;
  font-feature-settings: 'tnum' 1;
  font-weight: 600;
  letter-spacing: .2px;
  transition: color var(--t), background var(--t), box-shadow .35s ease;
}
.ctrl-quality #quality-btn.flash {
  color: #fff;
  box-shadow: 0 0 0 1px rgba(124,34,255,.55), 0 0 14px rgba(124,34,255,.45);
  border-radius: 6px;
}
/* Quality menu: a bit wider so "Auto (1080p)" fits without wrapping */
#quality-menu { min-width: 130px; }
#quality-menu .menu-opt-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}
#quality-menu .menu-opt.active .menu-opt-sub { color: var(--p2); opacity: .8; }

/* When overlaid, the controls bar shouldn't have its own backdrop fighting the gradient */
.player-controls .controls-bar {
  background: rgba(8,0,26,.55);
  border-color: rgba(124,34,255,.25);
}

/* ── Seek bar ────────────────────────────────────────────────────────────── */
.seek-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px; flex-shrink: 0;
  font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.time-now, .time-dur { min-width: 38px; }
.time-dur { text-align: right; }

.seek-track {
  flex: 1; height: 4px;
  background: rgba(124,34,255,.15);
  border-radius: 3px;
  position: relative; cursor: pointer;
  transition: height .15s ease;
  touch-action: none;   /* let us drag-to-scrub without the page scrolling */
}
.seek-track:hover, .seek-track.dragging { height: 7px; }

.seek-buffered, .seek-played {
  position: absolute; top: 0; left: 0; bottom: 0;
  border-radius: 3px;
  pointer-events: none;
}
.seek-buffered { background: rgba(155,95,255,.22); width: 0%; }
.seek-played   { background: linear-gradient(90deg, var(--p1), var(--acc)); width: 0%; box-shadow: 0 0 10px rgba(155,95,255,.3); }

.seek-thumb {
  position: absolute; top: 50%; left: 0%;
  width: 14px; height: 14px;
  background: var(--p2); border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .15s ease, background .15s ease;
  box-shadow: 0 0 10px rgba(155,95,255,.7);
  pointer-events: none;
}
.seek-track:hover .seek-thumb,
.seek-track.dragging .seek-thumb { transform: translate(-50%, -50%) scale(1); }
.seek-track.dragging .seek-thumb { background: var(--acc); }

/* ── Controls bar ────────────────────────────────────────────────────────── */
.controls-bar {
  display: flex; align-items: center; gap: 6px;
  background: rgba(8,0,26,.78);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(124,34,255,.14);
  border-radius: 12px; padding: 3px 12px; flex-shrink: 0;
}

.ctrl-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 5px; border-radius: 7px; transition: color var(--t), background var(--t);
  flex-shrink: 0;
}
.ctrl-btn:hover { color: var(--p2); background: rgba(124,34,255,.12); }
.ctrl-btn:disabled { opacity: .3; pointer-events: none; }
.ctrl-btn.on {
  color: var(--p2);
  background: rgba(124,34,255,.18);
  box-shadow: inset 0 0 0 1px rgba(155,95,255,.4);
}
.ctrl-text { font-size: 12px; font-weight: 700; min-width: 30px; font-family: inherit; }

.ep-label {
  flex: 0 1 auto; text-align: center; font-size: 12px; font-weight: 500;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px; padding: 0 4px;
}

.ctrl-sep { width: 1px; height: 18px; background: rgba(124,34,255,.18); flex-shrink: 0; margin: 0 2px; }
.ctrl-spacer { flex: 1; }

/* Speed dropdown */
.ctrl-dropdown { position: relative; }
.ctrl-menu {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: rgba(8,0,24,.96); border: 1px solid rgba(124,34,255,.2); border-radius: 10px;
  overflow-x: hidden; overflow-y: auto; min-width: 80px; z-index: 50;
  /* Soft-sub captions can ship 25+ languages (Netflix sources). Cap the height
     and scroll so the menu never floods past the top of the screen — otherwise
     the first item ("Off") gets clipped off-screen and you can't disable subs. */
  max-height: min(58vh, 340px);
  overscroll-behavior: contain;
  box-shadow: 0 12px 40px rgba(0,0,0,.7);
  backdrop-filter: blur(16px);
}
.ctrl-menu.hidden { display: none; }
/* Slim scrollbar for the (potentially long) caption-language list */
.ctrl-menu::-webkit-scrollbar { width: 8px; }
.ctrl-menu::-webkit-scrollbar-thumb { background: rgba(124,34,255,.4); border-radius: 4px; }
.ctrl-menu::-webkit-scrollbar-track { background: transparent; }
/* Pin "Off" to the top of the caption menu so it's always reachable without
   scrolling through every language. (renderCcMenu adds it as the first option.) */
#cc-menu .menu-opt:first-child {
  position: sticky; top: 0;
  background: rgba(8,0,24,.98);
  border-bottom: 1px solid rgba(124,34,255,.18);
}
#cc-menu .menu-opt:first-child:hover { background: rgba(124,34,255,.18); }
.menu-opt {
  display: block; width: 100%; padding: 8px 14px; text-align: center;
  background: none; border: none; color: var(--muted); font-size: 12.5px; font-family: inherit;
  cursor: pointer; transition: background var(--t), color var(--t);
}
.menu-opt:hover { background: rgba(124,34,255,.14); color: var(--text); }
.menu-opt.active { color: var(--p2); font-weight: 700; }

/* Subtitles / Captions button */
.ctrl-cc.hidden,
.ctrl-cc-sep.hidden { display: none; }
.ctrl-cc #cc-btn { position: relative; }
/* small dot under the CC glyph when subtitles are ON */
.cc-dot {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--p2);
  opacity: 0; transition: opacity var(--t);
}
.ctrl-cc.cc-on #cc-btn { color: var(--p2); }
.ctrl-cc.cc-on .cc-dot { opacity: 1; }

/* Custom subtitle overlay — we render cues ourselves so we control both the
   font size (Settings → Subtitle size) and the vertical position. --sub-base is
   set in JS from the player height; --sub-scale comes from the size setting. */
.subtitle-overlay {
  position: absolute;
  left: 5%; right: 5%; bottom: 7%;
  z-index: 20;                 /* under the controls overlay (z-index 30) */
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
  transition: bottom .25s ease;
  font-size: calc(var(--sub-base, 22px) * var(--sub-scale, 1));
}
/* Lift the subtitles above the controls bar while it's visible so they're not
   buried under the UI (the original mobile complaint). */
.video-box.show-controls .subtitle-overlay { bottom: 16%; }
.subtitle-overlay .sub-line {
  display: inline-block;
  max-width: 100%;
  padding: .1em .4em;
  background: rgba(0,0,0,.55);
  color: #fff;
  line-height: 1.35;
  border-radius: 4px;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.subtitle-overlay .sub-line i  { font-style: italic; }
.subtitle-overlay .sub-line b  { font-weight: 700; }

/* Settings → Subtitle size buttons */
.subsize-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.subsize-btn {
  padding: 10px 6px; border-radius: 10px;
  background: rgba(124,34,255,.06);
  border: 1px solid rgba(124,34,255,.18);
  color: var(--muted); font-family: inherit; font-weight: 600;
  cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t);
}
.subsize-btn:hover { background: rgba(124,34,255,.14); color: var(--text); }
.subsize-btn.active {
  color: #fff; border-color: var(--p1);
  background: rgba(124,34,255,.22);
}

/* Volume */
#vol-slider {
  -webkit-appearance: none; appearance: none;
  width: 90px; height: 3px;
  background: linear-gradient(90deg, var(--p1) var(--vp, 100%), rgba(124,34,255,.15) var(--vp, 100%));
  border-radius: 2px; outline: none; cursor: pointer;
}
#vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px;
  background: var(--p2); border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 6px rgba(155,95,255,.55);
  transition: transform var(--t), background var(--t);
}
#vol-slider:hover::-webkit-slider-thumb { background: var(--acc); transform: scale(1.28); }
#vol-slider::-moz-range-thumb { width: 12px; height: 12px; background: var(--p2); border: none; border-radius: 50%; cursor: pointer; }
#vol-pct { font-size: 11px; font-weight: 500; color: var(--muted); min-width: 32px; text-align: right; }

/* ── Night Mode warm overlay ─────────────────────────────────────────────── */
/* Sits above the video, below the controls. Pointer-events off so it never
   eats clicks. Opacity is driven by JS (--night-opacity). The warm amber tint
   uses multiply so it darkens+warms like a Night Light filter rather than
   washing the picture out. */
.night-overlay {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  background: linear-gradient(135deg, #ff8a2b, #ff5a2b);
  mix-blend-mode: multiply;
  opacity: var(--night-opacity, 0);
  transition: opacity .25s ease;
}

/* ── Video filter / Night Mode panel ─────────────────────────────────────── */
.filter-panel {
  position: absolute; bottom: calc(100% + 8px); right: 0;
  width: 270px; padding: 14px;
  background: rgba(8,0,24,.97); border: 1px solid rgba(124,34,255,.2); border-radius: 12px;
  z-index: 50;
  box-shadow: 0 12px 40px rgba(0,0,0,.7);
  backdrop-filter: blur(16px);
}
.filter-panel.hidden { display: none; }
.filter-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.filter-panel-title { font-size: 13px; font-weight: 700; letter-spacing: .3px; color: var(--text); }
.filter-reset {
  background: none; border: none; color: var(--muted); font-family: inherit;
  font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 2px 4px;
  transition: color var(--t);
}
.filter-reset:hover { color: var(--p2); }

.filter-row { margin-bottom: 12px; }
.filter-row:last-child { margin-bottom: 0; }
.filter-row-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.filter-row-top label { font-size: 12px; font-weight: 500; color: var(--p3); }
.filter-val { font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

.filter-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--p1) var(--fp, 50%), rgba(124,34,255,.18) var(--fp, 50%));
  border-radius: 3px; outline: none; cursor: pointer;
}
.filter-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px;
  background: var(--p2); border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 6px rgba(155,95,255,.55);
  transition: transform var(--t), background var(--t);
}
.filter-slider:hover::-webkit-slider-thumb { background: var(--acc); transform: scale(1.18); }
.filter-slider::-moz-range-thumb { width: 14px; height: 14px; background: var(--p2); border: none; border-radius: 50%; cursor: pointer; }
.filter-slider-warm {
  background: linear-gradient(90deg, #ff8a2b var(--fp, 50%), rgba(255,138,43,.18) var(--fp, 50%));
}
.filter-slider-warm::-webkit-slider-thumb { background: #ff9d4d; box-shadow: 0 0 6px rgba(255,138,43,.6); }
.filter-slider-warm:hover::-webkit-slider-thumb { background: #ffb070; }
.filter-slider-warm::-moz-range-thumb { background: #ff9d4d; }

.filter-divider { height: 1px; background: rgba(124,34,255,.16); margin: 14px 0; }

.filter-row-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.filter-night-text { display: flex; flex-direction: column; gap: 2px; }
.filter-night-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.filter-night-sub { font-size: 10.5px; color: var(--muted); }

.filter-switch {
  flex: none; width: 40px; height: 22px; border-radius: 999px;
  background: rgba(124,34,255,.2); border: 1px solid rgba(124,34,255,.25);
  position: relative; cursor: pointer; padding: 0;
  transition: background var(--t), border-color var(--t);
}
.filter-switch-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: var(--p3); border-radius: 50%;
  transition: transform var(--t), background var(--t);
}
.filter-switch[aria-checked="true"] {
  background: linear-gradient(135deg, #ff8a2b, #ff5a2b); border-color: transparent;
}
.filter-switch[aria-checked="true"] .filter-switch-knob { transform: translateX(18px); background: #fff; }

.filter-row-warmth { overflow: hidden; transition: opacity var(--t); }
.filter-row-warmth.disabled { opacity: .35; pointer-events: none; }

.filter-sync-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 14px; padding: 9px 12px;
  background: linear-gradient(135deg, var(--p1), var(--p2)); border: none; border-radius: 9px;
  color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: filter var(--t), opacity var(--t);
}
.filter-sync-btn:hover { filter: brightness(1.12); }
.filter-sync-btn:disabled { opacity: .6; cursor: default; }
.filter-sync-btn.synced { background: rgba(85,204,136,.18); color: var(--ok); }
.filter-sync-hint { margin-top: 12px; font-size: 11px; color: var(--muted); text-align: center; }

/* ── Shortcuts modal ─────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; backdrop-filter: blur(6px);
}
.modal-backdrop.hidden { display: none; }
.modal {
  background: rgba(8,0,24,.98); border: 1px solid rgba(124,34,255,.2);
  border-radius: 16px; width: 400px; max-width: 92vw;
  box-shadow: 0 32px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(124,34,255,.08);
  animation: modal-in .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modal-in { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(124,34,255,.12);
  font-size: 15px; font-weight: 700; color: var(--p3);
}
.modal-close { background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: color var(--t), background var(--t); }
.modal-close:hover { color: var(--text); background: rgba(124,34,255,.12); }

.shortcuts-grid { padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.sc-row { display: flex; align-items: center; gap: 12px; }
.sc-keys { display: flex; gap: 4px; min-width: 90px; flex-shrink: 0; }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 24px; padding: 0 6px;
  background: var(--bg2); border: 1px solid rgba(124,34,255,.2); border-bottom-width: 2px;
  border-radius: 5px; font-size: 11.5px; font-family: inherit; color: var(--text);
}
.sc-desc { font-size: 12.5px; color: var(--muted); }

/* ── User area (sign-in button or user badge) ────────────────────────────── */
.user-area { display: flex; align-items: center; flex-shrink: 0; }

.sign-in-btn {
  padding: 7px 16px;
  background: linear-gradient(135deg, var(--p1), var(--p2));
  border: none; border-radius: 8px;
  color: #fff; font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(124,34,255,.3);
  transition: opacity var(--t), transform var(--t), box-shadow var(--t);
}
.sign-in-btn:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 4px 18px rgba(124,34,255,.4); }

/* Auth close button — top-right of the auth card */
.auth-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none;
  color: var(--muted); font-size: 16px; cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
  transition: color var(--t), background var(--t);
}
.auth-close:hover { color: var(--text); background: rgba(124,34,255,.12); }
.auth-card { position: relative; }

/* ── User badge ──────────────────────────────────────────────────────────── */
.user-badge {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 4px 8px;
  background: rgba(124,34,255,.12);
  border: 1px solid rgba(124,34,255,.25);
  border-radius: 18px;
  flex-shrink: 0;
}
.user-avatar {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--p1), var(--acc));
  border-radius: 50%;
  font-size: 12px; font-weight: 700; color: #fff;
  text-transform: uppercase;
  position: relative; overflow: hidden;   /* clip the optional custom-avatar img */
}
/* Custom-avatar image overlay — fills any .user-avatar / .profile-avatar box. */
.ua-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.user-name { font-size: 13px; font-weight: 600; color: var(--text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-logout {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 5px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--t), background var(--t);
}
.user-logout:hover { color: var(--err); background: rgba(255,85,102,.1); }

/* ── Auth modal ──────────────────────────────────────────────────────────── */
.auth-card { width: 360px; padding: 0; }
.auth-brand {
  padding: 24px 20px 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.auth-tabs {
  display: flex; padding: 0 20px; gap: 4px;
  border-bottom: 1px solid rgba(124,34,255,.12);
}
.auth-tab {
  flex: 1; padding: 10px 0;
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.auth-tab:hover { color: var(--text); }
.auth-tab.active { color: var(--p2); border-bottom-color: var(--p2); }

.auth-form { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.auth-form input {
  padding: 10px 14px;
  background: rgba(16,0,40,.6);
  border: 1px solid rgba(124,34,255,.2);
  border-radius: 8px;
  color: var(--text); font-size: 14px; font-family: inherit;
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.auth-form input:focus { border-color: rgba(124,34,255,.55); box-shadow: 0 0 0 3px rgba(124,34,255,.12); }
.auth-form input::placeholder { color: var(--muted); }
.auth-form button[type="submit"] {
  margin-top: 4px; padding: 10px;
  font-size: 14px; font-weight: 600;
  border-radius: 8px;
}
.auth-error {
  padding: 8px 12px;
  background: rgba(255,85,102,.12);
  border: 1px solid rgba(255,85,102,.3);
  border-radius: 6px;
  color: var(--err);
  font-size: 12.5px;
}
.auth-footer {
  padding: 0 20px 18px;
  text-align: center;
  font-size: 11.5px;
  color: var(--muted);
}
.auth-prompt {
  margin: 14px 20px 0;
  padding: 10px 14px;
  background: rgba(124,34,255,.12);
  border: 1px solid rgba(124,34,255,.28);
  border-radius: 8px;
  color: var(--p3);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ── Detail view ─────────────────────────────────────────────────────────── */
#view-detail { overflow: hidden; }
.detail-scroll { flex: 1; overflow-y: auto; }
.detail-scroll::-webkit-scrollbar { width: 6px; }
.detail-scroll::-webkit-scrollbar-thumb { background: rgba(124,34,255,.3); border-radius: 3px; }

.detail-banner {
  position: relative;
  height: 340px;
  background: var(--bg2);
  overflow: hidden;
}
.detail-banner.no-image {
  height: 140px;
  background:
    radial-gradient(circle at 24% 20%, var(--accent-soft), transparent 34%),
    linear-gradient(180deg, var(--surface-2), var(--surface-0));
}
.detail-banner img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  display: block;
  filter: saturate(1.05) brightness(.9);
}
.detail-banner-fade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--bg0) 0%, transparent 60%),
    linear-gradient(to right, rgba(5,0,16,.75) 0%, transparent 60%);
  pointer-events: none;
}

.detail-content {
  max-width: 1200px; margin: 0 auto;
  padding: 0 32px 60px;
}

.detail-head {
  display: flex; gap: 28px;
  margin-top: -100px;
  position: relative; z-index: 2;
  margin-bottom: 36px;
}
.detail-cover {
  width: 200px; flex-shrink: 0;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: var(--rad);
  background: var(--bg3);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(124,34,255,.2);
}
.detail-info { flex: 1; min-width: 0; padding-top: 100px; }
#detail-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800;
  line-height: 1.15; letter-spacing: -.5px;
  color: var(--text); margin-bottom: 10px;
}
.detail-meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-size: 12.5px; color: var(--muted);
  margin-bottom: 12px;
}
.detail-meta span.meta-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  background: rgba(124,34,255,.12);
  border: 1px solid rgba(124,34,255,.18);
  border-radius: 12px;
  color: var(--p3); font-weight: 500;
}
.detail-meta span.meta-score { color: var(--ok); font-weight: 600; }
.detail-genres { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.genre-chip {
  padding: 3px 10px;
  background: rgba(155,95,255,.1);
  border: 1px solid rgba(155,95,255,.22);
  border-radius: 11px;
  font-size: 11.5px; color: var(--p3);
}
.detail-synopsis {
  color: rgba(237,224,255,.78);
  font-size: 14px; line-height: 1.65;
  margin-bottom: 22px;
  max-width: 800px;
}
.detail-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.detail-watch-btn {
  padding: 11px 26px; font-size: 14px; font-weight: 700;
  border-radius: 10px; min-width: 180px;
  box-shadow: 0 6px 24px rgba(124,34,255,.35);
}
.detail-type-pills { width: 200px; }

.detail-section { margin-top: 36px; }

/* Episode tile grid */
.detail-ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.ep-tile {
  position: relative; overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--bg2);
  border: 1px solid rgba(124,34,255,.15);
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  color: var(--p3);
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.ep-tile:hover { border-color: rgba(124,34,255,.5); background: var(--bg3); transform: translateY(-2px); }
.ep-tile.watched { color: var(--ok); }
.ep-tile.in-progress { color: var(--text); }
.ep-tile-prog { position: absolute; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--p1), var(--acc)); }
.ep-tile-num  { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.ep-tile-inner { display: flex; flex-direction: column; align-items: center; gap: 0; }

/* ── Mobile (≤720px) ─────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Use dynamic viewport height so the URL bar showing/hiding doesn't jump the layout */
  #app { height: 100vh; height: 100dvh; }

  /* ── Header ─────────────────────────────────────────────────────────────
     Two-row header on phones: logo + nav icons on top, a FULL-WIDTH search bar
     on its own row below. The old single-row layout crushed search to ~80px —
     you couldn't reliably tap the icon (it sat 8px from the gear) and the text
     scrolled oddly while typing. */
  header { padding: 8px 12px; height: auto; gap: 8px 10px; flex-wrap: wrap; }
  .logo-text { display: none; }
  .user-name { display: none; }
  .user-badge { padding: 4px; gap: 0; }
  .user-avatar { width: 24px; height: 24px; font-size: 11px; }
  .user-area { margin-left: auto; }
  .search-wrap { order: 3; flex-basis: 100%; max-width: none; }
  .search-wrap input { padding: 10px 42px 10px 14px; font-size: 14px; }
  .search-wrap button { width: 42px; }
  .sign-in-btn { padding: 6px 12px; font-size: 12.5px; }

  /* ── Splash ─────────────────────────────────────────────────────────── */
  .splash { padding: 36px 20px 24px; }
  .splash h1 { font-size: 1.7rem; }
  .splash p { font-size: 0.92rem; }
  .hint-row { display: none; }

  /* ── Hero carousel ──────────────────────────────────────────────────── */
  /* On phones the full title + synopsis + meta + button stack is too tall for
     the hero and rides up under the header. Trim it down: clamp the title to
     two lines, drop the synopsis, and shrink the controls. */
  .home-hero { height: 62vh; min-height: 380px; max-height: 560px; }
  .hero-slide-content { bottom: 8%; left: 5%; width: 90%; }
  .hero-slide-title {
    font-size: 1.5rem; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero-slide-meta { font-size: 11.5px; gap: 8px; margin-bottom: 12px; }
  .hero-slide-synopsis { display: none; }
  .hero-watch-btn { padding: 10px 22px; font-size: 14px; }
  .hero-indicators { bottom: 12px; }

  /* ── Card grids ─────────────────────────────────────────────────────── */
  #view-search { padding: 12px; }
  #results-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
  .continue-section { padding: 0 12px 24px; }
  .continue-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
  .card-foot { padding: 30px 8px 8px; }
  .card-title { font-size: 11.5px; }
  .card-meta { font-size: 10px; }

  /* ── Detail page ────────────────────────────────────────────────────── */
  .detail-banner { height: 190px; }
  .detail-content { padding: 0 16px 40px; }
  .detail-head {
    flex-direction: column;
    margin-top: -60px;
    gap: 14px;
    margin-bottom: 24px;
  }
  .detail-cover { width: 110px; align-self: flex-start; }
  .detail-info { padding-top: 0; }
  #detail-title { font-size: 1.45rem; margin-bottom: 8px; }
  .detail-meta { font-size: 11.5px; gap: 6px 10px; margin-bottom: 10px; }
  .detail-synopsis { font-size: 13px; line-height: 1.55; margin-bottom: 16px; }
  .detail-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .detail-watch-btn { width: 100%; min-width: 0; padding: 12px; }
  .detail-type-pills { width: 100%; }
  .detail-section { margin-top: 24px; }
  .detail-ep-grid {
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 6px;
  }
  .ep-tile { font-size: 13px; }

  /* ── Player view: single-column stack on mobile ───────────────────── */
  /* Flatten the two-column grid into one flex column and flatten .watch-main
     (display:contents) so the Episodes list can be pulled ABOVE the info card,
     comments and "You Might Like" — otherwise it sat dead last and you had to
     scroll the whole page to reach the next episode. Order: player → pills →
     server tip → info → EPISODES → comments → recommendations. */
  .watch-grid {
    display: flex; flex-direction: column;
    gap: 0;
    padding: 0 0 40px;
    max-width: 100%;
  }
  .watch-main { display: contents; }
  .video-box          { order: 1; }
  .watch-episode-bar  { order: 2; }
  .server-hint, .server-hint-show { order: 3; }
  .watch-info         { order: 4; }
  .watch-sidebar      { order: 5; }
  .watch-comments     { order: 6; }
  .watch-recs-section { order: 7; }
  .video-box {
    border-radius: 0;
    box-shadow: none;
  }
  .watch-episode-bar {
    padding: 12px 12px 0;
    gap: 8px 10px;
  }
  #watch-ep-title { font-size: 15px; flex: 1 1 100%; }
  .watch-episode-bar .type-pills { width: 100%; order: 3; }
  .party-btn { flex: 1 1 0; justify-content: center; padding: 8px 10px; font-size: 12px; }
  .party-btn-label { display: none; }
  .autoskip-toggle { flex: 1 1 0; justify-content: center; padding: 7px 10px; font-size: 11.5px; }
  .autoskip-label { display: none; }

  .watch-info {
    grid-template-columns: 90px minmax(0, 1fr);
    /* Must reset the named areas too, not just the columns — otherwise the
       desktop "text cover" mapping crams the text into the 90px column (meta,
       genres and synopsis then wrap one word per line). Cover left, text right. */
    grid-template-areas: "cover text";
    gap: 12px;
    margin: 14px 12px 0;
    padding: 14px;
  }
  .watch-info-cover { width: 90px; }
  #watch-info-title { font-size: 17px; }
  .watch-info-synopsis { font-size: 12.5px; }

  .watch-recs-section { margin: 18px 12px 0; }

  /* Comments placeholder — match horizontal padding of other mobile sections */
  .watch-comments {
    margin: 18px 12px 0;
    padding: 16px;
    border-radius: 12px;
  }
  .watch-comments-input { padding: 4px 0 14px; margin-bottom: 16px; }
  .watch-comments-empty { padding: 18px 12px 8px; }
  .comments-icon-wrap { width: 44px; height: 44px; }

  /* Episodes panel: not sticky, full-width below */
  .watch-sidebar {
    position: static;
    max-height: none;
    margin: 6px 12px 0;
    padding: 12px;
  }
  .ep-rich-list {
    max-height: 60vh;   /* keep it scrollable but bounded so the page can still scroll */
  }
  .ep-rich { grid-template-columns: 92px minmax(0, 1fr); }
  .ep-rich-thumb { width: 92px; }

  /* Theater mode is a no-op on mobile (sidebar already lives below) */
  #view-player.theater .watch-sidebar { display: flex; }
  #view-player.theater .watch-main { max-width: 100%; }

  /* ── Controls bar (compact, declutter) ─────────────────────────────────
     Wrap to two rows so nothing is clipped off the right edge — the single row
     overflowed ~200px past the video width, hiding the quality/server/volume
     controls entirely and clipping the resolution readout to "108…". */
  .controls-bar { padding: 4px 6px; gap: 4px 5px; border-radius: 10px; flex-wrap: wrap; justify-content: center; }
  #btn-pip, #btn-theater, #btn-help { display: none; }
  /* The episode label sat between the ◀ ▶ arrows and only had room to show a
     clipped "E". The full episode title is right below the video, so drop it. */
  .ep-label { display: none; }
  /* Force quality/server/volume onto their own second row (the spacer becomes a
     full-width, non-shrinking line break — flex:1's shrink would otherwise let
     it collapse onto the first row and push the slider to a lonely third row). */
  .ctrl-spacer { flex: 0 0 100%; height: 0; margin: 0; }
  #vol-slider { width: 84px; }
  #vol-pct { display: none; }
  .seek-bar { gap: 8px; font-size: 11px; }
  .time-now, .time-dur { min-width: 32px; }

  /* Control popovers (Display panel, Quality/Server/Speed/CC menus) opened
     UPWARD out of the short (~210px) video box and were clipped by its
     overflow:hidden — Night Mode was cut off entirely. Anchor them to the
     viewport bottom as a sheet instead. .player-controls' slide transform is
     dropped so it can't become a containing block that re-traps these fixed
     elements inside the clipped video box. */
  .player-controls { transform: none !important; }
  .ctrl-menu, .filter-panel {
    position: fixed;
    left: 50%; right: auto; top: auto;
    bottom: max(14px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(94vw, 380px);
    max-height: 72vh; overflow-y: auto;
    /* Opaque sheet + lifted shadow so page content doesn't bleed through it. */
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 -6px 40px rgba(0,0,0,.7), 0 12px 40px rgba(0,0,0,.7);
  }

  /* ── Auth modal full-width on phone ────────────────────────────────── */
  .auth-card { width: calc(100% - 24px); }
}

/* ── Touch devices (no hover) ────────────────────────────────────────────── */
@media (hover: none) {
  /* 3D card tilt is jarring on touch — turn it off */
  .result-card:hover, .continue-card:hover {
    transform: none !important;
  }
  .result-card:hover .card-img-wrap img,
  .continue-card:hover .card-img-wrap img {
    transform: none !important;
  }
  /* Make seek bar a slightly bigger touch target by default */
  .seek-track { height: 5px; }
  .seek-thumb { width: 16px; height: 16px; }
  /* Skip the 300ms tap delay on interactive elements */
  button, .ep-rich, .result-card, .continue-card, .ep-tile, .seek-track {
    touch-action: manipulation;
  }
}

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

/* ── Settings Modal & Themes ─────────────────────────────────────────────── */
.settings-body { padding: 20px; }
.settings-section { margin-bottom: 24px; }
.settings-title { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 12px; }
.theme-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px;
}
.theme-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(8,0,24,.4); border: 1px solid rgba(124,34,255,.18);
  border-radius: 12px; padding: 16px 8px; cursor: pointer; font-family: inherit;
  transition: border-color var(--t), background var(--t), transform .15s ease;
}
.theme-btn:hover { background: rgba(124,34,255,.12); transform: translateY(-2px); }
.theme-btn.active {
  border-color: var(--p2); background: rgba(124,34,255,.15);
  box-shadow: 0 0 0 1px var(--p2), 0 4px 14px rgba(0,0,0,.3);
}
.theme-color {
  width: 36px; height: 36px; border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.theme-name { font-size: 12.5px; color: var(--text); font-weight: 600; }

body.theme-red {
  --p1:   #ff2255;
  --p2:   #ff4477;
  --p3:   #ff99aa;
  --acc:  #ffaa22;
  --bg0:  #0a0002;
  --bg1:  #140004;
  --bg2:  #200008;
  --bg3:  #300010;

  --glass-bg: rgba(20,0,5,.88);
  --glass-border: rgba(255,34,85,.14);
  --card-bg: rgba(24,0,8,.4);
  --card-border: rgba(255,34,85,.1);
  --card-hover-border: rgba(255,34,85,.45);
  --card-hover-glow: 0 16px 50px rgba(255,34,85,.28), 0 4px 16px rgba(0,0,0,.4);
  --glow-primary: rgba(255,34,85,.45);
  --film-opacity: .05;
  --scrollbar-thumb: rgba(255,34,85,.28);
}
body.theme-oled {
  --p1:   #ffffff;
  --p2:   #e0e0e0;
  --p3:   #cccccc;
  --acc:  #ffffff;
  --bg0:  #000000;
  --bg1:  #000000;
  --bg2:  #080808;
  --bg3:  #111111;

  --glass-bg: rgba(0,0,0,.95);
  --glass-border: rgba(255,255,255,.05);
  --card-bg: rgba(5,5,5,.4);
  --card-border: rgba(255,255,255,.08);
  --card-hover-border: rgba(255,255,255,.2);
  --card-hover-glow: 0 4px 16px rgba(0,0,0,.6);
  --card-hover-y: -1px;
  --glow-primary: rgba(255,255,255,.1);
  --film-opacity: 0;
  --scrollbar-thumb: rgba(255,255,255,.15);
  --text-on-accent: #050505;
}
body.theme-cyan {
  --p1:   #00E5FF;
  --p2:   #33EEFF;
  --p3:   #B2FBFF;
  --acc:  #7C4DFF;
  --bg0:  #050816;
  --bg1:  #080C20;
  --bg2:  #0B1230;
  --bg3:  #101840;

  --glass-bg: rgba(5,8,22,.88);
  --glass-border: rgba(0,229,255,.2);
  --card-bg: rgba(11,18,48,.4);
  --card-border: rgba(0,229,255,.15);
  --card-hover-border: rgba(0,229,255,.6);
  --card-hover-glow: 0 16px 50px rgba(0,229,255,.35), 0 4px 16px rgba(0,0,0,.4);
  --glow-primary: rgba(0,229,255,.5);
  --film-opacity: .04;
  --scrollbar-thumb: rgba(0,229,255,.28);
}
body.theme-sakura {
  --p1:   #FF77B7;
  --p2:   #FFAADD;
  --p3:   #FFD6EA;
  --acc:  #FFB3D9;
  --bg0:  #120A12;
  --bg1:  #1A0F1A;
  --bg2:  #241524;
  --bg3:  #301B30;

  --glass-bg: rgba(18,10,18,.88);
  --glass-border: rgba(255,119,183,.14);
  --card-bg: rgba(36,21,36,.4);
  --card-border: rgba(255,119,183,.12);
  --card-hover-border: rgba(255,119,183,.4);
  --card-hover-glow: 0 16px 40px rgba(255,119,183,.2), 0 4px 16px rgba(0,0,0,.4);
  --card-hover-y: -6px;
  --glow-primary: rgba(255,119,183,.4);
  --film-opacity: .02;
  --scrollbar-thumb: rgba(255,119,183,.25);
}
body.theme-emerald {
  --p1:   #00D084;
  --p2:   #40E0A3;
  --p3:   #7CFFB2;
  --acc:  #00A86B;
  --bg0:  #08120F;
  --bg1:  #0B1A15;
  --bg2:  #10241D;
  --bg3:  #183028;

  --glass-bg: rgba(8,18,15,.92);
  --glass-border: rgba(0,208,132,.1);
  --card-bg: rgba(16,36,29,.5);
  --card-border: rgba(0,208,132,.08);
  --card-hover-border: rgba(0,208,132,.3);
  --card-hover-glow: 0 16px 40px rgba(0,208,132,.15), 0 4px 16px rgba(0,0,0,.4);
  --card-hover-y: -2px;
  --glow-primary: rgba(0,208,132,.25);
  --film-opacity: .01;
  --scrollbar-thumb: rgba(0,208,132,.2);
}
body.theme-midnight {
  --p1:   #484F58;
  --p2:   #5A6270;
  --p3:   #7A828E;
  --acc:  #484F58;
  --bg0:  #08090C;
  --bg1:  #0A0D11;
  --bg2:  #0D1016;
  --bg3:  #151920;
  --text: #8B949E;
  --muted:#6E7681;

  --glass-bg: rgba(13,16,22,.95);
  --glass-border: rgba(255,255,255,.03);
  --card-bg: rgba(20,24,32,.4);
  --card-border: rgba(255,255,255,.04);
  --card-hover-border: rgba(255,255,255,.08);
  --card-hover-glow: none;
  --card-hover-y: 0px;
  --glow-primary: transparent;
  --film-opacity: 0;
  --scrollbar-thumb: rgba(255,255,255,.08);
}
/* Dark — the new default. A clean, neutral near-black with crisp white text and
   subtle slate accents (vs OLED's pure-black/white-accent and Midnight's dim,
   greyed text). Accents stay mid-slate so the many `color:#fff` buttons across
   the app keep readable contrast. */
body.theme-dark {
  --p1:   #5a5a66;
  --p2:   #777783;
  --p3:   #c2c2cc;
  --acc:  #8a8a98;
  --bg0:  #000000;   /* true-black page floor + hero fade */
  --bg1:  #000000;
  --bg2:  #0c0c0e;   /* panels barely lifted off black */
  --bg3:  #141417;
  --text: #ececf0;
  --muted:#9a9aa6;

  /* True-black look = panels sit ~flush with the page and are separated by
     hairline borders, not lighter grey fills (translucent white reads as
     near-black on #000 yet still lifts subtly). */
  --glass-bg: rgba(0,0,0,.92);
  --glass-border: rgba(255,255,255,.08);
  --card-bg: rgba(255,255,255,.025);
  --card-border: rgba(255,255,255,.08);
  --card-hover-border: rgba(255,255,255,.2);
  --card-hover-glow: 0 14px 40px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.5);
  --card-hover-y: -3px;
  --glow-primary: rgba(255,255,255,.12);
  --film-opacity: 0;
  --scrollbar-thumb: rgba(255,255,255,.16);
}

/* ── Visual polish layer ───────────────────────────────────────────────────
   Shared surfaces and interaction states. These overrides deliberately live
   after the theme definitions so every palette receives the same hierarchy. */
body {
  transition: background-color var(--motion-normal) var(--ease-standard),
              color var(--motion-normal) var(--ease-standard);
}

header {
  gap: var(--space-4);
  border-bottom-color: var(--glass-border);
}

.search-wrap input,
.ep-search-wrap input,
.auth-form input,
.party-input input,
.party-invite-link,
#latest-search,
#settings-search,
#wall-input,
.admin-login-card input {
  background: var(--surface-input);
  border-color: var(--border-subtle);
}

.search-wrap input:focus,
.ep-search-wrap input:focus,
.auth-form input:focus,
.party-input input:focus,
.party-invite-link:focus,
#latest-search:focus,
#settings-search:focus,
#wall-input:focus,
.admin-login-card input:focus {
  border-color: var(--accent-border);
  box-shadow: var(--focus-ring);
}

/* Header search bar: frosted-glass translucency like the nav icon buttons, so it
   doesn't block the hero art on home (or read as a heavy opaque slab over the
   video on the watch page). Scoped to the HEADER search only — the settings/
   auth/wall inputs above keep their solid fill. */
.search-wrap input {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.search-wrap input:focus {
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}

.settings-btn,
.notif-btn,
.ctrl-btn,
.modal-close,
.user-logout,
.footer-icon {
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--ease-standard);
}

.settings-btn:hover,
.notif-btn:hover,
.ctrl-btn:hover,
.modal-close:hover {
  background: var(--surface-hover);
}

.row-header,
.section-header {
  min-height: 28px;
}

.row-title,
.section-title {
  color: var(--text-primary);
  font-weight: 750;
  letter-spacing: -.015em;
}

.row-title {
  border-left: 0;
  padding-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.row-title::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--p2), var(--acc));
  box-shadow: 0 0 14px var(--accent-shadow);
}

.home-content {
  gap: clamp(34px, 4vw, 54px);
  padding-bottom: 72px;
}

.home-row,
.watchtime-section {
  max-width: 1520px;
}

.row-header {
  margin-bottom: var(--space-4);
}

.carousel-track {
  gap: clamp(14px, 1.5vw, 22px);
  padding-bottom: 12px;
  scroll-padding-inline: 4%;
}

.carousel-nav {
  background: linear-gradient(to right, var(--overlay-medium), transparent);
  color: var(--text-primary);
  transition: opacity var(--motion-fast) ease, color var(--motion-fast) ease;
}

.carousel-nav.nav-next {
  background: linear-gradient(to left, var(--overlay-medium), transparent);
}

.carousel-nav:hover {
  background-color: transparent;
  color: var(--p2);
}

.result-card,
.continue-card {
  border-color: var(--border-subtle);
  background: var(--surface-card);
  box-shadow: 0 1px 0 rgba(255,255,255,.025);
  transition: box-shadow var(--motion-normal) var(--ease-standard),
              border-color var(--motion-normal) var(--ease-standard),
              transform var(--motion-normal) var(--ease-emphasized);
  will-change: auto;
}

.result-card:hover,
.continue-card:hover {
  border-color: var(--border-strong);
}

.card-foot {
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0,0,0,.96) 0%, rgba(0,0,0,.72) 48%, transparent 100%);
}

.card-title {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -.005em;
}

.card-meta {
  color: color-mix(in srgb, var(--p3) 66%, var(--muted));
}

.comment-card,
.ranked-item,
.profile-comment,
.sched-row {
  border-color: var(--border-subtle);
}

.comment-card:hover,
.ranked-item:hover,
.profile-comment:hover,
.sched-row:hover {
  border-color: var(--border-strong);
}

.ranked-1 .ranked-num {
  text-shadow: 0 0 14px var(--accent-shadow);
}

.watchtime-card,
.watch-info,
.watch-comments,
.watch-sidebar,
.profile-stat,
.profile-anilist,
.cl-entry,
.latest-card,
.sched-row,
.modal,
.settings-modal-shell {
  background-color: var(--surface-card);
  border-color: var(--border-subtle);
}

.watch-info,
.watch-comments,
.watch-sidebar,
.profile-anilist,
.cl-entry,
.modal {
  box-shadow: var(--shadow-card);
}

.watch-info-synopsis,
.detail-synopsis,
.comment-item-text {
  color: color-mix(in srgb, var(--text-primary) 80%, var(--text-secondary));
}

.type-pill,
.party-btn,
.autoskip-toggle,
.btn-ghost,
.settings-link-btn,
.nav-latest-btn {
  background: var(--surface-card);
  border-color: var(--border-subtle);
}

.type-pill:hover,
.party-btn:hover,
.autoskip-toggle:hover,
.btn-ghost:hover,
.settings-link-btn:hover,
.nav-latest-btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent-border);
}

.type-pill.active,
.party-btn.on,
.autoskip-toggle.on,
.btn-solid,
.sign-in-btn,
.comment-post-btn,
.detail-watch-btn,
.row-empty-btn,
.profile-anilist-btn,
.wall-post,
.avatar-upload-btn,
.filter-sync-btn,
.party-invite-copy,
.party-input button,
#retry-btn,
.latest-seg button.active,
.sched-day.active {
  color: var(--text-on-accent);
  box-shadow: 0 6px 18px var(--accent-shadow);
}

.type-pill.active {
  box-shadow: 0 5px 16px var(--accent-shadow), inset 0 0 0 1px color-mix(in srgb, var(--p2) 36%, transparent);
}

.latest-dropdown,
.notif-panel,
.ctrl-menu,
.filter-panel,
.party-panel {
  background: color-mix(in srgb, var(--surface-1) 94%, transparent);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-raised);
}

.latest-dd-item:hover,
.menu-opt:hover,
.comment-vote:hover,
.server-hint,
.welcome-feature-icon,
.settings-link-btn,
.latest-seg,
#latest-search {
  background-color: var(--surface-hover);
}

.latest-card {
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-card);
}

.latest-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--card-hover-glow);
}

.cl-entry {
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-card) 56%);
}

.server-hint,
.auth-prompt,
.party-host-badge {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.video-box {
  box-shadow: 0 0 0 1px var(--border-subtle), 0 22px 64px rgba(0,0,0,.56);
}

.player-controls .controls-bar,
.controls-bar {
  background: color-mix(in srgb, var(--surface-1) 68%, transparent);
  border-color: var(--border-subtle);
}

.seek-track,
.autoplay-track {
  background: var(--accent-soft);
}

.ctrl-sep,
.filter-divider { background-color: var(--border-subtle); }
.watch-comments-input,
.auth-tabs { border-color: var(--border-subtle); }

.modal-backdrop {
  background: rgba(0,0,0,.78);
}

.modal {
  animation: modal-in var(--motion-normal) var(--ease-emphasized);
}

.settings-nav-item.active {
  background: var(--surface-active);
}

.theme-btn {
  background: var(--surface-card);
  border-color: var(--border-subtle);
}

.theme-btn:hover {
  background: var(--surface-hover);
}

.theme-btn.active {
  background: var(--surface-active);
  border-color: var(--accent-border);
  box-shadow: 0 0 0 1px var(--p2), var(--shadow-card);
}

.settings-switch,
.filter-switch {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.profile-page,
.latest-page,
.detail-content {
  width: 100%;
}

.latest-page-title,
.profile-name,
#detail-title,
#watch-info-title {
  letter-spacing: -.035em;
}

@media (hover: hover) {
  .result-card:hover,
  .continue-card:hover {
    transform: perspective(700px) rotateX(0deg) rotateY(0deg) scale(1.025) translateY(var(--card-hover-y));
  }
}

@media (max-width: 720px) {
  .home-content { gap: 34px; padding-bottom: 52px; }
  .row-title { font-size: 16px; }
  .row-title::before { height: 16px; }
  .carousel-track { gap: 12px; }
  .card-foot { min-height: 66px; }
  .watch-info,
  .watch-comments,
  .watch-sidebar { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .hero-slider { transition: none !important; }
  .amb { display: none; }
}

/* ── Site footer ─────────────────────────────────────────────────────────── */
.site-footer {
  width: 100%;
  margin-top: 80px;
  padding: 40px 0 24px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.45));
  border-top: 1px solid rgba(124,34,255,.12);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  flex-shrink: 0;
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: start;
}
.footer-brand { max-width: 560px; }
.footer-logo {
  height: 32px; width: 32px; display: block;
  margin-bottom: 14px; opacity: .95;
  border-radius: 22%;
  object-fit: cover;
}
.footer-disclaimer { margin: 0; }
.footer-more-link {
  background: none; border: none; padding: 0; margin-left: 4px;
  color: var(--p3, #a78bfa); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
  transition: color var(--t);
}
.footer-more-link:hover { color: var(--text); }

.footer-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.footer-copy { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.footer-copy strong { color: var(--text); font-weight: 600; }
.footer-icons { display: flex; gap: 10px; }
.footer-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(124,34,255,.06);
  border: 1px solid rgba(124,34,255,.14);
  color: var(--muted); cursor: pointer; text-decoration: none;
  transition: color var(--t), background var(--t), border-color var(--t), transform var(--t);
}
.footer-icon:hover {
  color: var(--text);
  background: rgba(124,34,255,.18);
  border-color: rgba(124,34,255,.45);
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr; gap: 22px; padding: 0 20px; }
  .footer-meta { align-items: flex-start; }
  .footer-copy { white-space: normal; }
}

/* ── Disclaimer modal ────────────────────────────────────────────────────── */
.disclaimer-modal { width: 560px; max-width: 92vw; }
.disclaimer-body {
  padding: 18px 22px 22px;
  font-size: 13.5px; line-height: 1.6; color: var(--text);
  max-height: 70vh; overflow-y: auto;
}
.disclaimer-body p { margin: 0 0 12px; }
.disclaimer-body p:last-child { margin-bottom: 0; }
.disclaimer-body a { color: var(--p3, #a78bfa); text-decoration: underline; text-underline-offset: 2px; }
.disclaimer-body a:hover { color: var(--text); }
.disclaimer-thanks { color: var(--muted); font-style: italic; margin-top: 16px !important; }

/* ── Admin control panel ─────────────────────────────────────────────────────
   Private ops dashboard. Calm dark "server monitor" look, not a hacker terminal.
   Status colors: green = healthy, yellow = slow/loading, red = error.         */
.admin-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(2,0,8,.82); backdrop-filter: blur(10px);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 32px 20px;
  font-family: 'Inter', system-ui, sans-serif;
}
.admin-backdrop.hidden { display: none; }

/* Login gate */
.admin-login { width: 100%; min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.admin-login.hidden { display: none; }
.admin-login-card {
  width: 320px; max-width: 100%;
  background: #0c0820; border: 1px solid var(--card-border);
  border-radius: 16px; padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.admin-login-title { font-size: 18px; font-weight: 800; color: var(--text); }
.admin-login-sub   { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.admin-login-card input {
  background: #060414; border: 1px solid var(--card-border); border-radius: 10px;
  padding: 11px 13px; color: var(--text); font-size: 14px; font-family: inherit; outline: none;
}
.admin-login-card input:focus { border-color: var(--p2); }
.admin-login-err { color: var(--err); font-size: 12.5px; }
.admin-login-err.hidden { display: none; }
.admin-login-btn {
  background: var(--p1); color: #fff; border: none; border-radius: 10px;
  padding: 11px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background var(--t);
}
.admin-login-btn:hover { background: var(--p2); }
.admin-login-cancel {
  background: none; border: none; color: var(--muted); font-size: 12.5px; cursor: pointer; padding: 4px;
}
.admin-login-cancel:hover { color: var(--text); }

/* Dashboard shell */
.admin-dash { width: 100%; max-width: 1080px; }
.admin-dash.hidden { display: none; }
.admin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.admin-title { font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: .2px; }
.admin-title-wrap { display: flex; flex-direction: column; gap: 5px; }
.admin-status { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.admin-status .admin-sep { opacity: .5; }
.admin-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px currentColor; color: var(--ok); }
.admin-status.ok   { color: #8fb6a0; } .admin-status.ok   .admin-dot { background: var(--ok);  color: var(--ok); }
.admin-status.warn { color: #d6c08a; } .admin-status.warn .admin-dot { background: #e6b800;    color: #e6b800; }
.admin-status.bad  { color: #d68a96; } .admin-status.bad  .admin-dot { background: var(--err);  color: var(--err); }
.admin-close {
  background: none; border: 1px solid var(--card-border); color: var(--muted);
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 15px; transition: all var(--t);
}
.admin-close:hover { color: var(--text); border-color: var(--card-hover-border); }

/* Stat cards */
.admin-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px; }
.admin-card {
  background: #0b0820; border: 1px solid var(--card-border); border-radius: 13px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
}
.admin-card-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.admin-card-value { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; }
.admin-card-value.ok   { color: var(--ok); }
.admin-card-value.warn { color: #e6b800; }
.admin-card-value.bad  { color: var(--err); }

/* Two-column body */
.admin-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 16px; }
.admin-side { display: flex; flex-direction: column; gap: 16px; }
.admin-block {
  background: #0a0720; border: 1px solid var(--card-border); border-radius: 13px; padding: 16px 18px;
}
.admin-block h3 {
  margin: 0 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .9px; color: var(--p3);
}
.admin-empty { color: var(--muted); font-size: 13px; padding: 8px 0; }

/* Active viewers */
.admin-vrow {
  display: grid; grid-template-columns: 1.1fr 2fr auto auto; gap: 12px; align-items: center;
  padding: 9px 0; border-top: 1px solid rgba(124,34,255,.07); font-size: 13px;
}
.admin-vrow:first-child { border-top: none; }
.admin-vname  { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-vwhere { color: var(--p3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-vtime  { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; min-width: 48px; }
.admin-badge {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; text-align: center;
}
.admin-badge.st-playing   { background: rgba(85,204,136,.16);  color: #6fdfa0; }
.admin-badge.st-buffering { background: rgba(230,184,0,.16);   color: #e6c84d; }
.admin-badge.st-loading   { background: rgba(230,184,0,.16);   color: #e6c84d; }
.admin-badge.st-paused    { background: rgba(122,95,160,.18);  color: #b49bd0; }
.admin-badge.st-ended     { background: rgba(122,95,160,.18);  color: #b49bd0; }

/* Popular + system rows */
.admin-prow, .admin-srow {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 8px 0; border-top: 1px solid rgba(124,34,255,.07); font-size: 13px; color: var(--text);
}
.admin-prow:first-child, .admin-srow:first-child { border-top: none; }
.admin-prow span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-pcount { color: var(--p3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-srow span:first-child { color: var(--muted); }
.admin-srow span:last-child  { font-variant-numeric: tabular-nums; }

/* Recent issues */
.admin-irow {
  display: flex; gap: 12px; align-items: baseline; padding: 8px 0;
  border-top: 1px solid rgba(124,34,255,.07); font-size: 13px;
}
.admin-irow:first-child { border-top: none; }
.admin-itime { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 64px; }
.admin-irow.lv-error span:last-child { color: #e88; }
.admin-irow.lv-warn  span:last-child { color: #e6c84d; }

@media (max-width: 760px) {
  .admin-cards { grid-template-columns: repeat(2, 1fr); }
  .admin-cols  { grid-template-columns: 1fr; }
  .admin-vrow  { grid-template-columns: 1fr auto; row-gap: 2px; }
  .admin-vwhere { grid-column: 1 / -1; order: 3; }
  .admin-vtime { order: 2; }
}

/* ── Unreleased episodes (source lists the full season; mark future ones) ──── */
.ep-rich.unreleased { opacity: .56; cursor: default; }
.ep-rich.unreleased:hover { background: rgba(124,34,255,.05); transform: none; }
.ep-rich-lock {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,0,16,.58); color: #d8c4ff;
}
.ep-rich-soon {
  display: inline-block; margin-left: 7px; padding: 1px 6px;
  border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: #1a1206; background: #e6b800;
  vertical-align: middle; position: relative; top: -1px;
}
.ep-rich-release { font-size: 11px; font-weight: 600; color: #d6c08a; margin-top: 3px; }

.ep-tile.unreleased { opacity: .5; cursor: default; }
.ep-tile.unreleased:hover { transform: none; border-color: var(--card-border); background: var(--bg2); }
.ep-tile-lock { position: absolute; top: 4px; right: 5px; color: #e6c84d; z-index: 2; line-height: 0; }

/* ── Server-switching hint (above the watch-page info card) ─────────────────── */
.server-hint {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 16px; padding: 10px 14px;
  border-radius: 11px;
  background: rgba(124,34,255,.08);
  border: 1px solid rgba(124,34,255,.18);
  color: var(--p3); font-size: 13px; line-height: 1.45;
}
.server-hint.hidden { display: none; }
.server-hint-icon { flex-shrink: 0; margin-top: 1px; color: var(--p2); }
.server-hint-text { flex: 1; min-width: 0; }
.server-hint strong { color: var(--text); font-weight: 700; }
.server-hint-hide {
  flex-shrink: 0; align-self: flex-start;
  background: var(--surface-active);
  border: 1px solid var(--accent-border);
  color: var(--p3); font-size: 12px; font-weight: 600;
  padding: 3px 11px; border-radius: 7px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.server-hint-hide:hover { background: var(--accent-medium); color: var(--text); }
/* Collapsed state — plain inline text+icon (no card/border) so it sits flush
   with the page background once hidden. The expanded banner keeps its card. */
.server-hint-show {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 16px; padding: 2px 0;
  background: none; border: none;
  color: var(--muted); font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: color .15s ease;
}
.server-hint-show:hover { color: var(--p3); }
.server-hint-show svg { flex-shrink: 0; color: var(--p2); }
@media (max-width: 720px) {
  .server-hint { font-size: 12.5px; padding: 10px 12px; }
}

/* ── Welcome / onboarding modal ─────────────────────────────────────────── */
.welcome-card {
  max-width: 460px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  padding: 0; overflow-x: hidden;
  position: relative; text-align: left;
}
.welcome-close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  background: rgba(6,4,15,.5); border-radius: 8px;
}
/* Animated YORU night-scene banner (lazy-loaded iframe) */
.welcome-hero-wrap {
  position: relative; width: 100%;
  background: #06040f;                 /* matches the scene bg while it loads */
  border-bottom: 1px solid rgba(124,34,255,.18);
}
.welcome-hero { display: block; width: 100%; height: 200px; border: 0; background: #06040f; }
.welcome-head { text-align: center; padding: 16px 28px 2px; }
.welcome-title { font-size: 20px; font-weight: 800; letter-spacing: -.4px; margin: 0 0 6px; }
.welcome-sub { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.5; }

.welcome-features {
  list-style: none; margin: 0; padding: 20px 26px 4px;
  display: flex; flex-direction: column; gap: 16px;
}
.welcome-feature { display: flex; gap: 13px; align-items: flex-start; }
.welcome-feature-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(124,34,255,.14); color: var(--p2);
  border: 1px solid rgba(124,34,255,.22);
}
.welcome-feature-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.welcome-feature p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.5; }
.welcome-feature strong { color: var(--text); font-weight: 700; }

.welcome-discord {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 16px 26px 0; padding: 11px; border-radius: 10px;
  background: rgba(88,101,242,.16); border: 1px solid rgba(88,101,242,.4);
  color: #c9cfff; font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: background .15s ease;
}
.welcome-discord:hover { background: rgba(88,101,242,.28); }
.welcome-discord svg { color: #8ea1ff; }

.welcome-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 18px 26px 24px;
}
.welcome-dontshow {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted); cursor: pointer; user-select: none;
}
.welcome-dontshow input { accent-color: var(--p2); width: 15px; height: 15px; cursor: pointer; }
.welcome-start { padding: 10px 22px; font-size: 14px; }

@media (max-width: 720px) {
  .welcome-card { max-width: 100%; }
  .welcome-hero { height: 168px; }
  .welcome-head { padding: 14px 18px 2px; }
  .welcome-features { padding: 18px 18px 4px; }
  .welcome-discord { margin: 14px 18px 0; }
  .welcome-foot { padding: 16px 18px 20px; }
}

/* Settings → About: re-open the welcome guide */
.settings-link-btn {
  background: rgba(124,34,255,.1); border: 1px solid rgba(124,34,255,.2);
  color: var(--p3); font-size: 13px; font-weight: 600;
  padding: 9px 14px; border-radius: 9px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.settings-link-btn:hover { background: rgba(124,34,255,.2); color: var(--text); }

/* Settings → Playback */
.settings-row { margin-bottom: 16px; }
.settings-row:last-child { margin-bottom: 0; }
.settings-row-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
/* Default-audio reuses the watch-page .type-pill look; split evenly here. */
.settings-seg { width: 100%; gap: 6px; }
.settings-seg .type-pill { flex: 1; text-align: center; }
.settings-row-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.settings-row-toggle .settings-row-label { margin-bottom: 2px; }
.settings-row-sub { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.settings-switch {
  flex: none; width: 40px; height: 22px; border-radius: 999px;
  background: rgba(124,34,255,.2); border: 1px solid rgba(124,34,255,.25);
  position: relative; cursor: pointer; padding: 0;
  transition: background .15s ease, border-color .15s ease;
}
.settings-switch-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: var(--p3); border-radius: 50%;
  transition: transform .15s ease, background .15s ease;
}
.settings-switch[aria-checked="true"] {
  background: linear-gradient(135deg, var(--p1), var(--p2)); border-color: transparent;
}
.settings-switch[aria-checked="true"] .settings-switch-knob { transform: translateX(18px); background: #fff; }
.settings-switch:disabled,
.settings-link-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ── Settings — category rail + search (redesigned 2026-06-04) ─────────────────
   Two-pane modal: left rail (search + categories), right scrollable panel.
   All colour from CSS vars so it themes with the rest of the site.            */
.settings-modal-shell {
  width: min(880px, 95vw); max-width: 880px; height: min(600px, 88vh);
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.settings-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid var(--card-border); flex-shrink: 0;
}
.settings-head-title { font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: var(--text); }
.settings-layout { display: flex; flex: 1; min-height: 0; }
.settings-rail {
  width: 216px; flex-shrink: 0; border-right: 1px solid var(--card-border);
  padding: 14px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto;
}
.settings-search-wrap { position: relative; }
.settings-search-wrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
#settings-search {
  width: 100%; padding: 9px 12px 9px 33px; border-radius: 9px;
  background: var(--bg2); border: 1px solid var(--card-border); color: var(--text);
  font-size: 13px; outline: none; transition: border-color .15s ease;
}
#settings-search::placeholder { color: var(--muted); }
#settings-search:focus { border-color: var(--card-hover-border); }
.settings-nav { display: flex; flex-direction: column; gap: 3px; }
.settings-nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 9px; cursor: pointer;
  background: none; border: none; color: var(--muted); font-size: 13.5px; font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.settings-nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.settings-nav-item:hover { background: var(--bg2); color: var(--text); }
.settings-nav-item.active { background: var(--bg3); color: var(--text); }
.settings-nav-item.active svg { color: var(--p1); }
.settings-nav.searching .settings-nav-item { opacity: .45; }
.settings-content { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 24px 28px; }
.settings-content::-webkit-scrollbar { width: 6px; }
.settings-content::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
.set-panel-title {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px;
  color: var(--acc); margin: 0 0 8px;
}
.set-row { padding: 16px 0; border-bottom: 1px solid var(--card-border); }
.set-row:last-child { border-bottom: none; }
.set-row.search-hidden { display: none; }
.set-row-toggle { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.set-row-text { min-width: 0; }
.set-row-label { font-size: 14px; font-weight: 700; color: var(--text); }
.set-row-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.set-row-block .set-row-sub { margin-bottom: 13px; }
.settings-noresults { color: var(--muted); font-size: 13.5px; padding: 16px 2px; }

/* Settings → Discord */
.discord-presence-card { padding-top: 14px; }
.discord-presence-head { display: flex; align-items: center; gap: 14px; }
.discord-presence-mark {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 14px; color: #fff; background: linear-gradient(145deg, #7289da, #5865f2);
  box-shadow: 0 8px 24px rgba(88,101,242,.24);
}
.discord-presence-mark svg { width: 27px; height: 27px; }
.discord-presence-head .settings-switch { margin-left: auto; }
.discord-presence-state {
  display: flex; align-items: center; gap: 8px; margin: 16px 0 0;
  padding: 10px 12px; border: 1px solid var(--card-border); border-radius: 10px;
  background: var(--bg2); color: var(--muted); font-size: 12.5px; font-weight: 600;
}
.discord-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #7b7d89; box-shadow: 0 0 0 3px rgba(123,125,137,.12); }
.discord-status-dot.connected { background: #23a55a; box-shadow: 0 0 0 3px rgba(35,165,90,.15); }
.discord-status-dot.waiting { background: #f0b232; box-shadow: 0 0 0 3px rgba(240,178,50,.15); }
.discord-status-dot.disabled { background: #80848e; box-shadow: none; }
.discord-status-dot.error { background: #da373c; box-shadow: 0 0 0 3px rgba(218,55,60,.15); }
.discord-presence-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.discord-presence-note { margin-top: 13px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.discord-presence-note strong { color: var(--text); font-weight: 650; }

@media (max-width: 640px) {
  .settings-modal-shell { width: 96vw; height: 90vh; }
  .settings-layout { flex-direction: column; }
  .settings-rail {
    width: auto; border-right: none; border-bottom: 1px solid var(--card-border);
    gap: 10px;
  }
  /* Wrap the category chips so ALL of them are visible at once. The old
     horizontal-scroll rail hid its scrollbar, so users landed on "Appearance"
     with no cue that Playback / Content / Privacy / About existed to the right. */
  .settings-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .settings-nav-item { flex: 0 1 auto; width: auto; justify-content: center; padding: 8px 11px; }
  .settings-content { padding: 16px 16px 24px; }
  .discord-presence-head { align-items: flex-start; flex-wrap: wrap; }
  .discord-presence-head .set-row-text { flex: 1; }
}

/* NSFW filter disable confirmation */
.nsfw-confirm { max-width: 400px; width: 100%; text-align: center; padding: 28px 26px 24px; }
.nsfw-confirm-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 14px;
  background: rgba(255,138,43,.14); color: #ff9a48;
  border: 1px solid rgba(255,138,43,.3);
}
.nsfw-confirm-title { font-size: 19px; font-weight: 800; margin: 0 0 8px; }
.nsfw-confirm-body { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0 0 20px; }
.nsfw-confirm-body strong { color: var(--text); }
.nsfw-confirm-actions { display: flex; gap: 10px; justify-content: center; }
.nsfw-confirm-actions button {
  flex: 1; padding: 11px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  border: 1px solid transparent; transition: background .15s ease, filter .15s ease;
}
.nsfw-confirm-cancel { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--text); }
.nsfw-confirm-cancel:hover { background: rgba(255,255,255,.12); }
.nsfw-confirm-go { background: linear-gradient(135deg, #ff7a2b, #ff4d4d); color: #fff; }
.nsfw-confirm-go:hover { filter: brightness(1.08); }

/* ── Latest releases: nav item + hover dropdown ─────────────────────────────── */
.nav-latest { position: relative; display: flex; align-items: center; }
.nav-latest-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 10px;
  background: rgba(124,34,255,.1); border: 1px solid rgba(124,34,255,.18);
  color: var(--p3); font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-latest-btn:hover { background: rgba(124,34,255,.2); color: var(--text); }
.nav-latest-btn svg { flex-shrink: 0; }

.latest-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 340px; max-width: 86vw;
  background: rgba(18,10,34,.97); backdrop-filter: blur(14px);
  border: 1px solid rgba(124,34,255,.22); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  padding: 8px; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.latest-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.latest-dropdown-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 8px; font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.latest-dropdown-all { background: none; border: none; color: var(--p2); font-size: 11.5px; font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: 0; }
.latest-dropdown-all:hover { color: var(--p3); text-decoration: underline; }
.latest-dropdown-list { max-height: 56vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.latest-dd-item { display: flex; gap: 10px; padding: 7px 8px; border-radius: 9px; text-decoration: none; color: inherit; cursor: pointer; }
.latest-dd-item:hover { background: rgba(124,34,255,.14); }
.latest-dd-thumb { width: 42px; height: 58px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--bg3); }
.latest-dd-text { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.latest-dd-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.latest-dd-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.latest-dd-ep { background: linear-gradient(135deg, var(--p1), var(--p2)); color: #fff; padding: 1px 7px; border-radius: 999px; font-weight: 700; }
.latest-dd-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* ── Latest releases page (landscape cards) ─────────────────────────────────── */
/* .view is position:absolute/overflow:hidden, so each view must own its scroll
   container — mirror #view-home or the page clips with no scrollbar. */
#view-latest { overflow-y: auto; }
#view-latest::-webkit-scrollbar { width: 5px; }
#view-latest::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
.latest-page { max-width: 1400px; margin: 0 auto; padding: 28px 30px 60px; }
.latest-page-head { margin-bottom: 22px; }
.latest-page-title { font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin: 0 0 16px; }
.latest-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.latest-search-wrap { position: relative; flex: 1; min-width: 220px; max-width: 420px; }
.latest-search-wrap svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); }
#latest-search {
  width: 100%; padding: 10px 14px 10px 38px; border-radius: 10px;
  background: rgba(124,34,255,.08); border: 1px solid rgba(124,34,255,.18);
  color: var(--text); font-size: 13.5px; outline: none;
  transition: border-color .15s ease;
}
#latest-search:focus { border-color: rgba(124,34,255,.45); }
.latest-segs { display: flex; gap: 10px; flex-wrap: wrap; }
.latest-seg { display: flex; gap: 4px; background: rgba(124,34,255,.08); border: 1px solid rgba(124,34,255,.16); border-radius: 10px; padding: 3px; }
.latest-seg button { padding: 7px 14px; border-radius: 8px; background: none; border: none; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; }
.latest-seg button:hover { color: var(--text); }
.latest-seg button.active { background: linear-gradient(135deg, var(--p1), var(--p2)); color: #fff; }

.latest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.latest-card { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--bg3); border: 1px solid rgba(124,34,255,.12); box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .2s ease, box-shadow .2s ease; }
.latest-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(124,34,255,.28); }
.latest-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.latest-card-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,2,14,.92) 6%, rgba(5,2,14,.35) 42%, transparent 70%); }
.latest-card-title { position: absolute; left: 12px; right: 58px; bottom: 10px; font-size: 14px; font-weight: 700; color: #fff; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.latest-card-ep { position: absolute; right: 10px; bottom: 11px; background: linear-gradient(135deg, var(--p1), var(--p2)); color: #fff; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.latest-card-time { position: absolute; left: 10px; top: 10px; background: rgba(5,2,14,.7); backdrop-filter: blur(4px); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.latest-empty { text-align: center; color: var(--muted); padding: 50px 20px; font-size: 14px; }

@media (max-width: 720px) {
  .nav-latest-label { display: none; }
  .nav-latest-btn { padding: 7px 9px; }
  .latest-dropdown { width: 300px; right: -6px; }
  .latest-page { padding: 18px 14px 50px; }
  .latest-page-title { font-size: 22px; }
  .latest-controls { gap: 10px; }
  .latest-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .latest-card-title { font-size: 12px; right: 50px; }
}

/* ── Changelog / What's New (theme-aware via CSS vars) ────────────────────── */
.nav-changelog-btn { position: relative; }
.nav-changelog-dot {
  position: absolute; top: 5px; right: 7px; width: 7px; height: 7px;
  border-radius: 50%; background: linear-gradient(135deg, var(--p2), var(--p3));
  box-shadow: 0 0 0 2px rgba(18,10,34,.92), 0 0 8px rgba(124,34,255,.7);
}
#view-changelog { overflow-y: auto; }   /* each .view supplies its own scroller */
#view-changelog::-webkit-scrollbar { width: 5px; }
#view-changelog::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
.changelog-page { max-width: 880px; }
.changelog-list { display: flex; flex-direction: column; gap: 18px; }
.cl-entry {
  background: rgba(124,34,255,.06); border: 1px solid rgba(124,34,255,.16);
  border-radius: 16px; padding: 22px 24px; box-shadow: 0 6px 22px rgba(0,0,0,.18);
}
.cl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cl-titlewrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cl-title { font-size: 18px; font-weight: 800; letter-spacing: -.3px; margin: 0; }
.cl-latest {
  flex-shrink: 0; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: #fff; background: linear-gradient(135deg, var(--p1), var(--p2));
  padding: 3px 9px; border-radius: 999px;
}
.cl-date { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.cl-summary { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 10px 0 18px; }
.cl-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cl-change { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.cl-change-text { flex: 1; min-width: 0; }
.cl-chip {
  flex-shrink: 0; min-width: 62px; text-align: center; margin-top: 1px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 7px; border: 1px solid transparent;
}
.cl-chip-added    { background: rgba(52,199,89,.15);  color: #5fdc7e; border-color: rgba(52,199,89,.32); }
.cl-chip-improved { background: rgba(56,160,255,.15); color: #6db8ff; border-color: rgba(56,160,255,.32); }
.cl-chip-removed  { background: rgba(255,69,69,.14);  color: #ff8a8a; border-color: rgba(255,69,69,.3); }
.cl-chip-fixed    { background: rgba(255,176,32,.15); color: #ffc861; border-color: rgba(255,176,32,.32); }
.cl-chip-changed  { background: rgba(124,34,255,.18); color: var(--p3); border-color: rgba(124,34,255,.34); }
.cl-chip-kept     { background: rgba(150,150,170,.14); color: #b9b9c8; border-color: rgba(150,150,170,.26); }
.cl-chip-verified { background: rgba(45,200,180,.14); color: #5fd9c6; border-color: rgba(45,200,180,.3); }
@media (max-width: 720px) {
  .cl-entry { padding: 18px 16px; }
  .cl-title { font-size: 16px; }
  .cl-chip { min-width: 54px; font-size: 9.5px; }
  .cl-change { gap: 9px; }
}

/* ── Airing Schedule (theme-aware: all colour from CSS vars) ──────────────── */
#view-schedule { overflow-y: auto; }   /* each .view supplies its own scroller */
#view-schedule::-webkit-scrollbar { width: 5px; }
#view-schedule::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
.schedule-sub { color: var(--muted); font-size: 13.5px; margin: -6px 0 0; }
.schedule-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; margin: 18px 0 22px; scrollbar-width: none; }
.schedule-days::-webkit-scrollbar { display: none; }
.sched-day {
  flex: 0 0 auto; position: relative; min-width: 78px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 15px; border-radius: 12px; cursor: pointer;
  background: var(--bg2); border: 1px solid var(--card-border); color: var(--muted);
  transition: transform .15s ease, border-color .15s ease, color .15s ease;
}
.sched-day:hover { color: var(--text); transform: translateY(-2px); }
.sched-day.active {
  background: linear-gradient(135deg, var(--p1), var(--acc)); color: #fff; border-color: transparent;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.sched-day-name { font-size: 13px; font-weight: 700; }
.sched-day-date { font-size: 10.5px; opacity: .82; }
.sched-day-count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; border-radius: 999px;
  background: var(--acc); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.sched-day.active .sched-day-count { background: rgba(0,0,0,.35); }

.schedule-list { display: flex; flex-direction: column; gap: 10px; max-width: 1100px; }
.sched-row {
  display: grid; grid-template-columns: 58px 60px 1fr auto; align-items: center; gap: 14px;
  padding: 10px 14px; border-radius: 12px; cursor: pointer;
  background: var(--card-bg); border: 1px solid var(--card-border);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sched-row:hover { transform: translateX(3px); border-color: var(--card-hover-border); box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.sched-time { font-size: 13.5px; font-weight: 800; color: var(--text); text-align: center; line-height: 1.15; }
.sched-thumb { width: 60px; aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; background: var(--bg3); }
.sched-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sched-body { min-width: 0; }
.sched-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sched-total { opacity: .7; }
.sched-cd {
  justify-self: end; white-space: nowrap; font-size: 12px; font-weight: 700; color: #fff;
  padding: 5px 11px; border-radius: 999px;
  background: linear-gradient(135deg, var(--p1), var(--acc));
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}

@media (max-width: 720px) {
  .schedule-list { gap: 8px; }
  .sched-row { grid-template-columns: 48px 50px 1fr auto; gap: 10px; padding: 9px 11px; }
  .sched-thumb { width: 50px; }
  .sched-time { font-size: 12px; }
  .sched-title { font-size: 13px; }
  .sched-cd { font-size: 11px; padding: 4px 9px; }
  .sched-day { min-width: 66px; padding: 9px 12px; }
}

/* ── Profile (native, theme-aware) ───────────────────────────────────────── */
#view-profile { overflow-y: auto; }
#view-profile::-webkit-scrollbar { width: 5px; }
#view-profile::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
.profile-page { max-width: 1080px; margin: 0 auto; padding: 32px 30px 64px; }
#user-badge .user-avatar, #user-badge .user-name { cursor: pointer; }

.profile-guest { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 84px 20px; }
.profile-guest-art { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 8px 26px rgba(124,34,255,.4); margin-bottom: 6px; }
.profile-guest-title { font-size: 20px; font-weight: 800; color: var(--text); }
.profile-guest-text { font-size: 13.5px; color: var(--muted); max-width: 420px; line-height: 1.55; margin-bottom: 6px; }

.profile-header { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.profile-avatar {
  width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--p1), var(--acc));
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  position: relative; overflow: hidden;
}
.profile-avatar.editable { cursor: pointer; }
.profile-avatar.editable::after {
  content: "Change"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: .2px;
  background: rgba(0,0,0,.55); opacity: 0; transition: opacity .15s ease;
}
.profile-avatar.editable:hover::after { opacity: 1; }

/* Avatar setting (Settings → Appearance) */
.avatar-setting { display: flex; align-items: center; gap: 12px; }
.avatar-setting-preview { width: 56px; height: 56px; font-size: 22px; flex-shrink: 0; }
.avatar-upload-btn {
  padding: 8px 15px; border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: #fff; border: none; background: linear-gradient(135deg, var(--p1), var(--acc));
  transition: transform .15s ease, box-shadow .15s ease;
}
.avatar-upload-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(124,34,255,.3); }
.avatar-remove-btn {
  padding: 8px 13px; border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--muted); background: none; border: 1px solid var(--card-border);
  transition: color .15s ease, border-color .15s ease;
}
.avatar-remove-btn:hover { color: var(--text); border-color: var(--card-hover-border); }
.profile-name { font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin: 0; color: var(--text); }
.profile-since { font-size: 13px; color: var(--muted); margin-top: 4px; }

.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px; }
.profile-stat { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 18px 16px; text-align: center; }
.profile-stat-val { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.1; }
.profile-stat-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-top: 6px; }

.profile-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 30px; }
.profile-section-head h2 { font-size: 16px; font-weight: 800; margin: 0 0 14px; color: var(--text); }
.profile-empty { color: var(--muted); font-size: 13px; padding: 12px 2px; }

.profile-continue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.profile-cw-card .card-meta { font-size: 10.5px; }

.profile-comments { display: flex; flex-direction: column; gap: 10px; }
.profile-comment {
  display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start;
  padding: 11px 13px; border-radius: 11px; cursor: pointer;
  background: var(--card-bg); border: 1px solid var(--card-border);
  transition: border-color .15s ease, transform .15s ease;
}
.profile-comment:hover { border-color: var(--card-hover-border); transform: translateX(2px); }
.profile-comment-cover { width: 38px; height: 52px; border-radius: 6px; object-fit: cover; background: var(--bg3); }
.profile-comment-meta { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.profile-comment-time { opacity: .7; }
.profile-comment-text { font-size: 13px; color: var(--text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.profile-anilist { border-radius: 16px; padding: 22px 24px; background: var(--bg2); border: 1px solid var(--card-border); }
.profile-anilist-title { font-size: 16px; font-weight: 800; color: var(--text); }
.profile-anilist-sub { font-size: 12.5px; color: var(--muted); margin-top: 5px; max-width: 560px; line-height: 1.5; }
.profile-anilist-btn {
  margin-top: 14px; padding: 9px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: #fff; border: none; cursor: pointer; opacity: .92;
  background: linear-gradient(135deg, var(--p1), var(--acc)); box-shadow: 0 4px 14px rgba(0,0,0,.3);
  transition: opacity .15s ease, transform .15s ease;
}
.profile-anilist-btn:hover:not([disabled]) { opacity: 1; transform: translateY(-1px); }
.profile-anilist-btn[disabled] { opacity: .5; cursor: default; }

/* AniList — connected state */
.anilist-head { display: flex; align-items: center; gap: 13px; }
.anilist-avatar { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.anilist-id { min-width: 0; flex: 1; }
.anilist-name { font-size: 15px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 8px; }
.anilist-badge { font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--p1), var(--acc)); padding: 2px 7px; border-radius: 999px; }
.anilist-link { font-size: 11.5px; color: var(--acc); text-decoration: none; }
.anilist-link:hover { text-decoration: underline; }
.anilist-disconnect { background: none; border: 1px solid var(--card-border); color: var(--muted); font-size: 11.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.anilist-disconnect:hover { color: var(--text); border-color: var(--card-hover-border); }
.anilist-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.anilist-stat { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 14px; text-align: center; }
.anilist-stat-val { font-size: 21px; font-weight: 800; color: var(--text); }
.anilist-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-top: 4px; }
.anilist-statuses { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.anilist-pill { font-size: 12px; color: var(--muted); background: var(--card-bg); border: 1px solid var(--card-border); padding: 5px 11px; border-radius: 999px; }
.anilist-pill b { color: var(--text); font-weight: 800; }
.anilist-watching { margin-top: 18px; }
.anilist-sub-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 10px; }
.anilist-watching-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.anilist-watching-row::-webkit-scrollbar { display: none; }
.anilist-media { position: relative; flex: 0 0 auto; width: 74px; aspect-ratio: 2/3; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--bg3); border: 1px solid var(--card-border); transition: transform .15s ease; }
.anilist-media:hover { transform: translateY(-3px); }
.anilist-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anilist-media-prog { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 10px; font-weight: 700; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.85), transparent); padding: 8px 2px 3px; }

/* Clickable usernames/avatars that open a public profile */
.js-go-user { cursor: pointer; }
.comment-item-user.js-go-user:hover, .wall-item-user.js-go-user:hover { text-decoration: underline; }

/* Profile comment wall */
.profile-wall { margin-top: 30px; }
.wall-composer { display: flex; gap: 10px; margin-bottom: 16px; align-items: flex-start; }
#wall-input {
  flex: 1; resize: vertical; min-height: 42px; max-height: 160px;
  padding: 10px 13px; border-radius: 11px; font: inherit; font-size: 13.5px; line-height: 1.4;
  background: var(--bg2); border: 1px solid var(--card-border); color: var(--text); outline: none;
  transition: border-color .15s ease;
}
#wall-input:focus { border-color: var(--card-hover-border); }
.wall-post {
  flex-shrink: 0; padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer;
  color: #fff; border: none; background: linear-gradient(135deg, var(--p1), var(--acc));
  transition: transform .15s ease, box-shadow .15s ease;
}
.wall-post:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(124,34,255,.3); }
.wall-list { display: flex; flex-direction: column; gap: 12px; }
.wall-item { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: start; }
.wall-item-avatar { width: 34px; height: 34px; font-size: 14px; flex-shrink: 0; }
.wall-item-body { min-width: 0; }
.wall-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.wall-item-user { font-size: 13px; font-weight: 700; color: var(--text); }
.wall-item-time { font-size: 11.5px; color: var(--muted); }
.wall-del {
  margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 5px; border-radius: 5px; opacity: 0; transition: opacity .15s ease, color .15s ease;
}
.wall-item:hover .wall-del { opacity: 1; }
.wall-del:hover { color: var(--bad, #ff5470); }
.wall-item-text { font-size: 13.5px; color: var(--text); line-height: 1.45; word-break: break-word; }

/* ── Notifications (bell + dropdown panel) ───────────────────────────────── */
.nav-notif { position: relative; }
.notif-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  background: none; border: none; color: var(--muted);
  transition: color .15s ease, background .15s ease;
}
.notif-btn:hover { color: var(--text); background: var(--bg2); }
.notif-badge {
  position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff; border-radius: 999px;
  background: linear-gradient(135deg, var(--p1), var(--acc)); box-shadow: 0 0 0 2px rgba(0,0,0,.45);
}
.notif-panel {
  position: absolute; top: calc(100% + 10px); right: -6px; width: 370px; max-width: 92vw;
  background: var(--bg1); border: 1px solid var(--card-border); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5); z-index: 200; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.notif-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--card-border);
  font-weight: 700; font-size: 14px; color: var(--text);
}
.notif-readall { background: none; border: none; color: var(--acc); font-size: 12px; font-weight: 600; cursor: pointer; }
.notif-readall:hover { text-decoration: underline; }
.notif-list { max-height: 60vh; overflow-y: auto; }
.notif-empty { padding: 30px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.notif-item {
  display: grid; grid-template-columns: 34px 1fr; gap: 11px; padding: 12px 16px; cursor: pointer;
  border-bottom: 1px solid var(--card-border); transition: background .12s ease;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg2); }
.notif-item.unread { border-left: 3px solid var(--p1); padding-left: 13px; }
.notif-avatar { width: 34px; height: 34px; font-size: 14px; }
.notif-item-body { min-width: 0; }
.notif-item-text { font-size: 13px; color: var(--text); line-height: 1.4; }
.notif-item-text b { font-weight: 700; }
.notif-item-snippet { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-item-time { font-size: 11px; color: var(--muted); margin-top: 3px; }

@media (max-width: 720px) {
  .notif-panel { position: fixed; top: 56px; right: 8px; left: 8px; width: auto; }
}

@media (max-width: 760px) {
  .profile-page { padding: 22px 14px 50px; }
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .profile-cols { grid-template-columns: 1fr; gap: 22px; }
  .profile-name { font-size: 22px; }
  .profile-avatar { width: 60px; height: 60px; font-size: 26px; }
}

/* ── Final component cascade ───────────────────────────────────────────────
   Some feature sections are declared late in this file. Keep these finishing
   rules last so those pages share the same theme-safe visual language. */
.user-area { gap: 6px; }

.hero-slide-bg {
  transform: scale(1.015);
  transition: transform 7s ease-out, filter var(--motion-normal) ease;
}
.hero-slide:hover .hero-slide-bg { transform: scale(1.035); }
.hero-slide-content { max-width: 720px; }
.hero-slide-title { letter-spacing: -.045em; }
.hero-slide-meta .meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(0,0,0,.34);
  color: rgba(255,255,255,.9);
  font-size: 11.5px;
  font-weight: 650;
  backdrop-filter: blur(8px);
}
.hero-watch-btn {
  gap: 8px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  transform: translateY(0);
}
.hero-watch-btn:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(0,0,0,.36);
}
.hero-watch-btn svg { margin-right: 0 !important; }
.hero-indicator {
  position: relative;
  width: 30px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.hero-indicator::before,
.hero-indicator::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: width var(--motion-normal) var(--ease-standard),
              background var(--motion-normal) ease;
}
.hero-indicator::before { background: rgba(255,255,255,.34); }
.hero-indicator::after { background: transparent; }
.hero-indicator.active::before {
  width: 26px;
  background: rgba(255,255,255,.2);
}
.hero-indicator.active {
  background: transparent;
  transform: none;
}
.hero-indicator.active::after {
  width: 26px;
  background: var(--p2);
  transform: translate(-50%, -50%) scaleX(0);
  transform-origin: left center;
  animation: hero-progress 7s linear forwards;
}

@keyframes hero-progress {
  to { transform: translate(-50%, -50%) scaleX(1); }
}

@keyframes hero-copy-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-slide.is-active .hero-slide-title,
.hero-slide.is-active .hero-slide-meta,
.hero-slide.is-active .hero-slide-synopsis,
.hero-slide.is-active .hero-watch-btn {
  animation: hero-copy-in .52s var(--ease-emphasized) backwards;
}
.hero-slide.is-active .hero-slide-meta { animation-delay: 55ms; }
.hero-slide.is-active .hero-slide-synopsis { animation-delay: 100ms; }
.hero-slide.is-active .hero-watch-btn { animation-delay: 145ms; }

@keyframes home-section-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.home-row:not(.hidden),
.watchtime-section:not(.hidden) {
  animation: home-section-in .48s var(--ease-standard) both;
}

.ranked-item:focus-visible,
.comment-card:focus-visible {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: var(--focus-ring), var(--shadow-card);
}

.site-footer {
  border-top-color: var(--border-subtle);
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--surface-1) 84%, transparent));
}
.footer-icon {
  background: var(--surface-card);
  border-color: var(--border-subtle);
}
.footer-icon:hover {
  background: var(--surface-hover);
  border-color: var(--accent-border);
}

.settings-modal-shell,
.modal {
  background: color-mix(in srgb, var(--surface-1) 96%, transparent);
  border-color: var(--border-subtle);
}
.settings-head,
.settings-rail,
.set-row {
  border-color: var(--border-subtle);
}
.settings-nav-item:hover { background: var(--surface-hover); }
.settings-nav-item.active { background: var(--surface-active); }
.theme-btn {
  background: var(--surface-card);
  border-color: var(--border-subtle);
}
.theme-btn:hover { background: var(--surface-hover); }
.theme-btn.active {
  background: var(--surface-active);
  border-color: var(--accent-border);
  box-shadow: 0 0 0 1px var(--p2), var(--shadow-card);
}
.settings-link-btn {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}
.settings-switch,
.filter-switch {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.nav-latest-btn {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}
.nav-latest-btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent-border);
  color: var(--text-primary);
}
.latest-dropdown {
  background: color-mix(in srgb, var(--surface-1) 96%, transparent);
  border-color: var(--border-subtle);
}
.latest-dd-item:hover { background: var(--surface-hover); }
#latest-search,
.latest-seg {
  background: var(--surface-card);
  border-color: var(--border-subtle);
}
.latest-card {
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-card);
}
.latest-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--card-hover-glow);
}

.cl-entry {
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-card) 58%);
  border-color: var(--border-subtle);
}

.sched-day,
.sched-row,
.profile-stat,
.profile-comment,
.profile-anilist,
.notif-panel {
  background: var(--surface-card);
  border-color: var(--border-subtle);
}
.sched-row:hover,
.profile-comment:hover {
  border-color: var(--border-strong);
}
.notif-panel {
  background: color-mix(in srgb, var(--surface-1) 96%, transparent);
}

.watch-sidebar,
.watch-info,
.watch-comments {
  background: var(--surface-card);
  border-color: var(--border-subtle);
}
.ep-rich:hover { background: var(--surface-hover); }
.ep-rich.active {
  background: var(--surface-active);
  box-shadow: inset 0 0 0 1px var(--accent-border), 0 8px 22px rgba(0,0,0,.18);
}
.comments-sort { background: var(--accent-soft); }
.comments-sort-btn.active {
  background: var(--p1);
  color: var(--text-on-accent);
}
.comments-icon-wrap {
  background: var(--accent-soft);
}
.ctrl-menu,
.filter-panel,
.autoplay-card,
.player-toast,
.skip-btn,
.dtap-feedback-inner,
.pause-indicator-icon {
  background: color-mix(in srgb, var(--surface-1) 90%, transparent);
  border-color: var(--accent-border);
}
.ctrl-menu::-webkit-scrollbar-thumb,
.ep-rich-list::-webkit-scrollbar-thumb,
.party-messages::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}
#cc-menu .menu-opt:first-child {
  background: var(--surface-1);
  border-bottom-color: var(--border-subtle);
}
.menu-opt:hover { background: var(--surface-hover); }
.seek-track,
.filter-slider,
#vol-slider {
  --track-rest: color-mix(in srgb, var(--p1) 16%, transparent);
}

@media (max-width: 1120px) {
  .nav-latest-label { display: none; }
  .nav-latest-btn { padding-inline: 9px; }
  .search-wrap { max-width: 460px; }
}

@media (max-width: 860px) {
  header { gap: 8px; padding-inline: 12px; }
  .logo-img { width: 32px; height: 32px; }
  .search-wrap input { padding-left: 12px; }
  .user-area { gap: 3px; }
  .settings-btn,
  .notif-btn { width: 34px; height: 34px; padding: 0; }
}

@media (max-width: 720px) {
  .hero-slide-bg { transform: none; }
  .hero-slide-meta .meta-pill { min-height: 22px; padding: 3px 8px; font-size: 10.5px; }
  .hero-watch-btn { border-radius: 9px; }
  .hero-indicators { gap: 0; }
  .hero-indicator { width: 28px; height: 28px; }
  .hero-indicator::before,
  .hero-indicator::after { width: 7px; height: 7px; }
  .hero-indicator.active::before,
  .hero-indicator.active::after { width: 22px; }
  .latest-comments-track { scroll-snap-type: x proximity; }
  .comment-card {
    flex: 0 0 min(86vw, 320px);
    width: min(86vw, 320px);
    min-width: 0;
    max-width: calc(100vw - 30px);
    scroll-snap-align: start;
  }
  .latest-page,
  .profile-page { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide-bg,
  .hero-slide:hover .hero-slide-bg { transform: none; }
  .hero-indicator.active::after,
  .hero-slide.is-active .hero-slide-title,
  .hero-slide.is-active .hero-slide-meta,
  .hero-slide.is-active .hero-slide-synopsis,
  .hero-slide.is-active .hero-watch-btn,
  .home-row:not(.hidden),
  .watchtime-section:not(.hidden) { animation: none; }
}

/* Theme-leak cleanup for legacy feature rules that still carry the original
   purple literals earlier in the stylesheet. */
#view-search::-webkit-scrollbar-thumb,
.watch-scroll::-webkit-scrollbar-thumb,
.detail-scroll::-webkit-scrollbar-thumb,
.ctrl-menu::-webkit-scrollbar-thumb,
.ep-rich-list::-webkit-scrollbar-thumb,
.party-messages::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

.row-empty-logo,
.profile-guest-art {
  box-shadow: 0 8px 24px var(--accent-shadow);
}
.row-empty-btn:hover,
.sign-in-btn:hover,
.detail-watch-btn:hover,
.avatar-upload-btn:hover,
.wall-post:hover {
  box-shadow: 0 8px 22px var(--accent-shadow);
}

.party-panel-head,
.party-input {
  border-color: var(--border-subtle);
}
.party-panel-count,
.party-host-badge,
.party-msg,
.autoskip-state,
.comments-sort,
.auth-prompt,
.server-hint,
.welcome-feature-icon {
  background: var(--accent-soft);
}
.party-invite-link,
.party-input input,
.ep-search-wrap input,
.auth-form input {
  border-color: var(--border-subtle);
}
.party-dot {
  box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 62%, transparent);
}

.watch-info-cover {
  border-color: var(--border-subtle);
}
.watch-info-cover:hover {
  box-shadow: 0 16px 40px var(--accent-shadow);
}
.comment-vote:hover {
  background: var(--surface-hover);
}
.comment-vote.like.active {
  background: var(--surface-active);
  border-color: var(--accent-border);
}
.watch-comments-input input {
  border-bottom-color: var(--border-subtle);
}
.watch-comments-input input:focus {
  border-bottom-color: var(--p1);
  box-shadow: none;
}

.ep-rich:hover { background: var(--surface-hover); }
.ep-rich.active {
  background: var(--surface-active);
  box-shadow: inset 0 0 0 1px var(--accent-border), 0 8px 22px rgba(0,0,0,.18);
}
.ep-rich-thumb .ep-rich-numbadge {
  text-shadow: 0 2px 8px rgba(0,0,0,.72), 0 0 16px var(--accent-shadow);
}
.ep-rich.unreleased:hover { background: color-mix(in srgb, var(--p1) 5%, transparent); }

.ring {
  border-color: var(--accent-soft);
  border-top-color: var(--p2);
}
.dtap-back {
  background: radial-gradient(ellipse at left center, var(--accent-medium), transparent 55%);
}
.dtap-fwd {
  background: radial-gradient(ellipse at right center, var(--accent-medium), transparent 55%);
}
.dtap-feedback-inner,
.pause-indicator-icon,
.player-toast,
.skip-btn,
.autoplay-card {
  border-color: var(--accent-border);
}
.pause-indicator-icon {
  box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 0 0 1px var(--accent-soft);
}
.skip-btn:hover {
  border-color: var(--p2);
  background: color-mix(in srgb, var(--surface-1) 92%, var(--p1) 8%);
  box-shadow: 0 12px 38px rgba(0,0,0,.6), 0 0 0 4px var(--accent-soft);
}
.autoplay-track,
.seek-track {
  background: var(--accent-soft);
}
.seek-buffered {
  background: color-mix(in srgb, var(--p2) 24%, transparent);
}
.seek-played {
  box-shadow: 0 0 10px var(--accent-shadow);
}
.seek-thumb,
#vol-slider::-webkit-slider-thumb,
.filter-slider::-webkit-slider-thumb {
  box-shadow: 0 0 8px var(--accent-shadow);
}

.ctrl-quality #quality-btn.flash {
  box-shadow: 0 0 0 1px var(--accent-border), 0 0 14px var(--accent-shadow);
}
.controls-bar,
.player-controls .controls-bar {
  border-color: var(--border-subtle);
}
.ctrl-btn:hover,
.ctrl-btn.on {
  background: var(--surface-hover);
}
.ctrl-btn.on {
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
.ctrl-sep,
.filter-divider { background: var(--border-subtle); }
.ctrl-menu,
.filter-panel {
  border-color: var(--border-subtle);
}
#cc-menu .menu-opt:first-child {
  border-bottom-color: var(--border-subtle);
}
.menu-opt:hover,
#cc-menu .menu-opt:first-child:hover {
  background: var(--surface-hover);
}

.subsize-btn {
  background: color-mix(in srgb, var(--p1) 6%, transparent);
  border-color: var(--border-subtle);
}
.subsize-btn:hover { background: var(--surface-hover); }
.subsize-btn.active {
  background: var(--surface-active);
  border-color: var(--accent-border);
}
#vol-slider {
  background: linear-gradient(90deg, var(--p1) var(--vp, 100%), var(--accent-soft) var(--vp, 100%));
}
.filter-slider {
  background: linear-gradient(90deg, var(--p1) var(--fp, 50%), var(--accent-soft) var(--fp, 50%));
}

.modal-head,
.auth-tabs {
  border-color: var(--border-subtle);
}
kbd {
  border-color: var(--border-subtle);
}
.user-badge {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}
.auth-close:hover { background: var(--surface-hover); }

.detail-cover {
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px var(--border-subtle);
}
.detail-meta span.meta-pill,
.genre-chip,
.ep-tile {
  background-color: var(--accent-soft);
  border-color: var(--border-subtle);
}
.ep-tile:hover {
  border-color: var(--accent-border);
  background: var(--surface-hover);
}

.welcome-hero-wrap {
  border-bottom-color: var(--border-subtle);
}
.settings-link-btn,
.welcome-feature-icon {
  border-color: var(--accent-border);
}
.nav-changelog-dot {
  box-shadow: 0 0 0 2px var(--surface-1), 0 0 8px var(--accent-shadow);
}
.latest-card:hover {
  box-shadow: var(--card-hover-glow);
}
.cl-chip-changed {
  background: var(--surface-active);
  border-color: var(--accent-border);
}
.profile-avatar.editable:hover,
.anilist-media:hover {
  will-change: transform;
}

@media (max-width: 720px) {
  .latest-dropdown,
  .notif-panel,
  .player-controls .controls-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Derived tokens must be recomputed on the same element that overrides the
   palette. If they only inherit from :root, var(--p1) resolves to Purple
   before a body theme gets a chance to replace it. */
body.theme-dark,
body.theme-red,
body.theme-oled,
body.theme-cyan,
body.theme-sakura,
body.theme-emerald,
body.theme-midnight {
  --surface-0: var(--bg0);
  --surface-1: var(--bg1);
  --surface-2: var(--bg2);
  --surface-3: var(--bg3);
  --surface-card: var(--card-bg);
  --surface-glass: var(--glass-bg);
  --surface-hover: color-mix(in srgb, var(--p1) 12%, transparent);
  --surface-active: color-mix(in srgb, var(--p1) 20%, transparent);
  --surface-input: color-mix(in srgb, var(--bg2) 82%, transparent);
  --border-subtle: var(--card-border);
  --border-strong: var(--card-hover-border);
  --accent-soft: color-mix(in srgb, var(--p1) 14%, transparent);
  --accent-medium: color-mix(in srgb, var(--p1) 28%, transparent);
  --accent-border: color-mix(in srgb, var(--p1) 38%, transparent);
  --accent-shadow: color-mix(in srgb, var(--p1) 30%, transparent);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--p1) 24%, transparent);
}

.detail-watch-btn {
  flex: 0 0 auto;
  min-width: 210px;
}

@media (max-width: 720px) {
  .detail-watch-btn {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
}

/* Visual refinement: shared browse cards, search shell, detail episodes, and
   watch-page utility surfaces. These rules intentionally stay component-scoped. */
.logo.route-active {
  filter: drop-shadow(0 0 12px var(--accent-shadow));
}

.nav-latest-btn.route-active {
  color: var(--text-primary);
  background: var(--surface-active);
  border-color: var(--accent-border);
  box-shadow: inset 0 -2px 0 var(--p2);
}

.hero-nav {
  position: absolute;
  right: 4%;
  bottom: 52px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(0,0,0,.36);
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero-nav-btn {
  width: 34px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,.78);
  cursor: pointer;
  transition: color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.hero-nav-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

.hero-count {
  min-width: 42px;
  color: rgba(255,255,255,.82);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.media-card {
  isolation: isolate;
}

.media-card:focus-visible,
.ep-tile:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow-card);
  border-color: var(--border-strong);
}

.card-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 7px;
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
}

.card-meta-row span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.card-meta-row span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-right: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-secondary) 55%, transparent);
}

.card-meta-row .card-score {
  color: var(--ok);
}

.media-card--browse {
  overflow: hidden;
  transform: translateY(0);
  box-shadow: none;
}

.media-card--browse:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}

.media-card--browse .card-img-wrap {
  border-bottom: 1px solid var(--border-subtle);
}

.media-card--browse .card-foot {
  position: static;
  min-height: 78px;
  padding: 11px 11px 12px;
  justify-content: flex-start;
  background: var(--surface-card);
}

.media-card--browse .card-title {
  color: var(--text-primary);
  font-size: 12.5px;
}

.card-open-cue {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 2;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.64);
  color: rgba(255,255,255,.9);
  font-size: 10px;
  font-weight: 750;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease;
  backdrop-filter: blur(8px);
}

.media-card--browse:hover .card-open-cue,
.media-card--browse:focus-visible .card-open-cue {
  opacity: 1;
  transform: translateY(0);
}

.search-page {
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  padding: 20px 12px 54px;
}

.search-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  padding: 8px 2px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.page-eyebrow {
  margin-bottom: 6px;
  color: var(--p2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.search-page-title {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -.04em;
}

.search-page-summary {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.search-sort {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  background: var(--surface-card);
}

.search-sort button {
  padding: 7px 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.search-sort button:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.search-sort button.active {
  color: var(--text-primary);
  background: var(--surface-active);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

#view-search {
  padding: 0 20px;
}

#results-grid {
  max-width: none;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: clamp(14px, 1.7vw, 24px);
}

.detail-ep-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.ep-tile {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  border-radius: 11px;
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: 0 1px 0 rgba(255,255,255,.025);
}

.ep-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}

.ep-tile-visual {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 20%, var(--accent-medium), transparent 38%),
    var(--surface-2);
}

.ep-tile-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform var(--motion-normal) var(--ease-standard), filter var(--motion-normal) ease;
}

.ep-tile:hover .ep-tile-visual img {
  transform: scale(1.035);
}

.ep-tile-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.58), transparent 58%);
}

.ep-tile-badge,
.ep-tile-watched,
.ep-tile-lock {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0,0,0,.64);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
}

.ep-tile-badge {
  left: 8px;
  bottom: 8px;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}

.ep-tile-watched,
.ep-tile-lock {
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.ep-tile-watched {
  color: var(--ok);
}

.ep-tile-prog {
  z-index: 3;
  height: 3px;
}

.ep-tile-copy {
  min-width: 0;
  padding: 10px 11px 12px;
}

.ep-tile-title {
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-tile-meta {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 550;
}

.ep-tile.watched .ep-tile-visual img {
  filter: saturate(.7) brightness(.72);
}

.ep-tile.unreleased,
.ep-tile.unreleased:hover {
  opacity: .62;
  background: var(--surface-card);
  border-color: var(--border-subtle);
  transform: none;
  box-shadow: none;
}

.watch-episode-bar {
  margin-top: 12px;
  padding: 14px;
  gap: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-card);
  box-shadow: 0 1px 0 rgba(255,255,255,.025);
}

#watch-ep-title {
  flex-basis: 100%;
  font-size: 18px;
}

.watch-episode-bar .type-pills {
  margin-left: auto;
}

.party-btn,
.autoskip-toggle,
.type-pill {
  background: var(--surface-input);
  border-color: var(--border-subtle);
}

.watch-sidebar {
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
}

.watch-sidebar-head {
  padding: 3px 4px 9px;
}

.watch-sidebar-title {
  font-size: 15px;
  letter-spacing: -.01em;
}

.ep-search-wrap input {
  background: var(--surface-input);
  border-color: var(--border-subtle);
}

.ep-search-wrap input:focus {
  border-color: var(--accent-border);
  box-shadow: var(--focus-ring);
}

@keyframes media-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

#results-grid .media-card,
.detail-ep-grid .ep-tile {
  animation: media-card-in .34s var(--ease-standard) backwards;
}

#results-grid .media-card:nth-child(2n),
.detail-ep-grid .ep-tile:nth-child(2n) { animation-delay: 25ms; }
#results-grid .media-card:nth-child(3n),
.detail-ep-grid .ep-tile:nth-child(3n) { animation-delay: 50ms; }

@media (max-width: 720px) {
  .hero-nav {
    right: 14px;
    bottom: 48px;
    padding: 3px;
    backdrop-filter: none;
  }
  .hero-nav-btn { width: 30px; height: 28px; }
  .hero-count { min-width: 36px; font-size: 10px; }

  #view-search { padding: 0 10px; }
  .search-page { padding: 14px 2px 40px; }
  .search-page-head {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 16px;
  }
  .search-sort {
    align-self: stretch;
    overflow-x: auto;
  }
  .search-sort button { flex: 1; white-space: nowrap; }
  #results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
  }
  .media-card--browse .card-foot {
    min-height: 70px;
    padding: 9px 9px 10px;
  }
  .card-open-cue { display: none; }
  .card-meta-row { gap: 3px 6px; font-size: 9.5px; }
  .card-meta-row span + span::before { margin-right: 6px; }

  .detail-ep-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ep-tile {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
  }
  .ep-tile-visual { aspect-ratio: 16 / 9; }
  .ep-tile-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .ep-tile-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .watch-episode-bar {
    margin-top: 10px;
    padding: 12px;
  }
  #watch-ep-title { font-size: 16px; }
  .watch-episode-bar .type-pills {
    margin-left: 0;
  }
  .watch-sidebar { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  #results-grid .media-card,
  .detail-ep-grid .ep-tile {
    animation: none;
  }
  .media-card--browse:hover,
  .ep-tile:hover,
  .hero-nav-btn:hover {
    transform: none;
  }
}

/* Player focus polish: roomy theater metadata, Lights Out, and motion fallback. */
.lights-out-layer {
  --spot-top: 0px;
  --spot-left: 0px;
  --spot-right: 100vw;
  --spot-bottom: 100vh;
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
}

.lights-out-pane {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0,0,0,.91);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity .58s cubic-bezier(.2,.75,.2,1);
}

.lights-out-top {
  top: 0;
  left: 0;
  width: 100%;
  height: var(--spot-top);
}

.lights-out-bottom {
  top: var(--spot-bottom);
  left: 0;
  right: 0;
  bottom: 0;
}

.lights-out-left {
  top: var(--spot-top);
  left: 0;
  width: var(--spot-left);
  height: calc(var(--spot-bottom) - var(--spot-top));
}

.lights-out-right {
  top: var(--spot-top);
  left: var(--spot-right);
  right: 0;
  height: calc(var(--spot-bottom) - var(--spot-top));
}

body.lights-out .lights-out-pane {
  opacity: 1;
  pointer-events: auto;
}

body.lights-out #btn-lights {
  color: var(--p2);
  background: var(--surface-hover);
  box-shadow: inset 0 0 0 1px var(--accent-border), 0 0 16px var(--accent-shadow);
}

body.lights-out .amb {
  opacity: 0 !important;
}

.theater-animating .video-box,
.theater-animating .watch-sidebar,
.theater-animating .watch-episode-bar {
  will-change: transform, opacity;
}

@media (min-width: 721px) {
  #view-player.theater .watch-episode-bar {
    width: min(1480px, calc(100% - 72px));
    max-width: 1480px;
    margin: 20px auto 0;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: max-content max-content minmax(24px, 1fr) auto;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
  }

  #view-player.theater #watch-ep-title {
    grid-column: 1 / -1;
    margin: 0 0 3px;
    font-size: clamp(17px, 1.25vw, 20px);
  }

  #view-player.theater .party-btn {
    grid-column: 1;
  }

  #view-player.theater .autoskip-toggle {
    grid-column: 2;
  }

  #view-player.theater .watch-episode-bar .type-pills {
    grid-column: 4;
    width: min(260px, 28vw);
    margin-left: 0;
  }

  #view-player.theater .party-btn,
  #view-player.theater .autoskip-toggle {
    min-height: 34px;
  }
}

@media (min-width: 721px) and (max-width: 980px) {
  #view-player.theater .watch-episode-bar {
    grid-template-columns: 1fr 1fr;
  }
  #view-player.theater #watch-ep-title {
    grid-column: 1 / -1;
  }
  #view-player.theater .party-btn,
  #view-player.theater .autoskip-toggle {
    grid-column: auto;
    justify-content: center;
  }
  #view-player.theater .watch-episode-bar .type-pills {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 720px) {
  #btn-lights {
    display: inline-flex;
  }

  .lights-out-pane {
    background: rgba(0,0,0,.94);
    transition-duration: .42s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lights-out-pane {
    transition-duration: .01ms;
  }
}

/* Mobile home: keep the second-row search affordance without laying a tinted
   glass panel over the featured artwork. The outline, heavier copy, and text
   shadow preserve legibility as each hero image moves beneath it. Other views
   retain the normal filled search surface. */
@media (max-width: 720px) {
  body.home-active .search-wrap input,
  body.home-active .search-wrap input:focus {
    background: transparent;
    border-color: rgba(255,255,255,.26);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #fff;
    caret-color: #fff;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0,0,0,.92);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 8px 26px rgba(0,0,0,.12);
  }

  body.home-active .search-wrap input::placeholder {
    color: rgba(255,255,255,.78);
    font-weight: 600;
    opacity: 1;
  }

  body.home-active .search-wrap button {
    color: rgba(255,255,255,.9);
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.9));
  }
}

/* ── Discovery journey: search → detail ──────────────────────────────────
   Motion is confined to the app's main canvas so the global header remains a
   stable anchor while users move between browsing and a title page. */
#main { view-transition-name: discovery-main; }

@keyframes discovery-forward-out {
  to { opacity: 0; transform: translateX(-14px) scale(.992); }
}
@keyframes discovery-forward-in {
  from { opacity: 0; transform: translateX(20px) scale(.994); }
}
@keyframes discovery-back-out {
  to { opacity: 0; transform: translateX(14px) scale(.992); }
}
@keyframes discovery-back-in {
  from { opacity: 0; transform: translateX(-20px) scale(.994); }
}

html[data-discovery-direction="forward"]::view-transition-old(discovery-main) {
  animation: discovery-forward-out .18s ease-in both;
}
html[data-discovery-direction="forward"]::view-transition-new(discovery-main) {
  animation: discovery-forward-in .34s var(--ease-emphasized) both;
}
html[data-discovery-direction="back"]::view-transition-old(discovery-main) {
  animation: discovery-back-out .18s ease-in both;
}
html[data-discovery-direction="back"]::view-transition-new(discovery-main) {
  animation: discovery-back-in .34s var(--ease-emphasized) both;
}

/* Search loading uses the same night-sky shimmer language as the home feed,
   but matches the final browse-card geometry to prevent layout jumps. */
.search-skeleton {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  animation: media-card-in .34s var(--ease-standard) backwards;
}
.search-skeleton-poster {
  aspect-ratio: 2 / 3;
  background:
    linear-gradient(105deg, transparent 35%, rgba(255,255,255,.07) 48%, transparent 61%),
    radial-gradient(circle at 28% 18%, var(--accent-medium), transparent 36%),
    var(--surface-2);
  background-size: 220% 100%, 100% 100%, 100% 100%;
  animation: sk-shimmer 1.45s ease-in-out infinite;
}
.search-skeleton-copy {
  min-height: 78px;
  padding: 13px 11px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.search-skeleton-copy span {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-secondary) 16%, transparent);
}
.search-skeleton-copy span:first-child { width: 78%; }
.search-skeleton-copy span:last-child { width: 42%; }

.media-card--browse .card-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.42), transparent 48%);
  opacity: .25;
  transition: opacity var(--motion-normal) ease;
  pointer-events: none;
}
.media-card--browse:hover .card-img-wrap::after,
.media-card--browse:focus-visible .card-img-wrap::after { opacity: .72; }
.media-card--browse:active { transform: translateY(-1px) scale(.985); }
.card-open-cue { display: inline-flex; align-items: center; gap: 5px; }

/* Detail hierarchy and return navigation. */
.detail-back-btn {
  position: absolute;
  top: 18px;
  left: max(18px, calc((100% - 1200px) / 2 + 32px));
  z-index: 3;
  min-height: 38px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  color: rgba(255,255,255,.9);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background var(--motion-fast) ease,
              border-color var(--motion-fast) ease,
              transform var(--motion-fast) ease;
}
.detail-back-btn:hover {
  background: rgba(0,0,0,.64);
  border-color: rgba(255,255,255,.32);
  transform: translateX(-2px);
}

@media (min-width: 721px) {
  .detail-banner { height: clamp(350px, 36vw, 430px); }
  .detail-head { margin-top: -122px; gap: 32px; }
  .detail-cover { width: 215px; }
  .detail-info { padding-top: 118px; }
  #detail-title {
    max-width: 920px;
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.05;
  }
}

.detail-banner img {
  transform: scale(1.01);
  transition: transform 1.2s var(--ease-standard), filter var(--motion-normal) ease;
}
.view-detail.detail-ready .detail-banner img { transform: scale(1); }
.detail-banner-fade {
  background:
    linear-gradient(to top, var(--bg0) 0%, color-mix(in srgb, var(--bg0) 72%, transparent) 28%, transparent 72%),
    linear-gradient(to right, rgba(0,0,0,.74) 0%, rgba(0,0,0,.18) 55%, transparent 78%);
}
.detail-synopsis {
  max-width: 860px;
  color: color-mix(in srgb, var(--text-primary) 82%, var(--text-secondary));
}
.detail-section {
  padding-top: 30px;
  border-top: 1px solid var(--border-subtle);
}
.detail-section .section-header { margin-bottom: 16px; }
.detail-section .section-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

@keyframes detail-copy-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.view-detail.detail-ready .detail-cover,
.view-detail.detail-ready .detail-info > * {
  animation: detail-copy-in .42s var(--ease-standard) backwards;
}
.view-detail.detail-ready .detail-info > :nth-child(2) { animation-delay: 35ms; }
.view-detail.detail-ready .detail-info > :nth-child(3) { animation-delay: 65ms; }
.view-detail.detail-ready .detail-info > :nth-child(4) { animation-delay: 90ms; }
.view-detail.detail-ready .detail-info > :nth-child(5) { animation-delay: 120ms; }

/* Episode tiles expose a consistent play cue and enter in reading order. */
.ep-tile-play {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 2;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  background: rgba(0,0,0,.62);
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -45%) scale(.86);
  box-shadow: 0 8px 24px rgba(0,0,0,.34);
  backdrop-filter: blur(8px);
  transition: opacity var(--motion-fast) ease,
              transform var(--motion-normal) var(--ease-emphasized);
}
.ep-tile:hover .ep-tile-play,
.ep-tile:focus-visible .ep-tile-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ep-tile:hover .ep-tile-shade,
.ep-tile:focus-visible .ep-tile-shade {
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.06) 70%);
}
.detail-ep-grid .ep-tile { animation-delay: 0ms; }

@media (max-width: 720px) {
  .detail-back-btn {
    top: 12px;
    left: 12px;
    min-height: 36px;
    padding: 7px 11px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .detail-banner { height: 210px; }
  #detail-title { font-size: 1.62rem; line-height: 1.08; }
  .detail-section { padding-top: 22px; }
  .detail-section .section-title { font-size: 16px; }
  .media-card--browse:active { transform: scale(.98); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-discovery-direction]::view-transition-old(discovery-main),
  html[data-discovery-direction]::view-transition-new(discovery-main),
  .search-skeleton,
  .search-skeleton-poster,
  .view-detail.detail-ready .detail-cover,
  .view-detail.detail-ready .detail-info > * { animation: none !important; }
  .detail-banner img,
  .ep-tile-play { transition: none; }
}

/* ── Cinematic home hero v2 ───────────────────────────────────────────────
   Featured art is a native 16:9 TMDB original. Keep it on the pixel grid:
   no CSS brightness filter and no permanent scale transform, both of which
   made detailed 4K line art look soft after GPU resampling. */
.home-hero {
  height: clamp(680px, 100svh, 1080px);
  min-height: 680px;
  max-height: 1080px;
  flex: 0 0 auto;
}

.hero-slide {
  --hero-accent: #9b5fff;
}

.hero-slide-bg,
.hero-slide:hover .hero-slide-bg {
  filter: none;
  transform: none;
  image-rendering: auto;
  transition: opacity var(--motion-normal) ease;
}

.hero-slide-gradient {
  background:
    linear-gradient(to top, var(--bg0) 0%, rgba(0,0,0,.84) 17%, rgba(0,0,0,.22) 54%, transparent 76%),
    linear-gradient(to right, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 27%, rgba(0,0,0,.28) 54%, transparent 78%),
    radial-gradient(circle at 17% 72%, color-mix(in srgb, var(--hero-accent) 22%, transparent), transparent 35%);
}

.hero-slide-content {
  left: clamp(34px, 5vw, 96px);
  bottom: clamp(78px, 10vh, 120px);
  width: min(88%, 880px);
  max-width: 880px;
}

.hero-slide-title {
  max-width: 850px;
  margin-bottom: 18px;
  color: #fff;
  color: color-mix(in srgb, var(--hero-accent) 62%, white 38%);
  font-size: clamp(2.55rem, 4.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -.05em;
  text-wrap: balance;
  text-shadow: 0 3px 20px rgba(0,0,0,.86), 0 0 34px color-mix(in srgb, var(--hero-accent) 18%, transparent);
}

.hero-slide-meta {
  gap: 9px 16px;
  min-height: 26px;
  margin-bottom: 18px;
}

.hero-status,
.hero-fact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  color: rgba(255,255,255,.9);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
}

.hero-status {
  color: color-mix(in srgb, var(--hero-accent) 70%, white 30%);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hero-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.hero-status-releasing { color: #53e897; }
.hero-status-upcoming { color: #ffca68; }
.hero-status-finished { color: #b6b2c2; }
.hero-status-hiatus,
.hero-status-cancelled { color: #ff7e8c; }

.hero-fact svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .88;
}

.hero-score {
  color: color-mix(in srgb, var(--hero-accent) 68%, white 32%);
  font-weight: 800;
}

.hero-slide-synopsis {
  max-width: 790px;
  margin-bottom: 25px;
  color: rgba(255,255,255,.88);
  font-size: 15px;
  line-height: 1.58;
  -webkit-line-clamp: 3;
  text-shadow: 0 2px 9px rgba(0,0,0,.92);
}

.hero-watch-btn {
  border-color: color-mix(in srgb, var(--hero-accent) 30%, white 70%);
  box-shadow: 0 10px 32px rgba(0,0,0,.34), 0 0 22px color-mix(in srgb, var(--hero-accent) 15%, transparent);
}

.hero-indicator.active::after {
  background: color-mix(in srgb, var(--hero-accent) 68%, white 32%);
}

@media (max-width: 720px) {
  .home-hero {
    height: clamp(500px, 78svh, 680px);
    min-height: 500px;
    max-height: 680px;
  }
  .hero-slide-content {
    left: 20px;
    bottom: 64px;
    width: calc(100% - 40px);
  }
  .hero-slide-title {
    margin-bottom: 12px;
    font-size: clamp(1.75rem, 8vw, 2.35rem);
    line-height: 1.04;
  }
  .hero-slide-meta { gap: 6px 10px; margin-bottom: 12px; }
  .hero-status,
  .hero-fact { min-height: 20px; font-size: 10.5px; }
  .hero-status { font-size: 10px; }
  .hero-fact svg { width: 14px; height: 14px; }
  .hero-slide-synopsis {
    display: -webkit-box;
    margin-bottom: 16px;
    font-size: 12.5px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
  }
  .hero-watch-btn { padding: 10px 19px; font-size: 13px; }
  .hero-nav { right: 16px; bottom: 18px; }
  .hero-indicators { left: 16px; right: auto; bottom: 18px; }
}

/* Bottom-center bridge from the full-screen spotlight into the home rows. */
.hero-home-cta {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 5;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-glass) 88%, transparent);
  color: rgba(255,255,255,.9);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  transition: opacity var(--motion-fast) ease,
              transform var(--motion-normal) var(--ease-emphasized),
              visibility 0s linear;
}
.hero-home-cta svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--motion-fast) ease;
}
.hero-home-cta:hover {
  border-color: color-mix(in srgb, var(--hero-accent, var(--p2)) 42%, var(--glass-border));
  background: color-mix(in srgb, var(--surface-glass) 92%, rgba(255,255,255,.08));
  color: #fff;
}
.hero-home-cta:hover svg { transform: translateY(2px); }
.hero-home-cta.is-hidden,
.hero-home-cta[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity var(--motion-fast) ease,
              transform var(--motion-normal) var(--ease-emphasized),
              visibility 0s linear var(--motion-normal);
}

/* Player option controls share the header's restrained translucent-black glass. */
#view-player .watch-episode-bar {
  --watch-pill-glass: color-mix(in srgb, var(--surface-glass) 72%, var(--surface-card));
  --watch-pill-hover: color-mix(in srgb, var(--surface-glass) 70%, var(--surface-hover));
  --watch-pill-active: color-mix(in srgb, var(--surface-glass) 82%, var(--surface-active));
}
#view-player .watch-episode-bar .autoskip-toggle,
#view-player .watch-episode-bar .type-pill {
  background: var(--watch-pill-glass);
  border-color: var(--glass-border);
  color: var(--text-secondary);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
#view-player .watch-episode-bar .autoskip-toggle:hover,
#view-player .watch-episode-bar .type-pill:hover {
  background: var(--watch-pill-hover);
  border-color: var(--accent-border);
  color: var(--text-primary);
}
#view-player .watch-episode-bar .autoskip-toggle.on,
#view-player .watch-episode-bar .autoskip-toggle.on:hover,
#view-player .watch-episode-bar .type-pill.active,
#view-player .watch-episode-bar .type-pill.active:hover {
  background: var(--watch-pill-active);
  border-color: var(--border-strong);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),
              inset 0 0 0 1px var(--accent-border),
              0 6px 18px rgba(0,0,0,.26);
}
#view-player .watch-episode-bar .autoskip-state {
  background: color-mix(in srgb, var(--surface-glass) 72%, var(--surface-card));
  color: var(--text-secondary);
  border: 1px solid var(--glass-border);
}
#view-player .watch-episode-bar .autoskip-toggle.on .autoskip-state {
  background: color-mix(in srgb, var(--surface-glass) 74%, var(--surface-active));
  border-color: var(--border-strong);
  color: var(--text-primary);
}
#view-player .watch-episode-bar .type-pill.disabled,
#view-player .watch-episode-bar .type-pill.disabled:hover {
  background: var(--watch-pill-glass);
  border-color: var(--glass-border);
  box-shadow: none;
}

@media (max-width: 720px) {
  .hero-slide-content { bottom: 112px; }
  .hero-nav { bottom: 64px; }
  .hero-indicators { bottom: 64px; }
  .hero-home-cta { bottom: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-home-cta,
  .hero-home-cta svg { transition: none; }
}