/* ============================================================================
 * MEDIA PLAYER V2 · ONLINE PHASE — Discover tab + online detail styles
 * Pitch-black OLED base, liquid-glass surfaces, chameleon --tone accents.
 * ========================================================================== */

/* Register --tone as an animatable color so poster tinting cross-fades smoothly. */
@property --tone {
  syntax: '<color>';
  inherits: true;
  initial-value: #b54aea;
}

.online-wrap { display: flex; flex-direction: column; gap: 26px; padding: 4px 0 32px; }
.online-block h2 { font-size: 19px; letter-spacing: .04em; margin: 0 0 2px; }
.online-sub { margin: 0; font-size: 12.5px; color: var(--muted, #8e8e93); }
.online-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }

/* pill tabs (TOP 010 ranges, sort) */
.pill-row { display: flex; gap: 8px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 4px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pill { border: 0; background: transparent; color: var(--muted, #aeaeb2);
  font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  transition: background .25s, color .25s; }
.pill.small { padding: 6px 12px; font-size: 12px; }
.pill.active { background: var(--tone); color: #fff;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--tone) 55%, transparent); }

/* TOP 010 ranked rows */
.top10-list { display: flex; flex-direction: column; gap: 8px; }
/* TOP 010 heading: outlined "TOP" + solid bold "010" */
.top10-title { font-size: 26px; font-weight: 900; letter-spacing: 2px; margin: 0; }
.top10-title .t-outline {
  color: rgba(255,255,255,.35); /* fallback: semi-transparent */
}
@supports (-webkit-text-stroke: 1px black) {
  .top10-title .t-outline {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--tone);
  }
}
.top10-title .t-solid { color: var(--text); } /* fallback: solid bold */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .top10-title .t-solid {
    /* stencil slash-cuts: horizontal slits through the digits */
    color: transparent;
    background: repeating-linear-gradient(
      to bottom,
      var(--text) 0,
      var(--text) 0.22em,
      transparent 0.22em,
      transparent 0.3em
    );
    -webkit-background-clip: text;
    background-clip: text;
  }
}
/* TOP 010 auto-carousel viewport: desktop/tablet show 3 rows and scroll
   vertically; phones show 1 card (2 on wider phones) and scroll
   horizontally. Scrollbars hidden — wheel / touch / drag still scroll. */
.top10-viewport { scrollbar-width: none; }
.top10-viewport::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .top10-viewport {
    max-height: 300px; /* ~3 rows */
    overflow-y: auto; overflow-x: hidden;
    scroll-snap-type: y proximity;
    padding-right: 2px;
  }
  .top10-viewport .top10-row { scroll-snap-align: start; }
}
@media (max-width: 767px) {
  .top10-viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; }
  .top10-viewport .top10-list { flex-direction: row; align-items: stretch; }
  .top10-viewport .top10-row { flex: 0 0 100%; scroll-snap-align: start; }
  .top10-viewport .top10-row:hover { transform: none; }
}
@media (min-width: 600px) and (max-width: 767px) {
  /* wider phones / small tablets in portrait: fit 2 cards */
  .top10-viewport .top10-row { flex-basis: calc(50% - 4px); }
}
.top10-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 6px;
  border-radius: 18px; background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07); text-decoration: none; color: inherit;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .25s, border-color .25s, background .25s; }
.top10-row:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tone) 45%, transparent);
  background: rgba(255,255,255,.06); }
.top10-row .rank { font-size: 22px; font-weight: 800; min-width: 52px; text-align: center;
  background: linear-gradient(135deg, var(--tone), color-mix(in srgb, var(--tone) 45%, #fff));
  -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.top10-row .thumb { width: 52px; height: 72px; border-radius: 12px; overflow: hidden; flex: none;
  background: #151517; }
.top10-row .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.top10-row .copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.top10-row .copy b { font-size: 14.5px; display: flex; align-items: center; gap: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.top10-row .copy b .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top10-row .copy small { color: var(--muted, #8e8e93); font-size: 12px; }
.top10-row .go { color: var(--muted, #8e8e93); flex: none; }
.top10-row .go .icon { width: 20px; height: 20px; }
.online-score { font-size: 11.5px; font-weight: 700; color: #0b0b0d; background: var(--tone);
  border-radius: 999px; padding: 2px 8px; flex: none; }

/* genre chips */
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 14px;
  scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
  color: inherit; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px;
  cursor: pointer; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background .25s, border-color .25s, transform .2s; }
.chip.active { background: var(--tone); border-color: transparent; color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--tone) 50%, transparent); }
.chip:active { transform: scale(.95); }

.online-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px; }
/* Entry S6: stale-while-revalidate — old results stay visible (dimmed)
   under a slim loading bar while the next query runs. */
#searchState.is-searching { position: relative; }
#searchState.is-searching::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 5;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--tone, #b54aea), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: s6-bar-slide 1.1s linear infinite;
}
#searchState.is-searching .poster-grid { opacity: .45; }
@keyframes s6-bar-slide { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.load-more-wrap { display: flex; justify-content: center; margin-top: 18px; }
.load-more { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
  color: inherit; font-size: 14px; font-weight: 700; padding: 12px 34px; border-radius: 999px;
  cursor: pointer; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.load-more.hidden { display: none; }
/* Infinite scroll sentinel: invisible trigger + spinner while auto-fetching. */
.infinite-sentinel { min-height: 8px; display: flex; align-items: center; justify-content: center; }
.infinite-sentinel.loading { min-height: 64px; }
.infinite-sentinel.loading::after { content: ""; width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18); border-top-color: #fff;
  animation: inf-spin .8s linear infinite; }
@keyframes inf-spin { to { transform: rotate(360deg); } }

/* error + retry */
.online-error { text-align: center; padding: 34px 18px; border-radius: 20px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
.online-error .icon { width: 34px; height: 34px; color: var(--tone); }
.online-error p { color: var(--muted, #aeaeb2); font-size: 13.5px; line-height: 1.55; }
.retry-btn { margin-top: 10px; border: 0; background: var(--tone); color: #fff;
  font-weight: 700; font-size: 14px; padding: 10px 28px; border-radius: 999px; cursor: pointer; }
.err-tech { display: block; margin-top: 8px; font-size: 11px; color: var(--faint, #6e6e73);
  word-break: break-word; }

/* online search results (default Search tab) */
.online-search-head h3 { font-size: 16px; margin: 4px 0 12px; }
/* Entry S11: Load More under search result sections. */
.load-more-wrap { display: flex; justify-content: center; margin: 14px 0 6px; }
.load-more { border: 1px solid var(--line); background: var(--surface); color: inherit;
  font-size: 14px; font-weight: 700; padding: 10px 28px; border-radius: 999px; cursor: pointer; }
.load-more:disabled { opacity: .6; cursor: default; }
.online-sub2 { font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted, #aeaeb2); margin: 18px 0 10px; }
.online-sub2:first-of-type { margin-top: 0; }

/* skeleton shimmer */
.sk { position: relative; overflow: hidden; background: rgba(255,255,255,.06) !important; }
.sk::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.09) 50%, transparent 70%);
  animation: onlineShimmer 1.4s infinite; }
@keyframes onlineShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.sk-row .thumb.sk { border-radius: 12px; }
.sk-line { display: block; height: 13px; border-radius: 6px; margin-top: 8px; }
.sk-line.short { width: 55%; }
.top10-row .sk-line { margin: 0; }
.sk-card .poster-img { aspect-ratio: 2/3; border-radius: 14px; }

/* ------------------------- online detail page -------------------------- */
.online-detail { --tone: var(--tone); transition: --tone .6s ease; }
.detail-banner { margin: -8px -16px 0; height: 190px; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.detail-banner img { width: 100%; height: 100%; object-fit: cover; }
/* Faded opening-video on the right side of the detail hero card (AnimeThemes,
   like the Konosuba player). The video fades in only once frames are playing;
   a left mask blends it into the card so the poster/title stay readable. */
.online-detail .detail-hero > :not(.detail-side-video):not(.detail-slideshow) { position: relative; z-index: 1; }
.detail-side-video { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; height: 100%;
  object-fit: cover; z-index: 0; opacity: 0; transition: opacity 1.4s ease; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  filter: brightness(.82) saturate(.92); }
.online-detail .detail-hero.has-side-video .detail-side-video { opacity: 1; }
/* Manga page slideshow: dynamic preview banner on the right side of the
   detail hero (manga has no video trailers). Two layers crossfade on a
   loop; the container fades in once the first page loads, and a left mask
   blends it into the card so the poster/title stay readable. */
.detail-slideshow { position: absolute; top: 0; right: 0; bottom: 0; width: 58%;
  height: 100%; z-index: 0; opacity: 0; transition: opacity 1.4s ease;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  filter: brightness(.82) saturate(.92); }
.detail-slideshow img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.detail-slideshow img.on { opacity: 1; }
.online-detail .detail-hero.has-slideshow .detail-slideshow { opacity: 1; }

/* Episode / chapter cards without thumbnails: big ghost number behind the
   shade (the .episode-card system itself lives in pages.css). */
.episode-card-num { position: absolute; inset: 0; z-index: -2; display: flex;
  align-items: center; justify-content: center; font-size: 44px; font-weight: 800;
  color: rgba(255,255,255,.13); }
.ep-more-wrap { margin-top: 14px; display: flex; justify-content: center; }
.ep-more { cursor: pointer; }

/* Coming-soon: SOON badge + boxed countdowns (DAYS / HRS / MIN / SEC),
   NEXT AIRING block, and the coming-soon boxes on unreleased detail pages. */
.ep-soon { position: absolute; top: 10px; left: 58px; font-size: 10px; font-weight: 800;
  letter-spacing: .1em; color: #0b0b0c; background: var(--tone, #b54aea);
  padding: 4px 9px; border-radius: 8px; z-index: 2; }
.cd-boxes { display: flex; gap: 10px; margin-top: 10px; }
.cd-box { flex: 1; min-width: 0; background: #17181d; border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 12px 6px 10px; text-align: center; }
.cd-box span { display: block; font-size: 26px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: #fff; }
.cd-box label { display: block; margin-top: 5px; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; color: #9a9ba3; }
.cd-boxes.mini { gap: 6px; margin-top: 8px; }
.cd-boxes.mini .cd-box { padding: 7px 4px 6px; border-radius: 10px; }
.cd-boxes.mini .cd-box span { font-size: 15px; }
.cd-boxes.mini .cd-box label { font-size: 8px; margin-top: 3px; }
/* Unreleased movie row: release-state block where the stream badges would
   be — an EXPECTED-date pill + countdown, or an ANNOUNCED pill. */
.ep-release { margin-top: 10px; display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start; }
.ep-release .wo-pill { display: inline-block; padding: 5px 10px; border-radius: 999px; }
.next-airing { margin-top: 16px; }
.na-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.na-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800;
  letter-spacing: .12em; padding: 9px 15px; border-radius: 999px; color: #fff;
  background: #1b1c21; border: 1px solid rgba(255,255,255,.09); }
.na-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5a5a; }
.na-ep { font-size: 11px; font-weight: 800; letter-spacing: .12em; padding: 9px 15px;
  border-radius: 999px; color: #fff; background: #1b1c21;
  border: 1px solid rgba(255,255,255,.09); }
.na-date { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: #fff; }
.detail-coming { margin: 12px 0 0; max-width: 340px; }
.coming-label { font-size: 11px; font-weight: 800; letter-spacing: .12em;
  color: var(--tone, #b54aea); }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--muted, #aeaeb2);
  text-decoration: none; font-size: 13.5px; font-weight: 600; margin-bottom: 12px; }
.back-link .icon { width: 18px; height: 18px; }
.back-link.as-button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.back-link.as-button:hover { color: #fff; }
.airing-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-radius: 16px; margin-bottom: 16px; font-size: 13.5px; font-weight: 600;
  background: color-mix(in srgb, var(--tone) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); }
.airing-banner .icon { width: 20px; height: 20px; color: var(--tone); flex: none; }
.detail-hero { display: flex; gap: 18px; margin-bottom: 20px; }
.poster-img.big { width: 128px; flex: none; aspect-ratio: 2/3; border-radius: 16px; overflow: hidden;
  box-shadow: 0 14px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1); }
.poster-img.big img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-copy { min-width: 0; flex: 1; }
.detail-kicker { margin: 0 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tone); }
.detail-copy h1 { margin: 0 0 8px; font-size: 23px; line-height: 1.2; }
.detail-meta { margin: 0 0 4px; font-size: 13px; color: var(--muted, #aeaeb2); }
.detail-meta.dim { opacity: .75; }
.detail-studios { margin: 6px 0 0; font-size: 12.5px; color: var(--muted, #8e8e93); }
.genre-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.genre-tag { font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent); }
.trailer-btn { display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--text); text-decoration: none;
  font-weight: 600; font-size: 15px; padding: 10px 4px; border: 0; }
.trailer-btn .icon { width: 20px; height: 20px; }
.trailer-btn:active { opacity: .7; }
button.trailer-btn { cursor: pointer; font-family: inherit; }
/* Action buttons (Trailer / Watch Order) sit in their own row with clean
   separation from the poster — never crowding it on narrow screens. */
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Watch history: Play + Save-to-Watchlist row on the detail page */
.wh-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.wh-play { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: 15px; color: #fff; white-space: nowrap;
  background: var(--tone); padding: 12px 26px; border-radius: 999px;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--tone) 50%, transparent); }
.wh-play .icon { width: 18px; height: 18px; }
.wh-play:active { transform: scale(.97); }
.wh-save { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 15px; color: var(--text);
  background: transparent; border: 0; padding: 10px 4px; }
.wh-save .icon { width: 20px; height: 20px; }
.wh-save:active { opacity: .7; }
/* Saved state: only the bookmark icon fills — the button background never
   changes, so no color spills outside the button edge. */
.wh-save.saved .icon { fill: var(--tone); }

/* Watch Order popup */
.wo-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.74);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: woIn .22s ease; }
@keyframes woIn { from { opacity: 0; } }
@media (min-width: 700px) { .wo-overlay { align-items: center; padding: 24px; } }
.wo-modal { width: 100%; max-width: 580px; max-height: 88vh; overflow-y: auto;
  background: var(--surface, #101014); border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px 22px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch; }
@media (min-width: 700px) { .wo-modal { border-radius: 22px; } }
.wo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wo-head h2 { margin: 0; font-size: 19px; }
.wo-close { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.wo-close .icon { width: 16px; height: 16px; }
.wo-next { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(255,60,60,.1); border: 1px solid rgba(255,60,60,.35);
  border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; }
.wo-next-text { font-size: 13px; color: var(--muted, #aeaeb2); }
.wo-list { display: flex; flex-direction: column; gap: 8px; }
.wo-row { display: flex; align-items: center; gap: 12px; padding: 8px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; color: inherit; text-decoration: none; }
.wo-row.is-self { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.wo-thumb { flex: none; width: 52px; height: 72px; border-radius: 9px; overflow: hidden;
  background: rgba(255,255,255,.07); }
.wo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wo-copy { flex: 1; min-width: 0; }
.wo-copy b { display: block; font-size: 14px; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-copy small { font-size: 12px; color: var(--muted, #aeaeb2); }
.wo-pill { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  padding: 5px 9px; border-radius: 8px; }
.wo-pill.self { background: var(--tone); color: #fff; }
.wo-pill.up { background: #ff9f0a; color: #1a1005; }
.wo-num { flex: none; width: 30px; height: 30px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; font-size: 13px; font-weight: 800;
  background: rgba(255,255,255,.08); color: var(--muted, #aeaeb2); }
.wo-row .cd-boxes.mini { margin-left: 0; }

.synopsis { font-size: 14px; line-height: 1.7; color: #d7d7dc; margin: 8px 0 0; }

.season-row { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.season-row::-webkit-scrollbar { display: none; }
.season-card { flex: none; width: 118px; text-decoration: none; color: inherit;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 8px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.season-card .thumb { display: block; width: 100%; aspect-ratio: 2/3; border-radius: 10px;
  overflow: hidden; background: #151517; margin-bottom: 8px; }
.season-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.season-card b { display: block; font-size: 12px; line-height: 1.35; margin-bottom: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.season-card small { font-size: 11px; color: var(--muted, #8e8e93); }

.cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (min-width: 700px) { .cast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.online-cast { cursor: default; }
.online-cast.is-link { cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.online-cast.is-link:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.28); }
.online-cast.is-link:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }

/* character page: AniList spoiler markup */
.spoiler { background: rgba(255,255,255,.16); border-radius: 6px; padding: 1px 6px; }
.cast-va-photo { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #1a1a1d;
  border: 1px solid rgba(255,255,255,.14); flex: none; }
.cast-va-photo.is-link { cursor: pointer; }

/* Voice actor cards inside the character popup: compact, clean ellipsis */
.va-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
@media (min-width: 700px) { .va-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.va-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.va-card.is-link { cursor: pointer; }
.va-card img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  flex: none; background: #1a1a1d; }
.va-card-copy { min-width: 0; flex: 1; }
.va-card-copy strong { display: block; font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-card-copy span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
/* VA profile fact pills */
.va-facts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.va-facts li { font-size: 11px; color: var(--muted); background: rgba(127,127,127,.12);
  border-radius: 999px; padding: 3px 10px; }
/* Character role tags: Main (gold) vs Side (indigo). Card badge is mobile-only;
   popup badge is always visible and prominent. */
.cast-card-copy .cast-role-tag { display: none; }
.ch-role-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 12px; border-radius: 999px; margin: 6px 0 4px; }
.ch-role-tag.is-main, .cast-card-copy .cast-role-tag.is-main { color: #ffd76a;
  background: rgba(255,215,106,.14); border: 1px solid rgba(255,215,106,.4); }
.ch-role-tag.is-side, .cast-card-copy .cast-role-tag.is-side { color: #a5b4fc;
  background: rgba(165,180,252,.12); border: 1px solid rgba(165,180,252,.35); }
:root[data-theme="light"] .ch-role-tag.is-main,
:root[data-theme="light"] .cast-card-copy .cast-role-tag.is-main { color: #9a6b00;
  background: rgba(255,180,0,.14); border-color: rgba(255,180,0,.4); }
@media (max-width: 560px) {
  .cast-card-copy .cast-role-tag { display: inline-block; font-size: 10px; padding: 2px 8px; margin-top: 6px; }
}

/* settings: provider note */
.provider-note { font-size: 12.5px; color: var(--muted, #8e8e93); line-height: 1.55; margin: 10px 0 0; }

@media (max-width: 560px) {
  .online-head { align-items: stretch; flex-direction: column; }
  .pill-row { align-self: flex-start; }
  .detail-hero { gap: 14px; }
  .poster-img.big { width: 104px; }
  .detail-copy h1 { font-size: 19px; }
  .top10-row .rank { font-size: 18px; min-width: 42px; }
  .cast-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
}

/* Mobile-only Canva layout (≤768px): poster left + top text block right,
   then studios / action bar / CTA full-width below. Desktop/tablet untouched. */
@media (max-width: 768px) {
  .detail-hero {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 0 14px;
    align-items: start;
  }
  .detail-hero .detail-copy { display: contents; }
  /* Restore text/buttons above the background video layer.
     (display:contents broke the desktop z-index rule which only
     targets direct children of .detail-hero.) */
  .detail-hero .detail-copy > * { position: relative; z-index: 1; }

  .detail-hero > .poster-img.big {
    grid-column: 1;
    grid-row: 1 / span 4;
    width: 112px;
    margin: 0;
  }
  .detail-copy > .detail-kicker {
    grid-column: 2; grid-row: 1; margin: 0 0 4px;
  }
  .detail-copy > h1 {
    grid-column: 2; grid-row: 2; margin: 0 0 6px;
    font-size: 19px; line-height: 1.25;
  }
  .detail-copy > .detail-meta {
    grid-column: 2; grid-row: 3; margin: 0 0 10px;
  }
  .detail-copy > .genre-tags {
    grid-column: 2; grid-row: 4; margin: 0;
  }
  .detail-copy > .detail-studios {
    grid-column: 1 / -1; grid-row: 5; margin: 12px 0 0;
  }
  .detail-copy > .detail-actions {
    grid-column: 1 / -1; grid-row: 6;
    margin: 14px 0 0;
    display: flex; flex-wrap: nowrap; gap: 6px 12px;
    min-width: 0; max-width: 100%;
    align-items: center;
  }
  .detail-copy > .detail-actions .trailer-btn,
  .detail-copy > .detail-actions .wh-save {
    font-size: 14px; padding: 10px 2px; gap: 8px; white-space: nowrap;
  }
  .detail-copy > .wh-row {
    grid-column: 1 / -1; grid-row: 7;
    margin: 14px 0 0; display: flex;
  }
  .detail-copy > .wh-row .wh-play {
    flex: 1; justify-content: center;
  }
}

/* Very narrow phones: action bar stays one compact row, buttons drop
   their text labels and show icons only. */
@media (max-width: 350px) {
  .detail-copy > .detail-actions .trailer-btn span,
  .detail-copy > .detail-actions .wh-save span {
    display: none;
  }
  .detail-copy > .detail-actions .trailer-btn,
  .detail-copy > .detail-actions .wh-save {
    padding: 10px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none; }
  .top10-row, .pill, .chip { transition: none; }
}

/* Keep scroll gestures inside open dialogs: no chaining to the background. */
.st-dialog, .rv-dialog, .wo-overlay, .more-sheet {
  overscroll-behavior: contain;
}

/* rating chip overlaid on every online poster: frosted-glass badge */
.poster-score {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-size: 11px; font-weight: 800; color: #fff;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px; padding: 3px 9px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* recommendations: horizontal poster row above TOP 010 */
.poster-row {
  display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 10px;
  scrollbar-width: none;
}
.poster-row::-webkit-scrollbar { display: none; }
.poster-row .poster-card { width: 132px; flex: none; }
@media (max-width: 640px) {
  .poster-row .poster-card { width: 108px; }
}

/* TMDB API key row (Animation → Settings → Online data) */
.tmdb-opt { font-weight: 400; color: var(--faint); }
.tmdb-key-row { display: flex; gap: 8px; margin-top: 12px; }
.tmdb-key-row input {
  flex: 1; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; color: var(--text);
  padding: 10px 12px; font-size: 13px; font-family: inherit;
}
.tmdb-key-row input::placeholder { color: var(--faint); }
.tmdb-btn {
  background: var(--anime, #b54aea); color: #fff; border: 0;
  border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.tmdb-btn.tmdb-ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.tmdb-ok { color: #7ee787; }

/* Episode / chapter lists: horizontal slide strip. Swipe sideways; more
   pages append as you near the right end. */
.ep-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--faint) transparent;
}
.ep-strip .episode-card {
  flex: 0 0 240px;
  width: 240px;
  scroll-snap-align: start;
}
@media (max-width: 560px) {
  .ep-strip .episode-card { flex-basis: 200px; width: 200px; }
}
/* Horizontal Related / Recommended strips: single-line momentum scroll,
   slim theme scrollbar, fixed card widths. */
.rel-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--faint) transparent;
}
.rel-strip::-webkit-scrollbar { height: 5px; }
.rel-strip::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 999px; }
.rel-strip::-webkit-scrollbar-track { background: transparent; }
.rel-strip .poster-card {
  flex: 0 0 132px;
  width: 132px;
  scroll-snap-align: start;
}
@media (max-width: 560px) {
  .rel-strip .poster-card { flex-basis: 112px; width: 112px; }
}
/* Jump-to-episode/chapter box, next to the Episodes/Chapters heading. */
.ep-head-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
/* Manual Downloads: the season-download button sits right after the heading;
   the jump box stays pinned right. (2-child headers render as before.) */
.ep-head-row .ep-jump { margin-left: auto; }
.ep-head-row h2 { margin: 0; }
.ep-jump {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}
.ep-jump input {
  width: 76px;
  background: var(--surface-2, rgba(255,255,255,.06));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.ep-jump input:focus { border-color: var(--accent); }
.ep-jump input.miss {
  border-color: #ff5a5a;
  animation: ep-miss .9s ease;
}
@keyframes ep-miss {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
.episode-card.ep-flash {
  animation: ep-flash 1.6s ease;
}
@keyframes ep-flash {
  0%, 60% { box-shadow: 0 0 0 2px var(--accent), 0 0 24px var(--accent); }
  100% { box-shadow: none; }
}
/* Per-episode watch progress: thin bar along the card's bottom edge.
 * Completed episodes reuse the existing .watched border tint. */
.ep-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px; z-index: 5;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 0 0 14px 14px; overflow: hidden;
}
.ep-progress > span {
  display: block; height: 100%; width: 0;
  background: var(--tone, #f97316);
}
/* Watched episodes: fade the artwork and show a checkmark badge so
 * completed episodes are instantly recognizable. */
.episode-card.watched > img,
.episode-card.watched .episode-card-num { opacity: .38;
  filter: saturate(.35) brightness(.65); }
.episode-card.watched .episode-open { opacity: .55; }

/* ---------- Opening-theme video previews ---------- */
.poster-img .op-preview {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .25s ease;
  pointer-events: none; background: #000;
}
.poster-img .op-preview.op-on { opacity: 1; }
.top10-row .top10-screen { flex: none; width: 44%; max-width: 520px; height: 76px;
  border-radius: 12px; overflow: hidden; position: relative; background: #000;
  align-self: center;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 65%);
  mask-image: linear-gradient(to right, transparent, #000 65%); }
.top10-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .4s ease;
  pointer-events: none; background: #000;
}
.top10-video.op-on { opacity: 1; }
/* Poster fallback inside the banner: visible for manga rows and whenever
   the video hasn't loaded / failed — the video fades in over it. */
.top10-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
@media (max-width: 560px) {
  /* Phone layout: the title/meta copy takes the full row width beside the
     poster, and the video banner becomes a full-width strip underneath —
     instead of crushing the text into a sliver next to a 44% banner. */
  .top10-row { flex-wrap: wrap; row-gap: 10px; }
  .top10-row .go { order: 4; }
  .top10-row .top10-screen {
    order: 5; flex: 1 1 100%; width: 100%; max-width: none; height: 84px;
  }
  .top10-row .copy small {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* ---------------------------- HERO CAROUSEL ---------------------------- */
.hero-carousel {
  position: relative; overflow: hidden; border-radius: 22px;
  height: 470px; margin-bottom: 26px; background: #0b0b10;
  border: 1px solid rgba(255,255,255,.07);
  touch-action: pan-y;
}
.hero-track { position: absolute; inset: 0; }
.hero-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hero-loading span {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15); border-top-color: var(--tone, #ff7a1a);
  animation: hero-spin 1s linear infinite;
}
@keyframes hero-spin { to { transform: rotate(360deg); } }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.hero-slide.active { opacity: 1; pointer-events: auto; z-index: 1; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .9s ease; pointer-events: none;
}
.hero-video.hero-on { opacity: 1; }
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,5,9,.70) 0%, rgba(5,5,9,.36) 34%, rgba(5,5,9,.05) 62%, rgba(5,5,9,0) 80%),
    linear-gradient(0deg, rgba(5,5,9,.88) 0%, rgba(5,5,9,0) 45%);
}
.hero-copy { position: absolute; left: 264px; bottom: 46px; right: 48px; z-index: 2; }
/* Floating poster with a soft faded edge and a deep drop shadow. */
.hero-poster {
  position: absolute; z-index: 2; left: 42px; bottom: 48px;
  width: 190px; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 70%, transparent 100%);
  mask-image: linear-gradient(to right, #000 70%, transparent 100%);
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.6));
}
.hero-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-kicker {
  margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .22em;
  color: var(--tone, #ff7a1a); text-transform: uppercase;
}
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hero-badge {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: #fff;
  border: 2px solid rgba(255,255,255,.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hero-badge.onair { background: rgba(255,45,85,.22); border-color: rgba(255,70,105,.95); }
.hero-badge.onair i {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #fff; margin-right: 6px; animation: hero-pulse 1.6s ease infinite;
}
@keyframes hero-pulse { 50% { opacity: .35; } }
.hero-badge.new { background: rgba(46,204,113,.22); border-color: rgba(46,204,113,.95); }
.hero-copy h2 {
  margin: 0 0 10px; font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(30px, 4.4vw, 54px); line-height: 1.02; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-meta { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.75); }
.hero-desc {
  margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.72);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-cta {
  display: inline-block; padding: 12px 26px; border-radius: 999px;
  background: var(--tone, #ff7a1a); color: #fff; font-weight: 800; font-size: 14px;
  text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.hero-nav {
  position: absolute; bottom: 16px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.45); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-nav.prev { right: 66px; } .hero-nav.next { right: 14px; }
.hero-dots { position: absolute; bottom: 18px; left: 42px; z-index: 3; display: flex; gap: 8px; }
.hero-dots button {
  width: 26px; height: 5px; border-radius: 3px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.28); transition: background .3s;
  position: relative; overflow: hidden; padding: 0;
}
.hero-dots button::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: #fff; border-radius: 3px;
  transform: scaleX(0); transform-origin: left center;
}
.hero-carousel.hero-auto .hero-dots button.active::after {
  animation: hero-dot-fill 15s linear forwards;
}
.hero-carousel.hero-paused .hero-dots button.active::after {
  animation-play-state: paused;
}
@keyframes hero-dot-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (max-width: 640px) {
  .hero-carousel { height: 380px; border-radius: 16px; }
  .hero-copy { left: 152px; right: 18px; bottom: 56px; }
  .hero-poster { width: 112px; left: 20px; bottom: 58px; border-radius: 10px; }
  .hero-dots { left: 20px; }
  .hero-desc { -webkit-line-clamp: 2; }
  .hero-nav { width: 38px; height: 38px; }
}

/* Touch devices: hide hero carousel arrows (swipe + dots take over). */
@media (pointer: coarse) {
  .hero-carousel .hero-nav { display: none; }
}

/* ---------- rating button + rating/reviews popup ---------- */
.rating-btn {
  font: inherit; color: #ffd76a; background: rgba(255,215,106,.1);
  border: 1px solid rgba(255,215,106,.35); border-radius: 999px;
  padding: 2px 12px; cursor: pointer;
}
.rating-btn:active { transform: scale(.96); }
.rating-static { display: inline-block; color: #ffd76a; background: rgba(255,215,106,.1);
  border: 1px solid rgba(255,215,106,.35); border-radius: 999px;
  padding: 2px 12px; font-size: .92em; }
.rv-dialog { text-align: left; }
.rv-body { display: flex; flex-direction: column; gap: 14px; }

/* ---------- popup scroll containment ---------- */
/* The dialog frame clips to its rounded corners; the header is a fixed bar;
   only .st-scroll scrolls — the scrollbar can never bleed past the rounded
   borders or run over the header / close button.
   (.st-dialog.rv-dialog specificity: stream.css loads after this file, so a
   bare .rv-dialog would lose on overflow/padding.) */
.st-dialog.rv-dialog { overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.rv-dialog .st-head {
  position: relative; top: auto; z-index: 5; flex: none;
  margin: 0; border-radius: 0;
}
.rv-dialog .st-scroll {
  flex: 1 1 auto; min-height: 0; min-width: 0;
  overflow-y: auto; overflow-x: clip;
  padding: 4px 18px 20px;
  overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.rv-dialog .st-scroll::-webkit-scrollbar { width: 8px; }
.rv-dialog .st-scroll::-webkit-scrollbar-track { background: transparent; }
.rv-dialog .st-scroll::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(255,255,255,.18); }
.rv-score-head { display: flex; align-items: baseline; gap: 10px; }
.rv-score-big { font-size: 34px; font-weight: 800; color: #ffd76a; }
.rv-score-sub { font-size: 13px; color: rgba(255,255,255,.55); }
.rv-bars { display: flex; flex-direction: column; gap: 5px; }
.rv-bar-row { display: flex; align-items: center; gap: 8px; }
.rv-bar-score { width: 28px; flex: none; font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.6); text-align: right; }
.rv-bar-track { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.rv-bar-fill { display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #f59e0b, #ffd76a); }
.rv-bar-n { width: 52px; flex: none; font-size: 11px; color: rgba(255,255,255,.5); text-align: right; }
.rv-sec { margin: 6px 0 0; font-size: 15px; font-weight: 800; color: #fff; }
.rv-card { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.rv-head { display: flex; align-items: center; gap: 10px; }
.rv-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.rv-avatar-fb { display: inline-flex; align-items: center; justify-content: center;
  background: rgba(96,165,250,.25); color: #fff; font-weight: 800; font-size: 15px; }
.rv-who { display: flex; flex-direction: column; min-width: 0; }
.rv-who b { font-size: 13px; color: #fff; }
.rv-who span { font-size: 11px; color: rgba(255,255,255,.5); }
.rv-summary { font-size: 13px; font-weight: 700; color: #fff; }
.rv-text { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.78);
  overflow-wrap: anywhere; word-break: break-word; }
.rv-p { margin: 0 0 8px; } .rv-p:last-child { margin-bottom: 0; }
.rv-text a { color: #93c5fd; }
.rv-more { align-self: flex-start; font: inherit; font-size: 12px; font-weight: 700;
  color: #93c5fd; background: none; border: 0; padding: 2px 0; cursor: pointer; }
.rv-empty { color: rgba(255,255,255,.5); font-size: 13px; }
/* inline review image attachments (parsed from ~img420(URL)~ / ![alt](URL)) */
.rv-img { display: block; max-width: 100%; height: auto; border-radius: 12px;
  margin: 10px 0; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04); }
.rv-loading { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.6);
  font-size: 13px; padding: 18px 0; }
.rv-loading .spin { width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2); border-top-color: #fff;
  animation: rv-spin .8s linear infinite; }
@keyframes rv-spin { to { transform: rotate(360deg); } }

/* ---------- character popup ---------- */
.ch-pop-hero { display: flex; gap: 14px; align-items: flex-start; }
.ch-pop-hero .poster-img.big { width: 92px; flex: none; }
.ch-pop-name { margin: 0; font-size: 22px; font-weight: 800; color: #fff; }
.ch-pop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ch-pop-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ch-pop-item.is-link { cursor: pointer; }
.ch-pop-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; }
.ch-pop-item span { font-size: 11px; color: rgba(255,255,255,.65);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; }

/* ---------- light (day) mode: remap hardcoded white text to theme tokens ----------
   Several rules above hardcode #fff / rgba(255,255,255,…) for the OLED dark theme;
   in light mode those become invisible. Dark mode is untouched. */
:root[data-theme="light"] .synopsis { color: var(--text); }
:root[data-theme="light"] .rv-sec,
:root[data-theme="light"] .rv-who b,
:root[data-theme="light"] .rv-summary,
:root[data-theme="light"] .ch-pop-name { color: var(--text); }
:root[data-theme="light"] .rv-text { color: var(--text); }
:root[data-theme="light"] .rv-img { border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.04); }
:root[data-theme="light"] .rv-score-sub,
:root[data-theme="light"] .rv-bar-score,
:root[data-theme="light"] .rv-bar-n,
:root[data-theme="light"] .rv-who span,
:root[data-theme="light"] .rv-empty,
:root[data-theme="light"] .rv-loading,
:root[data-theme="light"] .ch-pop-item span { color: var(--muted); }
:root[data-theme="light"] .rv-card { background: rgba(23,23,21,.045);
  border-color: rgba(23,23,21,.12); }
:root[data-theme="light"] .rv-avatar-fb { color: #fff; }
/* Light mode: dialog chrome (title, subtitle, close, background, scrollbar) */
:root[data-theme="light"] .st-dialog { background: rgba(255,255,255,.97);
  border-color: rgba(23,23,21,.1); }
:root[data-theme="light"] .st-head { background: rgb(255,255,255);
  border-bottom-color: rgba(23,23,21,.1);
  box-shadow: 0 8px 24px rgba(26,24,20,.08); }
:root[data-theme="light"] .st-head h3,
:root[data-theme="light"] .st-dialog h3 { color: var(--text); }
:root[data-theme="light"] .st-head .st-sub,
:root[data-theme="light"] .st-dialog .st-sub { color: var(--muted); }
:root[data-theme="light"] .st-x { color: var(--text);
  border-color: rgba(23,23,21,.14); background: rgba(23,23,21,.05); }
:root[data-theme="light"] .st-dialog { scrollbar-color: rgba(23,23,21,.22) transparent; }
:root[data-theme="light"] .st-dialog::-webkit-scrollbar-thumb { background: rgba(23,23,21,.22); }
:root[data-theme="light"] .st-dialog::-webkit-scrollbar-thumb:hover { background: rgba(23,23,21,.34); }

/* 18+ badge for adult titles (search cards + detail header). */
.adult18 { display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 20px; padding: 0 7px; border-radius: 999px;
  border: 1.5px solid rgba(255,90,90,.8); color: #ff9a9a;
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
  background: rgba(255,60,60,.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.adult18.on-poster { position: absolute; top: 8px; right: 8px; z-index: 2; }
.adult18.big { min-width: 58px; height: 32px; font-size: 15px; }
/* 18+ badge on hero slides. */
.hero-badge.adult {
  background: rgba(255,60,60,.22); border-color: rgba(255,90,90,.95); color: #ffb3b3;
}
/* Recently Viewed cards: the X sits top-right, so the 18+ badge moves top-left. */
#recentlyViewedBlock .adult18.on-poster,
#recentlyViewedMangaBlock .adult18.on-poster { right: auto; left: 8px; }
/* 18+ gate shown instead of the detail page until the user opts in. */
.adult-gate { text-align: center; padding: 56px 24px; }
.adult-gate h2 { margin: 14px 0 8px; }
.adult-gate .dim { color: rgba(255,255,255,.55); }
:root[data-theme="light"] .adult-gate .dim { color: rgba(23,23,21,.55); }
/* Note used when a list section is intentionally not offered. */
.muted-note { color: rgba(255,255,255,.55); padding: 4px 2px 18px; }
:root[data-theme="light"] .muted-note { color: rgba(23,23,21,.55); }

/* 18+ safety warning modal. */
.adult-warn { text-align: center; }
.adult-warn h3 { margin: 14px 0 8px; font-size: 20px; font-weight: 800; color: #fff; }
.adult-warn .st-sub { margin: 0 0 20px; }
.adult-warn-actions { display: flex; gap: 10px; }
.adult-warn-actions .st-start { flex: 1; }
.adult-warn-cancel { flex: 1; padding: 13px; border-radius: 14px; font: inherit;
  font-size: 15px; font-weight: 800; color: #fff; cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }

/* External link confirmation modal */
.ext-confirm { position: fixed; inset: 0; z-index: 9999; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(0,0,0,.72); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s; }
.ext-confirm.open { opacity: 1; visibility: visible; }
.ext-confirm-card { width: 100%; max-width: 340px; background: #0a0a0c;
  border: 1px solid #232326; border-radius: 20px; padding: 28px 24px 24px;
  text-align: center; transform: translateY(8px) scale(.97);
  transition: transform .18s ease; }
.ext-confirm.open .ext-confirm-card { transform: none; }
.ext-confirm-icon { width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: rgba(168,85,247,.12); color: #a855f7; }
.ext-confirm-icon .icon { width: 26px; height: 26px; }
.ext-confirm-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #fafafa; }
.ext-confirm-msg { margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: #a1a1aa; }
.ext-confirm-actions { display: flex; gap: 10px; }
.ext-confirm-cancel, .ext-confirm-ok { flex: 1; padding: 13px 0; border-radius: 14px;
  font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
  border: 1px solid #2a2a2e; }
.ext-confirm-cancel { background: #141416; color: #e4e4e7; }
.ext-confirm-cancel:active { opacity: .7; }
.ext-confirm-ok { background: #a855f7; border-color: #a855f7; color: #fff; }
.ext-confirm-ok:active { opacity: .85; }

/* Shared confirm dialog (replaces native confirm()) — same visual language
 * as the external-link confirm above. */
.ui-confirm { position: fixed; inset: 0; z-index: 9998; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(0,0,0,.72); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s; }
.ui-confirm.open { opacity: 1; visibility: visible; }
.ui-confirm-card { width: 100%; max-width: 340px; background: #0a0a0c;
  border: 1px solid #232326; border-radius: 20px; padding: 28px 24px 24px;
  text-align: center; transform: translateY(8px) scale(.97);
  transition: transform .18s ease; }
.ui-confirm.open .ui-confirm-card { transform: none; }
.ui-confirm-icon { width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: rgba(168,85,247,.12); color: #a855f7; }
.ui-confirm-icon svg { width: 26px; height: 26px; }
.ui-confirm-icon.danger { background: rgba(239,68,68,.12); color: #ef4444; }
.ui-confirm-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #fafafa; }
.ui-confirm-msg { margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: #a1a1aa; }
.ui-confirm-actions { display: flex; gap: 10px; }
.ui-confirm-cancel, .ui-confirm-ok { flex: 1; padding: 13px 0; border-radius: 14px;
  font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
  border: 1px solid #2a2a2e; }
.ui-confirm-cancel { background: #141416; color: #e4e4e7; }
.ui-confirm-cancel:active { opacity: .7; }
.ui-confirm-ok { background: #a855f7; border-color: #a855f7; color: #fff; }
.ui-confirm-ok:active { opacity: .85; }
.ui-confirm-ok.danger { background: #ef4444; border-color: #ef4444; }

/* Search content-type filter chips */
.search-filters { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 4px;
  scrollbar-width: none; }
.search-filters::-webkit-scrollbar { display: none; }
.sf-chip { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; font-size: 13px;
  font-weight: 600; font-family: inherit; cursor: pointer; color: #a1a1aa;
  background: #101013; border: 1px solid #232326; transition: all .15s ease; }
.sf-chip.active { color: #fff; background: #a855f7; border-color: #a855f7; }
.sf-chip:not(.active):active { opacity: .7; }

/* God Mode toggle */
.god-row { display: flex; align-items: center; gap: 10px; margin: 2px 0 4px; flex-wrap: wrap; }
.god-toggle { display: flex; align-items: center; gap: 8px; background: #101013;
  border: 1px solid #2a2a30; border-radius: 999px; padding: 7px 8px 7px 12px;
  color: #e4e4e7; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.god-bolt { font-size: 15px; filter: grayscale(1); opacity: .55; }
.god-toggle.on { border-color: #a855f7; background: rgba(168,85,247,.12); }
.god-toggle.on .god-bolt { filter: none; opacity: 1; }
.god-switch { width: 36px; height: 20px; border-radius: 999px; background: #26262c;
  position: relative; transition: background .15s ease; flex: none; }
.god-toggle.on .god-switch { background: #a855f7; }
.god-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left .15s ease; }
.god-toggle.on .god-knob { left: 18px; }
.god-sub { margin: 0; font-size: 12px; color: #8e8e96; }
.god-count { font-size: 12px; color: #8e8e96; margin: 2px 0 0; }

/* God Mode result cards: server tag + language/dub pills */
.god-card { background: none; border: 0; padding: 0; font: inherit;
  text-align: left; cursor: pointer; }
.server-tag { position: absolute; top: 8px; right: 8px; z-index: 3; font-size: 9px;
  font-weight: 800; letter-spacing: .5px; padding: 3px 7px; border-radius: 6px;
  color: #fff; background: rgba(8,8,12,.65); border: 1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.server-tag.sv-hindi1 { border-color: rgba(251,191,36,.8); color: #fde68a; }
.server-tag.sv-hindi2 { border-color: rgba(249,115,22,.8); color: #fed7aa; }
.server-tag.sv-reanime { border-color: rgba(96,165,250,.8); color: #bfdbfe; }
.server-tag.sv-mangadex { border-color: rgba(52,211,153,.8); color: #a7f3d0; }
.server-tag.sv-nhentai { border-color: rgba(248,113,113,.85); color: #fecaca; }
.server-tag.sv-hitomi { border-color: rgba(167,139,250,.85); color: #ddd6fe; }
/* 18+ badge on God Mode nhentai cards (server tag sits top-right). */
.adult18.god-adult { position: absolute; top: 8px; left: 8px; z-index: 3; }
.god-langbadges { position: absolute; left: 8px; bottom: 8px; z-index: 3;
  display: flex; gap: 4px; pointer-events: none; }
/* God Mode MangaDex adaptive detail view (popup): poster + provider payload. */
.god-detail { display: flex; gap: 14px; margin-bottom: 14px; transition: --tone .6s ease; }
.god-dposter { width: 108px; flex: none; border-radius: 12px; border: 1px solid #232326;
  align-self: flex-start; box-shadow: 0 6px 28px -10px var(--tone); }
.god-dinfo { flex: 1; min-width: 0; }
.god-dmeta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.god-dstat { font-size: 11px; padding: 3px 9px; border-radius: 99px;
  background: #17171b; border: 1px solid #232326; color: #d4d4d8; }
.god-ddesc { font-size: 13px; line-height: 1.55; color: #a1a1aa; margin: 0 0 10px;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.god-dtags { display: flex; flex-wrap: wrap; gap: 6px; }
.god-dtag { font-size: 11px; padding: 3px 9px; border-radius: 99px; color: #e4e4e7;
  background: #17171b; background: color-mix(in srgb, var(--tone) 16%, #101014);
  border: 1px solid #232326; }
/* God Mode chapter picker (MangaDex tap): manual chapter choice, no auto-open. */
.god-chaplist { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.god-chap { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  background: #101014; border: 1px solid #232326; border-radius: 10px;
  padding: 10px 12px; color: #fff; font-size: 14px; }
.god-chap b { flex: none; }
.god-chap span { color: rgba(255,255,255,.55); font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }