/* Design-system helpers. These classes exist only in @obscura/watch-ui, not on
   watch.obscura.page: they let screen-level pieces (the fixed topbar, the
   full-viewport player, the watch-party overlay) be framed inside a region of
   a larger layout. */
.obscura-root { position: relative; min-height: 100%; color: var(--text); }
.obscura-root > .ambient { position: absolute; }
.obscura-stage { position: relative; overflow: hidden; transform: translateZ(0); isolation: isolate; background: var(--bg); color: var(--text); border-radius: var(--stage-radius, 0); }
.obscura-stage > .obscura-player-surface { position: absolute; inset: 0; }
.obscura-player-frame { position: absolute; inset: 0; background-position: center; background-size: cover; }

:root {
  --bg: #090a0f;
  --panel: rgba(18, 19, 29, 0.92);
  --panel-solid: #151722;
  --text: #f7f5ff;
  --muted: #a7a5b5;
  --purple: #8b5cf6;
  --pink: #d946ef;
  --cyan: #38bdf8;
  --focus-ring: #c4a0f1;
  --radius: 18px;
  --gutter: clamp(18px, 4vw, 64px);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.46);
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.ambient { position: fixed; z-index: 0; width: 42vw; height: 42vw; border-radius: 50%; filter: blur(120px); opacity: .11; pointer-events: none; }
.ambient-one { top: -22vw; right: -12vw; background: var(--purple); }
.ambient-two { bottom: -25vw; left: -16vw; background: var(--cyan); }

.ui-icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.topbar {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  align-items: center;
  padding: calc(12px + env(safe-area-inset-top, 0px)) calc(var(--gutter) + env(safe-area-inset-right, 0px)) 12px calc(var(--gutter) + env(safe-area-inset-left, 0px));
  transition: right .3s cubic-bezier(.22,.8,.22,1), background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.topbar.scrolled {
  border-bottom-color: rgba(255,255,255,.07);
}
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex: 0 0 auto; transition: opacity .18s ease; }
@media (hover: hover) and (pointer: fine) {
  .brand:hover { opacity: .82; }
}
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(145deg, var(--purple), var(--pink)); box-shadow: 0 12px 32px rgba(139,92,246,.35); font-size: 21px; font-weight: 900; }
.brand-mark.large { width: 62px; height: 62px; margin: 0 auto 20px; border-radius: 21px; font-size: 32px; }
.brand-copy {
  flex-direction: column;
  line-height: .95;
  letter-spacing: .08em;
}
.brand-copy strong { font-size: 14px; }
.brand-copy small { margin-top: 5px; color: #a78bfa; font-size: 9px; font-weight: 800; }
.main-nav { position: relative; min-width: 0; flex: 0 1 auto; display: flex; align-items: center; gap: 3px; }
/* The sliding pill is painted behind the items. It must not occupy a flex/grid
   cell — on the iPad bar that extra child wraps «Библиотека» onto a second row,
   and on the desktop bar it pushes the profile past the window. */
.main-nav-indicator {
  position: absolute; left: 0; top: 0; height: 100%;
  border-radius: 12px; pointer-events: none; z-index: 0;
  transition: transform .25s ease, width .25s ease;
}
.main-nav-indicator[hidden] { display: none; }
.nav-item {
  position: relative;
  z-index: 1;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
  transition: color .18s ease, background .18s ease;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.top-actions {
  min-width: 0;
  align-items: center;
}

.party-mode-button {
  height: 42px;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(167,139,250,.25);
  border-radius: 999px;
  color: #ddd6fe;
  background: rgba(124,58,237,.1);
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  transition: .18s ease;
}
.party-mode-button:hover { border-color: rgba(167,139,250,.6); background: rgba(124,58,237,.2); }
.party-mode-button.active { border-color: rgba(244,114,182,.65); color: #fff; background: linear-gradient(135deg,rgba(124,58,237,.85),rgba(219,39,119,.82)); box-shadow: 0 10px 28px rgba(168,85,247,.28); }
.party-mode-button[hidden] { display: none; }
/* Long-press feedback for the hidden Итоги shortcut: a progress bar fills
   over two seconds; releasing earlier cancels the gesture. */
.party-mode-button.is-holding { border-color: rgba(167,139,250,.7); background: rgba(124,58,237,.24); }
.party-mode-button.is-holding::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg,#a855f7,#f472b6); animation: stats-hold-progress 2s linear forwards; }
@keyframes stats-hold-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.ui-lang-wrap { flex: 0 0 auto; position: relative; }
/* Same pill vocabulary as the search field and the party button next to it:
   42px, fully rounded, glass over the bar, purple only on hover and while open. */
.ui-lang-trigger { height: 42px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 0 11px 0 12px; color: #d8ccff; background: rgba(255,255,255,.06); cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.ui-lang-trigger:hover { color: #fff; border-color: rgba(167,139,250,.5); background: rgba(124,58,237,.16); }
.ui-lang-trigger[aria-expanded="true"] { color: #fff; border-color: rgba(167,139,250,.55); background: linear-gradient(135deg, rgba(124,58,237,.34), rgba(219,39,119,.22)); box-shadow: 0 8px 24px rgba(139,92,246,.24); }
.ui-lang-globe { width: 17px; height: 17px; color: #a78bfa; transition: color .18s ease; }
.ui-lang-trigger:hover .ui-lang-globe, .ui-lang-trigger[aria-expanded="true"] .ui-lang-globe { color: #ddd6fe; }
.ui-lang-code { font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.ui-lang-caret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .62; transition: transform .18s ease, opacity .18s ease; }
.ui-lang-trigger:hover .ui-lang-caret { opacity: 1; }
.ui-lang-trigger[aria-expanded="true"] .ui-lang-caret { opacity: 1; transform: rotate(180deg); }
.ui-lang-menu { position: absolute; z-index: 70; top: calc(100% + 9px); right: 0; width: 194px; padding: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(19,20,31,.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 24px 60px rgba(0,0,0,.55); transform-origin: top right; opacity: 0; transform: translateY(-7px) scale(.97); pointer-events: none; visibility: hidden; transition: opacity .16s ease, transform .16s cubic-bezier(.2,.8,.3,1.1), visibility 0s linear .16s; }
.ui-lang-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible; transition-delay: 0s; }
.ui-lang-item { width: 100%; height: 40px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 11px; padding: 0 10px; color: var(--muted); background: transparent; cursor: pointer; font-size: 13px; font-weight: 700; text-align: left; transition: color .14s ease, background .14s ease; }
.ui-lang-item:hover, .ui-lang-item.focused { color: #fff; background: rgba(255,255,255,.08); }
.ui-lang-item[aria-selected="true"] { color: #fff; background: rgba(139,92,246,.2); }
.ui-lang-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-lang-item-code { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #8d8a9c; transition: color .14s ease; }
.ui-lang-item:hover .ui-lang-item-code, .ui-lang-item.focused .ui-lang-item-code, .ui-lang-item[aria-selected="true"] .ui-lang-item-code { color: #c4b5fd; }
.ui-lang-check { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: #c4b5fd; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .14s ease; }
.ui-lang-item[aria-selected="true"] .ui-lang-check { opacity: 1; }

.search { position: relative; height: 42px; flex: 0 1 clamp(230px, 26vw, 380px); min-width: 190px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.06); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, flex-basis .2s ease; }
.search:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); }
.search:focus-within { border-color: rgba(139,92,246,.75); background: rgba(18,19,29,.96); box-shadow: 0 0 0 4px rgba(139,92,246,.16); }
.search:has(.search-scope[aria-expanded="true"]):focus-within { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.06); box-shadow: none; }
.search-icon { color: #8d8a9c; transition: color .2s ease; }
.search:focus-within .search-icon { color: #c4b5fd; }
/* P0: stale results stay visible while the next search is in flight. */
.search-loading .search-icon { color: #c4b5fd; animation: search-spin .9s linear infinite; }
@keyframes search-spin { to { transform: rotate(360deg); } }
.search-scope-wrap { position: relative; flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; padding-right: 9px; }
/* A short divider instead of a full-height border, so the wrapper can stretch
   and the menu can anchor to the bottom of the pill. */
.search-scope-wrap::after { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 22px; margin-top: -11px; background: rgba(255,255,255,.12); }
/* Clicking the scope chip lights a soft oval running from the magnifier to the
   divider. It floats inside the capsule with even breathing room on every side
   and is unclipped from the divider, and the plain focus contour switches off. */
.search-scope-wrap::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -31px;
  border: 1px solid rgba(167,139,250,.55);
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(139,92,246,.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.search-scope-wrap:has(.search-scope[aria-expanded="true"])::before { opacity: 1; }
.search-scope-native { display: none; }
.search-scope {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 3px;
  border: 0;
  border-radius: 999px;
  outline: 0;
  padding: 0 9px 0 12px;
  color: #ada3c4;
  background: transparent;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .01em;
  transition: background .16s ease, color .16s ease;
}
.search-scope:hover, .search-scope[aria-expanded="true"] { color: #fff; background: transparent; }
.search-scope-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-scope-caret { width: 14px; height: 14px; color: #9b93b5; transition: transform .18s ease, color .18s ease; }
.search-scope:hover .search-scope-caret, .search-scope[aria-expanded="true"] .search-scope-caret { color: #c4b5fd; }
.search-scope[aria-expanded="true"] .search-scope-caret { transform: rotate(180deg); }

.search-scope-menu { position: absolute; z-index: 60; top: calc(100% + 9px); left: -9px; width: 196px; padding: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(19,20,31,.97); box-shadow: 0 24px 60px rgba(0,0,0,.55); backdrop-filter: blur(20px); transform-origin: top left; animation: scope-menu-in .16s ease-out; }
.search-scope-menu[hidden] { display: none; }
.search-scope-option { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 11px; padding: 0 10px; height: 40px; color: var(--muted); background: transparent; cursor: pointer; font-size: 13px; font-weight: 700; text-align: left; transition: color .14s ease, background .14s ease; }
.search-scope-option:hover, .search-scope-option.focused { color: #fff; background: rgba(255,255,255,.08); }
.search-scope-option[aria-selected="true"] { color: #fff; background: rgba(139,92,246,.2); }
.search-scope-option .ui-icon { width: 17px; height: 17px; color: #a78bfa; }
.search-scope-option-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-scope-check { width: 15px; height: 15px; flex: 0 0 auto; color: #c4b5fd; opacity: 0; transition: opacity .14s ease; }
.search-scope-option[aria-selected="true"] .search-scope-check { opacity: 1; }
@keyframes scope-menu-in { from { opacity: 0; transform: translateY(-7px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.search input { min-width: 0; flex: 1; border: 0; outline: 0; color: #fff; background: transparent; }
.search input::-webkit-search-cancel-button { display: none; }
.search-clear, .search-submit { position: relative; width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 50%; color: #a9a5bb; background: transparent; cursor: pointer; transition: color .16s ease, background .16s ease; }
/* Expand the tap area to 44px without changing the visual 30px circle. */
.search-clear::before, .search-submit::before { content: ""; position: absolute; inset: -7px; }
.search-clear:hover, .search-submit:hover { color: #fff; background: rgba(255,255,255,.1); }
.search-clear[hidden], .search-submit[hidden] { display: none; }
/* Suggestions under the field: same surface as the scope menu. */
.search-suggest { position: absolute; z-index: 70; top: calc(100% + 8px); left: 0; right: 0; max-height: min(70vh, 540px); overflow-y: auto; overscroll-behavior: contain; padding: 6px 6px 0; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(19,20,31,.98); box-shadow: 0 24px 60px rgba(0,0,0,.55); backdrop-filter: blur(20px); transform-origin: top center; animation: scope-menu-in .16s ease-out; }
.search-suggest[hidden] { display: none; }
.search-suggest-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 2px 6px 2px 10px; color: #8f87a3; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.search-suggest-clear { border: 0; border-radius: 8px; padding: 5px 8px; color: #b9a6e8; background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; transition: color .14s ease, background .14s ease; }
.search-suggest-clear:hover { color: #fff; background: rgba(255,255,255,.08); }
.search-suggest-divider { height: 1px; margin: 5px 8px; background: rgba(255,255,255,.08); }
.search-suggest-option { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 8px 6px 10px; border-radius: 12px; color: #ece8f6; cursor: pointer; transition: background .12s ease; }
.search-suggest-option.active { background: rgba(139,92,246,.18); }
.search-suggest-thumb { width: 34px; height: 51px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 7px; color: #8d8a9c; background: rgba(255,255,255,.06); }
.search-suggest-person .search-suggest-thumb { width: 42px; height: 42px; border-radius: 50%; }
.search-suggest-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.search-suggest-thumb .ui-icon, .search-suggest-icon .ui-icon { width: 18px; height: 18px; }
.search-suggest-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; color: #a78bfa; }
.search-suggest-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.search-suggest-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.search-suggest-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9a93ad; font-size: 12px; }
/* «All results» stays in view at the bottom of a list long enough to scroll. */
.search-suggest-divider:has(+ .search-suggest-all) { display: none; }
.search-suggest-all { position: sticky; bottom: 0; z-index: 1; min-height: 46px; margin: 4px -6px 0; padding-left: 16px; padding-right: 14px; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0 0 15px 15px; background: #13141f; }
.search-suggest-all.active { background: #261f3b; }
.search-suggest > :last-child:not(.search-suggest-all) { margin-bottom: 6px; }
.search-suggest-all .search-suggest-name { color: #d8ccf7; font-weight: 600; }
.search-suggest-option kbd { flex: 0 0 auto; padding: 2px 7px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; color: #a9a5bb; font: 600 11px/1.4 inherit; }
.search-suggest-remove { position: relative; width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 50%; color: #8d8a9c; background: transparent; cursor: pointer; transition: color .14s ease, background .14s ease; }
.search-suggest-remove::before { content: ""; position: absolute; inset: -6px; }
.search-suggest-remove:hover { color: #fff; background: rgba(255,255,255,.1); }
.search-suggest-remove .ui-icon { width: 15px; height: 15px; }
@media (any-pointer: coarse) {
  .search-suggest-option { min-height: 56px; }
  .search-suggest-option kbd { display: none; }
  .search-suggest-remove { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .search-suggest { animation: none; } }

.profile-button { height: 42px; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 4px 13px 4px 4px; color: #fff; background: rgba(255,255,255,.06); cursor: pointer; font-weight: 600; transition: border-color .18s ease, background .18s ease; }
.profile-button:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.1); }
.profile-button-name { max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-avatar { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#312e81,#7c3aed); font-weight: 800; }
.account-control { position: relative; }
.account-menu { position: absolute; top: calc(100% + 11px); right: 0; width: min(268px,calc(100vw - 28px)); padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; color: #fff; background: rgba(17,19,28,.97); box-shadow: 0 22px 65px rgba(0,0,0,.48); backdrop-filter: blur(18px); transform-origin: top right; animation: account-menu-in .16s ease-out; }
.account-menu[hidden] { display: none; }
.account-menu-user { display: flex; align-items: center; gap: 10px; padding: 5px 7px 11px; }
.account-menu-user strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-logout { width: 100%; min-height: 42px; border: 1px solid rgba(251,113,133,.2); border-radius: 12px; color: #fecdd3; background: rgba(244,63,94,.1); cursor: pointer; font-weight: 800; transition: background .18s ease,border-color .18s ease; }
.account-logout:hover { border-color: rgba(251,113,133,.45); background: rgba(244,63,94,.18); }
.account-menu-section { display: grid; gap: 2px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.account-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 42px; padding: 0 8px; border: 1px solid transparent; border-radius: 12px; color: #dcd8ea; background: transparent; cursor: pointer; font-weight: 700; font-size: 13.5px; letter-spacing: .01em; text-align: left; transition: background .16s ease, color .16s ease; }
.account-toggle:hover { background: rgba(255,255,255,.055); color: #fff; }
.account-toggle:focus-visible { outline: 2px solid rgba(167,139,250,.65); outline-offset: 1px; }
.account-toggle[hidden] { display: none; }
.account-switch { position: relative; flex: 0 0 auto; width: 40px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: background .18s ease, box-shadow .18s ease; }
.account-switch-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #b9b4cc; box-shadow: 0 1px 3px rgba(0,0,0,.45); transition: transform .18s ease, background .18s ease; }
.account-toggle.is-on { color: #fff; }
.account-toggle.is-on .account-switch { background: linear-gradient(135deg,#7c3aed,#a855f7); box-shadow: inset 0 0 0 1px rgba(196,181,253,.5); }
.account-toggle.is-on .account-switch-knob { transform: translateX(16px); background: #fff; }
.account-saver.is-on .account-switch { background: linear-gradient(135deg,#d97706,#fbbf24); box-shadow: inset 0 0 0 1px rgba(253,230,138,.55); }
.account-4k { min-height: 50px; padding-block: 6px; }
.account-4k .account-toggle-label { display: flex; flex-direction: column; gap: 2px; }
.account-toggle-hint { color: #9d97b3; font-size: 11.5px; font-weight: 500; letter-spacing: 0; }
@keyframes account-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

main { position: relative; z-index: 1; transition: margin-right .3s cubic-bezier(.22,.8,.22,1); }
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero[hidden] { display: none; }
.hero-image {
  position: absolute;
  inset: 0;
  background-size: cover;
}
@media (hover: hover) {
  .hero:hover .hero-image { transform: scale(1.055); }
}
.hero-shade {
  position: absolute;
  inset: 0;
}
.hero-content {
  position: relative;
  z-index: 2;
}
.eyebrow { display: block; margin-bottom: 11px; color: #a78bfa; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero h1 { max-width: 760px; margin: 0 0 14px; font-size: clamp(34px, 4.6vw, 62px); line-height: .98; letter-spacing: -.045em; text-wrap: balance; text-shadow: 0 2px 24px rgba(7,8,13,.6); }
/* P3: the scrim is tuned for dark art; a bright backdrop still needs the copy
   to carry its own contrast. */
.hero-content > .eyebrow { text-shadow: 0 1px 12px rgba(7,8,13,.8); }
.hero p, .hero-meta { text-shadow: 0 1px 14px rgba(7,8,13,.72); }
.hero-meta, .details-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: #cfccdb; font-size: 14px; font-weight: 600; }
.hero-meta span, .details-meta span { display: inline-flex; align-items: center; gap: 6px; }
/* Dot separators between the plain facts; the rating chip stands on its own. */
.hero-meta span + span:not(.rating)::before, .details-meta span + span:not(.rating)::before { content: ""; width: 3px; height: 3px; margin-right: 3px; border-radius: 50%; background: currentColor; opacity: .45; }
.rating { padding: 3px 9px 3px 7px; border: 1px solid rgba(250,204,21,.24); border-radius: 999px; color: #fde68a; background: rgba(250,204,21,.11); font-weight: 800; font-size: 13px; }
.rating .ui-icon { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.hero p {
  max-width: 620px;
}
.hero-actions, .details-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.primary-button, .ghost-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 14px; padding: 0 20px; cursor: pointer; font-weight: 800; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.primary-button { color: #fff; background: linear-gradient(135deg, #7c3aed, #a855f7); box-shadow: 0 13px 34px rgba(124,58,237,.28); }
.primary-button:hover { box-shadow: 0 18px 42px rgba(124,58,237,.4); }
.ghost-button { border-color: rgba(255,255,255,.14); color: #fff; background: rgba(255,255,255,.09); backdrop-filter: blur(10px); }
.ghost-button:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.14); }
.button-link { display: inline-flex; align-items: center; justify-content: center; }

.content-shell {
  position: relative;
  z-index: 3;
}
#hero[hidden] + .content-shell { margin-top: 96px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 66px; margin: 0 0 28px; }
.page-heading-main {
  min-width: 0;
  display: flex;
}
.page-heading-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(167,139,250,.2);
  color: #ddd6fe;
  background: linear-gradient(145deg,rgba(124,58,237,.3),rgba(168,85,247,.1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.2);
}
.page-heading-icon .ui-icon { width: 23px; height: 23px; }
.section-heading[data-view="movies"] .page-heading-icon { border-color: rgba(244,114,182,.24); color: #fbcfe8; background: linear-gradient(145deg,rgba(219,39,119,.3),rgba(124,58,237,.09)); }
.section-heading[data-view="series"] .page-heading-icon { border-color: rgba(34,211,238,.22); color: #a5f3fc; background: linear-gradient(145deg,rgba(8,145,178,.28),rgba(14,116,144,.08)); }
.section-heading[data-view="anime"] .page-heading-icon { border-color: rgba(251,146,60,.25); color: #fed7aa; background: linear-gradient(145deg,rgba(234,88,12,.28),rgba(219,39,119,.08)); }
.section-heading[data-view="library"] .page-heading-icon { border-color: rgba(74,222,128,.22); color: #bbf7d0; background: linear-gradient(145deg,rgba(22,163,74,.25),rgba(8,145,178,.07)); }
.section-heading[data-view="search"] .page-heading-icon { border-color: rgba(96,165,250,.22); color: #bfdbfe; background: linear-gradient(145deg,rgba(37,99,235,.28),rgba(124,58,237,.08)); }
.page-heading-copy { min-width: 0; display: grid; gap: 4px; }
.section-heading h2 { margin: 0; font-size: clamp(29px, 2.7vw, 39px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.page-subtitle {
  max-width: min(650px,62vw);
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discovery-panel { position: relative; display: grid; grid-template-columns: minmax(170px,.7fr) minmax(0,2.3fr); gap: clamp(20px,3vw,42px); margin: 0 0 30px; padding: 20px clamp(18px,2.5vw,30px); border: 1px solid rgba(255,255,255,.09); border-radius: 23px; background: linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 20px 55px rgba(0,0,0,.2); backdrop-filter: blur(20px); }
.discovery-panel[hidden] { display: none; }
.discovery-panel.anime-mode { border-color: rgba(244,114,182,.18); background: linear-gradient(135deg,rgba(124,58,237,.12),rgba(34,211,238,.04) 58%,rgba(244,114,182,.08)); }
.discovery-lead { align-self: center; min-width: 0; }
.discovery-lead .eyebrow { margin-bottom: 5px; }
.discovery-lead strong { display: block; color: #fff; font-size: clamp(20px,2vw,28px); letter-spacing: -.025em; }
.discovery-lead small { display: block; max-width: 310px; margin-top: 6px; color: #8f8c9d; font-size: 12px; line-height: 1.45; }
.discovery-controls { min-width: 0; display: grid; grid-template-columns: minmax(305px,1fr) auto auto; align-items: end; gap: 13px; }
.genre-block { grid-column: 1 / -1; grid-row: 2; }
.filter-block, .era-filter { min-width: 0; display: grid; gap: 7px; }
.filter-label { color: #8b8899; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.sort-options, .genre-options { min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 6px; margin-block: -6px; }
.sort-options::-webkit-scrollbar, .genre-options::-webkit-scrollbar { display: none; }
.filter-chip { min-height: 40px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 0 13px; color: #9f9bab; background: rgba(255,255,255,.035); cursor: pointer; font-size: 11px; font-weight: 750; white-space: nowrap; transition: color .16s ease,border-color .16s ease,background .16s ease,transform .16s ease; }
.filter-chip:hover { color: #fff; border-color: rgba(167,139,250,.34); }
.filter-chip.active { color: #fff; border-color: rgba(167,139,250,.55); background: linear-gradient(135deg,rgba(124,58,237,.62),rgba(168,85,247,.38)); box-shadow: 0 8px 23px rgba(124,58,237,.18); }
.anime-mode .filter-chip.active { border-color: rgba(244,114,182,.5); background: linear-gradient(135deg,rgba(219,39,119,.55),rgba(124,58,237,.48)); }
.filter-chip .filter-count { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.08); color: #b9b5c6; font-size: 10px; font-weight: 800; }
.filter-chip.active .filter-count { background: rgba(255,255,255,.22); color: #fff; }
.era-select-shell { position: relative; min-width: 116px; height: 36px; display: flex; align-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: rgba(255,255,255,.045); }
.era-select-shell select { width: 100%; height: 100%; appearance: none; border: 0; outline: 0; padding: 0 30px 0 11px; color: #d9d6e3; background: transparent; cursor: pointer; font-size: 11px; font-weight: 750; }
.era-select-shell select option { color: #fff; background: #171923; }
.era-select-shell:focus-within { border-color: rgba(196,164,255,.5); box-shadow: 0 0 0 3px rgba(139,92,246,.16); }
.era-select-shell .ui-icon { position: absolute; right: 8px; width: 14px; height: 14px; pointer-events: none; color: #8f8c9d; }
.surprise-button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(34,211,238,.24); border-radius: 11px; padding: 0 13px; color: #cffafe; background: rgba(8,145,178,.11); cursor: pointer; font-size: 11px; font-weight: 850; white-space: nowrap; transition: transform .18s ease,border-color .18s ease,background .18s ease; }
.surprise-button:hover { border-color: rgba(34,211,238,.55); background: rgba(8,145,178,.2); }
.surprise-button.rolling { border-color: rgba(34,211,238,.7); background: rgba(8,145,178,.26); }
.surprise-button.rolling > span:first-child { display: inline-block; animation: surprise-spin .55s cubic-bezier(.4,0,.3,1) infinite; }
@keyframes surprise-spin { to { transform: rotate(360deg) scale(1.15); } }
.card-drawn .poster-wrap { border-color: rgba(34,211,238,.85); box-shadow: 0 0 0 2px rgba(34,211,238,.4), 0 18px 44px rgba(8,145,178,.42); transform: translateY(-5px) scale(1.03); }

.catalog-rows {
  display: flex;
  flex-direction: column;
}
/* Rows below the fold skip layout/paint entirely until scrolled into view. */
.catalog-row { min-width: 0; content-visibility: auto; contain-intrinsic-size: auto 340px; }
.row-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 0 13px;
}
.row-title-copy { min-width: 0; }
.row-title h3 {
  margin: 0;
}
.row-subtitle {
  max-width: 720px;
  margin: 4px 0 0;
  overflow: hidden;
  color: #8b8899;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-count {
  flex: 0 0 auto;
  align-self: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
}
.poster-rail {
  display: grid;
  grid-auto-flow: column;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
  padding: 12px 2px 5px;
}
.poster-rail::-webkit-scrollbar { display: none; }
.poster-rail > * { scroll-snap-align: start; }
/* The mask only covers the side the rail can still scroll towards, so a full
   row never gets a phantom fade over its first poster. */
.poster-rail.rail-fade-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 68px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 68px), transparent 100%); }
.poster-rail.rail-fade-start { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 68px); mask-image: linear-gradient(90deg, transparent 0, #000 68px); }
.poster-rail.rail-fade-start.rail-fade-end { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 68px, #000 calc(100% - 68px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 68px, #000 calc(100% - 68px), transparent 100%); }
.rail-shell { position: relative; }
.rail-control { position: absolute; z-index: 4; top: 0; bottom: 26px; width: 46px; display: none; align-items: center; justify-content: center; border: 0; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .18s ease; }
.rail-control[hidden] { display: none; }
.rail-prev { left: -14px; border-radius: 16px 0 0 16px; background: linear-gradient(90deg, rgba(9,10,15,.94), rgba(9,10,15,0)); }
.rail-next { right: -14px; border-radius: 0 16px 16px 0; background: linear-gradient(270deg, rgba(9,10,15,.94), rgba(9,10,15,0)); }
/* Resume progress: a hairline strip flush with the bottom edge of the poster
   (the rounded poster clips its ends), a soft glow on the fill, and the
   round buttons lifted clear of it so nothing runs through them. */
.card-progress { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(10,8,20,.62); box-shadow: 0 -1px 0 rgba(255,255,255,.07); overflow: visible; }
.card-progress span { display: block; position: relative; height: 100%; min-width: 4px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #7c5cf0, var(--purple) 45%, var(--pink)); box-shadow: 0 0 10px rgba(236,72,153,.55); transition: width .35s cubic-bezier(.2,.8,.2,1); }
.poster-wrap:has(> .card-progress) > .card-overlay { padding-bottom: 18px; }
.poster-wrap:has(> .card-progress) > .watched-toggle { bottom: 16px; }
.details-note { flex: 1 0 100%; margin: 4px 0 0; color: var(--muted); font-size: 13px; }
/* Languages and the prepared source: its own section under the layout, in the
   discovery panel's vocabulary (micro-label + select shell), not a button in
   the actions row. */
/* Collapsed by default: one line that says what is prepared, and the controls
   slide out under it when someone actually wants to change the languages. */
.details-tracks { position: relative; z-index: 3; margin: -5px clamp(22px,5vw,58px) 24px; padding: 8px 12px; border: 1px solid rgba(196,181,253,.15); border-radius: 16px; background: linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); transition: padding .2s ease, border-color .2s ease; }
.details-tracks[hidden] { display: none; }
.details-tracks[data-open="true"] { padding: 8px 12px 12px; border-color: rgba(196,181,253,.24); }
.details-tracks-toggle { width: 100%; min-height: 30px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 10px; padding: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.details-tracks-toggle .eyebrow { margin: 0; }
.details-tracks-toggle:hover .eyebrow { color: #d8ccff; }
.details-tracks-caret { width: 15px; height: 15px; flex: 0 0 auto; color: #9b93b5; transform: rotate(-90deg); transition: transform .22s cubic-bezier(.2,.8,.2,1), color .18s ease; }
.details-tracks[data-open="true"] .details-tracks-caret { transform: rotate(0deg); }
.details-tracks-toggle:hover .details-tracks-caret { color: #c4b5fd; }
.details-tracks-summary { margin-left: auto; min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.details-tracks-summary.is-empty { font-style: italic; }
.details-tracks-body { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; transition: grid-template-rows .26s cubic-bezier(.2,.8,.2,1), opacity .2s ease, visibility .26s; }
.details-tracks[data-open="true"] .details-tracks-body { grid-template-rows: 1fr; visibility: visible; opacity: 1; }
.details-tracks-inner { min-height: 0; overflow: hidden; display: grid; gap: 9px; }
/* The clip is what makes the 0fr -> 1fr collapse look right, but it also cut
   off the dub/subtitle dropdown, which hangs below its own field. Once the
   panel has finished opening there is nothing left to hide, so the clip is
   dropped -- after the transition, never during it. Closing removes the rule
   outright, so the collapse clips again from the first frame. */
.details-tracks[data-open="true"] .details-tracks-inner { overflow: visible; transition: overflow 0s linear .26s; }
/* Spacing as a margin on the first child, not padding on the box: a margin
   sits inside the clipped content area and collapses away with it, so the
   shut panel is exactly as tall as its header. */
.details-tracks-inner > :first-child { margin-top: 10px; }
.details-tracks-inner .details-reprepare-button { justify-self: start; min-height: 32px; padding: 0 12px; border-radius: 10px; font-size: 11.5px; }
.details-tracks-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.details-tracks-actions .details-sources-button, .details-tracks-actions .details-reprepare-button { min-height: 32px; padding: 0 12px; border-radius: 10px; font-size: 11.5px; justify-self: start; }
.details-quality-row { align-items: flex-end; }
.details-tracks-row { display: flex; flex-wrap: wrap; gap: 9px 14px; }
.details-track-field { min-width: 0; flex: 1 1 168px; display: grid; gap: 5px; }
.details-source-line { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; color: #cfc9de; font-size: 12.5px; }
.details-source-label { flex: 0 0 auto; color: var(--muted); }
.details-source-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.details-source-line.is-empty .details-source-name { color: var(--muted); font-style: italic; }
.details-source-quality { flex: 0 0 auto; padding: 3px 8px; border: 1px solid rgba(196,181,253,.28); border-radius: 999px; color: #ddd6fe; background: rgba(139,92,246,.18); font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.details-tracks-hint { margin: 0; color: var(--muted); font-size: 11.5px; opacity: .85; }

/* The catalog's own dropdown: same shape as the season switch and the search
   scope, one size down. The native <select> inside it is state only. */
.ob-select { position: relative; min-width: 0; }
.ob-select-native { display: none; }
.ob-select-trigger { width: 100%; min-height: 34px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 0 8px 0 11px; color: #e7e3f2; background: rgba(255,255,255,.045); cursor: pointer; font-size: 12.5px; font-weight: 750; text-align: left; transition: border-color .16s ease, background .16s ease; }
.ob-select-trigger:hover { border-color: rgba(167,139,250,.4); background: rgba(124,58,237,.16); }
.ob-select-trigger[aria-expanded="true"] { border-color: rgba(167,139,250,.55); background: rgba(124,58,237,.2); }
.ob-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-select-caret { width: 14px; height: 14px; flex: 0 0 auto; color: #9b93b5; transition: transform .18s ease, color .18s ease; }
.ob-select-trigger:hover .ob-select-caret, .ob-select-trigger[aria-expanded="true"] .ob-select-caret { color: #c4b5fd; }
.ob-select-trigger[aria-expanded="true"] .ob-select-caret { transform: rotate(180deg); }
/* --ob-select-room is written on open: it is the space actually free inside
   the scrollable card, so a list near the card edge scrolls within what it
   has instead of being clipped at a height nobody can reach. */
.ob-select-menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 100%; max-height: min(260px, var(--ob-select-room, 260px)); overflow-y: auto; overscroll-behavior: contain; padding: 5px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(19,20,31,.97); box-shadow: 0 20px 48px rgba(0,0,0,.5); backdrop-filter: blur(18px); transform-origin: top left; animation: scope-menu-in .16s ease-out; }
.ob-select-menu--up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; }
.ob-select-menu[hidden] { display: none; }
.ob-select-option { width: 100%; min-height: 32px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 9px; padding: 0 9px; color: var(--muted); background: transparent; cursor: pointer; font-size: 12.5px; font-weight: 700; text-align: left; transition: color .14s ease, background .14s ease; }
.ob-select-option > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-select-option:hover, .ob-select-option.focused { color: #fff; background: rgba(255,255,255,.08); }
.ob-select-option[aria-selected="true"] { color: #fff; background: rgba(139,92,246,.2); }
.ob-select-option .ui-icon { width: 14px; height: 14px; flex: 0 0 auto; color: #c4b5fd; opacity: 0; transition: opacity .14s ease; }
.ob-select-option[aria-selected="true"] .ui-icon { opacity: 1; }
.details-add-button { border-color: rgba(167,139,250,.34); color: #ddd6fe; background: rgba(124,58,237,.12); }
.details-remove-button { border-color: rgba(251,113,133,.24); color: #fecdd3; background: rgba(190,24,93,.08); }
.details-remove-button:hover, .details-remove-button:focus-visible { border-color: rgba(251,113,133,.58); background: rgba(190,24,93,.22); }

@media (hover: hover) and (min-width: 981px) {
  .rail-control:not([hidden]) { display: flex; opacity: .6; }
  .catalog-row:hover .rail-control,
  .catalog-row:focus-within .rail-control,
  .rail-control:focus-visible { opacity: 1; }
}
.media-card { container-type: inline-size; position: relative; min-width: 0; border: 0; border-radius: var(--radius); padding: 0; color: #fff; background: transparent; cursor: pointer; scroll-snap-align: start; text-align: left; }
.media-card > .card-main { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.media-card > .card-quick { position: absolute; z-index: 6; left: 10px; top: calc(100cqi * 3 / 2 - 48px); }
.media-card > .watched-toggle { bottom: auto; top: calc(100cqi * 3 / 2 - 42px); }
.media-card.has-progress > .watched-toggle { top: calc(100cqi * 3 / 2 - 52px); }
.media-card > .rating-nudge { position: relative; z-index: 4; }
.poster-wrap {
  position: relative;
  aspect-ratio: 2/3;
  overflow: hidden;
  background: linear-gradient(145deg,#181a27,#0e0f17);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.card-main:focus-visible { outline: 2px solid #c4a0f1; outline-offset: 5px; }
.poster-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .5s ease; }
.poster-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: #6b6879; font-size: 42px; font-weight: 900; }
.card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 10px;
  transition: opacity .2s ease;
}
@media (hover: hover) {
  .media-card:hover .poster-wrap { transform: translateY(-7px) scale(1.02); border-color: rgba(167,139,250,.7); box-shadow: 0 22px 50px rgba(0,0,0,.48), 0 0 0 1px rgba(139,92,246,.18); }
  .media-card:hover img { transform: scale(1.045); }
  .media-card:hover .card-overlay { opacity: 1; }
}
/* P0 keyboard parity: quick actions (▶/＋) are real tab stops now, so the
   overlay must appear while any part of the card holds focus — not only on
   hover, which keyboard users never trigger. */
@media (hover: hover) {
  .media-card:focus-within .poster-wrap { transform: translateY(-7px) scale(1.02); border-color: rgba(167,139,250,.7); box-shadow: 0 22px 50px rgba(0,0,0,.48), 0 0 0 1px rgba(139,92,246,.18); }
  .media-card:focus-within .card-overlay { opacity: 1; }
}
/* Touch devices have no hover: keep the overlay (library badge) permanently
   visible with a lighter shade, and skip the quick actions — the whole
   card already opens details on tap. */
@media (hover: none) {
  .card-overlay { background: linear-gradient(0deg, rgba(0,0,0,.62), transparent 34%); opacity: 1; transition: none; }
  .media-card > .card-quick { display: none; }
  .media-card.has-progress > .card-quick {
    display: grid; opacity: 1; width: 44px; height: 44px;
    left: auto; right: 8px; top: calc(100cqi * 3 / 2 - 52px);
  }
}
.play-dot { position: relative; z-index: 4; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: linear-gradient(145deg,var(--purple),var(--pink)); box-shadow: 0 8px 22px rgba(139,92,246,.45); cursor: pointer; font: inherit; font-weight: 900; transition: transform .16s ease, box-shadow .16s ease; }
@media (hover: hover) {
  .play-dot:hover { transform: scale(1.08); box-shadow: 0 10px 26px rgba(139,92,246,.6); }
}
.overlay-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.library-badge { padding: 5px 7px; border-radius: 8px; background: rgba(21,128,61,.95); font-size: 10px; font-weight: 800; }
/* Green means "press play and it starts"; a saved title still has to be
   prepared, so it wears the accent colour instead. */
.library-badge-saved { background: rgba(139,92,246,.9); }
/* What the copy in the library actually is: resolution and audio languages. */
.card-library-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.card-library-badge { padding: 2px 6px; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; color: #cfc9dd; background: rgba(255,255,255,.06); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.card-flag { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 4px 8px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; background: linear-gradient(135deg,rgba(236,72,153,.94),rgba(139,92,246,.94)); box-shadow: 0 6px 16px rgba(0,0,0,.35); font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.card-copy { padding: 10px 3px 0; }
.card-title {
  color: #f5f3fa;
  text-overflow: ellipsis;
}
.card-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.card-sub { overflow: hidden; margin-top: 3px; color: #8a8798; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.card-rating { color: #eab308; }
.card-rating:empty { display: none; }
.search-hit { padding: 0 1px; border-radius: 3px; color: #fff; background: rgba(139,92,246,.4); }
.anime-card .poster-wrap { border-color: rgba(244,114,182,.12); }
.anime-card .card-title { min-height: 35px; display: -webkit-box; overflow: hidden; line-height: 1.28; text-overflow: initial; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.anime-card .card-meta { align-items: center; margin-top: 5px; }
.anime-card .card-rating { flex: 0 0 auto; border: 1px solid rgba(250,204,21,.16); border-radius: 999px; padding: 2px 6px; background: rgba(250,204,21,.07); font-size: 10px; font-weight: 800; }
.anime-card .card-sub { margin-top: 5px; color: #8c8798; }
.anime-card-stats { min-height: 27px; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 4px; margin-top: 6px; font-size: 10.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
.anime-mal-score, .anime-favorites { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 4px; min-height: 24px; border: 1px solid; border-radius: 8px; padding: 3px 4px; line-height: 1; white-space: nowrap; }
.anime-mal-score { color: #f1d694; border-color: rgba(240,207,132,.16); background: rgba(226,187,100,.075); }
.anime-mal-score b { color: #c6b390; font-size: 8.5px; letter-spacing: .035em; }
.anime-favorites { color: #f5a1c7; border-color: rgba(244,114,182,.17); background: rgba(219,39,119,.085); }
.anime-favorites svg { flex: 0 0 12px; width: 12px; height: 12px; fill: #f47bac; }
.anime-card-audience { overflow: hidden; margin-top: 4px; color: #958da5; font-size: 10px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.anime-card .card-meta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anime-format, .anime-status { position: absolute; z-index: 3; top: 9px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; padding: 4px 6px; color: #fff; background: rgba(10,10,16,.76); backdrop-filter: blur(10px); font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.anime-format { left: 9px; }
.anime-status { right: 9px; color: #a5f3fc; border-color: rgba(34,211,238,.26); }
.anime-status.upcoming { color: #f5d0fe; border-color: rgba(244,114,182,.3); }
.episode-progress-badge { position: absolute; z-index: 4; top: 9px; left: 9px; min-width: 44px; padding: 5px 7px; border: 1px solid rgba(196,181,253,.32); border-radius: 9px; color: #f5f3ff; background: rgba(20,16,34,.84); box-shadow: 0 5px 16px rgba(0,0,0,.3); font-size: 11px; font-weight: 850; text-align: center; backdrop-filter: blur(10px); }
.anime-card .episode-progress-badge { top: 36px; }
.episode-progress-badge[data-complete="true"] { border-color: rgba(74,222,128,.42); color: #bbf7d0; background: rgba(20,83,45,.82); }
.season-progress-badge { position: absolute; z-index: 4; top: 40px; left: 9px; max-width: calc(100% - 18px); overflow: hidden; padding: 4px 7px; border: 1px solid rgba(196,181,253,.24); border-radius: 8px; color: #ddd6fe; background: rgba(24,18,43,.8); box-shadow: 0 5px 14px rgba(0,0,0,.26); backdrop-filter: blur(10px); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.anime-card .season-progress-badge { top: 67px; }
/* Personal ratings: a quiet label over the artwork, with an explicit scale. */
.card-personal-badge { position: absolute; z-index: 4; top: 8px; right: 8px; min-height: 28px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid rgba(209,181,246,.32); border-radius: 9px; color: #edddff; background: rgba(21,15,32,.9); box-shadow: 0 2px 8px rgba(0,0,0,.18); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; pointer-events: none; user-select: none; }
.card-personal-badge .badge-star { width: 12px; height: 12px; flex: none; fill: #c7a4ee; }
.card-personal-badge .badge-number { font-size: 13px; font-weight: 750; }
.card-personal-badge .badge-scale { font-size: 10px; color: #b7a6ca; }
.card-personal-badge.has-status-above { top: 37px; }
@media (max-width: 650px) {
  .card-personal-badge { top: 7px; right: 7px; padding: 5px 7px; min-height: 27px; }
  .card-personal-badge .badge-number { font-size: 12px; }
  .card-personal-badge.has-status-above { top: 35px; }
}
.poster-grid {
  display: grid;
}
.poster-grid .media-card { width: 100%; }
.filtered-result .row-title { margin-bottom: 17px; }

/* Library shelf: modern grid with integrated search, live filters, refresh, and clear stats */
.library-toolbar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 30px;
  padding: 20px clamp(18px, 2.5vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 23px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 20px 55px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.library-toolbar-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.library-search-wrap {
  position: relative;
  height: 42px;
  flex: 1 1 clamp(230px, 28vw, 380px);
  max-width: 420px;
  min-width: 190px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.library-search-wrap:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

.library-search-wrap:focus-within {
  border-color: rgba(139, 92, 246, 0.75);
  background: rgba(18, 19, 29, 0.96);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.16);
}

.library-search-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: #8d8a9c;
  pointer-events: none;
  transition: color 0.2s ease;
}

.library-search-wrap:focus-within .library-search-icon {
  color: #c4b5fd;
}

.library-search-input {
  min-width: 0;
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
}

.library-search-input::placeholder {
  color: #8b8899;
}

.library-search-input::-webkit-search-cancel-button {
  display: none;
}

.library-search-clear {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #a9a5bb;
  background: transparent;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease;
}

.library-search-clear::before {
  content: "";
  position: absolute;
  inset: -7px;
}

.library-search-clear:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.library-search-clear .ui-icon {
  width: 13px;
  height: 13px;
}

.library-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.library-reset-chip {
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0 14px;
  color: #cfccdb;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.library-reset-chip:hover {
  color: #fecdd3;
  border-color: rgba(244, 114, 182, 0.45);
  background: rgba(219, 39, 119, 0.14);
}

.library-reset-chip .ui-icon {
  width: 13px;
  height: 13px;
  color: #8d8a9c;
  transition: color 0.16s ease;
}

.library-reset-chip:hover .ui-icon {
  color: #fecdd3;
}

.library-refresh-button {
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0 15px;
  color: #cfccdb;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.library-refresh-button:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
}

.library-refresh-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: #8d8a9c;
  transition: color 0.16s ease;
}

.library-refresh-button:hover .library-refresh-icon {
  color: #fff;
}

.library-refresh-button.loading {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}

.library-refresh-button.loading .library-refresh-icon {
  color: #c4b5fd;
  animation: search-spin 0.8s linear infinite;
}

.library-count {
  height: 42px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 0 14px;
  color: #9f9bab;
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.library-toolbar .filter-block {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  display: grid;
  gap: 7px;
  align-content: start;
}

.library-toolbar .sort-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow: visible;
  margin: 0;
  padding: 0;
}

.library-toolbar .filter-label {
  color: #8b8899;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.library-toolbar .filter-chip {
  min-height: 40px;
  padding: 0 14px;
}

.library-section .library-grid {
  padding-bottom: 4px;
}

.library-empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 28px;
  text-align: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  margin: 20px 0;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.library-empty-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 18px;
  color: #c4b5fd;
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.25), rgba(168, 85, 247, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 30px rgba(0, 0, 0, 0.2);
}

.library-empty-icon .ui-icon {
  width: 26px;
  height: 26px;
}

.library-empty-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 750;
  color: #fff;
  letter-spacing: -0.02em;
}

.library-empty-type {
  margin: 0 0 22px;
  color: #9f9bab;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  max-width: 440px;
}

.library-empty-reset {
  min-height: 44px;
  padding: 0 24px;
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 14px;
}

@media (max-width: 640px) {
  .library-toolbar {
    padding: 16px 14px;
    margin-bottom: 20px;
    border-radius: 20px;
  }
  .library-toolbar-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-bottom: 14px;
  }
  .library-search-wrap {
    max-width: 100%;
    flex: 1 1 100%;
  }
  .library-toolbar-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: 0;
  }
  .library-reset-chip, .library-refresh-button, .library-count {
    height: 38px;
    font-size: 10.5px;
  }
  .library-toolbar .filter-block {
    flex: 1 1 100%;
  }
}

.skeleton { pointer-events: none; }
.skeleton .poster-wrap, .skeleton-line { background: linear-gradient(100deg,#141620 30%,#222433 48%,#141620 66%); background-size: 220% 100%; animation: shimmer 1.5s infinite; }
.skeleton-line { height: 13px; margin-top: 10px; border-radius: 7px; }
@keyframes shimmer { to { background-position-x: -220%; } }

.empty-state { max-width: 620px; margin: 70px auto; padding: 45px; border: 1px solid rgba(255,255,255,.08); border-radius: 26px; background: rgba(255,255,255,.04); text-align: center; }
.empty-state h2 { margin: 8px 0; }
.empty-state p { margin: 0 0 24px; color: var(--muted); }
.empty-icon { color: #6d687e; font-size: 54px; }
.empty-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.empty-filters[hidden] { display: none; }
.empty-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(167,139,250,.34);
  padding: 7px 12px;
  color: #ddd6fe;
  background: rgba(139,92,246,.13);
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.empty-filter-chip:hover, .empty-filter-chip:focus-visible { border-color: rgba(167,139,250,.8); color: #fff; background: rgba(139,92,246,.3); outline: 0; }
.empty-filter-cross { color: #a99fc4; font-size: 15px; font-weight: 800; line-height: 1; }
.empty-filter-chip:hover .empty-filter-cross { color: #fff; }

.loading-screen { position: fixed; z-index: 5000; inset: 0; display: grid; place-content: center; justify-items: center; background: #090a0f; transition: opacity .45s ease, visibility .45s ease; }
.catalog-returning .loading-screen { display: none; }
.loading-screen.done { opacity: 0; visibility: hidden; }
.loader-logo { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 25px; background: linear-gradient(145deg,var(--purple),var(--pink)); box-shadow: 0 20px 70px rgba(139,92,246,.4); font-size: 40px; font-weight: 900; animation: breathe 1.6s ease-in-out infinite; }
.loader-line { width: 180px; height: 3px; margin-top: 30px; overflow: hidden; border-radius: 3px; background: #1e202b; }
.loader-line span { width: 45%; height: 100%; display: block; background: linear-gradient(90deg,var(--purple),var(--cyan)); animation: loader 1.3s ease-in-out infinite; }
.loading-screen p { color: #8b8899; font-size: 13px; }

.season-preparation { position: fixed; z-index: 6800; inset: 0; display: grid; place-items: center; padding: 22px; background: radial-gradient(circle at 50% 40%,rgba(91,33,182,.2),transparent 44%),rgba(5,6,11,.9); backdrop-filter: blur(22px); }
.season-preparation[hidden] { display: none; }
.season-preparation-card { width: min(460px,100%); padding: 34px 30px 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 28px; background: radial-gradient(circle at 85% 0,rgba(217,70,239,.17),transparent 46%),linear-gradient(150deg,rgba(25,21,40,.98),rgba(12,13,21,.97)); box-shadow: 0 34px 110px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.08); text-align: center; }
.season-orbit { position: relative; width: 106px; height: 106px; margin: 0 auto 23px; }
.season-orbit::before, .season-orbit::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(196,181,253,.2); border-radius: 50%; }
.season-orbit::after { inset: 20px; border-color: rgba(56,189,248,.16); }
.season-orbit-logo { position: absolute; z-index: 2; inset: 29px; display: grid; place-items: center; border-radius: 17px; color: #fff; background: linear-gradient(145deg,var(--purple),var(--pink)); box-shadow: 0 14px 38px rgba(139,92,246,.42); font-size: 25px; font-weight: 950; animation: season-breathe 1.7s ease-in-out infinite; }
.season-orbit i { position: absolute; z-index: 3; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #c4b5fd; box-shadow: 0 0 15px currentColor; animation: season-orbit 2.6s linear infinite; }
.season-orbit i:nth-of-type(2) { width: 6px; height: 6px; margin: -3px; color: #67e8f9; background: currentColor; animation-duration: 3.6s; animation-direction: reverse; }
.season-orbit i:nth-of-type(3) { width: 5px; height: 5px; margin: -2.5px; color: #f0abfc; background: currentColor; animation-duration: 4.8s; }
.season-preparation-card .eyebrow { margin-bottom: 8px; }
.season-preparation-card h2 { margin: 0; font-size: clamp(26px,5vw,38px); line-height: 1.08; letter-spacing: -.025em; }
.season-preparation-card > p { min-height: 43px; margin: 13px auto 21px; color: #aaa7b7; font-size: 14px; line-height: 1.5; }
.season-progress { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.season-progress span { display: block; width: 8%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7c3aed,#d946ef,#38bdf8); box-shadow: 0 0 16px rgba(167,139,250,.62); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.season-progress-label { display: block; min-height: 18px; margin-top: 11px; color: #ddd6fe; font-size: 12px; }
.season-preparation-card > small { display: block; margin-top: 15px; color: rgba(255,255,255,.38); font-size: 11px; line-height: 1.45; }
.season-preparation-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.season-preparation-actions .ghost-button { width: 100%; margin: 0; }
.season-sources { border-color: rgba(167,139,250,.32); color: #ddd6fe; background: rgba(124,58,237,.12); }

/* Source drawer: ranked releases with cache state, opened from the preparing
   card (and the details card) so a stuck or unwanted release can be swapped
   without leaving the flow. */
.source-drawer { position: fixed; z-index: 6900; inset: 0; }
.source-drawer[hidden] { display: none; }
.source-drawer-scrim { position: absolute; inset: 0; background: rgba(4,5,9,.66); backdrop-filter: blur(6px); animation: source-scrim-in .2s ease-out; }
.source-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px,100%); display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,.12); background: linear-gradient(160deg,rgba(24,21,38,.99),rgba(11,12,20,.99)); box-shadow: -30px 0 90px rgba(0,0,0,.6); animation: source-drawer-in .24s cubic-bezier(.2,.8,.2,1); padding-bottom: env(safe-area-inset-bottom,0); }
.source-drawer-head { display: flex; align-items: center; gap: 12px; padding: calc(18px + env(safe-area-inset-top,0px)) 20px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.source-drawer-head h2 { margin: 0; flex: 1; font-size: 19px; letter-spacing: -.02em; }
.source-drawer-close { position: static; flex: 0 0 auto; }
.source-drawer-hint { margin: 0; padding: 12px 20px 4px; color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.45; }
.source-quality-scopes { display: flex; gap: 6px; padding: 8px 20px 4px; }
.source-quality-option { min-height: 32px; flex: 1; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.04); color: #b9b5c6; cursor: pointer; font-size: 12px; font-weight: 750; }
.source-quality-option:hover { color: #fff; border-color: rgba(167,139,250,.4); }
.source-quality-option.active { color: #fff; border-color: rgba(167,139,250,.6); background: linear-gradient(135deg,rgba(124,58,237,.6),rgba(168,85,247,.38)); }
.source-drawer-list { flex: 1; overflow-y: auto; padding: 10px 14px 20px; display: flex; flex-direction: column; gap: 8px; }
.source-empty { margin: 30px auto; color: var(--muted); font-size: 13px; text-align: center; }
.source-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; width: 100%; padding: 13px 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; color: inherit; background: rgba(255,255,255,.03); text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.source-item:hover, .source-item:focus-visible { border-color: rgba(167,139,250,.5); background: rgba(124,58,237,.14); outline: none; }
.source-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.source-item.is-current { border-color: rgba(52,211,153,.5); background: rgba(16,185,129,.1); }
.source-item-title { grid-column: 1 / 2; font-size: 13px; font-weight: 650; line-height: 1.35; word-break: break-word; }
.source-item-badges { grid-column: 1 / 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.source-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #cbd5e1; background: rgba(255,255,255,.07); }
.source-badge.cached { color: #6ee7b7; background: rgba(16,185,129,.16); }
.source-badge.res { color: #c4b5fd; background: rgba(139,92,246,.16); }
.source-badge.nzb { color: #7dd3fc; background: rgba(14,165,233,.16); }
.source-badge.off { color: #fcd34d; background: rgba(245,158,11,.14); }
.source-show-all { align-self: center; margin: 6px auto 0; }
.source-item-side { grid-column: 2 / 3; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; }
.source-item-size { color: rgba(255,255,255,.62); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.source-item-pick { color: #a78bfa; font-size: 12px; font-weight: 750; white-space: nowrap; }
.source-item.is-current .source-item-pick { color: #6ee7b7; }
@keyframes source-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes source-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 560px) { .source-drawer-panel { width: 100%; } }
@keyframes season-orbit { from { transform: rotate(0deg) translateX(49px) rotate(0deg); } to { transform: rotate(360deg) translateX(49px) rotate(-360deg); } }
@keyframes season-breathe { 50% { transform: scale(1.06); box-shadow: 0 17px 48px rgba(139,92,246,.55); } }
@keyframes loader { 0% { transform: translateX(-120%); } 100% { transform: translateX(340%); } }
@keyframes breathe { 50% { transform: scale(1.06); } }

.modal-backdrop { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(2,3,7,.78); backdrop-filter: blur(18px); }
.modal-backdrop[hidden] { display: none; }
.details-card {
  position: relative;
  width: min(1080px,100%);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.12);
}
/* Native scrollbar styling for the details modal (audit D4: the hand-rolled
   overlay scrollbar was removed in favour of the platform scrollbar). */
@media (hover: hover) and (pointer: fine) {
  .details-card { --scrollbar-end-gap: 28px; scrollbar-width: thin; scrollbar-color: #8b5cf6 transparent; scrollbar-gutter: stable; }
  .details-card::-webkit-scrollbar { width: 12px; background: transparent; border-radius: 28px; }
  .details-card::-webkit-scrollbar-track { background: transparent; border-radius: 999px; margin-top: var(--scrollbar-end-gap); margin-bottom: var(--scrollbar-end-gap); }
  .details-card::-webkit-scrollbar-thumb { min-height: 48px; border: 3px solid transparent; border-radius: 999px; background: #9b78ed; background-clip: padding-box; }
  .details-card::-webkit-scrollbar-thumb:hover { background-color: #c4b5fd; }
  .details-card::-webkit-scrollbar-thumb:active { background-color: #a78bfa; }
  .details-card::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  .details-card::-webkit-scrollbar-corner { background: transparent; }
  /* Chromium's standard properties override its pseudo-element styling. */
  @supports selector(::-webkit-scrollbar) {
    .details-card { scrollbar-width: auto; scrollbar-color: auto; }
  }
  @media (max-width: 680px) {
    .details-card { --scrollbar-end-gap: 22px; }
  }
}
.details-frame { position: relative; min-width: 0; width: min(1080px,100%); }
.modal-close {
  position: absolute;
  z-index: 8;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  color: #fff;
  background: rgba(9,10,15,.68);
  cursor: pointer;
  font-size: 25px;
}
.details-backdrop {
  position: absolute;
  inset: 0 0 auto;
  background-size: cover;
  transition: filter .35s ease,opacity .35s ease,transform .5s ease;
}
.details-card.details-loading .details-backdrop.poster-preview { opacity: .68; filter: blur(14px) saturate(.8); transform: scale(1.06); }
.details-gradient {
  position: absolute;
  inset: 0 0 auto;
}
.details-layout {
  position: relative;
  z-index: 2;
  display: grid;
}
/* TitleDetails renders the heading as its own band (React title sheet centres
   it across the card). The classic builders keep `.details-heading` inside
   `.details-copy`, so this direct-child rule only reaches the design-system
   preview of the component. */
.details-layout > .details-heading { grid-column: 1 / -1; min-width: 0; }
.details-poster {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  background: #1a1c27;
}
.details-copy { padding-bottom: 4px; }
.details-copy h2 {
  max-width: 720px;
  margin: 0 0 8px;
  text-wrap: balance;
}
.anime-original { max-width: 720px; margin: 0 0 10px; overflow: hidden; color: #aaa3b8; font-size: 13px; font-weight: 600; letter-spacing: .025em; text-overflow: ellipsis; white-space: nowrap; }
.anime-original[hidden] { display: none; }
.details-description-loading { color: #aaa6b6; }
.details-description-loading::after { content: ""; width: 4px; height: 4px; display: inline-block; margin: 0 0 2px 9px; border-radius: 50%; background: #c4b5fd; box-shadow: 8px 0 0 rgba(196,181,253,.55),16px 0 0 rgba(196,181,253,.25); animation: detail-dots 1s ease-in-out infinite alternate; }
.details-loading-action { position: relative; min-width: 168px; overflow: hidden; opacity: 1; color: #d8d4e2; cursor: wait; }
.details-loading-action::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg,transparent 25%,rgba(255,255,255,.12) 48%,transparent 72%); transform: translateX(-120%); animation: detail-shine 1.35s ease-in-out infinite; }
.details-error .details-description-loading { display: none; }
@keyframes detail-dots { to { opacity: .35; transform: translateX(2px); } }
@keyframes detail-shine { to { transform: translateX(120%); } }
.anime-facts { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 9px; margin: -5px clamp(22px,5vw,58px) 30px; padding: 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 19px; background: linear-gradient(135deg,rgba(124,58,237,.09),rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.anime-facts[hidden] { display: none; }
.anime-fact { min-width: 0; min-height: 66px; display: grid; align-content: center; gap: 5px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.055); border-radius: 13px; background: rgba(9,10,16,.28); }
.anime-fact[data-kind="status"] { border-color: rgba(34,211,238,.14); background: rgba(8,145,178,.055); }
.anime-fact[data-kind="community"], .anime-fact[data-kind="audience"] { border-color: rgba(244,114,182,.12); background: rgba(219,39,119,.04); }
.anime-facts dt { color: #817b90; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.anime-facts dd { margin: 0; overflow-wrap: anywhere; color: #ece9f5; font-size: 12.5px; font-weight: 700; line-height: 1.3; }

.genre-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 24px; }
.genre-chip { padding: 6px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #c4c0cf; background: rgba(255,255,255,.06); font-size: 12px; }
.episodes { position: relative; z-index: 3; padding: 0 clamp(22px,5vw,58px) 50px; }
.episodes-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.episodes-heading-copy { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; }
.episodes-heading h3 { margin: 0; font-size: 23px; }
.episodes-heading-copy > span { padding: 4px 8px; border: 1px solid rgba(74,222,128,.24); border-radius: 999px; color: #bbf7d0; background: rgba(34,197,94,.08); font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.episodes-heading-copy > span[hidden] { display: none; }
/* Season switch: the site's own dropdown vocabulary (trigger + listbox), so
   the control carries watch state -- a season's progress, and which one the
   browser resumed on -- that a native <select> has nowhere to put. */
.season-switch { position: relative; flex: 0 0 auto; }
.season-native { display: none; }
.season-trigger { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 8px 12px; color: #fff; background: #202230; cursor: pointer; text-align: left; }
.episodes-heading-controls { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.episode-layout { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: rgba(255,255,255,.05); }
.episode-layout-button { width: 32px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; color: #a6a3b4; background: transparent; cursor: pointer; transition: color .16s ease, background .16s ease; }
.episode-layout-button .ui-icon { width: 16px; height: 16px; }
.episode-layout-button:hover { color: #fff; }
.episode-layout-button[aria-pressed="true"] { color: #fff; background: rgba(139,92,246,.34); }
.episode-layout-button:focus-visible { outline: 2px solid rgba(167,139,250,.8); outline-offset: 1px; }
/* List mode is CSS-only: the same card DOM relaid out as a wide row. */
.episode-grid.episode-grid-list { grid-template-columns: 1fr; gap: 8px; }
.episode-grid-list .episode-main { display: grid; grid-template-columns: clamp(108px,20vw,164px) 1fr; align-items: center; }
.episode-grid-list .episode-main:not(.has-thumbnail) { grid-template-columns: 1fr; }
.episode-grid-list .episode-body { grid-column: 2; padding: 10px 180px 10px 14px; }
.episode-grid-list .episode-main:not(.has-thumbnail) .episode-body { grid-column: 1; }
.episode-grid-list .episode-label { min-height: 0; padding: 0 0 4px 0; font-size: 14px; line-height: 1.35; white-space: normal; }
/* The base badge rule lives further down the file at equal specificity, so
   this override has to outrank it rather than merely follow it. */
.episode-grid.episode-grid-list .episode-main .episode-watch-badge { top: 50%; right: 180px; transform: translateY(-50%); }
.episode-grid-list .episode-card:has(.episode-watch-badge) .episode-body { padding-right: 285px; }
.episode-grid-list .episode-party { top: 50%; bottom: auto; transform: translateY(-50%); }
.episode-grid-list .episode-main img { height: 100%; align-self: stretch; }
.episode-grid.episode-grid-list .episode-card.episode-watched .episode-main.has-thumbnail::before { right: auto; bottom: 0; width: clamp(108px,20vw,164px); aspect-ratio: auto; }
.episode-grid-list .episode-card.episode-watched .episode-main.has-thumbnail::after { top: 50%; left: 8px; width: 26px; height: 26px; margin-top: -13px; font-size: 14px; }
.episode-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.episode-card { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; color: #fff; background: rgba(255,255,255,.045); text-align: left; transition: border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease; }
.episode-card.episode-watched { border-color: rgba(74,222,128,.48); background: linear-gradient(145deg,rgba(34,197,94,.12),rgba(255,255,255,.035)); box-shadow: inset 0 0 0 1px rgba(74,222,128,.08),0 10px 28px rgba(0,0,0,.22); }
.episode-card.episode-in-progress { border-color: rgba(196,181,253,.34); }
.episode-main { position: relative; width: 100%; overflow: hidden; border: 0; padding: 0; color: #fff; background: transparent; cursor: pointer; text-align: left; }
.episode-main img { width: 100%; aspect-ratio: 16/9; display: block; object-fit: cover; background: #181a24; transition: filter .22s ease,transform .3s ease; }
.episode-card.episode-watched .episode-main img { filter: saturate(.7) brightness(.68); }
.episode-card.episode-watched .episode-main.has-thumbnail::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; aspect-ratio: 16/9; pointer-events: none; background: linear-gradient(145deg,rgba(10,40,25,.08),rgba(21,128,61,.25)); }
.episode-card.episode-watched .episode-main.has-thumbnail::after { content: "✓"; position: absolute; z-index: 3; top: 10px; left: 10px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(187,247,208,.5); border-radius: 50%; color: #ecfdf5; background: rgba(22,163,74,.88); box-shadow: 0 7px 20px rgba(0,0,0,.36),0 0 18px rgba(34,197,94,.2); font-size: 16px; font-weight: 900; backdrop-filter: blur(8px); }
.episode-body { display: flex; flex-direction: column; min-width: 0; min-height: 38px; padding: 8px 46px 10px 10px; text-align: left; }
.episode-main .episode-label { display: block; min-height: 0; padding: 0 0 4px 0; font-size: 13px; line-height: 1.35; font-weight: 600; }
.episode-card.episode-watched .episode-label { color: #dcfce7; font-weight: 760; }
.episode-main .episode-watch-badge { position: absolute; z-index: 3; top: 10px; right: 10px; min-height: 0; max-width: calc(100% - 62px); overflow: hidden; padding: 6px 9px; border: 1px solid rgba(134,239,172,.45); border-radius: 999px; color: #dcfce7; background: rgba(11,55,31,.9); box-shadow: 0 6px 18px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.08); font-size: 10px; font-weight: 850; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; backdrop-filter: blur(10px); }
.episode-card.episode-in-progress .episode-watch-badge { border-color: rgba(196,181,253,.35); color: #ddd6fe; background: rgba(28,20,52,.84); }
.episode-main .episode-progress-bar { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 4px; min-height: 0; padding: 0; background: rgba(255,255,255,.18); }
.episode-main .episode-progress-bar span { width: 0; height: 100%; min-height: 0; padding: 0; background: linear-gradient(90deg,var(--purple),var(--pink)); }
.episode-party { position: absolute; right: 8px; bottom: 7px; width: 34px; height: 30px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: #fff; background: rgba(26,22,40,.9); cursor: pointer; box-shadow: 0 7px 18px rgba(0,0,0,.25); }
/* 34x30 is well under the 44px tap minimum; grow the hit area invisibly. */
.episode-party::before { content: ""; position: absolute; inset: -8px; }
.episode-party:hover { border-color: rgba(167,139,250,.75); background: rgba(124,58,237,.75); }
.episode-party .ui-icon { width: 18px; height: 18px; }
.episode-party-text { display: none; font-size: 12px; font-weight: 750; white-space: nowrap; }
.episode-grid-list .episode-party { width: auto; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; }
.episode-grid-list .episode-party-text { display: inline; }
/* Episode overview: present only when the catalog knows it. */
.episode-main .episode-overview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 0; padding: 0; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; cursor: pointer; transition: color .15s ease; }
.episode-main .episode-overview:hover { color: #e2e8f0; }
.episode-main .episode-overview.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }
.episode-grid-list .episode-main .episode-overview { -webkit-line-clamp: 4; }
.episode-grid-list .episode-main .episode-overview.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* Air-date badge for unaired episodes; filler/recap dots for mapped anime. */
.episode-main .episode-watch-badge.episode-upcoming { border-color: rgba(125,211,252,.5); color: #e0f2fe; background: rgba(12,47,73,.9); }
.episode-flag-dot { position: absolute; z-index: 3; top: 10px; left: 10px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.episode-flag-dot.is-filler { background: #94a3b8; }
.episode-flag-dot.is-recap { background: #fbbf24; }
.episode-card.episode-watched .episode-flag-dot { top: auto; bottom: 12px; }
.episode-season-note { margin: 10px 2px 0; color: var(--muted); font-size: 12.5px; }
.episode-season-note[hidden] { display: none; }
/* Season poster beside the grid: small, floated, gone when unmapped. */
/* Missing or broken stills: a numbered tile instead of a dark hole. */
.episode-thumb-missing { display: grid; place-items: center; width: 100%; aspect-ratio: 16/9; color: rgba(255,255,255,.5); background: linear-gradient(145deg,#232636,#181a24); font-size: 26px; font-weight: 850; }
/* Episode hover is defined with the episode browser below. */
@media (prefers-reduced-motion: reduce) {
  .episode-card:hover, .episode-card:hover .episode-main img { transform: none; }
}

.profile-gate { z-index: 6000; }
.profile-card { width: min(520px,100%); padding: 42px; border: 1px solid rgba(255,255,255,.1); border-radius: 28px; background: rgba(17,19,28,.97); box-shadow: var(--shadow); text-align: center; }
.profile-card h2 { margin: 6px 0 9px; font-size: 36px; }
.profile-card > p { margin: 0 0 27px; color: var(--muted); }
.login-form { display: grid; gap: 15px; text-align: left; }
.login-form label { display: grid; gap: 7px; color: #d7d8e2; font-size: 13px; font-weight: 750; }
.login-form input { width: 100%; height: 48px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; outline: none; padding: 0 14px; color: #fff; background: rgba(255,255,255,.055); font: inherit; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.login-form input:focus { border-color: rgba(167,139,250,.9); background: rgba(139,92,246,.08); box-shadow: 0 0 0 4px rgba(139,92,246,.13); }
.login-submit { width: 100%; margin-top: 3px; }
.login-error { margin: -2px 0 0; color: #fda4af; font-size: 13px; text-align: center; }
.login-error[hidden] { display: none; }
/* Câlin 🤗 — текст нетронут, стилизуем только оболочку. Три слоя милоты:
   сжатие объятий (squeeze) + покачивание эмодзи (snuggle), сердечки-частицы
   и люкс-пилюля (дрейф градиента + блик). Всё на transform/opacity —
   iPad-Safari красит это композитингом, не repaint'ом. */
.cuddle-toast { position: fixed; z-index: 6900; left: 50%; top: 50%; pointer-events: none; opacity: 0; transform: translate(-50%,-60%) scale(.9); }
.cuddle-pill { position: relative; display: block; overflow: hidden; padding: 15px 27px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #fff; background: rgba(139,92,246,.96); box-shadow: 0 18px 55px rgba(190,24,93,.3), 0 0 90px rgba(244,114,182,.4), inset 0 1px 0 rgba(255,255,255,.3); backdrop-filter: blur(18px); font-size: clamp(18px,4vw,24px); font-weight: 850; letter-spacing: .01em; text-shadow: 0 1px 10px rgba(88,12,52,.45); }
/* Люкс-слой 1: дрейфующий градиент — сдвигаем целый слой, а не background-position. */
.cuddle-pill::before { content: ""; position: absolute; inset: -40% -60%; z-index: -1; background: linear-gradient(120deg, rgba(236,72,153,.96), rgba(139,92,246,.96) 42%, rgba(244,114,182,.96) 78%, rgba(168,85,247,.96)); background-size: 220% 100%; animation: cuddle-drift 3.2s ease-in-out infinite alternate; }
/* Люкс-слой 2: диагональный блик — тот же приём, что detail-shine у кнопок. */
.cuddle-pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.14) 48%, transparent 66%); transform: translateX(-120%); animation: cuddle-shine 1.9s ease-in-out 1.1s 2; }
.cuddle-pill-inner { position: relative; z-index: 2; display: inline-block; }
.cuddle-emoji { display: inline-block; animation: cuddle-snuggle 1.6s ease-in-out infinite; transform-origin: 50% 62%; }
/* Сердечки: absolute внутри пилюли — не ломают центрирование. */
.cuddle-heart { position: absolute; z-index: 1; top: 50%; left: 50%; font-size: 15px; opacity: 0; pointer-events: none; }
.cuddle-heart:nth-of-type(1) { --cuddle-hx: 34px; animation: cuddle-heart-float 2.6s ease-out .15s 1 both; }
.cuddle-heart:nth-of-type(2) { --cuddle-hx: -6px; animation: cuddle-heart-float 2.6s ease-out .4s 1 both; }
.cuddle-heart:nth-of-type(3) { --cuddle-hx: -42px; animation: cuddle-heart-float 2.6s ease-out .65s 1 both; }
.cuddle-toast.show .cuddle-pill { animation: cuddle-squeeze 1.6s ease-in-out .35s infinite; }
.cuddle-toast.show { animation: cuddle-in-out 3.4s cubic-bezier(.2,.8,.2,1) forwards; }
.cuddle-toast[hidden] { display: none; }
@keyframes cuddle-squeeze { 0%, 100% { transform: scale(1,1); } 50% { transform: scale(1.05,.95); } }
@keyframes cuddle-snuggle { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes cuddle-heart-float {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--cuddle-hx, 34px)), calc(-50% - 84px)) scale(1.15); }
}
@keyframes cuddle-drift { from { transform: translateX(-9%); } to { transform: translateX(9%); } }
@keyframes cuddle-shine { to { transform: translateX(120%); } }
@keyframes cuddle-in-out { 0% { opacity: 0; transform: translate(-50%,-64%) scale(.9); } 14%,72% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-58%) scale(.96); } }

.toast { position: fixed; z-index: 7000; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-width: min(520px,calc(100vw - 32px)); padding: 12px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; color: #fff; background: rgba(17,19,28,.95); box-shadow: var(--shadow); }
.toast { display: inline-flex; align-items: center; gap: 11px; }
.toast-glyph { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 900; line-height: 1; }
.toast-text { min-width: 0; }
.toast-info .toast-glyph { color: #ddd6fe; background: rgba(139,92,246,.28); }
.toast-success { border-color: rgba(74,222,128,.34); }
.toast-success .toast-glyph { color: #dcfce7; background: rgba(34,197,94,.42); }
.toast-error { border-color: rgba(248,113,113,.36); }
.toast-error .toast-glyph { color: #fee2e2; background: rgba(239,68,68,.44); }
.toast-undo { border: 0; border-radius: 8px; padding: 6px 9px; color: #ddd6fe; background: rgba(139,92,246,.18); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; }
.toast-undo:hover, .toast-undo:focus-visible { color: #fff; background: rgba(139,92,246,.42); }
.toast-undo:focus-visible { outline: 2px solid #c4a0f1; outline-offset: 2px; }
.toast[hidden] { display: none; }
/* translateX(-50%) is the toast's resting position, so the shake has to carry
   it along instead of overwriting it. */
.toast.shake { animation: toast-shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes toast-shake {
  10%, 90% { transform: translateX(calc(-50% - 2px)); }
  20%, 80% { transform: translateX(calc(-50% + 4px)); }
  30%, 50%, 70% { transform: translateX(calc(-50% - 7px)); }
  40%, 60% { transform: translateX(calc(-50% + 7px)); }
}
/* P3: everything added above is decoration — none of it may fight a user who
   asked the system for less motion. Hearts exist only as movement, so they
   disappear entirely instead of freezing mid-air. */
@media (prefers-reduced-motion: reduce) {
  .toast.shake { animation: none; }
  .cuddle-toast.show span { animation: none; }
  .cuddle-toast.show .cuddle-pill,
  .cuddle-pill::before,
  .cuddle-pill::after,
  .cuddle-emoji,
  .cuddle-heart { animation: none; }
  .cuddle-heart { display: none; }
  .surprise-button.rolling > span:first-child { animation: none; }
  .card-drawn .poster-wrap { transform: none; }
}
body.modal-open { overflow: hidden; }

.library-remove-modal { z-index: 5600; }
.library-remove-card { width: min(430px,100%); padding: 30px; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; color: #fff; background: linear-gradient(145deg,rgba(29,22,42,.98),rgba(14,15,23,.98)); box-shadow: 0 30px 90px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.08); text-align: center; }
.library-remove-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 16px; border: 1px solid rgba(251,113,133,.35); border-radius: 18px; color: #fecdd3; background: rgba(190,24,93,.14); font-size: 32px; line-height: 1; }
.library-remove-card h2 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.library-remove-card p { margin: 12px 0 24px; color: #aaa7b7; font-size: 13px; line-height: 1.5; white-space: pre-line; }
/* The person card opens from the details card, so it sits above it. */
.person-modal { z-index: 5700; }
.person-card { position: relative; width: min(760px,100%); max-height: min(86vh,900px); overflow-y: auto; padding: 30px; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; color: #fff; background: linear-gradient(145deg,rgba(29,22,42,.98),rgba(14,15,23,.98)); box-shadow: 0 30px 90px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.08); }
.person-head { display: flex; align-items: center; gap: 18px; padding-right: 40px; }
.person-photo { width: 96px; height: 96px; flex: 0 0 96px; object-fit: cover; object-position: center 20%; border-radius: 20px; background: linear-gradient(145deg,#2a2140,#171325); box-shadow: 0 0 0 1px rgba(214,190,255,.24); }
.person-head-copy { min-width: 0; }
.person-card h2 { margin: 0; font-size: 26px; letter-spacing: -.025em; }
.person-meta { margin: 6px 0 0; color: #aaa7b7; font-size: 12.5px; }
.person-bio { max-height: 8.5em; margin: 18px 0 0; overflow-y: auto; color: #cfc9dd; font-size: 13.5px; line-height: 1.55; }
.person-loading, .person-empty { margin: 22px 0 6px; color: #aaa7b7; font-size: 13px; }
.person-rows { margin-top: 4px; }
.person-rows .catalog-row { margin: 20px 0 0; }
.library-remove-actions { display: flex; justify-content: flex-end; gap: 10px; }
.library-remove-actions button { flex: 1 1 0; min-height: 44px; }
.danger-button { border-color: rgba(251,113,133,.32); color: #ffe4e6; background: rgba(190,24,93,.28); }
.danger-button:hover, .danger-button:focus-visible { border-color: rgba(251,113,133,.72); background: rgba(190,24,93,.56); }

@media (min-width: 1200px) {
  html.obscura-chat-drawer-open body > .topbar { right: var(--obscura-chat-drawer-width); }
  html.obscura-chat-drawer-open body > main { margin-right: var(--obscura-chat-drawer-width); }
  html.obscura-chat-drawer-open .topbar { gap: 10px; }
  html.obscura-chat-drawer-open .brand-copy,
  html.obscura-chat-drawer-open .party-mode-label,
  html.obscura-chat-drawer-open .profile-button-name { display: none; }
  html.obscura-chat-drawer-open .party-mode-button { width: 42px; padding: 0; }
  html.obscura-chat-drawer-open .profile-button { padding-right: 4px; }
  html.obscura-chat-drawer-open .nav-item { padding: 9px 9px; font-size: 12px; }
  html.obscura-chat-drawer-open .search { flex-basis: min(31vw,340px); }
}

/* Between 981px and 1400px the nav, the party pill and the search stop fitting
   together. The nav tightens first, then the party button drops to its icon,
   so the search never gets squeezed down to a few pixels. */
@media (max-width: 1400px) {
  .nav-item { padding: 9px 10px; font-size: 13px; }
}

@media (max-width: 1280px) {
  .party-mode-button { width: 42px; padding: 0; }
  .party-mode-label { display: none; }
}

@media (max-width: 1120px) {
  .brand-copy { display: none; }
  .profile-button-name { display: none; }
  .profile-button { padding-right: 4px; }
}

/* Touch stays on the bottom bar through 1400px, so a 1366px iPad Pro in
   landscape does not switch to the desktop top nav. A mouse does, above 1180. */
@media (max-width: 1180px), (max-width: 1400px) and (any-pointer: coarse) {
  .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(7,8,13,.94); }
  /* Anchor to bottom (not 100dvh) so the bar stays put when Safari's chrome
     collapses, and clear the home indicator via safe-area. */
  .main-nav {
  position: fixed;
  z-index: 100;
  top: auto;
  justify-content: space-around;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 15px 45px rgba(0,0,0,.4);
}
  .brand-copy, .profile-button-name { display: none; }
  .profile-button { padding-right: 4px; }
  .party-mode-button { width: 42px; padding: 0; }
  .party-mode-label { display: none; }
  .search { flex-basis: min(52vw,390px); }
  .discovery-panel { grid-template-columns: 1fr; }
  .discovery-controls { grid-template-columns: minmax(280px,1fr) auto auto; }
  .genre-block { grid-column: 1 / -1; grid-row: 2; }
  /* Keep the toast above the floating bottom nav. */
  .toast { bottom: calc(102px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 680px) {
  :root { --gutter: 16px; }
  .brand-mark { width: 36px; height: 36px; }
  .top-actions { flex: 1 1 auto; }
  .search { flex: 1 1 auto; min-width: 0; padding-left: 11px; }
  .nav-item {
  padding: 9px 2px;
}
  .profile-button { height: 38px; }
  .party-mode-button {
  height: 38px;
}
  .ui-lang-trigger {
  height: 38px;
  gap: 6px;
}
  .profile-avatar { width: 29px; height: 29px; }
  .hero-content { align-self: flex-end; }
  .hero h1 { font-size: 36px; }
  .hero-actions { flex-wrap: nowrap; gap: 8px; }
  .hero-actions .primary-button, .hero-actions .ghost-button { flex: 1 1 0; min-width: 0; padding: 0 12px; font-size: 13px; }
  .hero-actions .ui-icon { width: 16px; height: 16px; }
  .hero p { -webkit-line-clamp: 2; }
  .section-heading { min-height: 58px; margin-bottom: 26px; }
  .page-heading-main { gap: 11px; }
  .page-heading-icon { width: 44px; height: 44px; border-radius: 14px; }
  .page-heading-icon .ui-icon { width: 20px; height: 20px; }
  .section-heading h2 { font-size: 29px; }
  .content-shell { margin-top: -8px; }
  #hero[hidden] + .content-shell { margin-top: 82px; }
  .discovery-panel { gap: 18px; padding: 19px 16px 22px; border-radius: 20px; }
  .discovery-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .sort-block, .genre-block { grid-column: 1 / -1; grid-row: auto; }
  .sort-options, .genre-options { margin-right: -16px; padding-right: 16px; }
  .filter-summary { position: static; grid-column: 1 / -1; margin-top: -4px; }
  #detailsModal { padding: 6px; }
  .details-layout {
  min-height: 560px;
}
  .details-copy > p { clear: both; }
  .episodes { padding: 0 20px 38px; }
  .row-subtitle { max-width: calc(100vw - 80px); }
  .anime-facts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 0 20px 25px; padding: 7px; border-radius: 16px; }
  .anime-fact { min-height: 62px; padding: 9px 10px; }
  .episode-grid { grid-template-columns: 1fr 1fr; }
  .episode-grid-list .episode-party-text { display: none; }
  .episode-grid-list .episode-party { width: 34px; padding: 0; justify-content: center; right: 8px; }
  .episode-grid.episode-grid-list .episode-main .episode-watch-badge { right: 48px; }
  .episode-grid-list .episode-body { padding-right: 48px; }
  .episode-grid-list .episode-card:has(.episode-watch-badge) .episode-body { padding-right: 145px; }
  .profile-card { padding: 34px 20px; }
}

@media (max-width: 420px) {
  .search { gap: 5px; padding-left: 10px; }
  .search-icon { display: none; }
  .search-scope { max-width: 92px; }
  .ui-lang-globe { display: none; }
  .search-scope-menu { width: 178px; }
  .search-submit { display: none; }
  .discovery-lead small { max-width: 270px; }
  .era-select-shell { min-width: 105px; }
  .surprise-button { padding: 0 10px; }
  .poster-grid { gap: 14px 8px; }
  .poster-grid .card-title { font-size: 12px; }
  .poster-grid .card-meta { font-size: 10px; }
  .anime-facts { grid-template-columns: 1fr; }
}

@media (max-width: 350px) {
  .poster-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Touch devices (iPad): Safari repaints fixed blur(120px) layers on every
   scroll frame and backdrop-filter over scrolling content is expensive.
   Swap ambient circles for precomputed gradients and use solid-ish panels. */
@media (hover: none) and (pointer: coarse) {
  .ambient { filter: none; opacity: .14; }
  .ambient-one { background: radial-gradient(circle, var(--purple) 0%, rgba(139,92,246,0) 66%); }
  .ambient-two { background: radial-gradient(circle, var(--cyan) 0%, rgba(56,189,248,0) 66%); }
  .topbar, .main-nav, .ghost-button, .discovery-panel, .anime-format, .anime-status, .cuddle-pill {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .topbar { background: rgba(7,8,13,.94); }
  .main-nav { background: rgba(14,15,22,.97); }
  .anime-format, .anime-status { background: rgba(10,10,16,.88); }
  .discovery-panel { background: rgba(18,19,29,.9); }
}

/* Fit dialogs inside Safari's changing viewport, including Split View.
   Keep zoom enabled; readable inputs avoid focus-induced page zoom. */
.modal-backdrop {
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
.details-card, .profile-card {
  max-height: min(880px, calc(100dvh - max(24px, env(safe-area-inset-top, 0px)) - max(24px, env(safe-area-inset-bottom, 0px))));
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.details-copy {
  overflow-wrap: anywhere;
}
@media (min-width: 681px) and (max-width: 1024px) {
  .details-layout { grid-template-columns: minmax(140px, 190px) minmax(0, 1fr); gap: 22px; padding: 150px 26px 30px; }
  .details-copy h2 { font-size: clamp(30px, 4.5vw, 46px); }
}
@media (any-pointer: coarse) {
  .search input, .login-form input { font-size: 16px; }
  .nav-item, .filter-chip, .ui-lang-item, .search-scope-option, .season-trigger, .season-option { min-height: 44px; }
  .ob-select-trigger, .ob-select-option { min-height: 40px; }
  .modal-close, .episode-layout-button { min-width: 44px; min-height: 44px; }
  .episode-party { min-height: 44px; }
  .episodes-heading { flex-wrap: wrap; }
  .modal-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (min-width: 681px) and (any-pointer: coarse) {
  .search, .profile-button, .party-mode-button, .ui-lang-trigger { min-height: 48px; }
  .profile-button, .party-mode-button, .search-clear, .search-submit { min-width: 44px; }
  .search-clear, .search-submit, .search-scope { min-height: 44px; }
  .search { flex-grow: 1; }
}
/* Narrow iPad Split View: give search its own row instead of a tiny slot. */
@media (max-width: 680px) and (any-pointer: coarse) {
  .topbar { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; padding-top: max(10px, env(safe-area-inset-top, 0px)); }
  .top-actions { display: contents; }
  .brand { grid-column: 1; grid-row: 1; }
  .party-mode-button { grid-column: 2; grid-row: 1; justify-self: end; }
  .ui-lang-wrap { grid-column: 3; grid-row: 1; }
  .account-control { grid-column: 4; grid-row: 1; }
  .search { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .search, .party-mode-button, .profile-button, .ui-lang-trigger { min-height: 44px; }
  .party-mode-button, .profile-button { min-width: 44px; }
  .hero { padding-top: calc(150px + env(safe-area-inset-top, 0px)); }
  #hero[hidden] + .content-shell { margin-top: calc(140px + env(safe-area-inset-top, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* A synopsis borrowed from the English catalog because the viewer's language
   has none for this episode. Dimmed, not hidden: it still describes the
   episode, it just is not the language the rest of the card is in. */
.episode-overview.is-borrowed { opacity: .72; }
.catalog-presence {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}
.catalog-presence[hidden] { display: none; }
.presence-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: linear-gradient(135deg,rgba(38,32,58,.9),rgba(20,20,30,.9));
  box-shadow: 0 6px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .25s,box-shadow .25s;
}
.presence-chip[data-status="online"] { border-color: rgba(74,222,128,.32); box-shadow: 0 6px 18px rgba(0,0,0,.28),0 0 0 1px rgba(74,222,128,.06),0 0 18px rgba(74,222,128,.12); }
.presence-avatar {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg,#7c3aed,#db2777);
  font-style: normal;
  font-weight: 800;
  filter: grayscale(.85) brightness(.7);
  transition: filter .25s;
}
.presence-chip[data-status="online"] .presence-avatar { filter: none; }
.presence-avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #17171f; background: #737080; }
.presence-chip[data-status="online"] .presence-avatar::after { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.7); }
.presence-chip[data-status="unknown"] .presence-avatar::after { background: #c4b5fd; animation: presence-pulse 1.1s ease-in-out infinite; }
.presence-text { display: grid; gap: 1px; line-height: 1.2; }
.presence-chip strong {
  font-weight: 800;
  color: #f1eefb;
}
.presence-chip small {
  color: #9691a8;
  font-weight: 650;
}
.presence-chip[data-status="online"] small { color: #86efac; }
.presence-chip[data-status="off"] { border-color: rgba(251,191,36,.28); }
.presence-chip[data-status="off"] .presence-avatar { filter: grayscale(.5) brightness(.85); }
.presence-chip[data-status="off"] .presence-avatar::after { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,.55); }
.presence-chip[data-status="off"] small { color: #fcd34d; }
@keyframes presence-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .presence-avatar::after { animation: none; } }
@media (max-width: 900px) {
  #pageHeading {
  gap: 14px;
}
  .catalog-presence {
  flex-basis: 100%;
}
}

/* Episode browser: a persistent season toolbar and separate, unobstructed
   actions. Both layouts share the same cards, progress and click handlers. */
.episodes { padding-top: 14px; }
.episodes-heading { position: sticky; z-index: 8; top: 0; gap: 16px; margin: 0 -12px 22px; padding: 18px 12px; border-bottom: 1px solid rgba(196,181,253,.12); background: rgba(17,19,28,.98); }
.episodes-heading h3 { font-size: 25px; letter-spacing: -.03em; }
.episodes-heading-copy { flex-direction: column; align-items: flex-start; gap: 7px; }
.episodes-heading-copy > span { border: 0; padding: 0; color: #a8a2bb; background: none; font-size: 12px; font-weight: 600; }
.episodes-heading-controls { gap: 12px; }
.episodes .season-trigger { min-height: 46px; max-width: 260px; border-color: rgba(196,181,253,.2); border-radius: 14px; padding: 7px 12px 7px 15px; background: linear-gradient(150deg,#232338,#1b1c29); font-size: 14px; font-weight: 700; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.season-trigger:hover { border-color: rgba(167,139,250,.45); background: linear-gradient(150deg,#2a2842,#1f2030); }
.season-trigger[aria-expanded="true"] { border-color: rgba(167,139,250,.55); background: linear-gradient(150deg,#2e2a4a,#211f33); box-shadow: 0 10px 30px rgba(87,53,180,.28); }
.season-trigger-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.season-trigger-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
.season-trigger-meta { overflow: hidden; color: #a29cb8; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 650; }
.season-trigger-meta[hidden] { display: none; }
.season-trigger[data-state="resume"] .season-trigger-meta { color: #c4b5fd; }
.season-trigger[data-state="done"] .season-trigger-meta { color: #86efac; }
.season-trigger-caret { width: 15px; height: 15px; margin-left: auto; color: #9b93b5; transition: transform .18s ease, color .18s ease; }
.season-trigger:hover .season-trigger-caret, .season-trigger[aria-expanded="true"] .season-trigger-caret { color: #c4b5fd; }
.season-trigger[aria-expanded="true"] .season-trigger-caret { transform: rotate(180deg); }
.season-menu { position: absolute; z-index: 60; top: calc(100% + 9px); right: 0; width: min(288px,78vw); max-height: min(360px,52vh); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(19,20,31,.97); box-shadow: 0 24px 60px rgba(0,0,0,.55); backdrop-filter: blur(20px); transform-origin: top right; animation: scope-menu-in .16s ease-out; }
.season-menu[hidden] { display: none; }
.season-option { position: relative; width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 12px; padding: 9px 11px 11px; color: var(--muted); background: transparent; cursor: pointer; text-align: left; transition: color .14s ease, background .14s ease; }
.season-option:hover, .season-option.focused { color: #fff; background: rgba(255,255,255,.08); }
.season-option[aria-selected="true"] { color: #fff; background: rgba(139,92,246,.2); }
.season-option-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.season-option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 750; }
.season-option-meta { color: #9d97b3; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.season-option[aria-selected="true"] .season-option-meta, .season-option:hover .season-option-meta, .season-option.focused .season-option-meta { color: #c9c3dd; }
.season-option-flag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.season-option-flag.is-resume { border-color: rgba(196,181,253,.3); color: #ddd6fe; background: rgba(139,92,246,.2); }
.season-option-flag.is-done { border-color: rgba(74,222,128,.3); color: #bbf7d0; background: rgba(34,197,94,.14); }
.season-option-flag .ui-icon { width: 13px; height: 13px; stroke-width: 2.4; }
.season-option-flag-icon { display: inline-flex; }
.season-option-check { flex: 0 0 auto; display: inline-flex; color: #c4b5fd; opacity: 0; transition: opacity .14s ease; }
.season-option-check .ui-icon { width: 15px; height: 15px; stroke-width: 2.4; }
.season-option[aria-selected="true"] .season-option-check { opacity: 1; }
.season-option-bar { position: absolute; right: 11px; bottom: 5px; left: 11px; height: 2px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.season-option-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--purple),var(--pink)); }
.season-option-bar.is-done span { background: linear-gradient(90deg,#22c55e,#4ade80); }
.episode-layout { border-radius: 14px; padding: 4px; background: #181a26; }
.episode-layout-button { width: 40px; height: 38px; border-radius: 10px; }
.episode-layout-button[aria-pressed="true"] { background: #38304f; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.episode-grid { gap: 20px 16px; align-items: stretch; }
.episode-card { display: flex; flex-direction: column; border-radius: 20px; background: linear-gradient(160deg,#1d1f2d,#171922); box-shadow: 0 6px 20px rgba(0,0,0,.12); transition: border-color .22s ease; }
.episode-card::after { content: ""; position: absolute; z-index: 4; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(140deg,rgba(255,255,255,.055),transparent 65%); opacity: 0; transition: opacity .22s ease; }
.episode-card:focus-within::after { opacity: 1; }
.episode-main { flex: 1; display: flex; flex-direction: column; }
.episode-main img, .episode-thumb-missing { flex: 0 0 auto; }
.episode-thumb-missing { color: #a69abf; font-size: 46px; font-weight: 500; background: radial-gradient(ellipse at 75% 20%,rgba(139,92,246,.2),transparent 70%),#1b1d2b; }
.episode-number { position: absolute; z-index: 3; top: 12px; right: 12px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; color: #fff; background: rgba(10,11,18,.8); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.episode-body { flex: 1; gap: 8px; padding: 16px 16px 12px; }
.episode-main .episode-label { padding: 0; font-size: 15px; line-height: 1.45; font-weight: 750; overflow-wrap: anywhere; }
.episode-main .episode-overview { color: #aaa7ba; font-size: 12.5px; line-height: 1.65; }
.episode-main .episode-watch-badge, .episode-grid.episode-grid-list .episode-main .episode-watch-badge { position: static; align-self: flex-start; transform: none; max-width: 100%; margin-top: 3px; padding: 5px 8px; border-radius: 8px; box-shadow: none; backdrop-filter: none; font-size: 10px; }
.episode-main .episode-progress-bar { height: 3px; }
.episode-main .episode-progress-bar span { display: block; }
.episode-actions { display: flex; gap: 8px; padding: 10px 14px 14px; }
.episode-play { flex: 1; min-width: 0; min-height: 44px; border: 1px solid rgba(196,181,253,.2); border-radius: 12px; padding: 8px 10px; color: #ede9ff; background: rgba(139,92,246,.14); cursor: pointer; font-size: 12px; font-weight: 750; line-height: 1.3; }
.episode-in-progress .episode-play { border-color: rgba(167,139,250,.4); background: rgba(124,58,237,.3); }
.episode-actions .episode-party { position: static; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 44px; height: auto; min-height: 44px; transform: none; border-radius: 12px; padding: 0; background: rgba(255,255,255,.04); box-shadow: none; }
.episode-actions .episode-party::before { display: none; }
.episode-card:focus-within { border-color: #a78bfa; }
.episode-main:focus-visible { outline-offset: -3px; border-radius: 18px; }
.episode-card.episode-watched { border-color: rgba(74,222,128,.65); background: linear-gradient(155deg,#194331,#122d24); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.episode-card.episode-watched .episode-main img { filter: saturate(.85) brightness(.87); }
.episode-card.episode-watched .episode-main.has-thumbnail::before { background: linear-gradient(0deg,rgba(10,85,46,.55),rgba(10,85,46,.08)); }
.episode-card.episode-watched .episode-main.has-thumbnail::after { display: none; }
.episode-main .episode-complete-badge, .episode-grid.episode-grid-list .episode-main .episode-complete-badge { position: absolute; top: 10px; left: 10px; right: auto; transform: none; margin: 0; max-width: calc(100% - 70px); padding: 7px 10px; border: 1px solid #86efac; border-radius: 9px; color: #062b17; background: #4ade80; box-shadow: 0 3px 12px rgba(0,0,0,.35); font-size: 12px; font-weight: 900; }
.episode-complete-badge::before { content: "✓"; margin-right: 5px; }
.episode-grid.episode-grid-list .episode-main .episode-complete-badge { max-width: calc(max(130px,28%) - 20px); }
.episode-grid.episode-grid-list .episode-card.episode-watched .episode-main.has-thumbnail::before { width: max(130px,28%); }
.episode-card.episode-watched .episode-play { border-color: rgba(134,239,172,.45); color: #ecfdf5; background: rgba(34,197,94,.2); }
.episode-grid.episode-grid-list { gap: 14px; }
.episode-grid.episode-grid-list .episode-card { --episode-list-thumb: max(130px,28%); min-height: 180px; }
.episode-grid.episode-grid-list .episode-main { position: static; overflow: visible; display: grid; grid-template-columns: var(--episode-list-thumb) minmax(0,1fr); align-items: stretch; }
.episode-grid.episode-grid-list .episode-body, .episode-grid.episode-grid-list .episode-card:has(.episode-watch-badge) .episode-body { grid-column: 2; padding: 18px 20px; }
.episode-grid.episode-grid-list .episode-overview { -webkit-line-clamp: 3; }
.episode-grid.episode-grid-list .episode-main img, .episode-grid.episode-grid-list .episode-thumb-missing { position: absolute; top: 0; bottom: 0; left: 0; width: var(--episode-list-thumb); height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; }
.episode-grid.episode-grid-list .episode-number { left: 12px; right: auto; }
.episode-grid.episode-grid-list .episode-card.episode-watched .episode-number { display: none; }
.episode-grid.episode-grid-list .episode-actions { justify-content: flex-end; padding: 0 18px 16px calc(var(--episode-list-thumb) + 18px); }
.episode-grid.episode-grid-list .episode-play { flex: 0 1 210px; }
.episode-grid-list .episode-actions .episode-party { width: auto; padding: 0 14px; }
@media (hover: hover) and (pointer: fine) {
  .episode-card:hover { border-color: rgba(196,181,253,.6); }
  .episode-card:hover::after { opacity: 1; }
  .episode-card.episode-watched:hover { border-color: #86efac; }
  .episode-card:hover .episode-main img { transform: none; }
  .episode-play:hover { border-color: rgba(196,181,253,.5); background: rgba(139,92,246,.3); }
  .episode-card.episode-watched .episode-play:hover { border-color: #86efac; background: rgba(34,197,94,.3); }
}
@media (hover: none) {
  .episode-card:hover, .episode-card:hover .episode-main img { transform: none; }
}
@media (min-width: 681px) and (max-width: 1024px) {
  .episode-grid:not(.episode-grid-list) { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .episodes-heading { flex-wrap: wrap; gap: 14px; padding-top: 16px; }
  .episodes-heading-controls { width: 100%; justify-content: space-between; }
  .episodes-heading-controls select { flex: 1; max-width: none; order: -1; }
  .episode-grid:not(.episode-grid-list) { grid-template-columns: 1fr; }
  .episode-grid.episode-grid-list .episode-card { --episode-list-thumb: 100px; }
  .episode-grid.episode-grid-list .episode-main .episode-complete-badge { max-width: 84px; left: 8px; padding: 6px; font-size: 10px; }
  .episode-grid.episode-grid-list .episode-card.episode-watched .episode-main.has-thumbnail::before { width: 100px; }
  .episode-grid.episode-grid-list .episode-body, .episode-grid.episode-grid-list .episode-card:has(.episode-watch-badge) .episode-body { padding: 14px 12px; }
  .episode-grid.episode-grid-list .episode-actions { padding: 0 12px 14px calc(var(--episode-list-thumb) + 12px); }
  .episode-grid-list .episode-actions .episode-party { width: 44px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .episode-card:hover { transform: none; }
}

/* The hero title as the show's own logo. The text stays in the element and
   is hidden by colour rather than removed, so a screen reader still reads the
   name and a failed image leaves the heading intact. */
#heroTitle.has-logo {
  color: transparent;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  min-height: clamp(56px, 9vw, 128px);
}
@media (max-width: 720px) {
  #heroTitle.has-logo { background-position: center; min-height: 64px; }
}

/* Discovery: a small decision first, detailed filters second. */
#discoveryPanel { display: flex; flex-direction: column; gap: 24px; margin-bottom: 30px; padding: clamp(20px,3vw,36px); border-radius: 26px; background: radial-gradient(ellipse at 8% 0%,rgba(139,92,246,.12),transparent 55%),#11121b; backdrop-filter: none; }
#discoveryPanel[hidden] { display: none; }
.discovery-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
#discoveryPanel .discovery-lead .eyebrow { color: #b6a1df; font-size: 10px; letter-spacing: .17em; margin-bottom: 10px; }
#discoveryPanel .discovery-lead strong {
  font-weight: 750;
  line-height: 1.12;
}
#discoveryPanel .discovery-lead small { max-width: 660px; font-size: 13px; line-height: 1.6; margin-top: 10px; color: #a6a2b5; }
#discoveryPanel .surprise-button {
  color: #f0e6ff;
  background: rgba(139,92,246,.13);
  border-color: rgba(177,140,246,.28);
}
.mood-options { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.mood-card { --mood: 212,182,112; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; overflow: hidden; min-width: 0; min-height: 148px; text-align: left; padding: 18px 15px; border-radius: 17px; border: 1px solid rgba(var(--mood),.13); background: linear-gradient(140deg,rgba(var(--mood),.095),rgba(var(--mood),.025)); color: #ebe8f1; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.mood-card[data-mode="masterpieces"] { --mood: 232,196,104; }
.mood-card[data-mode="gems"] { --mood: 120,214,201; }
.mood-card[data-mood="mindbend"] { --mood: 172,153,241; }
.mood-card[data-mood="shorttense"] { --mood: 231,157,111; }
.mood-card[data-mood="atmoscifi"] { --mood: 126,180,216; }
.mood-card[data-mood="datenight"] { --mood: 236,148,165; }
/* Seen titles step back in catalog grids and come forward on hover. */
.media-card.is-seen .poster-wrap { opacity: .48; filter: saturate(.55); transition: opacity .18s ease, filter .18s ease; }
@media (hover: hover) {
  .media-card.is-seen:hover .poster-wrap, .media-card.is-seen:focus-visible .poster-wrap { opacity: 1; filter: none; }
}
.hide-seen-block { display: flex; align-items: flex-end; }
.mood-card::after { content: ""; position: absolute; width: 85px; height: 85px; right: -32px; top: -29px; border: 1px solid rgba(var(--mood),.13); border-radius: 50%; box-shadow: 0 0 0 14px rgba(var(--mood),.025),0 0 0 28px rgba(var(--mood),.015); pointer-events: none; }
.mood-card:hover { border-color: rgba(var(--mood),.5); }
.mood-card[aria-pressed="true"] { border-color: rgba(var(--mood),.8); background: linear-gradient(135deg,rgba(var(--mood),.23),rgba(var(--mood),.075)); box-shadow: inset 0 0 0 1px rgba(var(--mood),.13); }
.mood-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: rgb(var(--mood)); background: rgba(var(--mood),.085); font-size: 26px; font-weight: 400; }
.mood-copy { position: relative; z-index: 1; display: grid; gap: 6px; }
.mood-copy strong { font-size: 13px; line-height: 1.3; font-weight: 700; }
.mood-copy small { color: #a7a2b3; font-size: 10.5px; line-height: 1.45; }
#discoveryPanel .discovery-controls {
  display: grid;
  grid-template-columns: minmax(0,1fr) 145px;
  align-items: end;
  border-top: 1px solid rgba(255,255,255,.07);
}
#discoveryPanel .sort-block { grid-column: 1; grid-row: 1; }
#discoveryPanel .era-filter { grid-column: 2; grid-row: 1; }
#discoveryPanel .genre-block { grid-column: 1/-1; grid-row: 2; }
#discoveryPanel .filter-label {
  color: #9993aa;
}
#discoveryPanel .sort-options, #discoveryPanel .genre-options { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: 7px; }
#discoveryPanel .filter-chip {
  font-weight: 650;
}
#discoveryPanel .filter-chip.active { background: #e2d5f7; color: #292137; border-color: #e2d5f7; box-shadow: none; }
#discoveryPanel [data-sort^="rt-"]::before { content: "●"; color: #ef877c; padding-right: 6px; font-size: 9px; }
#discoveryPanel .era-select-shell { height: 38px; }
.discovery-bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
#discoveryPanel .filter-summary {
  position: static;
  margin: 0;
  color: #c0b9cc;
  font-weight: 600;
}
.ratings-note { color: #9690a4; font-size: 11px; line-height: 1.5; margin: 5px 0 0; max-width: 600px; }
.discovery-bottom-actions { display: flex; align-items: center; gap: 14px; }
.discovery-reset { flex-shrink: 0; min-height: 40px; padding: 0; background: none; border: 0; color: #baabd1; cursor: pointer; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.discovery-reset:disabled { opacity: .4; cursor: default; text-decoration: none; }
.discovery-reset[hidden] { display: none; }
.card-rating.rt-rating { color: #efa095; white-space: nowrap; }
#discoveryPanel button:focus-visible { outline: 2px solid #dfc4ff; outline-offset: 3px; }
@media (max-width: 1200px) { .mood-options { grid-template-columns: repeat(3,minmax(0,1fr)); } .mood-card { min-height: 115px; flex-direction: row; align-items: center; gap: 12px; } .mood-icon { flex-shrink: 0; } }
@media (max-width: 650px) {
  #discoveryPanel { gap: 20px; border-radius: 20px; padding: 21px 16px; }
  .discovery-top { align-items: flex-start; flex-direction: column; gap: 17px; }
  #discoveryPanel .surprise-button { min-height: 42px; }
  .mood-options { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .mood-card { padding: 14px 12px; min-height: 126px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .mood-copy strong { font-size: 12px; } .mood-copy small { font-size: 10px; }
  #discoveryPanel .discovery-controls { grid-template-columns: 1fr; gap: 17px; padding-top: 18px; }
  #discoveryPanel .sort-block { grid-column: 1; grid-row: 1; }
  #discoveryPanel .genre-block { grid-column: 1; grid-row: 2; }
  #discoveryPanel .era-filter { grid-column: 1; grid-row: 3; max-width: 180px; }
  .discovery-bottom { align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { .mood-card { transition: none; } .mood-card:hover { transform: none; } }
@media (min-width: 1101px) and (max-width: 1550px) {
  .topbar { gap: 16px; }
  .main-nav { flex-shrink: 0; }
  .nav-item { padding-inline: 9px; font-size: 12px; }
}
@media (max-width: 650px) {
  .mood-card { min-height: 108px; gap: 8px; padding: 12px; }
  .mood-card .mood-icon { width: 26px; height: 26px; font-size: 21px; border-radius: 8px; }
  .mood-copy { gap: 4px; }
}

/* The home page leads with the library; discovery stays within a short strip. */
#discoveryPanel.home-compact .discovery-top { flex-direction: row; gap: 10px; }
#discoveryPanel.home-compact .discovery-lead { margin-right: auto; }
#discoveryPanel.home-compact .discovery-lead .eyebrow, #discoveryPanel.home-compact .discovery-lead small { display: none; }
#discoveryPanel.home-compact .discovery-lead strong { font-size: 18px; letter-spacing: -.015em; }
#discoveryPanel.home-compact .surprise-button { min-height: 36px; padding-inline: 12px; border-radius: 10px; font-size: 11px; }
.home-filters-toggle { min-height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; color: #cec5dc; background: rgba(255,255,255,.03); font-size: 11px; cursor: pointer; }
.home-filters-toggle[aria-expanded="true"] { border-color: #b098d2; color: #f0e3ff; }
.home-filters-toggle[hidden], #discoveryPanel #discoveryControls[hidden] { display: none; }
#discoveryPanel.home-compact .mood-options { display: flex; overflow-x: auto; gap: 7px; padding: 4px 0 3px; overscroll-behavior-x: contain; scrollbar-width: thin; }
#discoveryPanel.home-compact .mood-card { flex: 1 0 auto; min-height: 42px; padding: 8px 11px; border-radius: 11px; flex-direction: row; align-items: center; gap: 8px; }
#discoveryPanel.home-compact .mood-card::after, #discoveryPanel.home-compact .mood-copy small { display: none; }
#discoveryPanel.home-compact .mood-icon { width: 23px; height: 23px; font-size: 19px; border-radius: 7px; }
#discoveryPanel.home-compact .mood-copy strong { font-size: 11px; white-space: nowrap; }
#discoveryPanel.home-compact .discovery-controls { padding-top: 14px; }
#discoveryPanel.home-compact .discovery-bottom { flex-direction: row; gap: 10px; align-items: center; }
#discoveryPanel.home-compact .filter-summary, #discoveryPanel.home-compact .discovery-reset { font-size: 10px; }
#discoveryPanel.home-compact .discovery-reset { min-height: 26px; }
@media (max-width: 650px) {
  #discoveryPanel.home-compact { padding: 14px 12px; gap: 10px; }
  #discoveryPanel.home-compact .discovery-lead strong { font-size: 16px; }
  #discoveryPanel.home-compact .surprise-button, #discoveryPanel.home-compact .home-filters-toggle { padding-inline: 9px; font-size: 10px; }
}
#discoveryPanel.home-compact .discovery-bottom > div:first-child { min-width: 0; flex: 1; }
#discoveryPanel.home-compact .discovery-bottom-actions { flex: 0 0 auto; }

/* Portaled menus escape the scrollable card and follow their trigger. */
.ob-select-menu.ob-select-portal { position: absolute; z-index: 2100; min-width: 0; bottom: auto; margin: 0; box-sizing: border-box; animation: ob-menu-appear .12s ease-out; scrollbar-width: thin; }
@keyframes ob-menu-appear { from { opacity: 0; } to { opacity: 1; } }
.ob-select-menu.ob-select-portal .ob-select-option { min-height: 36px; }
@media (hover: none) and (pointer: coarse) { .ob-select-menu.ob-select-portal .ob-select-option { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .ob-select-menu.ob-select-portal { animation: none; } }

/* Paged movie discovery keeps the next action visible without inflating home. */
.movie-more { display:grid; justify-items:center; gap:12px; padding:28px 12px 44px; text-align:center; }
.movie-more[hidden] { display:none; }
.movie-more button {
  font:inherit;
}
.movie-more button:hover { background:rgba(139,92,246,.28); }
.movie-more button:disabled { opacity:.65; cursor:wait; }
.movie-more p { color:var(--muted,#a1a1aa); font-size:12px; max-width:560px; margin:0; }
.country-filter { min-width:180px; }
@media(max-width:640px) { .discovery-controls .era-filter { flex:1 1 140px; min-width:0; } }

#discoveryPanel .discovery-controls { grid-template-columns:repeat(3,minmax(0,1fr)); }
#discoveryPanel .sort-block { grid-column:1/-1; grid-row:1; }
#discoveryPanel .genre-block { grid-column:1/-1; grid-row:2; }
#discoveryPanel .era-filter { grid-column:auto; grid-row:3; max-width:none; }
@media(max-width:650px) {
  #discoveryPanel .discovery-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #discoveryPanel .era-filter { grid-column:auto; grid-row:auto; }
  #discoveryPanel .country-filter { grid-column:1/-1; }
}

/* Catalog v2: one search entry, compact discovery and a consistent glass frame.
   Blur is confined to navigation and small controls, not every poster or rail. */
.catalog-v2 { --gutter: clamp(18px, 4vw, 64px); background: radial-gradient(ellipse 70vw 440px at 85% 0,rgba(111,65,175,.13),transparent),var(--bg); }
.catalog-v2 .ambient { display: none; }
.catalog-v2 .topbar { display: flex; isolation: isolate; gap: 24px; min-height: 80px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid rgba(214,198,246,.08); }
.catalog-v2 .topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12,12,20,.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.catalog-v2 .topbar:not(.scrolled)::before { opacity: 0; }
.catalog-v2 .topbar.scrolled { background: transparent; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.catalog-v2 .top-actions { display: flex; gap: 8px; }
.catalog-v2 .top-search-button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; color: #d8cee8; background: rgba(255,255,255,.06); }
.catalog-v2 .top-search-button .ui-icon { width: 18px; height: 18px; }
body.catalog-v2.top-search-open .catalog-search { position: fixed; z-index: 60; top: calc(88px + env(safe-area-inset-top, 0px)); left: calc(var(--gutter) + env(safe-area-inset-left, 0px)); right: calc(var(--gutter) + env(safe-area-inset-right, 0px)); width: auto; margin: 0; }
.catalog-v2 .nav-item { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; font-size: 13px; padding: 10px 13px; border-radius: 13px; }
.catalog-v2 .nav-item .ui-icon { width: 17px; height: 17px; opacity: .75; }
.catalog-v2 .nav-item.active { color: #f2e8ff; background: rgba(157,117,222,.16); box-shadow: inset 0 0 0 1px rgba(199,163,255,.22); }
.catalog-v2 .party-mode-button, .catalog-v2 .profile-button, .catalog-v2 .ui-lang-trigger { min-height: 44px; }
.catalog-v2 main { padding-top: calc(108px + env(safe-area-inset-top,0px)); }
.catalog-v2 .catalog-intro { display: grid; grid-template-columns: minmax(0,1fr); align-items: center; gap: 28px; margin: 0 var(--gutter) 24px; }
body.catalog-v2:is([data-view="home"],[data-view="movies"],[data-view="series"],[data-view="anime"]) main { display: flex; flex-direction: column; }
body.catalog-v2:is([data-view="home"],[data-view="movies"],[data-view="series"],[data-view="anime"]) main > .hero { order: -1; }
body.catalog-v2:is([data-view="home"],[data-view="movies"],[data-view="series"],[data-view="anime"]) #pageHeading { display: none; }
.recommendations-full .recommendations-intro h2,
.recommendations-full .recommendations-priority { display: none; }
.catalog-v2 #pageHeading { margin: 0; min-height: 0; gap: 12px; flex-wrap: wrap; }
.catalog-v2 .page-heading-main { align-items: center; gap: 14px; }
.catalog-v2 .page-heading-icon { width: 48px; height: 48px; border-radius: 16px; }
.catalog-v2 #pageTitle { font-size: clamp(26px,2.6vw,38px); line-height: 1.2; letter-spacing: -.035em; margin: 0; }
.catalog-v2 .page-subtitle { display: block; margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: #aaa2b8; }
.catalog-v2 .catalog-presence { margin-left: 62px; flex-basis: auto; }
.catalog-v2 .presence-chip { padding: 4px 12px 4px 4px; gap: 8px; }
.catalog-v2 .presence-avatar { width: 28px; height: 28px; font-size: 12px; }
.catalog-v2 .presence-chip strong { font-size: 12px; }
.catalog-v2 .presence-chip small { font-size: 10px; }
.catalog-v2 .catalog-search { min-width: 0; position: relative; z-index: 5; }
.catalog-v2 .catalog-search .search { width: 100%; min-width: 0; height: 58px; padding: 0 6px 0 16px; gap: 6px; border-radius: 18px; border-color: rgba(210,188,241,.2); background: linear-gradient(135deg,rgba(156,116,214,.1),rgba(255,255,255,.025)); }
.catalog-v2 .catalog-search .search:has(.search-scope[aria-expanded="true"]):focus-within { border-color: rgba(210,188,241,.2); background: linear-gradient(135deg,rgba(156,116,214,.1),rgba(255,255,255,.025)); }
.catalog-v2 .search-scope-wrap::before { top: 6px; bottom: 6px; right: 9px; }
.catalog-v2 .search input { height: 100%; font-size: 16px; }
.catalog-v2 .search input::placeholder { color: #9e96ad; }
.catalog-v2 .search-scope { min-height: 44px; font-size: 12px; max-width: max-content; }
.catalog-v2 .search-clear, .catalog-v2 .search-submit { width: 44px; height: 44px; min-width: 44px; }
.catalog-v2 .search-submit { background: transparent; color: #ada3c4; }
.catalog-v2 .search-clear::before, .catalog-v2 .search-submit::before { content: none; }
.catalog-v2 .search-clear:hover, .catalog-v2 .search-submit:hover { background: transparent; color: #e2cffc; }
.catalog-v2 .search-status { min-height: 18px; margin: 7px 4px 0; color: #968da6; font-size: 11px; line-height: 1.5; }
.catalog-v2 .search-status[data-error="true"] { color: #e7adba; }
.catalog-v2 .search-scope-menu { min-width: 210px; }
.catalog-v2 .search-scope-option, .catalog-v2 .ui-lang-item { min-height: 44px; }
.catalog-v2 .hero { margin: 0 var(--gutter) 32px; min-height: 300px; padding: 30px 36px; border: 1px solid rgba(209,183,242,.15); border-radius: 26px; background: #15111f; box-shadow: 0 14px 40px rgba(0,0,0,.18); }
.catalog-v2 .hero-image { background-position: center 35%; transform: none; transition: opacity .3s ease; }
.catalog-v2 .hero:hover .hero-image { transform: none; }
.catalog-v2 .hero-shade { background: linear-gradient(90deg,rgba(12,10,20,.94),rgba(12,10,20,.72) 38%,rgba(12,10,20,.06) 85%),linear-gradient(0deg,rgba(12,10,20,.5),transparent 65%); }
.catalog-v2 .hero-content { max-width: 550px; }
.catalog-v2 .hero #heroTitle { max-width: 560px; margin: 0 0 12px; font-size: clamp(28px,3.3vw,44px); line-height: 1.1; letter-spacing: -.04em; }
.catalog-v2 .hero #heroTitle.has-logo { height: 66px; min-height: 66px; max-width: 330px; background-position: left center; }
.catalog-v2 .hero #heroKicker { color: #d0b9ee; font-size: 10px; margin-bottom: 14px; letter-spacing: .16em; }
.catalog-v2 .hero .hero-meta { gap: 9px; font-size: 12px; }
.catalog-v2 .hero p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; margin: 12px 0 18px; color: #c2b9ce; line-height: 1.6; }
.catalog-v2 .hero .hero-actions { gap: 9px; margin-top: 16px; }
.catalog-v2 .hero .hero-actions button { min-height: 44px; padding: 0 17px; border-radius: 13px; font-size: 12px; }
.catalog-v2 .content-shell, .catalog-v2 #hero[hidden] + .content-shell { margin-top: 0; padding: 0 var(--gutter) calc(100px + env(safe-area-inset-bottom,0px)); }
.catalog-v2 #discoveryPanel.home-compact { gap: 12px; padding: 16px 18px; margin-bottom: 20px; border-radius: 20px; border: 1px solid rgba(201,181,230,.12); background: linear-gradient(135deg,rgba(139,104,190,.07),rgba(255,255,255,.025)); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.catalog-v2 #discoveryPanel .discovery-top { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: center; }
.catalog-v2 #discoveryPanel .discovery-lead { margin-right: auto; }
.catalog-v2 #discoveryPanel .discovery-lead strong { font-size: 15px; letter-spacing: -.015em; }
.catalog-v2 #discoveryPanel .surprise-button, .catalog-v2 #discoveryPanel .home-filters-toggle { min-height: 44px; font-size: 12px; padding: 0 15px; border-radius: 12px; }
.catalog-v2 #discoveryPanel .home-filters-toggle { background: rgba(186,148,234,.09); border-color: rgba(196,161,243,.24); }
.catalog-v2 #discoveryPanel .home-filters-toggle[aria-expanded="true"] { background: rgba(166,118,232,.2); border-color: rgba(208,174,251,.55); }
.catalog-v2 #discoveryPanel .mood-options { display: flex; gap: 8px; padding: 4px 0 3px; margin: 0; overflow-x: auto; scrollbar-width: thin; }
.catalog-v2 #discoveryPanel .mood-card { flex: 1 0 auto; display: flex; flex-direction: row; gap: 9px; min-height: 44px; padding: 8px 12px; border-radius: 12px; align-items: center; }
.catalog-v2 #discoveryPanel .mood-copy strong { font-size: 12px; white-space: nowrap; }
.catalog-v2 #discoveryPanel .mood-icon { width: 24px; height: 24px; font-size: 20px; }
.catalog-v2 #discoveryPanel .discovery-bottom { display: none; }
.catalog-v2 #discoveryPanel.filters-expanded .discovery-bottom { display: flex; }
.catalog-v2 #discoveryPanel .filter-summary, .catalog-v2 #discoveryPanel .discovery-reset { font-size: 12px; }
.catalog-v2 #discoveryPanel .discovery-reset { min-height: 44px; }
.catalog-v2 #discoveryPanel .discovery-controls { padding-top: 18px; gap: 18px; }
.catalog-v2 #discoveryPanel .filter-label { font-size: 11px; }
.catalog-v2 #discoveryPanel .filter-chip { min-height: 44px; padding: 0 14px; font-size: 12px; }
.catalog-v2 #discoveryPanel .era-select-shell, .catalog-v2 #discoveryPanel .ob-select-trigger { min-height: 46px; }
.catalog-v2 .active-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.catalog-v2 .active-filters[hidden] { display: none; }
.catalog-v2 .empty-filter-chip { min-height: 44px; border-radius: 12px; font-size: 12px; }
.catalog-v2 .browse-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; min-height: 44px; }
.catalog-v2 .browse-toolbar[hidden], .catalog-v2 .browse-layout[hidden] { display: none; }
.catalog-v2 #browseSummary { color: #aca2b9; font-size: 13px; margin: 0; }
.catalog-v2 .browse-layout { display: flex; gap: 3px; padding: 4px; border: 1px solid rgba(202,175,237,.13); background: rgba(255,255,255,.025); border-radius: 14px; }
.catalog-v2 .browse-layout button { min-height: 40px; padding: 0 17px; border: 0; border-radius: 10px; color: #a69ab8; background: transparent; font-size: 12px; font-weight: 650; cursor: pointer; }
.catalog-v2 .browse-layout button[aria-pressed="true"] { color: #f5eaff; background: rgba(165,119,227,.22); box-shadow: inset 0 0 0 1px rgba(198,157,253,.13); }
.catalog-v2 .catalog-rows { gap: 34px; }
.catalog-v2 .row-title { margin-bottom: 16px; gap: 12px; }
.catalog-v2 .row-title h3 { font-size: 20px; letter-spacing: -.025em; }
.catalog-v2 .row-subtitle { font-size: 12px; line-height: 1.5; }
.catalog-v2 .row-count { font-size: 11px; color: #b4a5c6; background: rgba(183,140,232,.07); border-color: rgba(183,140,232,.14); }
.catalog-v2 .filtered-result > .row-title { display: none; }
.catalog-v2 .poster-rail { grid-auto-columns: clamp(150px,14vw,205px); gap: 18px; padding-bottom: 5px; }
.catalog-v2 .poster-grid { grid-template-columns: repeat(auto-fill,minmax(165px,1fr)); gap: 26px 18px; }
.catalog-v2 .poster-wrap { border-radius: 15px; border: 1px solid rgba(217,198,243,.12); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.catalog-v2 .card-title { font-size: 14px; font-weight: 650; line-height: 1.4; }
.catalog-v2 .card-meta { font-size: 12px; color: #aba1b9; }
.catalog-v2 .card-main:focus-visible { outline: 2px solid #c4a0f1; outline-offset: 5px; border-radius: 16px; }
.catalog-v2 .card-overlay { opacity: 1; pointer-events: none; background: linear-gradient(0deg,rgba(8,7,15,.5),transparent 27%); }
.catalog-v2 .card-quick { opacity: 0; pointer-events: auto; }
.catalog-v2 .media-card:hover .card-quick, .catalog-v2 .media-card:focus-within .card-quick { opacity: 1; }
.catalog-v2 .card-reason { font-size: 11px; color: #c6acdF; line-height: 1.5; margin: 6px 0 0; }
.catalog-v2 .grid-more { display: grid; justify-items: center; gap: 10px; margin: 30px 0; }
.catalog-v2 .grid-more[hidden] { display: none; }
.catalog-v2 .grid-more button, .catalog-v2 .movie-more button { min-height: 48px; padding: 0 30px; border: 1px solid rgba(200,166,240,.3); border-radius: 15px; background: rgba(173,128,227,.13); color: #eee1ff; font-size: 13px; font-weight: 650; cursor: pointer; }
.catalog-v2 .grid-more p { margin: 0; font-size: 12px; color: #a59bb1; }
.catalog-v2 .details-card { border-color: rgba(203,177,236,.2); border-radius: 24px; }
.catalog-v2 .modal-close { min-width: 48px; min-height: 48px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.catalog-v2 .details-actions .primary-button, .catalog-v2 .details-actions .ghost-button { min-height: 48px; }
@media (max-width: 1180px), (max-width: 1400px) and (any-pointer: coarse) {
  .catalog-v2 .topbar { min-height: 74px; gap: 14px; }
  .catalog-v2 .main-nav { position: fixed; left: max(18px,env(safe-area-inset-left,0px)); right: max(18px,env(safe-area-inset-right,0px)); bottom: calc(12px + env(safe-area-inset-bottom,0px)); border-color: rgba(206,181,237,.18); border-radius: 20px; padding: 6px; background: rgba(18,16,26,.84); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .catalog-v2 .main-nav-indicator { top: 6px; height: 52px; }
  .catalog-v2 .nav-item { flex-direction: column; gap: 4px; padding: 7px 4px; min-height: 52px; font-size: 11px; border-radius: 14px; }
  .catalog-v2 .nav-item .ui-icon { width: 20px; height: 20px; }
  .catalog-v2 main { padding-top: calc(98px + env(safe-area-inset-top,0px)); }
  .catalog-v2 .content-shell { padding-bottom: calc(88px + env(safe-area-inset-bottom,0px)); }
  .catalog-v2 .catalog-intro { gap: 24px; grid-template-columns: minmax(0,1fr); }
  .catalog-v2 #pageTitle { font-size: 30px; }
  .catalog-v2 .page-heading-icon { width: 42px; height: 42px; border-radius: 14px; }
  .catalog-v2 .page-subtitle { font-size: 12px; }
  /* Leave the bottom navigation free while the shared-mode dock is visible. */
  .catalog-v2 #obscura-party-root.op-catalog.op-touch-ui .op-reaction-dock { bottom: calc(90px + env(safe-area-inset-bottom,0px)); }
}
@media (max-width: 900px) {
  .catalog-v2 .catalog-intro { grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
  .catalog-v2 .catalog-presence { margin-left: auto; }
  .catalog-v2 #pageHeading { flex-wrap: nowrap; }
  .catalog-v2 .poster-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px 14px; }
  .catalog-v2 .hero { min-height: 300px; padding: 28px; }
  .catalog-v2 .hero-content { max-width: 440px; }
  .catalog-v2 .search-status { margin-bottom: 0; }
}
@media (max-width: 680px) {
  .catalog-v2 .topbar { padding: max(10px,env(safe-area-inset-top,0px)) var(--gutter) 10px; min-height: 66px; gap: 12px; }
  .catalog-v2 .top-actions { gap: 6px; }
  .catalog-v2 .brand-copy { display: none; }
  .catalog-v2 .party-mode-button { width: 44px; padding: 0; }
  .catalog-v2 .party-mode-label, .catalog-v2 .profile-button-name { display: none; }
  .catalog-v2 .ui-lang-trigger { padding: 0 10px; }
  .catalog-v2 .ui-lang-globe, .catalog-v2 .ui-lang-caret { display: none; }
  .catalog-v2 .profile-button { width: 44px; padding: 4px; justify-content: center; }
  .catalog-v2 main { padding-top: calc(88px + env(safe-area-inset-top,0px)); }
  .catalog-v2 .catalog-intro { gap: 18px; }
  .catalog-v2 #pageTitle { font-size: 28px; }
  .catalog-v2 .page-subtitle { max-width: 300px; font-size: 12px; }
  .catalog-v2 .catalog-presence { display: none; }
  .catalog-v2 .search-icon { display: none; }
  .catalog-v2 .catalog-search .search { padding-left: 6px; height: 56px; gap: 2px; border-radius: 16px; }
  .catalog-v2 .search-scope-wrap { padding-right: 5px; }
  .catalog-v2 .search-scope { max-width: max-content; font-size: 12px; padding-left: 7px; }
  .catalog-v2 .search-clear, .catalog-v2 .search-submit { width: 44px; min-width: 44px; }
  .catalog-v2 .hero { min-height: 310px; padding: 24px; margin-bottom: 26px; border-radius: 22px; }
  .catalog-v2 .hero-shade { background: linear-gradient(90deg,rgba(12,10,20,.9),rgba(12,10,20,.5)),linear-gradient(0deg,rgba(12,10,20,.7),transparent); }
  .catalog-v2 .hero #heroTitle.has-logo { height: 54px; min-height: 54px; max-width: 250px; }
  .catalog-v2 .hero .hero-actions button { font-size: 11px; padding: 0 13px; }
  .catalog-v2 .hero .hero-actions [data-view="library"] { display: none; }
  .catalog-v2 #discoveryPanel.home-compact { padding: 12px; gap: 10px; border-radius: 18px; }
  .catalog-v2 #discoveryPanel .discovery-lead { flex-basis: 100%; }
  .catalog-v2 #discoveryPanel .discovery-lead strong { font-size: 14px; }
  .catalog-v2 #discoveryPanel .discovery-top { gap: 8px; }
  .catalog-v2 #discoveryPanel .surprise-button { margin-right: auto; }
  .catalog-v2 #discoveryPanel .mood-card { flex-grow: 0; }
  .catalog-v2 .browse-toolbar { margin-bottom: 16px; gap: 8px; }
  .catalog-v2 #browseSummary { font-size: 12px; }
  .catalog-v2 .browse-layout button { min-height: 44px; padding: 0 12px; font-size: 11px; }
  .catalog-v2 .poster-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px 12px; }
  .catalog-v2 .poster-rail { grid-auto-columns: 148px; gap: 14px; }
  .catalog-v2 .card-title { font-size: 13px; }
  .catalog-v2 .card-meta { font-size: 11px; }
  .catalog-v2 .row-title h3 { font-size: 18px; }
  .catalog-v2 .nav-item { font-size: 10px; }
}
@media (max-width: 430px) {
  .catalog-v2 .poster-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 14px; }
  .catalog-v2 .search-scope { max-width: max-content; }
  .catalog-v2 .search-status { font-size: 10px; }
}
@media (any-pointer: coarse) {
  .catalog-v2 .media-card > .card-quick { display: none; }
  .catalog-v2 .media-card.has-progress > .card-quick {
    display: grid; opacity: 1; width: 44px; height: 44px;
    left: auto; right: 8px; top: calc(100cqi * 3 / 2 - 52px);
  }
  .catalog-v2 .media-card.has-progress:has(> .watched-toggle) > .card-quick { right: 56px; }
  .catalog-v2 .media-card:hover { transform: none; }
  .catalog-v2 .browse-layout button { min-height: 44px; }
  .catalog-v2 .card-meta { line-height: 1.6; }
}

.catalog-v2 .card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow: hidden; min-height: 2.8em; }

.catalog-v2 .top-actions { margin-left: auto; flex: 0 0 auto; }
@media (min-width: 1181px) and (max-width: 1439px) {
  .catalog-v2 .nav-item { padding: 8px 10px; }
  .catalog-v2 .nav-recommendations-full,
  .catalog-v2 .nav-library-full { display: none; }
  .catalog-v2 .nav-recommendations-short,
  .catalog-v2 .nav-library-short { display: inline; }
  .catalog-v2 .party-mode-label,
  .catalog-v2 .profile-button-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.catalog-v2 .brand-copy { display: flex; }
.catalog-v2 .profile-button-name { display: block; }
.catalog-v2 .party-mode-label { display: inline; }
.catalog-v2 .party-mode-button { width: auto; min-width: 44px; padding: 0 15px; }
.catalog-v2 .profile-button { padding-right: 13px; }
.catalog-v2 .search-submit { display: grid; }
.catalog-v2 .search-submit[hidden] { display: none; }
.catalog-v2 .hero #heroDescription { max-width: 410px; }
.catalog-v2 #discoveryPanel.ratings-active .discovery-bottom { display: flex; }
.catalog-v2 #obscura-party-root.op-catalog.op-touch-ui { --op-reaction-space: calc(278px + env(safe-area-inset-bottom,0px)); }
.catalog-v2.modal-open #obscura-party-root.op-catalog .op-reaction-dock,
.catalog-v2.modal-open #obscura-party-root.op-catalog .op-toggle { visibility: hidden; pointer-events: none; }
.catalog-v2:has(#obscura-party-root.op-catalog.op-touch-ui:not(.op-solo)) .content-shell { padding-bottom: calc(308px + env(safe-area-inset-bottom,0px)); }
@media (max-width: 1180px), (max-width: 1400px) and (any-pointer: coarse) {
  .catalog-v2 .nav-item { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 680px) {
  .catalog-v2 .brand-copy, .catalog-v2 .profile-button-name, .catalog-v2 .party-mode-label { display: none; }
  .catalog-v2 .party-mode-button { width: 44px; padding: 0; }
  .catalog-v2 .profile-button { padding-right: 4px; }
}
@media (max-width: 560px) {
  .catalog-v2 #obscura-party-root.op-catalog.op-touch-ui { --op-reaction-space: calc(388px + env(safe-area-inset-bottom,0px)); }
  .catalog-v2:has(#obscura-party-root.op-catalog.op-touch-ui:not(.op-solo)) .content-shell { padding-bottom: calc(418px + env(safe-area-inset-bottom,0px)); }
}

/* Title details: calm artwork, readable type and a distinct personal score. */
.catalog-v2 .details-card { background: #111019; max-height: min(940px,calc(100dvh - 40px)); }
.catalog-v2 .details-layout { min-height: 0; align-items: start; grid-template-columns: minmax(150px,210px) minmax(0,1fr); padding: 100px 34px 28px; gap: 30px; }
.catalog-v2 .details-backdrop { height: 390px; opacity: .72; }
.catalog-v2 .details-gradient { height: 500px; background: linear-gradient(0deg,#111019 4%,rgba(17,16,25,.92) 38%,rgba(17,16,25,.2)),linear-gradient(90deg,rgba(17,16,25,.5),transparent); }
.catalog-v2 .details-poster { border: 1px solid rgba(210,182,239,.18); border-radius: 17px; box-shadow: 0 12px 28px rgba(0,0,0,.3); }
.catalog-v2 .details-copy { min-width: 0; }
.catalog-v2 .details-copy h2 { font-size: clamp(28px,3.4vw,44px); line-height: 1.12; letter-spacing: -.035em; margin-bottom: 16px; }
.catalog-v2 .details-heading > .eyebrow { margin-bottom: 10px; font-size: 10px; color: #c4a7e7; }
.catalog-v2 .details-copy > p { font-size: 14px; line-height: 1.7; color: #c2baca; }
.catalog-v2 .details-meta { gap: 10px; color: #aaa0b9; font-size: 13px; }
.catalog-v2 .details-meta .rating { gap: 5px; min-height: 32px; padding: 5px 10px; border-radius: 10px; border-color: rgba(220,190,123,.22); background: rgba(220,190,123,.07); color: #e4c684; font-size: 14px; }
.catalog-v2 .details-meta .rating-source { font-size: 10px; letter-spacing: .02em; margin-right: 4px; }
.catalog-v2 .details-meta .rating-scale { font-size: 10px; color: #b2a48a; }
.catalog-v2 .details-meta > span + span:not(.rating)::before { opacity: .35; }
.catalog-v2 .details-copy .genre-list { margin: 18px 0; gap: 6px; }
.catalog-v2 .details-copy .genre-chip { font-size: 11px; padding: 6px 9px; background: rgba(189,159,226,.055); border-color: rgba(193,166,227,.14); }
.catalog-v2 .details-actions { margin-top: 20px; gap: 8px; }
.catalog-v2 .details-actions button { font-size: 13px; border-radius: 13px; }
.catalog-v2 #personalRating { display: grid; gap: 7px; margin: 16px 0 0; padding: 12px 14px 8px; border: 1px solid rgba(194,157,237,.18); border-radius: 18px; background: linear-gradient(125deg,rgba(164,119,218,.1),rgba(255,255,255,.018)); }
.catalog-v2 #personalRating[hidden] { display: none; }
.catalog-v2 .personal-rating-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.catalog-v2 .personal-rating-title { color: #dcd0ea; font-size: 13px; font-weight: 650; }
.catalog-v2 .personal-rating-value { display: inline-flex; align-items: baseline; gap: 5px; color: #e4c8ff; font-variant-numeric: tabular-nums; }
.catalog-v2 .personal-rating-number { font-size: 19px; line-height: 1; font-weight: 750; }
.catalog-v2 .personal-rating-scale { color: #a696b9; font-size: 12px; }
.catalog-v2 .personal-rating-value.is-empty { color: #8d819f; }
.catalog-v2 .personal-rating-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.catalog-v2 .personal-stars { display: flex; gap: 3px; }
.catalog-v2 .personal-star { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 12px; color: #83758f; background: rgba(255,255,255,.025); cursor: pointer; }
.catalog-v2 .personal-star svg { width: 24px; height: 24px; pointer-events: none; }
.catalog-v2 .personal-star .star-outline { fill: transparent; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.catalog-v2 .personal-star .star-half { fill: transparent; stroke: none; }
.catalog-v2 .personal-star.is-filled, .catalog-v2 .personal-star.is-half { color: #cea3f2; background: rgba(186,137,235,.1); }
.catalog-v2 .personal-star.is-filled .star-outline, .catalog-v2 .personal-star.is-filled .star-half, .catalog-v2 .personal-star.is-half .star-half { fill: currentColor; }
.catalog-v2 .personal-rating-fine { display: flex; gap: 6px; margin-left: auto; }
.catalog-v2 .personal-rating-step { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(192,158,228,.18); border-radius: 12px; color: #d8c4ee; background: rgba(179,132,227,.07); font-size: 22px; cursor: pointer; }
.catalog-v2 .personal-rating-footer { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; min-height: 24px; }
.catalog-v2 .personal-rating-status { min-width: 0; flex: 1 1 160px; color: #a79ab6; font-size: 11px; line-height: 1.5; }
.catalog-v2 .personal-rating-status[data-state="saved"] { color: #b6c7b8; }
.catalog-v2 .personal-rating-status[data-state="error"], .catalog-v2 .personal-rating-status[data-state="loadError"] { color: #e5a5b7; }
.catalog-v2 .personal-rating-remove, .catalog-v2 .personal-rating-retry { min-height: 30px; padding: 0 4px; border: 0; border-radius: 8px; color: #baa6ce; background: transparent; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.catalog-v2 .personal-rating-remove[hidden], .catalog-v2 .personal-rating-retry[hidden] { display: none; }
.catalog-v2 #personalRating button:disabled { opacity: .4; cursor: default; }
.catalog-v2 #personalRating button:focus-visible { outline: 2px solid #d4aff9; outline-offset: 3px; }
@media (hover: hover) {
  .catalog-v2 .personal-star:hover:not(:disabled) { border-color: rgba(212,175,249,.38); background: rgba(193,151,232,.16); }
  .catalog-v2 .personal-rating-step:hover:not(:disabled) { background: rgba(193,151,232,.16); }
}
@media (max-width: 900px) {
  .catalog-v2 .details-layout { grid-template-columns: 156px minmax(0,1fr); padding: 90px 26px 24px; gap: 24px; }
  .catalog-v2 .details-copy h2 { font-size: 30px; }
  .catalog-v2 #personalRating { padding: 12px; }
}
@media (max-width: 680px) {
  .catalog-v2 .details-card { height: auto; max-height: calc(100dvh - 20px); border-radius: 22px; }
  .catalog-v2 .details-layout { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 72px 20px 24px; }
  .catalog-v2 .details-poster { float: none; width: 104px; margin: 0; border-radius: 12px; }
  .catalog-v2 .details-copy h2 { font-size: 28px; }
  .catalog-v2 .details-backdrop { height: 310px; }
  .catalog-v2 .details-gradient { height: 410px; }
  .catalog-v2 .details-actions button { padding-inline: 14px; }
  .catalog-v2 #personalRating { gap: 6px; padding: 8px; }
  .catalog-v2 .personal-rating-controls { gap: 6px; }
  .catalog-v2 .personal-rating-footer { gap: 0 8px; }
}

.catalog-v2 .details-frame:focus { outline: none; }
.catalog-v2 .details-heading { min-width: 0; }
@media (max-width: 680px) {
  .catalog-v2 .details-layout { grid-template-columns: 96px minmax(0,1fr); column-gap: 16px; row-gap: 18px; padding-top: 74px; }
  .catalog-v2 .details-poster { width: 96px; grid-column: 1; grid-row: 1; }
  .catalog-v2 .details-copy { display: contents; }
  .catalog-v2 .details-copy > * { grid-column: 1 / -1; }
  .catalog-v2 .details-copy > .details-heading { grid-column: 2; grid-row: 1; }
  .catalog-v2 .details-copy h2 { font-size: 25px; margin-bottom: 12px; }
  .catalog-v2 .details-copy > p, .catalog-v2 .details-copy .genre-list { margin: 0; }
  .catalog-v2 #personalRating, .catalog-v2 .details-actions { margin-top: 0; }
}

/* Keep finger targets generous while the surrounding rating panel is compact. */
@media (any-pointer: coarse) {
  .catalog-v2 .personal-star, .catalog-v2 .personal-rating-step { width: 44px; height: 44px; }
  .catalog-v2 .personal-rating-remove, .catalog-v2 .personal-rating-retry { min-height: 44px; }
  .catalog-v2 .personal-stars { gap: 0; }
  .catalog-v2 .personal-rating-fine { gap: 2px; }
}


/* With no format label, episode progress can use the top-left corner. */
.anime-card .poster-wrap:not(:has(.anime-format, .card-flag)) .episode-progress-badge { top: 9px; }
.anime-card .poster-wrap:not(:has(.anime-format, .card-flag)) .season-progress-badge { top: 40px; }

/* Personal and shared recommendations use the catalog's existing glass style. */
.recommendations-panel { margin: 28px 0 36px; padding: 22px 0 8px; border-top: 1px solid rgba(195,164,233,.13); border-bottom: 1px solid rgba(195,164,233,.09); }
.recommendations-panel[hidden] { display: none; }
.recommendations-panel { padding: 24px; border: 1px solid rgba(193,164,233,.17); border-radius: 24px; background: linear-gradient(135deg,rgba(110,70,170,.10),rgba(255,255,255,.015)); }
.recommendations-intro { min-width: 0; flex: 1 1 300px; }
.recommendations-priority { display: block; margin-bottom: 8px; color: #c7afdF; font-size: 11px; font-weight: 650; letter-spacing: .04em; }
.recommendations-priority::before { content: "✦"; margin-right: 7px; color: #b99bf0; }
/* Heading and footer controls share the chips' shape: 44px tall, radius 13. */
.recommendations-open, .recommendations-refresh { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; border: 1px solid rgba(190,165,218,.16); border-radius: 13px; background: rgba(255,255,255,.025); color: #cbb5e3; font-size: 12px; font-weight: 650; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.recommendations-open { color: #eee3fd; border-color: rgba(194,157,245,.45); background: rgba(149,104,209,.2); }
.recommendations-open:hover { background: rgba(149,104,209,.32); }
.recommendations-refresh:hover:not(:disabled) { color: #eee3fd; border-color: rgba(194,157,245,.35); }
.recommendations-browser { display: grid; gap: 14px; margin: 0 0 24px; padding-top: 18px; border-top: 1px solid rgba(200,172,234,.12); }
.recommendations-browser-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.recommendations-sources, .recommendations-categories { display: flex; flex-wrap: wrap; gap: 6px; }
.recommendations-sources button, .recommendations-categories button { min-height: 44px; padding: 0 14px; border: 1px solid rgba(190,165,218,.16); border-radius: 13px; background: rgba(255,255,255,.025); color: #bdb1cc; font-size: 12px; cursor: pointer; }
.recommendations-sources button[aria-pressed="true"], .recommendations-categories button[aria-pressed="true"] { color: #eee3fd; border-color: rgba(194,157,245,.45); background: rgba(149,104,209,.2); }
#recommendationsSearch { width: min(320px,100%); min-height: 44px; padding: 0 14px; border: 1px solid rgba(190,165,218,.22); border-radius: 13px; outline: none; background: rgba(10,9,17,.5); color: #ece4f7; font: inherit; font-size: 13px; }
#recommendationsSearch:focus { border-color: #b498d9; box-shadow: 0 0 0 3px rgba(153,115,203,.14); }
.recommendations-panel :is(button,input):focus-visible { outline: 2px solid #c5a9ee; outline-offset: 3px; }
.catalog-v2 .recommendations-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 28px 18px; }
.recommendations-grid .media-card { min-width: 0; width: auto; }
.recommendations-grid .card-reason { min-height: 4.5em; -webkit-line-clamp: 3; }
.recommendations-grid .recommendation-tile { position: relative; min-width: 0; display: flex; flex-direction: column; }
.recommendations-grid .recommendation-tile > .media-card { flex: 1 1 auto; width: auto; min-width: 0; }
.recommendations-panel .recommendations-grid .card-reason { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 4.5em; }
.recommendations-grid .recommendation-dismiss { min-width: 44px; min-height: 44px; }
@media (hover: hover) and (pointer: fine) {
  .recommendation-tile > .recommendation-dismiss, .recommendation-tile > .recommendation-less { opacity: 0; transition: opacity .16s ease; }
  .recommendation-tile:hover > .recommendation-dismiss, .recommendation-tile:hover > .recommendation-less,
  .recommendation-tile:focus-within > .recommendation-dismiss, .recommendation-tile:focus-within > .recommendation-less { opacity: .8; }
  .recommendation-tile > .recommendation-dismiss:hover, .recommendation-tile > .recommendation-dismiss:focus-visible,
  .recommendation-tile > .recommendation-less:hover, .recommendation-tile > .recommendation-less:focus-visible { opacity: 1; }
}
.recommendations-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(198,173,230,.13); }
.recommendations-footer p { margin: 0; color: #b6a6c8; font-size: 12px; }
.recommendations-footer > div { display: flex; gap: 8px; flex-wrap: wrap; }
.recommendations-empty { padding: 36px 20px; text-align: center; color: #bdb0cc; border: 1px dashed rgba(194,165,232,.2); border-radius: 18px; }
.recommendations-empty p { margin: 0 auto 16px; max-width: 560px; font-size: 14px; line-height: 1.65; }
.recommendations-empty button { min-height: 44px; padding: 0 14px; border: 1px solid rgba(198,165,231,.3); border-radius: 12px; background: rgba(147,107,196,.15); color: #e5d8f8; cursor: pointer; }
.recommendations-full { margin: 0 0 28px; padding: 0; border: 0; border-radius: 0; background: none; }
.recommendations-full .recommendations-mode { gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; }
.recommendations-full .recommendations-mode button { min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.035); font-size: 12px; font-weight: 750; }
.recommendations-full .recommendations-mode button[aria-pressed="true"] { color: #eee3fd; border-color: rgba(199,163,255,.35); background: rgba(149,104,209,.2); }
.recommendations-full .recommendations-sources button,
.recommendations-full .recommendations-categories button { border-radius: 999px; }
.recommendation-rows .row-title h3 { font-size: 20px; font-weight: 800; }
.recommendations-panel [hidden] { display: none !important; }
body[data-view="recommendations"] #recommendationsSearch { display: none; }
.nav-recommendations-short { display: none; }
.nav-library-short { display: none; }
@media (max-width:1180px), (max-width:1400px) and (any-pointer:coarse) {
  .catalog-v2 .main-nav { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 2px; }
  .catalog-v2 .nav-item { min-width: 0; padding-inline: 2px; font-size: 12px; }
  .catalog-v2 .nav-item > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-recommendations-full { display: none; }
  .nav-recommendations-short { display: inline; }
}
/* Seven columns on a phone leave ~45px each, which «Библиотека» /
   «Médiathèque» cannot hold; the shortest usable word stands in until the
   bar is narrow enough that only the icons fit. */
@media (max-width:650px) {
  .nav-library-full { display: none; }
  .nav-library-short { display: inline; }
}
@media (max-width:430px) {
  .catalog-v2 .nav-item { gap: 1px; min-height: 50px; padding: 4px 1px; font-size: 9px; }
  .catalog-v2 .nav-item .ui-icon { width: 18px; height: 18px; opacity: .9; }
}
@media (max-width:1100px) { .catalog-v2 .recommendations-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width:680px) {
  .recommendations-panel { padding: 18px 14px; border-radius: 19px; }
  .recommendations-full { padding: 0; border: 0; border-radius: 0; background: none; }
  .catalog-v2 .recommendations-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 13px; }
  .recommendations-intro { flex-basis: 100%; }
  .recommendations-browser-top > * { width: 100%; }
  #recommendationsSearch { width: 100%; }
  .recommendations-sources button { flex: 1; padding-inline: 8px; }
  .recommendations-categories { gap: 5px; }
  .recommendations-categories button { padding-inline: 10px; font-size: 11px; }
  .recommendations-footer > div { width: 100%; }
  .recommendations-footer > div > button { flex: 1; }
}
.recommendations-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.recommendations-heading h2 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.recommendations-heading p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: #a69ab4; }
.recommendations-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.recommendations-mode { display: flex; gap: 2px; padding: 3px; border: 1px solid rgba(190,165,218,.16); border-radius: 13px; background: rgba(255,255,255,.025); }
.recommendations-mode button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; color: #bdb1cc; background: transparent; cursor: pointer; font-size: 12px; font-weight: 650; }
.recommendations-mode button[aria-pressed="true"] { color: #eee3fd; background: rgba(149,104,209,.2); }
.recommendations-refresh:disabled { opacity: .48; cursor: default; }
/* Fingers keep 44px segments; the neighbours grow to the same 52px row. */
@media (any-pointer: coarse) {
  .recommendations-mode button { min-height: 44px; }
  .recommendations-heading :is(.recommendations-open, .recommendations-refresh) { min-height: 52px; }
}
.recommendations-state { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 24px; min-height: 20px; }
#recommendationsStatus { margin: 0; color: #a294b3; font-size: 11px; line-height: 1.5; }
#recommendationsEngine { flex-shrink: 0; color: #bea2df; font-size: 10px; padding: 4px 8px; border-radius: 8px; border: 1px solid rgba(191,150,235,.16); }
#recommendationsEngine[hidden] { display: none; }
.recommendation-rows { display: grid; gap: 28px; }
.recommendation-rows .catalog-row { contain-intrinsic-size: auto 380px; }
.recommendation-rows .row-title h3 { font-size: 18px; }
.recommendation-rows .row-count { display: none; }
.recommendation-rows .card-reason { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; color: #baa9ca; font-size: 11px; line-height: 1.5; }
.recommendation-dismiss { position: absolute; z-index: 5; top: 6px; right: 6px; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(230,211,253,.14); border-radius: 12px; background: rgba(16,12,25,.7); color: #d1bfdF; font-size: 23px; cursor: pointer; opacity: .72; }
.recommendation-dismiss:hover, .recommendation-dismiss:focus-visible { opacity: 1; background: rgba(47,27,62,.9); }
.recommendation-less { position: absolute; z-index: 5; top: 6px; right: 46px; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(230,211,253,.14); border-radius: 12px; background: rgba(16,12,25,.7); color: #d1bfdF; font-size: 22px; line-height: 1; cursor: pointer; opacity: .72; }
.recommendation-less:hover, .recommendation-less:focus-visible { opacity: 1; background: rgba(47,27,62,.9); }
.poster-wrap:has(.anime-status) .recommendation-dismiss, .poster-wrap:has(.anime-status) .recommendation-less { top: 38px; }
.rating-nudge { margin-top: 6px; padding: 4px 8px; border: 1px solid rgba(230,211,253,.2); border-radius: 10px; background: rgba(139,98,190,.12); color: #dcc8f4; font-size: 11px; cursor: pointer; }
.rating-nudge:hover, .rating-nudge:focus-visible { background: rgba(139,98,190,.24); }
.recommendations-undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 5px 12px; border: 1px solid rgba(186,153,224,.16); border-radius: 12px; background: rgba(139,98,190,.07); color: #c6b4d9; font-size: 12px; }
.recommendations-undo[hidden] { display: none; }
.recommendations-undo button { min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: #e5d2ff; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 680px) {
  .recommendations-panel { margin-top: 22px; padding-top: 18px; }
  .recommendations-heading h2 { font-size: 22px; }
  .recommendations-actions { width: 100%; justify-content: space-between; }
  .recommendations-state { align-items: flex-start; margin-bottom: 18px; }
  .recommendations-mode button { padding-inline: 12px; font-size: 11px; }
  #recommendationsEngine { font-size: 9px; }
}
@media (any-pointer: coarse) { .recommendation-dismiss { width: 44px; height: 44px; } .recommendation-less { width: 44px; height: 44px; right: 54px; } }
/* SpatialPosters draws award/genre ribbons along the top edge of the cover.
   With a mouse the recommendation buttons appear only over the card; on touch
   they stack down the right edge instead of sitting across the ribbon. */
@media (hover: hover) and (pointer: fine) {
  .poster-wrap .recommendation-dismiss, .poster-wrap .recommendation-less { opacity: 0; transition: opacity .16s ease; }
  .media-card:hover .recommendation-dismiss, .media-card:hover .recommendation-less,
  .media-card:focus-within .recommendation-dismiss, .media-card:focus-within .recommendation-less { opacity: .8; }
  .media-card .recommendation-dismiss:hover, .media-card .recommendation-dismiss:focus-visible,
  .media-card .recommendation-less:hover, .media-card .recommendation-less:focus-visible { opacity: 1; }
}
@media (any-pointer: coarse) {
  .poster-wrap .recommendation-dismiss, .poster-wrap .recommendation-less { width: 32px; height: 32px; min-width: 0; min-height: 0; border: 0; border-radius: 50%; background: rgba(10,8,18,.46); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(255,255,255,.88); font-size: 19px; opacity: 1; }
  /* The visible circle stays small; the tap target keeps 44px. */
  .poster-wrap .recommendation-dismiss::before, .poster-wrap .recommendation-less::before { content: ""; position: absolute; inset: -6px; }
  .poster-wrap .recommendation-dismiss { top: 8px; right: 8px; }
  .poster-wrap .recommendation-less { top: 50px; right: 8px; }
  .poster-wrap:has(.anime-status) .recommendation-less { top: 82px; }
  /* The React grid puts the same buttons next to the card, not inside the poster. */
  .recommendation-tile > .recommendation-dismiss,
  .recommendation-tile > .recommendation-less { width: 32px; height: 32px; min-width: 0; min-height: 0; border: 0; border-radius: 50%; background: rgba(10,8,18,.46); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(255,255,255,.88); font-size: 19px; opacity: 1; }
  .recommendation-tile > .recommendation-dismiss { top: 8px; right: 8px; }
  .recommendation-tile > .recommendation-less { top: 50px; right: 8px; }
}

/* MAL detail information shares the same quiet glass surfaces as the card. */
.anime-fact[data-kind="entry"] { grid-column: 1 / -1; min-height: 52px; border-color: rgba(196,181,253,.14); }
.anime-fact[data-kind="audience"] dd { color: #f4aacd; }
.anime-fact[data-kind="community"] dd { color: #ecd7a6; }
.anime-mal-link { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; color: #cbb6ed; font-size: 11px; text-decoration: none; }
.anime-mal-link:hover { color: #f4d1e7; }
.anime-mal-link:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 5px; }

/* Compact personal rating: one row when space permits, two on phones. */
.catalog-v2 #personalRating { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 10px; border-radius: 14px; }
.catalog-v2 .personal-rating-head { flex: 1 1 130px; gap: 8px; min-width: 0; }
.catalog-v2 .personal-rating-title { font-size: 12px; white-space: nowrap; }
.catalog-v2 .personal-rating-value { margin-left: auto; gap: 3px; }
.catalog-v2 .personal-rating-number { font-size: 17px; }
.catalog-v2 .personal-rating-controls { flex: 0 1 auto; gap: 6px; }
.catalog-v2 .personal-stars { gap: 0; }
.catalog-v2 .personal-star { width: 36px; height: 36px; border-radius: 9px; }
.catalog-v2 .personal-star svg { width: 22px; height: 22px; }
.catalog-v2 .personal-rating-fine { gap: 2px; }
.catalog-v2 .personal-rating-step { width: 32px; height: 32px; border-radius: 9px; font-size: 20px; }
.catalog-v2 .personal-rating-head .personal-rating-remove { flex: 0 0 28px; width: 28px; min-height: 28px; padding: 0; font-size: 20px; text-decoration: none; }
.catalog-v2 .personal-rating-footer { flex: 1 0 100%; min-height: 0; }
.catalog-v2 .personal-rating-footer:has(.personal-rating-status:is([data-state="hint"], [data-state="saved"], [data-state="preview"])) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (any-pointer: coarse) {
  .catalog-v2 .personal-rating-controls, .catalog-v2 .personal-rating-fine { column-gap: 0; }
  .catalog-v2 .personal-star, .catalog-v2 .personal-rating-step { width: 44px; height: 44px; }
  .catalog-v2 .personal-rating-head .personal-rating-remove { flex-basis: 44px; width: 44px; min-height: 44px; }
}

/* Preparation shares the catalog's metadata and secondary-control hierarchy. */
.preparation-queue[hidden], .preparation-detail[hidden] { display: none; }
.catalog-v2 .preparation-queue { margin: 14px 0 0; border: 1px solid rgba(196,167,225,.12); border-radius: 14px; background: rgba(142,108,180,.04); overflow: hidden; }
.preparation-queue-summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; color: #c4b7d2; font-size: 12px; cursor: pointer; list-style: none; }
.preparation-queue-summary::-webkit-details-marker { display: none; }
.preparation-queue-summary::marker { content: ""; }
.preparation-queue-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.preparation-queue-summary > .preparation-icon:first-child { color: #b59bd0; }
.preparation-queue-summary > .preparation-icon:last-child { width: 14px; height: 14px; margin-left: auto; color: #9b8ca9; transition: transform .18s ease; }
.preparation-queue[open] .preparation-queue-summary > .preparation-icon:last-child { transform: rotate(180deg); }
.preparation-queue-summary:hover { background: rgba(171,136,214,.05); }
.preparation-queue-summary:focus-visible { outline: 2px solid var(--purple); outline-offset: -3px; border-radius: 12px; }
.preparation-queue-count { flex: none; min-width: 20px; padding: 2px 6px; border-radius: 6px; color: #c7afdE; background: rgba(162,117,208,.1); text-align: center; font-size: 10px; font-variant-numeric: tabular-nums; }
.preparation-queue-list { max-height: 300px; overflow: auto; overscroll-behavior: contain; padding: 0 14px; border-top: 1px solid rgba(196,167,225,.08); scrollbar-width: thin; scrollbar-color: rgba(175,137,207,.3) transparent; }
.preparation-job { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 9px 0; }
.preparation-job + .preparation-job { border-top: 1px solid rgba(196,167,225,.07); }
.preparation-job-copy { flex: 1; min-width: 0; display: grid; gap: 4px; }
.preparation-job-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e4dcec; font-size: 12px; font-weight: 600; }
.preparation-job-copy > span { color: #958bA2; font-size: 11px; line-height: 1.45; }
.preparation-open { flex: none; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: #c1a7dd; font-size: 11px; cursor: pointer; }
.preparation-open:hover { background: rgba(158,115,204,.1); color: #e7d5fa; }
.preparation-open .ui-icon { width: 13px; height: 13px; }
.preparation-icon { width: 14px; height: 14px; }

/* Inline indicators do not add a grid child, a new line, or poster clutter. */
.preparation-badge { display: inline-flex; vertical-align: middle; align-items: center; gap: 3px; margin-left: 6px; color: #b5a1ce; font-size: 10px; font-weight: 550; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.preparation-badge .preparation-icon { width: 11px; height: 11px; }
.preparation-badge[data-phase="ready"] { color: #9bc9ae; }
.preparation-badge[data-phase="failed"] { color: #d4b189; }
.recent-kind .preparation-badge { margin-left: 1px; font-size: 9px; }
.recent-kind .preparation-badge[data-phase="ready"] .preparation-icon { display: none; }

.preparation-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 10px 0; color: #a99cb8; font-size: 11px; line-height: 1.5; }
.preparation-detail-status { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.preparation-detail-status[data-phase="ready"] { color: #a1c6af; }
.preparation-detail-status[data-phase="failed"] { color: #d4b189; }
.preparation-viewers { display: inline-flex; flex-wrap: wrap; gap: 12px; }
.preparation-viewer { display: inline-flex; align-items: center; gap: 4px; color: #94869f; }
.preparation-viewer .preparation-icon { width: 12px; height: 12px; }
.preparation-viewer[data-phase="ready"] .preparation-icon { color: #94bfa5; }
.catalog-v2 .details-tracks-actions .details-prepare-button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: 11.5px; }
.episode-actions .episode-prepare { flex: 0 0 44px; display: inline-flex; justify-content: center; align-items: center; width: 44px; min-height: 44px; padding: 0; border-radius: 12px; border: 1px solid rgba(196,167,225,.12); color: #ae98c6; background: rgba(153,113,192,.05); }
.episode-actions .episode-prepare .preparation-icon { width: 17px; height: 17px; }
.episode-actions .episode-prepare[data-busy="true"] { overflow: hidden; font-size: 0; }
.episode-actions .episode-prepare[data-busy="true"]::after { content: "…"; font-size: 20px; }
@media (any-pointer: coarse) { .catalog-v2 .details-tracks-actions .details-prepare-button { min-height: 44px; } }
@media (max-width: 600px) { .preparation-detail { margin: 4px 0 8px; gap: 5px 12px; } .preparation-queue-summary { padding-inline: 12px; } }
@media (prefers-reduced-motion: reduce) { .preparation-queue-summary > .preparation-icon:last-child { transition: none; } }

.episode-card.episode-search-target { border-color: rgba(183,141,230,.75); box-shadow: 0 0 0 2px rgba(155,111,204,.15); }

/* Waiting card: a running bar even before TorBox reports a percentage, and
   the "find 1080p" escape hatch while a 4K release downloads. */
.season-progress.indeterminate span { width: 34%; animation: season-progress-slide 1.5s ease-in-out infinite; }
@keyframes season-progress-slide { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
.season-find-hd { border-color: rgba(56,189,248,.35); color: #bae6fd; background: rgba(14,165,233,.12); }
.season-find-hd:hover { background: rgba(14,165,233,.22); }
@media (prefers-reduced-motion: reduce) { .season-progress.indeterminate span { animation: none; width: 100%; opacity: .45; } }

/* A quiet, nonmodal download window; it never adds children to catalog cards. */
.catalog-v2 .preparation-queue.preparation-dock {
  position: fixed; z-index: 6800; right: 24px; bottom: 24px; width: min(380px, calc(100vw - 32px));
  margin: 0; border: 1px solid rgba(196,167,225,.22); border-radius: 22px; overflow: hidden;
  background: radial-gradient(ellipse at 100% 0,rgba(137,88,198,.17),transparent 65%),rgba(17,14,25,.95);
  box-shadow: 0 20px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  animation: preparation-dock-enter .28s cubic-bezier(.2,.8,.2,1) both;
}
.preparation-dock.is-leaving { pointer-events: none; animation: preparation-dock-exit .22s ease both; }
.preparation-dock-head { display: flex; align-items: center; gap: 9px; padding: 12px 12px 10px 16px; }
.preparation-dock-emblem { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 10px; color: #d3b8ed; background: rgba(155,107,204,.12); border: 1px solid rgba(192,150,232,.12); }
.preparation-dock-emblem .ui-icon { width: 16px; height: 16px; }
.preparation-dock-title { min-width: 0; flex: 1; font-size: 12px; font-weight: 600; line-height: 1.4; color: #e2d8ec; }
.preparation-dock .preparation-queue-count { color: #c7acdF; margin-right: 2px; }
.preparation-dock-control { flex: none; display: grid; place-items: center; width: 32px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #a695b7; cursor: pointer; transition: background .16s, color .16s; }
.preparation-dock-control .ui-icon { width: 16px; height: 16px; }
.preparation-dock-control:hover { color: #f0e1ff; background: rgba(183,141,220,.1); }
.preparation-dock-control:focus-visible, .preparation-dock-tab:focus-visible, .preparation-job-action:focus-visible { outline: 2px solid #c6a0ed; outline-offset: 2px; }
.preparation-dock .preparation-queue-list { max-height: min(52vh,360px); padding: 0 16px; border-top: 1px solid rgba(190,155,222,.1); }
.preparation-dock .preparation-job { gap: 8px; align-items: flex-start; padding: 15px 0; min-height: 104px; animation: preparation-job-enter .24s ease both; }
.preparation-dock .preparation-job.is-leaving { pointer-events: none; animation: preparation-job-exit .22s ease both; }
.preparation-dock .preparation-job-copy { gap: 6px; }
.preparation-job-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.preparation-dock .preparation-job-title { color: #ece4f4; flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
.preparation-job-quality { flex: none; padding: 2px 5px; border: 1px solid rgba(181,142,218,.19); border-radius: 5px; color: #c7afe0; font-size: 9px; font-weight: 600; letter-spacing: .035em; }
.preparation-dock .preparation-job-stage { color: #c1aecf; font-size: 11px; line-height: 1.4; }
.preparation-dock .preparation-job-meta { color: #92839f; font-size: 10px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.preparation-dock .preparation-job-reason { color: #b49ac9; font-size: 10px; line-height: 1.45; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preparation-job-progress { height: 3px; overflow: hidden; border-radius: 999px; margin-top: 3px; background: rgba(199,162,230,.1); }
.preparation-job-bar { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#9060c3,#c6a1e2); box-shadow: 0 0 12px rgba(168,114,215,.25); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.preparation-job-progress.indeterminate .preparation-job-bar { animation: preparation-dock-progress 1.8s ease-in-out infinite; }
.preparation-dock .preparation-open { width: 30px; min-height: 32px; margin: -4px -3px 0 0; padding: 0; color: #9a84af; }
.preparation-job-controls { display: flex; align-items: center; gap: 2px; flex: none; }
.preparation-cancel { color: #bfa4b4; }
.preparation-cancel:hover { color: #ffc1cc; background: rgba(218,106,137,.12); }
.preparation-cancel:disabled { opacity: .35; cursor: wait; }
.preparation-dock-note { padding: 0 16px 12px; margin: 0; color: #776c83; font-size: 10px; line-height: 1.5; }
.preparation-job-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.preparation-job-actions:empty { display: none; }
.preparation-job-action { min-height: 28px; padding: 4px 8px; border: 1px solid rgba(171,130,209,.16); border-radius: 8px; color: #bca5cf; background: rgba(158,105,201,.045); font-family: inherit; font-size: 10px; cursor: pointer; }
.preparation-job-action:hover { border-color: rgba(190,145,229,.32); background: rgba(158,105,201,.1); }
.preparation-dock-tab { position: fixed; z-index: 6800; right: 0; bottom: 124px; display: grid; justify-items: center; gap: 6px; min-width: 48px; min-height: 66px; padding: 11px 12px 10px 9px; border: 1px solid rgba(196,167,225,.23); border-right: 0; border-radius: 16px 0 0 16px; color: #c4a4e3; background: rgba(24,17,34,.95); box-shadow: -6px 7px 26px rgba(0,0,0,.24); backdrop-filter: blur(16px); cursor: pointer; animation: preparation-tab-enter .25s ease both; }
.preparation-dock-tab[hidden] { display: none; }
.preparation-dock-tab .ui-icon { width: 17px; height: 17px; }
.preparation-dock-tab-count { color: #e4d5f4; font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums; }
@keyframes preparation-dock-enter { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes preparation-dock-exit { to { opacity: 0; transform: translateX(32px) scale(.98); } }
@keyframes preparation-job-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes preparation-job-exit { to { opacity: 0; transform: translateX(16px); } }
@keyframes preparation-dock-progress { from { transform: translateX(-105%); } to { transform: translateX(325%); } }
@keyframes preparation-tab-enter { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .catalog-v2 .preparation-queue.preparation-dock { right: 12px; bottom: calc(88px + env(safe-area-inset-bottom,0px)); width: calc(100vw - 24px); border-radius: 20px; }
  .preparation-dock .preparation-queue-list { max-height: min(40vh,280px); }
  .preparation-dock-control { width: 36px; height: 40px; }
  .preparation-dock-tab { bottom: calc(110px + env(safe-area-inset-bottom,0px)); }
}
@media (any-pointer: coarse) { .preparation-dock-control { min-width: 40px; min-height: 44px; } .preparation-job-action { min-height: 36px; } }
@media (prefers-reduced-motion: reduce) {
  .preparation-dock, .preparation-dock.is-leaving, .preparation-dock .preparation-job, .preparation-dock .preparation-job.is-leaving, .preparation-dock-tab { animation: none; }
  .preparation-job-bar { transition: none; }
  .preparation-job-progress.indeterminate .preparation-job-bar { animation: none; width: 100%; opacity: .45; }
  .preparation-dock.is-leaving, .preparation-dock .preparation-job.is-leaving { opacity: 0; }
}

/* SpatialPosters covers carry their own title logo, genre · rating · year line,
   gradient and award ribbons. The card keeps the art clean and moves its own
   badges into a status line under the title (see adoptSpatialArt). */
.media-card.spatial-art .card-overlay,
.catalog-v2 .media-card.spatial-art .card-overlay { background: none; }
.media-card.spatial-art .poster-wrap { border-color: rgba(233,220,255,.1); box-shadow: 0 10px 28px rgba(0,0,0,.34); }
.media-card.spatial-art .poster-wrap img { transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s ease; }
@media (hover: hover) and (pointer: fine) {
  .media-card.spatial-art:hover .poster-wrap { border-color: rgba(196,164,255,.38); box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(167,139,250,.18), 0 10px 34px rgba(139,92,246,.2); }
  .media-card.spatial-art:hover .poster-wrap img { transform: scale(1.035); filter: saturate(1.08); }
}
.media-card.spatial-art .card-rating,
.media-card.spatial-art .card-meta:has(> .meta-year-plain) { display: none; }
.media-card.spatial-art .poster-wrap .card-flag,
.media-card.spatial-art .poster-wrap .season-progress-badge { display: none; }
.card-status { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; min-width: 0; margin-top: 5px; overflow: hidden; }
.card-status > * { flex: none; }
.card-status .library-badge, .card-status .season-progress-badge { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-status:empty { display: none; }
.card-status > * { position: static; inset: auto; margin: 0; box-shadow: none; }
.card-status .card-flag { padding: 3px 8px; border: 0; font-size: 8.5px; letter-spacing: .08em; }
.card-status .anime-format, .card-status .anime-status { padding: 3px 7px; border-radius: 999px; background: rgba(10,10,16,.5); backdrop-filter: none; }
.card-status .library-badge { display: block; padding: 3px 8px 3px 7px; border: 1px solid rgba(74,222,128,.28); border-radius: 999px; color: #a7f3c0; background: rgba(34,197,94,.1); font-size: 10px; font-weight: 750; letter-spacing: .01em; }
.card-status .library-badge::before { content: ""; display: inline-block; margin-right: 5px; vertical-align: 1px; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.8); }
.card-status .library-badge-saved { border-color: rgba(167,139,250,.32); color: #d8ccff; background: rgba(139,92,246,.12); }
.card-status .library-badge-saved::before { background: #a78bfa; box-shadow: 0 0 8px rgba(167,139,250,.8); }
.card-status .episode-progress-badge { min-width: 0; padding: 3px 7px; border-radius: 999px; font-size: 10px; backdrop-filter: none; }
.card-status .season-progress-badge { max-width: none; padding: 3px 7px; border-radius: 999px; font-size: 9.5px; backdrop-filter: none; }
.card-status .card-personal-badge { min-height: 0; margin-left: auto; padding: 3px 8px; gap: 3px; border: 1px solid rgba(250,204,21,.28); border-radius: 999px; color: #fde68a; background: rgba(250,204,21,.08); font-size: 10.5px; }
.card-status .card-personal-badge .badge-star { width: 11px; height: 11px; fill: #facc15; }

/* ---- Title card: cinematic hero, title logo, scores, credits, cast, trailer ---- */
.catalog-v2 .details-card { background: #0c0b13; border-color: rgba(222,204,255,.1); box-shadow: 0 40px 120px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.025); }
.catalog-v2 .details-backdrop { height: 580px; opacity: 1; background-position: center 20%; transform-origin: 60% 30%; }
.catalog-v2 .details-card:not(.details-loading) .details-backdrop { animation: details-drift 28s ease-in-out infinite alternate; }
@keyframes details-drift { from { transform: scale(1); } to { transform: scale(1.07) translate3d(-1%,-1%,0); } }
.catalog-v2 .details-gradient { height: 620px; background:
  linear-gradient(0deg,#0c0b13 0%,rgba(12,11,19,.95) 20%,rgba(12,11,19,.6) 48%,rgba(12,11,19,.1) 76%,rgba(12,11,19,.42) 100%),
  linear-gradient(90deg,rgba(12,11,19,.9) 0%,rgba(12,11,19,.52) 36%,transparent 70%),
  radial-gradient(110% 70% at 88% 0%,rgba(139,92,246,.2),transparent 62%); }
.catalog-v2 .details-layout { grid-template-columns: minmax(170px,230px) minmax(0,1fr); align-items: end; gap: 38px; padding: 150px 44px 30px; }
.catalog-v2 .details-poster { align-self: end; border: 0; border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.09), 0 0 64px rgba(139,92,246,.2); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease; }
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .details-poster:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 38px 84px rgba(0,0,0,.66), 0 0 0 1px rgba(255,255,255,.14), 0 0 84px rgba(139,92,246,.32); }
}
.catalog-v2 .details-heading > .eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 4px 11px; border: 1px solid rgba(214,190,255,.22); border-radius: 999px; color: #dccbff; background: rgba(139,92,246,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 10px; letter-spacing: .16em; }
.catalog-v2 .details-heading > .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 10px rgba(167,139,250,.9); }
.details-logo { display: block; width: auto; height: auto; max-width: min(460px,100%); max-height: 150px; margin: 0 0 16px; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 6px 22px rgba(0,0,0,.65)); animation: details-rise .5s cubic-bezier(.2,.8,.2,1) both; }
.details-logo[hidden] { display: none; }
/* The text title stays for assistive technology when the logo carries it. */
.details-copy h2.has-logo { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.catalog-v2 .details-copy h2 { text-shadow: 0 4px 30px rgba(0,0,0,.55); }
@keyframes details-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.details-scores { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 13px; }
.details-scores[hidden] { display: none; }
.score-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px 0 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; color: #f1ecfb; background: rgba(14,12,24,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.22); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; animation: details-rise .45s cubic-bezier(.2,.8,.2,1) backwards; }
.score-chip b { display: grid; place-items: center; min-width: 22px; font-size: 14px; line-height: 1; }
.score-chip strong { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.score-imdb { border-color: rgba(245,197,24,.34); background: rgba(245,197,24,.09); color: #fde68a; }
.score-imdb b { padding: 3px 5px; border-radius: 4px; color: #17140a; background: #f5c518; font-size: 9.5px; font-weight: 900; letter-spacing: .02em; }
.score-mal { border-color: rgba(96,140,255,.36); background: rgba(46,81,162,.2); color: #cfdcff; }
.score-mal b { padding: 3px 5px; border-radius: 4px; color: #fff; background: #2e51a2; font-size: 9.5px; font-weight: 900; }
.score-rt-fresh { border-color: rgba(250,82,60,.36); background: rgba(250,82,60,.1); color: #ffd3c9; }
.score-rt-rotten { border-color: rgba(132,204,22,.32); background: rgba(132,204,22,.09); color: #d9f4b0; }
.score-rt-audience { border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.08); color: #fde9b6; }
.catalog-v2 .details-meta { gap: 10px; color: #d3cce0; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.catalog-v2 .details-meta .fact-age { padding: 1px 7px; border: 1px solid rgba(255,255,255,.34); border-radius: 5px; color: #f1ecfb; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.catalog-v2 .details-copy > p { max-width: 700px; margin: 18px 0 0; color: #d2cbdf; font-size: 15px; line-height: 1.66; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.catalog-v2 .details-copy > p.is-expanded, .catalog-v2 .details-copy > p.details-description-loading { display: block; -webkit-line-clamp: unset; overflow: visible; }
.details-more { margin: 6px 0 0; padding: 0; border: 0; color: #c4b5fd; background: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; }
.details-more:hover, .details-more:focus-visible { color: #e3d9ff; text-decoration: underline; text-underline-offset: 3px; }
.details-more[hidden] { display: none; }
.details-credits { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 5px 14px; max-width: 700px; margin: 16px 0 0; }
.details-credits[hidden] { display: none; }
.details-credits dt { align-self: center; color: #8f86a3; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.details-credits dd { margin: 0; color: #ece7f6; font-size: 13.5px; font-weight: 650; }
.catalog-v2 .details-copy .genre-list { margin: 16px 0 0; gap: 7px; }
.catalog-v2 .details-copy .genre-chip { padding: 6px 11px; border-color: rgba(214,190,255,.22); color: #d8cee8; background: rgba(189,159,226,.11); font-size: 11.5px; font-weight: 650; }
.catalog-v2 .details-actions { margin-top: 22px; gap: 10px; }
.catalog-v2 .details-actions button { min-height: 48px; border-radius: 14px; font-size: 13.5px; }
.catalog-v2 .details-actions .primary-button { padding: 0 26px; background: linear-gradient(135deg,#7c3aed,#c026d3); box-shadow: 0 14px 36px rgba(139,92,246,.42), inset 0 1px 0 rgba(255,255,255,.22); }
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .details-actions .primary-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 18px 44px rgba(168,85,247,.55), inset 0 1px 0 rgba(255,255,255,.28); }
}
.details-trailer-button { gap: 10px; }
.details-trailer-button::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; filter: drop-shadow(0 0 6px rgba(255,255,255,.35)); }
.details-section-title { margin: 0 0 14px; color: #f1ecfb; font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.details-cast { position: relative; z-index: 3; margin: 2px 44px 26px; }
.details-cast[hidden] { display: none; }
.cast-rail { display: flex; gap: 14px; margin: 0; padding: 4px 2px 10px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(167,139,250,.4) transparent; -webkit-mask-image: linear-gradient(90deg,#000 calc(100% - 40px),transparent); mask-image: linear-gradient(90deg,#000 calc(100% - 40px),transparent); }
.cast-person { flex: 0 0 92px; display: grid; justify-items: center; align-content: start; gap: 4px; scroll-snap-align: start; text-align: center; }
/* The tile is one button: the whole block opens the person card. */
.cast-person-link { display: grid; justify-items: center; align-content: start; gap: 4px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.cast-person-link:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; border-radius: 12px; }
.credits-people { display: inline-flex; flex-wrap: wrap; gap: 2px 10px; }
.person-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.person-link:hover { color: #d8b4fe; text-decoration: underline; }
.person-link:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; border-radius: 4px; }
.cast-avatar { position: relative; width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 5px; overflow: hidden; border-radius: 50%; color: #cdbcf0; background: linear-gradient(145deg,#2a2140,#171325); box-shadow: 0 0 0 1px rgba(214,190,255,.2), 0 8px 22px rgba(0,0,0,.4); font-size: 22px; font-weight: 800; transition: box-shadow .25s ease, transform .25s ease; }
.cast-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
@media (hover: hover) and (pointer: fine) {
  .cast-person:hover .cast-avatar { transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(167,139,250,.7), 0 12px 28px rgba(139,92,246,.3); }
}
.cast-name { max-width: 100%; color: #ece7f6; font-size: 12px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cast-role { max-width: 100%; color: #958ca8; font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.catalog-v2 .details-tracks, .catalog-v2 .anime-facts { margin-left: 44px; margin-right: 44px; }
.trailer-layer { position: fixed; z-index: 2100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(4,4,9,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: trailer-in .22s ease-out both; }
.trailer-layer[hidden] { display: none; }
.trailer-box { position: relative; width: min(1120px,100%,calc((100dvh - 110px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 18px; background: #000; box-shadow: 0 40px 120px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1), 0 0 90px rgba(139,92,246,.22); }
.trailer-box iframe { width: 100%; height: 100%; border: 0; border-radius: 18px; }
.trailer-close { position: absolute; top: -50px; right: 0; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; background: rgba(20,18,30,.8); cursor: pointer; font-size: 24px; line-height: 1; }
.trailer-close:hover, .trailer-close:focus-visible { background: rgba(124,58,237,.6); }
@keyframes trailer-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) {
  .catalog-v2 .details-layout { grid-template-columns: 164px minmax(0,1fr); gap: 26px; padding: 120px 28px 26px; }
  .details-logo { max-height: 112px; }
  .details-cast, .catalog-v2 .details-tracks, .catalog-v2 .anime-facts { margin-left: 28px; margin-right: 28px; }
}
@media (max-width: 680px) {
  .catalog-v2 .details-backdrop { height: 340px; }
  .catalog-v2 .details-gradient { height: 420px; }
  .catalog-v2 .details-layout { grid-template-columns: 104px minmax(0,1fr); align-items: end; column-gap: 16px; row-gap: 16px; padding: 92px 20px 22px; }
  .catalog-v2 .details-poster { width: 104px; border-radius: 12px; }
  .details-logo { max-height: 74px; margin-bottom: 10px; }
  .catalog-v2 .details-heading > .eyebrow { margin-bottom: 10px; }
  .details-scores { gap: 6px; margin-bottom: 10px; }
  .score-chip { min-height: 30px; padding: 0 9px 0 6px; gap: 6px; border-radius: 9px; }
  .score-chip strong { font-size: 13.5px; }
  .catalog-v2 .details-meta { font-size: 12.5px; gap: 8px; }
  .catalog-v2 .details-copy > p { margin: 0; font-size: 14.5px; -webkit-line-clamp: 5; }
  .details-more { margin-top: -8px; justify-self: start; min-height: 32px; }
  .details-credits, .catalog-v2 .details-copy .genre-list { margin: 0; }
  .catalog-v2 .details-actions { margin-top: 0; }
  .catalog-v2 .details-actions .primary-button { flex: 1 1 100%; }
  .catalog-v2 .details-actions .ghost-button { flex: 1 1 auto; }
  .details-cast, .catalog-v2 .details-tracks, .catalog-v2 .anime-facts { margin-left: 20px; margin-right: 20px; }
  .cast-person { flex-basis: 78px; }
  .cast-avatar { width: 64px; height: 64px; }
  .trailer-layer { padding: 10px; }
  .trailer-box, .trailer-box iframe { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-v2 .details-card:not(.details-loading) .details-backdrop, .details-logo, .score-chip, .trailer-layer { animation: none; }
  .catalog-v2 .details-poster { transition: none; }
}

/* ---- Compact title card: tighter hero, one-line scores, slim rating ---- */
.catalog-v2 .details-backdrop { height: 470px; }
.catalog-v2 .details-gradient { height: 500px; }
.catalog-v2 .details-layout { grid-template-columns: 184px minmax(0,1fr); gap: 32px; padding: 84px 40px 22px; }
.catalog-v2 .details-poster { border-radius: 14px; }
.catalog-v2 .details-heading > .eyebrow { margin-bottom: 10px; padding: 3px 10px; font-size: 9.5px; }
.details-logo { max-width: min(380px,100%); max-height: 104px; margin-bottom: 14px; }
.catalog-v2 .details-copy h2:not(.has-logo) { margin-bottom: 12px; }
/* Scores and facts share one line; facts wrap below only when they must. */
.details-scores { display: inline-flex; vertical-align: middle; gap: 6px; margin: 3px 14px 3px 0; }
.catalog-v2 .details-meta { display: inline-flex; vertical-align: middle; margin: 3px 0; gap: 8px; font-size: 13px; }
.score-chip { min-height: 30px; gap: 7px; padding: 0 10px 0 6px; border-radius: 9px; }
.score-chip b { min-width: 20px; font-size: 13px; }
.score-chip strong { font-size: 14px; }
.score-imdb b, .score-mal b { padding: 2px 4px; font-size: 9px; }
.catalog-v2 .details-copy > p { max-width: 680px; margin-top: 14px; font-size: 14.5px; line-height: 1.6; -webkit-line-clamp: 3; }
.details-more { margin-top: 4px; }
/* Credits read as one sentence-like line instead of a two-row table. */
.details-credits { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; max-width: 680px; margin-top: 12px; }
.details-credits dt { margin-right: 8px; font-size: 9.5px; }
.details-credits dd { margin-right: 22px; font-size: 13px; }
.catalog-v2 .details-copy .genre-list { margin: 12px 0 0; gap: 6px; }
.catalog-v2 .details-copy .genre-chip { padding: 4px 10px; font-size: 11px; }
.catalog-v2 .details-actions { margin-top: 18px; gap: 8px; }
.catalog-v2 .details-actions button { min-height: 44px; padding: 0 18px; border-radius: 12px; font-size: 13px; }
.catalog-v2 .details-actions .primary-button { padding: 0 24px; }
.catalog-v2 .details-actions .ghost-button { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
@media (hover: hover) and (pointer: fine) {
  .score-chip:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px rgba(0,0,0,.38); }
  .catalog-v2 .details-actions .ghost-button:hover:not(:disabled) { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.11); }
}
.catalog-v2 .details-actions .primary-button:active:not(:disabled),
.catalog-v2 .details-actions .ghost-button:active:not(:disabled),
.catalog-v2 .details-actions button:active:not(:disabled) { transform: translateY(1px); }
.details-play-button::before, .details-together-button::before, .details-trailer-button::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; border: 0; background: currentColor; filter: none; -webkit-mask: var(--details-icon) center / contain no-repeat; mask: var(--details-icon) center / contain no-repeat; }
.details-play-button { --details-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.6v10.8c0 .8.9 1.3 1.6.8l8.2-5.4c.6-.4.6-1.2 0-1.6L5.6 1.8C4.9 1.3 4 1.8 4 2.6z'/%3E%3C/svg%3E"); }
.details-together-button { --details-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='5.6' cy='4.6' r='2.6'/%3E%3Ccircle cx='11.4' cy='5.4' r='2.1'/%3E%3Cpath d='M.6 13.2c0-2.8 2.2-4.6 5-4.6s5 1.8 5 4.6c0 .5-.4.8-.9.8H1.5c-.5 0-.9-.3-.9-.8zM11.8 14c.1-.3.1-.5.1-.8 0-1.6-.6-3-1.7-4 .4-.1.8-.2 1.2-.2 2.3 0 4 1.4 4 3.6 0 .8-.4 1.4-1.2 1.4z'/%3E%3C/svg%3E"); }
.details-trailer-button { --details-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='1.5' y='3' width='13' height='10' rx='2.2'/%3E%3Cpath d='M6.6 5.9v4.2L10 8z' fill='black' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.details-together-button::before { width: 18px; }
.details-add-button::before, .details-remove-button::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--details-icon) center / contain no-repeat; mask: var(--details-icon) center / contain no-repeat; }
.details-add-button { --details-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 1.5v11M1.5 7h11'/%3E%3C/svg%3E"); }
.details-remove-button { --details-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2.5 2.5l9 9M11.5 2.5l-9 9'/%3E%3C/svg%3E"); }
/* The personal score sits under the actions as a slim pill, not a full-width panel. */
.catalog-v2 #personalRating { width: fit-content; max-width: 100%; margin-top: 12px; padding: 3px 6px 3px 14px; gap: 2px 14px; border-color: rgba(194,157,237,.14); border-radius: 13px; background: rgba(164,119,218,.07); }
.catalog-v2 .personal-rating-head { flex: 0 0 auto; }
.catalog-v2 .personal-rating-number { font-size: 15px; }
.catalog-v2 .personal-star { width: 34px; height: 34px; background: transparent; }
.catalog-v2 .personal-star svg { width: 20px; height: 20px; }
.catalog-v2 .personal-rating-step { width: 30px; height: 30px; font-size: 18px; }
.catalog-v2 .preparation-detail:not([hidden]) { margin-top: 14px; }
.details-section-title { margin-bottom: 10px; font-size: 14px; }
.details-cast { margin: 0 40px 22px; }
.cast-rail { gap: 10px; padding-bottom: 6px; }
.cast-person { flex-basis: 80px; gap: 2px; }
.cast-avatar { width: 62px; height: 62px; margin-bottom: 4px; font-size: 18px; }
.cast-name { font-size: 11.5px; }
.cast-role { font-size: 10.5px; }
.catalog-v2 .details-tracks, .catalog-v2 .anime-facts { margin-left: 40px; margin-right: 40px; }
@media (max-width: 900px) {
  .catalog-v2 .details-layout { grid-template-columns: 150px minmax(0,1fr); gap: 24px; padding: 76px 26px 20px; }
  .details-logo { max-height: 88px; }
  .details-cast, .catalog-v2 .details-tracks, .catalog-v2 .anime-facts { margin-left: 26px; margin-right: 26px; }
}
@media (max-width: 680px) {
  .catalog-v2 .details-layout { grid-template-columns: 96px minmax(0,1fr); padding: 80px 18px 20px; column-gap: 14px; row-gap: 14px; }
  .catalog-v2 .details-poster { width: 96px; }
  .details-logo { max-height: 64px; margin-bottom: 8px; }
  .details-scores { gap: 5px; margin-right: 10px; }
  .score-chip { min-height: 28px; padding: 0 8px 0 5px; }
  .score-chip strong { font-size: 13px; }
  .catalog-v2 .details-copy > p { margin: 0; font-size: 14px; -webkit-line-clamp: 4; }
  .details-more { margin-top: -12px; min-height: 28px; }
  .details-credits { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 4px 12px; }
  .details-credits dd { margin-right: 0; }
  .details-credits, .catalog-v2 .details-copy .genre-list, .catalog-v2 .details-actions { margin: 0; }
  .catalog-v2 #personalRating { width: auto; margin-top: 0; padding: 4px 6px 4px 12px; }
  .details-cast, .catalog-v2 .details-tracks, .catalog-v2 .anime-facts { margin-left: 18px; margin-right: 18px; }
  .cast-person { flex-basis: 70px; }
  .cast-avatar { width: 56px; height: 56px; }
}
@media (any-pointer: coarse) {
  .catalog-v2 .personal-star, .catalog-v2 .personal-rating-step { width: 44px; height: 44px; }
}

/* ---- Pages pass 1 (2026-10-01): badges, captions, lighter panels ---- */
/* One stack for the corner badges: "new", anime format and episode progress
   flow side by side instead of being drawn on the same spot. */
.poster-wrap > .poster-stack { position: absolute; z-index: 4; top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 5px; pointer-events: none; }
.poster-wrap > .poster-stack > * { position: static; inset: auto; margin: 0; max-width: 100%; }
.poster-wrap:has(.anime-status) > .poster-stack { right: 80px; }
.poster-wrap:has(.card-personal-badge) > .poster-stack { right: 70px; }
.media-card.spatial-art .poster-stack:not(:has(> :not(.card-flag, .season-progress-badge))) { display: none; }
/* TMDB's community score, labelled as such. */
.score-tmdb { border-color: rgba(1,180,228,.34); background: rgba(1,180,228,.09); color: #c5efff; }
.score-tmdb b { padding: 2px 4px; border-radius: 4px; color: #0d253f; background: linear-gradient(90deg,#90cea1,#01b4e4); font-size: 9px; font-weight: 900; }
/* In the library itself, "in the library" says nothing; only "saved, not yet
   downloaded" is worth a mark. */
body[data-view="library"] .library-badge:not(.library-badge-saved) { display: none; }
/* Captions: the year and score sit right under a one-line title. */
.catalog-v2 .card-title { min-height: 0; }
.catalog-v2 .card-meta { margin-top: 3px; }
/* Rows that are about new releases do not need a "new" flag on every cover. */
.catalog-row:is([data-section^="home-new"], [data-section^="latest-"], [data-section="home-year-best"], [data-section="trending-movies"], [data-section="trending-series"]) .card-flag { display: none; }
/* The mood row is a strip of chips, not a framed panel. */
.catalog-v2 #discoveryPanel.home-compact { padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; margin-bottom: 26px; }
#discoveryPanel.home-compact .discovery-lead strong { font-size: 15px; font-weight: 700; color: #e9e2f4; }
#discoveryPanel.home-compact .mood-card { min-height: 38px; padding: 6px 12px 6px 7px; border-radius: 999px; }
#discoveryPanel.home-compact .mood-icon { width: 24px; height: 24px; border-radius: 50%; }
/* On Films / Séries / Anime the recommendations are one slim row. */
.recommendations-panel:not(.recommendations-full) { margin: 0 0 26px; padding: 16px 18px 4px; border-radius: 20px; }
.recommendations-panel:not(.recommendations-full) .recommendations-heading { gap: 10px; }
.recommendations-panel:not(.recommendations-full) .recommendations-heading h2 { font-size: 18px; }
.recommendations-panel:not(.recommendations-full) :is(.recommendations-priority, #recommendationsHint) { display: none; }
.recommendations-panel:not(.recommendations-full) .recommendations-state { margin: 4px 0 8px; min-height: 0; }
.recommendations-panel:not(.recommendations-full) :is(.recommendations-open, .recommendations-refresh) { min-height: 36px; padding: 0 12px; border-radius: 11px; }
.recommendations-panel:not(.recommendations-full) .recommendations-mode button { min-height: 30px; padding: 0 11px; }
.recommendations-panel:not(.recommendations-full) .row-title { display: none; }
.recommendations-panel:not(.recommendations-full) .poster-rail { grid-auto-columns: 150px; }
.recommendations-panel:not(.recommendations-full) .card-reason { min-height: 0; -webkit-line-clamp: 2; }
.recommendations-panel:not(.recommendations-full) .anime-card-audience { display: none; }
@media (any-pointer: coarse) {
  .recommendations-panel:not(.recommendations-full) :is(.recommendations-open, .recommendations-refresh, .recommendations-mode button) { min-height: 44px; }
}

/* ---- Pages pass 2: Accueil ---- */
/* Hero carousel: dots under the actions and a soft cross-fade. */
.hero-dots { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.hero-dots[hidden] { display: none; }
.hero-pause { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; margin: 0 4px 0 0; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #fff; background: rgba(12,10,20,.5); cursor: pointer; }
.hero-pause svg { width: 16px; height: 16px; }
.hero-dot { position: relative; width: 26px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.26); cursor: pointer; transition: width .3s ease, background .3s ease; }
.hero-dot::before { content: ""; position: absolute; inset: -19px -4px; }
@media (max-width:1180px), (max-width:1400px) and (any-pointer:coarse) {
  .catalog-v2 .hero-dots { gap: 18px; }
  .catalog-v2 .hero-dot::before { inset: -19px -9px; }
}
.hero-dot[aria-current="true"] { width: 44px; background: linear-gradient(90deg,#a78bfa,#e879f9); }
.hero-dot:focus-visible { outline: 2px solid #d8c4ff; outline-offset: 4px; }
.catalog-v2 #heroDescription { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; max-width: 560px; }
.catalog-v2 #heroDescription[hidden] { display: none; }
/* Top 10: a large outlined rank beside each poster. */
.ranked-row .poster-rail { grid-auto-columns: clamp(190px,19vw,250px); }
.ranked-row .media-card { position: relative; padding-left: clamp(46px,5vw,66px); }
.ranked-row .rank-number { position: absolute; z-index: 0; left: -4px; bottom: 54px; color: rgba(157,117,222,.18); font-size: clamp(110px,11vw,158px); font-weight: 900; line-height: .8; letter-spacing: -.08em; -webkit-text-stroke: 2px rgba(196,170,255,.8); paint-order: stroke; text-shadow: 0 0 30px rgba(139,92,246,.25); pointer-events: none; user-select: none; }
.ranked-row .media-card:nth-child(10) { padding-left: clamp(70px,7.5vw,100px); width: calc(100% + clamp(70px,7.5vw,100px) - clamp(46px,5vw,66px)); }
.ranked-row .poster-wrap, .ranked-row .card-copy { position: relative; z-index: 1; }
@media (max-width: 680px) {
  .ranked-row .poster-rail { grid-auto-columns: 170px; }
  .ranked-row .media-card { padding-left: 42px; }
  .ranked-row .media-card:nth-child(10) { padding-left: 64px; width: calc(100% + 22px); }
  .ranked-row .rank-number { font-size: 100px; bottom: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .library-row, .library-row-thumb { transition: none; }
}

/* ---- Pages pass 2: Médiathèque ---- */
.library-toolbar { gap: 14px; padding: 12px 14px; border-radius: 18px; margin-bottom: 26px; }
.library-toolbar-header { flex-wrap: nowrap; padding-bottom: 0; border-bottom: 0; gap: 10px; }
.library-toolbar .library-search-wrap { flex: 1 1 260px; max-width: 360px; min-width: 160px; height: 40px; }
.library-selects { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.library-toolbar .era-select-shell,
.library-toolbar .ob-select-trigger { height: 44px; min-height: 44px; }
.library-select { position: relative; display: inline-flex; align-items: center; gap: 0; height: 44px; padding: 0 30px 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.04); cursor: pointer; }
.library-select::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.6px solid #a99fbd; border-bottom: 1.6px solid #a99fbd; transform: rotate(45deg); pointer-events: none; }
.library-select-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.library-select select { appearance: none; -webkit-appearance: none; height: 100%; padding: 0; border: 0; outline: none; color: #e6def3; background: transparent; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.library-select select option { color: #111; }
.library-select:focus-within { border-color: rgba(196,164,255,.5); box-shadow: 0 0 0 3px rgba(139,92,246,.16); }
.library-toolbar-actions { gap: 8px; }
.library-layout { display: flex; gap: 2px; padding: 3px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.03); }
.library-layout button { display: grid; place-items: center; width: 34px; height: 32px; padding: 0; border: 0; border-radius: 9px; color: #a99fbd; background: transparent; cursor: pointer; }
.library-layout button svg { width: 17px; height: 17px; }
.library-layout button[aria-pressed="true"] { color: #f3ecff; background: rgba(149,104,209,.28); }
.library-toolbar .library-refresh-button { width: 40px; height: 40px; padding: 0; justify-content: center; }
.library-toolbar .library-refresh-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.library-toolbar .library-count { height: 40px; }
.library-status-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.library-status-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: #c5bdd3; background: rgba(255,255,255,.035); cursor: pointer; font-size: 12.5px; font-weight: 750; }
.library-status-tab b { min-width: 22px; padding: 2px 7px; border-radius: 999px; color: #d8cdea; background: rgba(255,255,255,.07); font-size: 11px; text-align: center; }
.library-status-tab[aria-pressed="true"] { color: #f6f0ff; border-color: rgba(194,157,245,.5); background: rgba(149,104,209,.22); }
.library-status-tab::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8f86a3; }
.library-status-tab[data-status="progress"]::before { background: #e879f9; box-shadow: 0 0 8px rgba(232,121,249,.7); }
.library-status-tab[data-status="ready"]::before { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.6); }
.library-status-tab[data-status="saved"]::before { background: #a78bfa; }
.library-status-tab[data-status="seen"]::before { background: #fbbf24; }
.library-status-tab[data-status="all"]::before { display: none; }
.library-group-title { margin-top: 6px; }
.library-section + .library-section { margin-top: 18px; }
/* List layout */
.library-list { display: grid; gap: 6px; }
.library-row { display: grid; grid-template-columns: 44px minmax(0,1fr) auto 86px 110px; align-items: center; gap: 14px; min-height: 76px; padding: 8px 14px 8px 8px; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; background: rgba(255,255,255,.025); cursor: pointer; outline: none; transition: background .15s ease, border-color .15s ease; }
.library-row:hover, .library-row:focus-visible { border-color: rgba(196,164,255,.3); background: rgba(149,104,209,.08); }
.library-row:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.library-row-thumb { width: 44px; height: 60px; overflow: hidden; display: grid; place-items: center; border-radius: 7px; color: #cdbcf0; background: #1d1830; font-size: 13px; font-weight: 800; }
.library-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.library-row-copy { display: grid; gap: 3px; min-width: 0; }
.library-row-copy strong { overflow: hidden; color: #f2ecfb; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.library-row-copy span { overflow: hidden; color: #9c93ad; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.library-row-status { padding: 4px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #cfc6dd; font-size: 11px; font-weight: 700; white-space: nowrap; }
.library-row-status[data-status="progress"] { border-color: rgba(232,121,249,.35); color: #f5c9fb; background: rgba(232,121,249,.08); }
.library-row-status[data-status="ready"] { border-color: rgba(74,222,128,.3); color: #b7f5cd; background: rgba(74,222,128,.07); }
.library-row-status[data-status="saved"] { border-color: rgba(167,139,250,.32); color: #d8ccff; background: rgba(139,92,246,.1); }
.library-row-status[data-status="seen"] { border-color: rgba(251,191,36,.3); color: #fde8a8; background: rgba(251,191,36,.07); }
.library-row-score { color: #a99fbd; font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.library-row-score.is-personal { color: #fde68a; }
.library-row-added { color: #8a8299; font-size: 11.5px; text-align: right; }
@media (max-width: 980px) {
  .library-toolbar-header { flex-wrap: wrap; }
  .library-toolbar .library-search-wrap { flex: 1 1 100%; max-width: none; }
}
@media (max-width: 680px) {
  .library-toolbar { padding: 12px; }
  .library-selects { width: 100%; }
  .library-select { flex: 1 1 0; min-width: 0; }
  .library-select select { width: 100%; text-overflow: ellipsis; }
  .library-toolbar-actions { width: auto; margin-left: auto; }
  .library-status-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .library-status-tab { flex: none; }
  .library-row { grid-template-columns: 40px minmax(0,1fr) auto; gap: 10px; padding-right: 10px; }
  .library-row-thumb { width: 40px; height: 56px; }
  .library-row-score, .library-row-added { display: none; }
}
@media (any-pointer: coarse) {
  .library-select, .library-toolbar .library-refresh-button, .library-status-tab { min-height: 44px; }
}

/* ---- Pages pass 2: Films / Séries / Anime ---- */
.catalog-v2 #discoveryPanel.home-compact.filters-expanded { padding: 16px 20px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); }
/* The count and layout switch stay at hand while the grid scrolls. */
.browse-toolbar:not([hidden]) { position: sticky; top: var(--sticky-top, 76px); z-index: 20; display: flex; align-items: center; gap: 10px; margin-inline: -10px; padding: 8px 10px; border-radius: 16px; background: rgba(10,9,16,.78); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.browse-toolbar #browseSummary { margin-right: auto; }
.browse-filters { order: 3; min-height: 38px; padding: 0 14px; border: 1px solid rgba(194,157,245,.3); border-radius: 12px; color: #e6dbf7; background: rgba(149,104,209,.12); cursor: pointer; font-size: 12px; font-weight: 700; }
.browse-filters:hover, .browse-filters:focus-visible { background: rgba(149,104,209,.24); }
body[data-view="home"] .browse-filters { display: none; }
.catalog-row[data-section="series-up-next"], .catalog-row[data-section="anime-now"], .catalog-row[data-section="anime-today"] { margin-bottom: 30px; }
/* Anime cards: score, episodes and studio; the audience size lives in the card. */
.media-card .anime-card-audience { display: none; }
body[data-view="library"] .card-flag { display: none; }
@media (any-pointer: coarse) { .browse-filters { min-height: 44px; } }
@media (max-width: 900px) { .browse-toolbar:not([hidden]) { position: static; margin-inline: 0; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Hero slides share one height: the title (logo or up to two lines of text),
   the meta line and three lines of synopsis each keep a fixed slot, so a
   slide change or a late synopsis never moves the page below. */
.catalog-v2 .hero #heroTitle { height: 72px; min-height: 72px; margin: 0 0 12px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: clamp(24px,2.4vw,32px); line-height: 1.12; }
.catalog-v2 .hero #heroTitle.has-logo { height: 72px; min-height: 72px; }
.catalog-v2 .hero #heroTitle.logo-pending { color: transparent; text-shadow: none; }
.catalog-v2 .hero .hero-meta { height: 30px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; white-space: nowrap; }
.catalog-v2 .hero .hero-meta::-webkit-scrollbar { display: none; }
.catalog-v2 .hero #heroDescription { height: calc(1.6em * 3); }
.catalog-v2 .hero #heroDescription[hidden] { display: -webkit-box; visibility: hidden; }
@media (max-width: 680px) {
  .catalog-v2 .hero #heroTitle, .catalog-v2 .hero #heroTitle.has-logo { height: 56px; min-height: 56px; font-size: 22px; }
}
.catalog-v2 .hero #heroTitle { display: flex; align-items: flex-end; -webkit-line-clamp: unset; }
.catalog-v2 .hero .hero-title-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* ---- Watched marks: library cards, list rows and the details card ---- */
.watched-toggle { position: absolute; z-index: 5; right: 8px; bottom: 8px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #e9e2f4; background: rgba(14,12,24,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; transition: opacity .16s ease, background .16s ease, transform .16s ease; }
.watched-toggle svg { width: 17px; height: 17px; stroke-width: 2.4; }
.watched-toggle[aria-pressed="true"] { border-color: rgba(251,191,36,.7); color: #1a1405; background: #fbbf24; box-shadow: 0 4px 14px rgba(251,191,36,.35); }
@media (hover: hover) {
  .watched-toggle:hover, .watched-toggle:focus-visible { transform: scale(1.06); }
}
.watched-toggle:focus-visible { outline: 2px solid #fde68a; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .media-card .watched-toggle[aria-pressed="false"] { opacity: 0; }
  .media-card:hover .watched-toggle, .media-card:focus-within .watched-toggle { opacity: 1; }
}
.media-card.is-watched .poster-wrap img { filter: saturate(.75) brightness(.86); }
.library-row { grid-template-columns: 44px minmax(0,1fr) auto 86px 110px 40px; }
.library-row .library-row-watched { position: static; width: 36px; height: 36px; background: rgba(255,255,255,.04); }
.library-row .library-row-watched[aria-pressed="true"] { background: #fbbf24; }
.details-personal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.catalog-v2 .details-personal #personalRating { margin-top: 0; }
.details-watched { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 14px 0 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; color: #e6def3; background: rgba(255,255,255,.05); cursor: pointer; font-size: 12.5px; font-weight: 700; }
.details-watched[hidden] { display: none; }
.details-watched svg { width: 16px; height: 16px; stroke-width: 2.4; }
.details-watched[aria-pressed="true"] { border-color: rgba(251,191,36,.5); color: #fde68a; background: rgba(251,191,36,.1); }
.details-watched:focus-visible { border-color: rgba(251,191,36,.45); }
@media (hover: hover) and (pointer: fine) {
  .details-watched:hover { border-color: rgba(251,191,36,.45); }
}
@media (max-width: 680px) {
  .details-personal { margin-top: 0; }
  .catalog-v2 .details-personal #personalRating { flex: 1 1 100%; }
  .library-row { grid-template-columns: 40px minmax(0,1fr) auto 40px; }
}
@media (any-pointer: coarse) {
  .watched-toggle { width: 40px; height: 40px; }
  .watched-toggle::before { content: ""; position: absolute; inset: -4px; }
  .details-watched { min-height: 44px; }
  #discoveryPanel.home-compact .mood-card { min-height: 44px; }
  .library-layout button { width: 44px; height: 40px; }
}

/* Title card poster: a little larger and centred against the text column, so
   the space above and below it is even instead of it sitting at the bottom. */
.catalog-v2 .details-layout { grid-template-columns: 220px minmax(0,1fr); }
.catalog-v2 .details-poster { align-self: center; }
@media (max-width: 900px) {
  .catalog-v2 .details-layout { grid-template-columns: 170px minmax(0,1fr); }
}
@media (max-width: 680px) {
  .catalog-v2 .details-layout { grid-template-columns: 96px minmax(0,1fr); }
  .catalog-v2 .details-poster { align-self: end; }
}

/* The personal rating keeps one width: the number has room for "4,5" and the
   clear button keeps its place while hidden, so a half point, a hover preview
   or clearing the score no longer resizes the pill or shifts its neighbour. */
.catalog-v2 #personalRating .personal-rating-number { display: inline-block; min-width: 1.9em; text-align: right; font-variant-numeric: tabular-nums; }
.catalog-v2 #personalRating .personal-rating-head .personal-rating-remove[hidden] { display: inline-grid; visibility: hidden; }

/* Artwork and its shading are one layer. As two separately clipped layers,
   Chromium anti-aliased the rounded corner of each on its own: the partial
   pixels of the shade let more of a bright image through than the interior
   does, and the corner curve showed a light rim. Kept composited (will-change)
   so the card's rounded clip is applied to the whole layer once. */
.catalog-v2 .details-gradient { display: none; }
.catalog-v2 .details-backdrop { will-change: transform; }
.catalog-v2 .details-backdrop::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(0deg,#0c0b13 0%,rgba(12,11,19,.95) 20%,rgba(12,11,19,.6) 48%,rgba(12,11,19,.1) 76%,rgba(12,11,19,.42) 100%),
  linear-gradient(90deg,rgba(12,11,19,.9) 0%,rgba(12,11,19,.52) 36%,transparent 70%),
  radial-gradient(110% 70% at 88% 0%,rgba(139,92,246,.2),transparent 62%); }

/* Hero slide change: the old artwork fades out over the new one, the copy
   fades out, swaps unseen and fades back in. */
.catalog-v2 .hero-image.hero-image-ghost { transition: opacity 1.1s cubic-bezier(.4,0,.2,1); }
.catalog-v2 .hero-image.hero-image-ghost.is-leaving { opacity: 0; }
.catalog-v2 .hero .hero-content { transition: opacity .42s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.catalog-v2 .hero .hero-content.hero-content-out { opacity: 0; transform: translateY(4px); transition-duration: .24s; }
.hero-dot { transition: width .45s cubic-bezier(.2,.8,.2,1), background-color .45s ease; }
@media (prefers-reduced-motion: reduce) {
  .catalog-v2 .hero-image.hero-image-ghost, .catalog-v2 .hero .hero-content, .hero-dot { transition: none; }
}

/* ---- Compact home top (2026-10-03) ----
   The heading, the hero and the mood strip took the whole first screen; the
   first poster row started ~800 px down. Same slots as before (the hero still
   keeps one height for every slide), only smaller. */
@media (min-width: 681px) {
  .catalog-v2 main { padding-top: calc(90px + env(safe-area-inset-top,0px)); }
  .catalog-v2 .catalog-search .search { height: 50px; border-radius: 16px; }
}
.catalog-v2 .catalog-intro { margin-bottom: 16px; }
.catalog-v2 #pageTitle { font-size: clamp(24px,2.2vw,32px); }
.catalog-v2 .page-heading-icon { width: 40px; height: 40px; border-radius: 13px; }
body.catalog-v2[data-view="home"] .page-subtitle { display: none; }
.catalog-v2 .search-status:empty { min-height: 0; margin: 0; }
.catalog-v2 .hero { min-height: 0; padding: 22px 30px; margin-bottom: 22px; border-radius: 22px; }
.catalog-v2 .hero #heroKicker { margin-bottom: 6px; }
.catalog-v2 .hero #heroTitle, .catalog-v2 .hero #heroTitle.has-logo { height: 56px; min-height: 56px; margin: 0 0 6px; font-size: clamp(22px,2vw,28px); }
.catalog-v2 .hero #heroTitle.has-logo { max-width: 280px; }
.catalog-v2 .hero .hero-meta { height: 26px; }
.catalog-v2 .hero #heroDescription { -webkit-line-clamp: 2; height: calc(1.55em * 2); margin: 6px 0 0; line-height: 1.55; }
.catalog-v2 .hero .hero-actions { margin-top: 12px; }
.catalog-v2 .hero .hero-actions button { min-height: 40px; }
.catalog-v2 .hero .hero-dots { margin-top: 12px; }
.catalog-v2 #discoveryPanel.home-compact { margin-bottom: 18px; gap: 10px; }
@media (max-width: 680px) {
  .catalog-v2 .hero { padding: 18px; margin-bottom: 18px; }
  .catalog-v2 .hero #heroDescription { -webkit-line-clamp: 2; height: calc(1.55em * 2); }
}

/* Д-6: Films, Series and Anime use the same full-bleed hero as Home. */
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero {
  width: auto;
  min-height: min(82vh, 760px);
  height: min(82vh, 760px);
  margin: 0 0 28px;
  padding: 0 64px 64px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroKicker {
  color: #c4b5fd;
  font-size: 11px;
  letter-spacing: .16em;
  margin-bottom: 12px;
}
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroTitle,
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroTitle.has-logo {
  height: auto;
  min-height: 0;
  max-width: 560px;
  margin: 0 0 12px;
  font-size: 68px;
  line-height: .98;
}
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroTitle.has-logo {
  width: 480px;
  max-width: min(480px, 100%);
  height: 140px;
  min-height: 140px;
}
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroDescription {
  max-width: 560px;
  font-size: 15px;
  line-height: 1.5;
  -webkit-line-clamp: 3;
  height: auto;
  margin: 8px 0 0;
}
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero .hero-actions button {
  min-height: 50px;
  border-radius: 14px;
  font-size: 15px;
  padding: 0 22px;
}
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero .hero-actions .primary-button {
  background: linear-gradient(135deg, #7c3aed, #c026d3);
}
@media (max-width: 680px) {
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero {
    min-height: min(70vh, 520px);
    height: min(70vh, 520px);
    padding: 0 20px 28px;
  }
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroTitle,
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroTitle.has-logo {
    font-size: 36px;
  }
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroTitle.has-logo {
    width: 280px;
    height: 88px;
    min-height: 88px;
  }
}
@media (any-pointer: coarse) {
  .catalog-v2 .hero .hero-actions button { min-height: 44px; }
}

/* Итоги (stats view) */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.stats-card { border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 18px 18px 16px; background: linear-gradient(160deg, rgba(124,58,237,.12), rgba(17,19,28,.62)); }
.stats-kicker { display: block; color: #a99fbd; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.stats-big { display: block; margin-top: 8px; font-size: 42px; line-height: 1; font-weight: 900; color: #fff; }
.stats-note { display: block; margin-top: 7px; color: #8d8a9c; font-size: 13px; }
.stats-card-months, .stats-card-genres { grid-column: 1 / -1; }
.stats-months { display: flex; align-items: flex-end; gap: 10px; margin-top: 18px; height: 132px; }
.stats-month { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.stats-month-count { height: 16px; color: #dcd8ea; font-size: 12px; font-weight: 700; }
.stats-month-bar { position: relative; flex: 1; width: 100%; max-width: 46px; display: flex; flex-direction: column-reverse; border-radius: 8px; background: rgba(255,255,255,.05); overflow: hidden; }
.stats-month-bar i { display: block; width: 100%; }
.stats-month-eps { background: linear-gradient(180deg,#7c3aed,#a855f7); }
.stats-month-mov { background: linear-gradient(180deg,#d946ef,#f0abfc); }
.stats-month-label { color: #8d8a9c; font-size: 11px; }
.stats-legend { display: flex; gap: 16px; margin-top: 12px; color: #8d8a9c; font-size: 12px; }
.stats-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.stats-genres { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.stats-genres li { display: grid; grid-template-columns: minmax(96px, 168px) 1fr 34px; align-items: center; gap: 12px; }
.stats-genres li > span:first-child { overflow: hidden; color: #dcd8ea; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.stats-genre-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.stats-genre-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#7c3aed,#d946ef); }
.stats-genres b { color: #dcd8ea; font-size: 13px; text-align: right; }
.stats-message { padding: 44px 20px; color: #8d8a9c; font-size: 14px; text-align: center; }

/* Personal rating in the card status line: one even gold pill, the star and
   the numbers share a centre line, "/5" is a quiet suffix. Colour unchanged. */
.card-status .card-personal-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; box-sizing: border-box; padding: 2px 9px 2px 7px; border: 1px solid rgba(250,204,21,.34); border-radius: 999px; color: #fde68a; background: linear-gradient(180deg, rgba(250,204,21,.16), rgba(250,204,21,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 12px rgba(250,204,21,.08); font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-status .card-personal-badge .badge-star { width: 11px; height: 11px; flex: none; fill: #facc15; filter: drop-shadow(0 0 3px rgba(250,204,21,.45)); }
.card-status .card-personal-badge .badge-number { font-size: 11.5px; font-weight: 800; letter-spacing: -.01em; color: #fff7d1; }
.card-status .card-personal-badge .badge-scale { font-size: 9.5px; font-weight: 600; color: rgba(253,230,138,.62); margin-left: -1px; }
/* Trim the number and suffix boxes to cap height on the alphabetic baseline,
   so the star, digits and "/5" centre on the same line whatever the UI font
   (Inter, SF, Segoe) puts above and below its glyphs. Older browsers keep the
   plain line box. */
.card-status .card-personal-badge .badge-number, .card-status .card-personal-badge .badge-scale { text-box: trim-both cap alphabetic; }
.card-status .card-personal-badge .badge-star { width: 10px; height: 10px; }

/* Disney section: studio tiles over the collection rows. */
.disney-brands { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 4px 0 26px; }
/* Disney shares the other tabs' heading. These anchors keep the studio row,
   the lead rail and an open collection from sliding under the fixed bar, and
   the rows stay fully laid out: content-visibility on .catalog-row would
   collapse them to a 340px placeholder and shift the page up into the bar. */
body[data-view="disney"] .page-heading-icon {
  border-color: rgba(96,165,250,.28);
  color: #dbeafe;
  background: linear-gradient(145deg, rgba(29,78,216,.32), rgba(14,116,144,.08));
}
.disney-brands,
.disney-lead-row,
.disney-collections-row,
.disney-collection-page {
  scroll-margin-top: calc(108px + env(safe-area-inset-top, 0px));
}
.catalog-v2 .disney-lead-row,
.catalog-v2 .disney-collections-row {
  content-visibility: visible;
  contain-intrinsic-size: none;
}
.disney-brand { position: relative; display: flex; align-items: center; justify-content: center; min-height: 88px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; overflow: hidden; color: #fff; background: linear-gradient(160deg, #1b1d2b, #0e0f18); cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,.35); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.disney-brand::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.16), transparent 60%); opacity: .7; pointer-events: none; }
.disney-brand:hover { border-color: rgba(255,255,255,.3); box-shadow: 0 16px 34px rgba(0,0,0,.45); }
.disney-brand:focus-visible { outline: 2px solid rgba(167,139,250,.75); outline-offset: 2px; }
.disney-brand[aria-pressed="true"] { border-color: rgba(255,255,255,.85); box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 16px 34px rgba(0,0,0,.45); }
.disney-brand-mark { position: relative; z-index: 1; text-align: center; line-height: 1.05; }
.disney-brand-all { background: linear-gradient(135deg, #1e1b4b, #312e81 45%, #0f766e); }
.disney-brand-all .disney-brand-mark { font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.disney-brand-disney { background: linear-gradient(150deg, #0a1a4a, #1d4ed8 70%, #60a5fa); }
.disney-brand-disney .disney-brand-mark { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 27px; font-weight: 700; letter-spacing: .01em; text-shadow: 0 2px 12px rgba(147,197,253,.6); }
.disney-brand-pixar { background: linear-gradient(150deg, #0b0b10, #26262f); }
.disney-brand-pixar .disney-brand-mark { font-size: 26px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.disney-brand-pixar .disney-brand-mark::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 3px; border-radius: 50%; background: #facc15; box-shadow: 0 0 12px #facc15; vertical-align: super; }
.disney-brand-marvel { background: linear-gradient(150deg, #b91c1c, #e62429); border-color: rgba(255,255,255,.2); }
.disney-brand-marvel .disney-brand-mark { padding: 3px 10px 1px; font-family: Impact, "Arial Narrow", sans-serif; font-size: 27px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; }
.disney-brand-starwars { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.25) 0 1px, transparent 2px), radial-gradient(circle at 75% 65%, rgba(255,255,255,.2) 0 1px, transparent 2px), radial-gradient(circle at 55% 20%, rgba(255,255,255,.18) 0 1px, transparent 2px), #05060a; }
.disney-brand-starwars .disney-brand-mark { color: #ffe81f; font-size: 20px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 14px rgba(255,232,31,.45); }
.disney-brand-natgeo { background: linear-gradient(150deg, #111318, #22252d); }
.disney-brand-natgeo .disney-brand-mark { padding: 8px 10px; border: 3px solid #ffce00; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.disney-error { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px; color: var(--muted); text-align: center; }
@media (max-width: 900px) {
  .disney-brands { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: none; }
  .disney-brands::-webkit-scrollbar { display: none; }
  .disney-brand { flex: 0 0 132px; min-height: 72px; scroll-snap-align: start; }
  .disney-brand-disney .disney-brand-mark, .disney-brand-pixar .disney-brand-mark, .disney-brand-marvel .disney-brand-mark { font-size: 22px; }
}
/* Disney collections: one lead rail, then every other collection as a tile. */
.disney-collections { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.disney-collection { --tint: 99,102,241; position: relative; display: flex; align-items: center; gap: 16px; min-height: 132px; padding: 12px 16px 12px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; color: #fff; text-align: left; background: linear-gradient(120deg, rgba(var(--tint),.32), rgba(18,18,28,.92) 62%); cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.disney-collection:hover { border-color: rgba(255,255,255,.28); box-shadow: 0 14px 30px rgba(0,0,0,.4); }
.disney-collection:focus-visible { outline: 2px solid rgba(167,139,250,.75); outline-offset: 2px; }
.disney-collection-disney { --tint: 37,99,235; }
.disney-collection-pixar { --tint: 234,179,8; }
.disney-collection-marvel { --tint: 230,36,41; }
.disney-collection-starwars { --tint: 255,232,31; }
.disney-collection-natgeo { --tint: 255,206,0; }
.disney-collage { position: relative; flex: 0 0 132px; height: 108px; }
.disney-collage img { position: absolute; top: 4px; width: 66px; height: 99px; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 18px rgba(0,0,0,.55); background: #1b1d2b; transition: transform .25s ease; }
.disney-collage img:nth-child(1) { left: 0; transform: rotate(-9deg); z-index: 1; }
.disney-collage img:nth-child(2) { left: 33px; top: 0; z-index: 3; }
.disney-collage img:nth-child(3) { left: 66px; transform: rotate(9deg); z-index: 2; }
@media (hover: hover) {
  .disney-collection:hover .disney-collage img:nth-child(1) { transform: rotate(-13deg) translateX(-4px); }
  .disney-collection:hover .disney-collage img:nth-child(3) { transform: rotate(13deg) translateX(4px); }
}
.disney-collage .poster-placeholder { display: none; }
.disney-collection-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.disney-collection-brand { color: rgba(255,255,255,.62); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.disney-collection-copy strong { font-size: 15.5px; line-height: 1.22; overflow-wrap: break-word; hyphens: auto; }
.disney-collection-subtitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.disney-collection-meta { color: rgba(255,255,255,.55); font-size: 12px; font-weight: 600; }
.disney-back { margin: 0 0 14px; }
.collection-page-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.collection-page-nav .disney-back { margin: 0; }
.disney-collection-heading { margin-bottom: 14px; }
@media (max-width: 560px) {
  .disney-collections { grid-template-columns: 1fr; gap: 10px; }
  .disney-collection { min-height: 112px; gap: 12px; }
  .disney-collage { flex-basis: 108px; height: 92px; }
  .disney-collage img { width: 56px; height: 84px; }
  .disney-collage img:nth-child(2) { left: 26px; }
  .disney-collage img:nth-child(3) { left: 52px; }
  .disney-collection-subtitle { -webkit-line-clamp: 1; }
}
/* Themed collections on the Films / Series / Anime pages: one sideways rail. */
/* 18px top padding: overflow-x forces the Y axis to clip, and tile hover
   shadows reach ~16-18px above the tiles (see .is-today below). */
.disney-collections-row.is-rail .disney-collections { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 18px 2px 8px; }
.disney-collections-row.is-rail .disney-collections::-webkit-scrollbar { display: none; }
.disney-collections-row.is-rail .disney-collection { flex: 0 0 364px; scroll-snap-align: start; }
.disney-collection-tint-0 { --tint: 139,92,246; }
.disney-collection-tint-1 { --tint: 20,184,166; }
.disney-collection-tint-2 { --tint: 244,63,94; }
.disney-collection-tint-3 { --tint: 245,158,11; }
.disney-collection-tint-4 { --tint: 59,130,246; }
.disney-collection-tint-5 { --tint: 34,197,94; }
/* Themed collections: the day's pick leads the rail, a thin bar shows how
   much of a collection the viewer has already seen (marked or rated). */
.disney-collection.is-today { border-color: rgba(253,230,138,.42); box-shadow: 0 0 0 1px rgba(253,230,138,.18), 0 12px 30px rgba(0,0,0,.35); }
.disney-collection.is-today .disney-collection-brand { color: #fde68a; }
.disney-collection-seen { color: #86efac; }
/* «Твоё»: a collection whose own titles the viewer rates highest. */
.disney-collection-match { align-self: flex-start; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(216,180,254,.4); color: #f5d0fe; background: rgba(168,85,247,.24); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.disney-collection-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.08); }
.disney-collection-progress::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--seen, 0%); background: linear-gradient(90deg, #4ade80, #22d3ee); border-radius: 0 3px 3px 0; }
.collection-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -4px 0 16px; }
.collection-sort { margin-left: auto; }
/* A rail's heading keeps its count and its "open every collection" button
   together on the right. */
.row-head-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.row-head-buttons { display: inline-flex; align-items: center; gap: 8px; }
.collection-hide-seen.is-on { border-color: rgba(134,239,172,.55); color: #bbf7d0; background: rgba(34,197,94,.14); }
.collection-hide-seen[hidden] { display: none; }
.collection-all-seen { margin: 24px 0; color: var(--muted); font-size: 15px; }
/* Unusual collections board: category tabs, search bar and thematic chapters. */
.collection-board-toolbar { display: flex; flex-direction: column; gap: 12px; margin: 2px 0 22px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(18,18,28,.68); backdrop-filter: blur(14px); }
.collection-group-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.collection-group-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; color: #cbc4da; background: rgba(255,255,255,.03); cursor: pointer; font-size: 13.5px; font-weight: 700; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.collection-group-tab b { min-width: 22px; padding: 2px 7px; border-radius: 999px; color: #d8cdea; background: rgba(255,255,255,.08); font-size: 11.5px; text-align: center; }
.collection-group-tab:hover { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.collection-group-tab[aria-pressed="true"] { color: #fff; border-color: rgba(194,157,245,.55); background: linear-gradient(135deg, rgba(124,58,237,.38), rgba(168,85,247,.2)); box-shadow: 0 6px 18px rgba(124,58,237,.22); }
.collection-group-tab[aria-pressed="true"] b { color: #fff; background: rgba(255,255,255,.2); }
/* Collection action buttons share the pill look of the board tabs — the bare
   .ghost-button default (46px, 14px radius) reads chunky next to them. */
.collection-nav-secondary, .collection-open-all, .collection-surprise, .collection-board-back, .collection-random, .collection-random-board, .collection-prev, .collection-next, .collection-hide-seen { min-height: 38px; padding: 0 14px; border-color: rgba(255,255,255,.09); border-radius: 999px; color: #cbc4da; background: rgba(255,255,255,.03); backdrop-filter: none; font-size: 13.5px; font-weight: 700; }
.collection-nav-secondary:hover, .collection-open-all:hover, .collection-surprise:hover, .collection-board-back:hover, .collection-random:hover, .collection-random-board:hover, .collection-prev:hover, .collection-next:hover, .collection-hide-seen:hover { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); transform: none; }
.collection-board-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.collection-search-wrap { flex: 1 1 260px; max-width: 440px; }
.collection-random-board { margin-left: auto; }
.collection-board-body { display: flex; flex-direction: column; gap: 28px; }
.collection-board-group { display: flex; flex-direction: column; gap: 12px; }
.collection-group-head { display: flex; align-items: center; gap: 10px; }
.collection-group-head h4 { margin: 0; color: #f3effb; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
@media (max-width: 560px) {
  .disney-collections-row.is-rail .disney-collection { flex-basis: 84vw; }
  .collection-group-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .collection-group-tabs::-webkit-scrollbar { display: none; }
  .collection-group-tab { flex: 0 0 auto; }
  .collection-search-wrap { max-width: none; }
  .collection-random-board { width: 100%; justify-content: center; }
  .collection-sort { margin-left: 0; }
}
/* Library: movies / series / anime as the first, obvious choice. */
.library-type-tabs { display: flex; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.06); overflow-x: auto; scrollbar-width: none; }
.library-type-tabs::-webkit-scrollbar { display: none; }
.library-type-tab { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px 0 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; color: #c9c1d8; background: rgba(255,255,255,.03); cursor: pointer; font-size: 15px; font-weight: 750; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.library-type-tab .ui-icon { width: 19px; height: 19px; opacity: .8; }
.library-type-tab b { min-width: 26px; padding: 3px 8px; border-radius: 999px; color: #d8cdea; background: rgba(255,255,255,.08); font-size: 12px; text-align: center; }
.library-type-tab:hover { color: #fff; background: rgba(255,255,255,.06); }
.library-type-tab:focus-visible { outline: 2px solid rgba(167,139,250,.7); outline-offset: 2px; }
.library-type-tab[aria-pressed="true"] { color: #fff; border-color: rgba(194,157,245,.55); background: linear-gradient(135deg, rgba(124,58,237,.38), rgba(168,85,247,.2)); box-shadow: 0 8px 22px rgba(124,58,237,.22); }
.library-type-tab[aria-pressed="true"] b { color: #fff; background: rgba(255,255,255,.18); }
.library-toolbar .library-toolbar-header { padding-top: 2px; }
.library-see-all { margin-left: 10px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #e6dcf6; background: rgba(255,255,255,.05); cursor: pointer; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.library-see-all:hover { background: rgba(149,104,209,.22); border-color: rgba(194,157,245,.45); }
@media (max-width: 560px) {
  /* All four tabs in sight on a phone: equal columns, no icons. */
  .library-type-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; overflow: visible; }
  .library-type-tab { flex-direction: column; min-height: 54px; padding: 6px 4px; justify-content: center; gap: 3px; font-size: 13px; min-width: 0; }
  .library-type-tab .ui-icon { display: none; }
  .library-type-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .library-type-tab b { min-width: 0; padding: 2px 6px; font-size: 11px; }
  .library-see-all { padding: 5px 10px; font-size: 12px; }
}

/* Small-screen text that used to be clipped, and touch sizes the coarse
   lift above never reached (design audit 2026-10-14). */
@media (max-width: 680px) {
  .catalog-v2 .page-subtitle { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media (max-width: 520px) {
  .stats-months { gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .stats-months::-webkit-scrollbar { display: none; }
  .stats-month { flex: 1 1 24px; min-width: 24px; }
}
@media (any-pointer: coarse) and (max-width: 680px) {
  .search, .profile-button, .party-mode-button, .ui-lang-trigger { min-height: 44px; }
  .ui-lang-trigger { min-width: 44px; }
}


/* State overrides that outrank the v2 layer: appended last so they win by
   source order with real specificity instead of the override flag. */
.details-copy > p.details-description-loading { color: #aaa6b6; }
.details-actions button.details-loading-action { opacity: 1; color: #d8d4e2; cursor: wait; }

/* Layout pass: one caption line, a phone bar with names, no second filter
   button, collection and cast rails that fade instead of slicing a word. */
.catalog-v2 .poster-rail .card-title,
.catalog-v2 .poster-grid .card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.4;
  min-height: 2.8em;
  max-height: 2.8em;
}
.catalog-v2 .card-status { flex-wrap: nowrap; max-height: 24px; }
.catalog-v2 .card-meta[hidden] { display: none; }
.catalog-v2 .card-status .status-year { color: #aba1b9; font-size: 11px; font-weight: 650; }
.catalog-v2 .card-status .card-library-badge { padding: 2px 6px; border-radius: 999px; }
.catalog-v2 .card-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browse-toolbar.browse-toolbar-quiet:not([hidden]) {
  position: static;
  margin: -6px 0 18px;
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.cast-rail {
  -webkit-mask-image: none;
  mask-image: none;
  padding-inline: 2px 18px;
  scroll-padding-inline-end: 18px;
}
.cast-rail.rail-fade-start {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px);
  mask-image: linear-gradient(90deg, transparent 0, #000 28px);
}
.cast-rail.rail-fade-end {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}
.cast-rail.rail-fade-start.rail-fade-end {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 36px), transparent);
}
.disney-collections-row.is-rail .disney-collections { padding: 18px 4px 14px; scroll-padding-inline: 4px; }
.disney-collections-row.is-rail .disney-collection {
  flex-basis: calc((100% - 28px - 72px) / 3);
  min-width: min(280px, 82%);
  max-width: 440px;
  min-height: 148px;
  height: auto;
}
.disney-collections-row.is-rail .disney-collection-copy strong { hyphens: manual; }
.disney-collections-row.is-rail .disney-collection-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .disney-collections-row.is-rail .disney-collection { flex-basis: calc((100% - 14px - 56px) / 2); }
}
@media (max-width: 560px) {
  .disney-collections-row.is-rail .disney-collection { flex-basis: calc(100% - 48px); max-width: none; }
}
.disney-collections.rail-fade-start {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px);
}
.disney-collections.rail-fade-end {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}
.disney-collections.rail-fade-start.rail-fade-end {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 56px), transparent);
}
.details-tracks-summary.is-empty { font-style: normal; color: #d5cbe4; }
.details-tracks-summary.is-empty::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 8px rgba(167,139,250,.75);
}
@media (max-width: 680px) {
  .catalog-v2 .details-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .catalog-v2 .details-actions .primary-button { flex: 1 1 100%; }
  .catalog-v2 .details-actions .ghost-button { flex: 1 1 140px; min-width: 0; white-space: normal; line-height: 1.2; text-align: center; }
}
@media (max-width: 430px) {
  .catalog-v2 .search-submit { display: none; }
  .catalog-v2 .content-shell { padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
  .catalog-v2 main { padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
  .catalog-v2 .catalog-intro { gap: 10px; margin-bottom: 12px; }
  .catalog-v2 #pageTitle { font-size: 24px; }
  .catalog-v2 .page-heading-icon { width: 36px; height: 36px; }
  .catalog-v2 .catalog-search .search { height: 48px; }
  .catalog-v2 .hero { padding: 14px 16px; margin-bottom: 14px; }
  .catalog-v2 .hero #heroKicker { margin-bottom: 4px; }
  .catalog-v2 .hero #heroTitle,
  .catalog-v2 .hero #heroTitle.has-logo { height: 40px; min-height: 40px; font-size: 22px; }
  .catalog-v2 .hero .hero-meta { height: 22px; }
  .catalog-v2 .hero #heroDescription { height: calc(1.4em * 2); margin-top: 2px; }
  .catalog-v2 .hero .hero-actions { margin-top: 8px; }
  .catalog-v2 .hero .hero-dots { margin-top: 8px; }
  .catalog-v2 #discoveryPanel.home-compact { margin-bottom: 10px; }
}
@media (max-width: 1180px), (max-width: 1400px) and (any-pointer: coarse) {
  html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

/* Similar titles: a grid in the title card. Posters stay large enough to
   choose from, and nothing is cropped by a sideways rail. */
.catalog-v2 .similar-panel {
  position: relative;
  z-index: 3;
  margin: 8px 40px 32px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.catalog-v2 .similar-toggle {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.catalog-v2 .similar-heading {
  margin: 0;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -.03em;
}
.catalog-v2 .similar-caret {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid #c4b5fd;
  border-bottom: 2px solid #c4b5fd;
  transform: rotate(-45deg);
  transition: transform .2s ease;
}
.catalog-v2 .similar-panel[data-open="true"] .similar-caret { transform: rotate(45deg); }
.catalog-v2 .similar-body {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  opacity: 0;
  transition: grid-template-rows .26s cubic-bezier(.2,.8,.2,1), opacity .2s ease, visibility .26s;
}
.catalog-v2 .similar-panel[data-open="true"] .similar-body {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
}
.catalog-v2 .similar-body-inner { min-height: 0; overflow: hidden; }
.catalog-v2 .similar-panel[data-open="true"] .similar-body-inner {
  overflow: visible;
  transition: overflow 0s linear .26s;
}
.catalog-v2 .similar-count {
  color: #a89bb8;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.catalog-v2 .similar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 14px;
  margin-top: 14px;
}
.catalog-v2 .similar-grid .media-card { width: auto; min-width: 0; }
.catalog-v2 .similar-grid .poster-wrap {
  border-radius: 16px;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.05);
}
@media (hover: hover) {
  .catalog-v2 .similar-grid .media-card:hover .poster-wrap,
  .catalog-v2 .similar-grid .media-card:focus-within .poster-wrap {
    transform: translateY(-4px);
  }
  .primary-button:hover, .ghost-button:hover { transform: translateY(-2px); }
  .filter-chip:hover { transform: translateY(-1px); }
  .surprise-button:hover { transform: translateY(-2px); }
  .library-reset-chip:hover, .library-refresh-button:hover { transform: translateY(-1px); }
  .mood-card:hover { transform: translateY(-2px); }
  .disney-brand:hover { transform: translateY(-3px); }
  .disney-collection:hover { transform: translateY(-2px); }
}
.catalog-v2 .similar-grid .card-copy { padding: 8px 2px 0; }
.catalog-v2 .similar-grid .card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.35;
  min-height: 2.7em;
  max-height: 2.7em;
}
.catalog-v2 .similar-grid .card-status,
.catalog-v2 .similar-grid .card-meta,
.catalog-v2 .similar-grid .card-library-badges,
.catalog-v2 .similar-grid .anime-card-stats,
.catalog-v2 .similar-grid .card-sub { display: none; }
.catalog-v2 .similar-more {
  width: 100%;
  margin-top: 16px;
  min-height: 44px;
  border: 1px solid rgba(200,166,240,.28);
  border-radius: 14px;
  background: rgba(173,128,227,.1);
  color: #eee1ff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.catalog-v2 .similar-more:hover,
.catalog-v2 .similar-more:focus-visible {
  border-color: rgba(196,181,253,.55);
  background: rgba(124,58,237,.22);
}
@media (max-width: 900px) {
  .catalog-v2 .similar-panel { margin-left: 26px; margin-right: 26px; }
  .catalog-v2 .similar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-v2 .similar-body, .catalog-v2 .similar-caret { transition: none; }
}
@media (max-width: 680px) {
  .catalog-v2 .similar-panel { margin: 4px 18px 24px; }
  .catalog-v2 .similar-heading { font-size: 18px; }
  .catalog-v2 .similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .catalog-v2 .similar-grid .card-title { font-size: 13px; }
}
.catalog-v2 .catalog-invite {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(244,114,182,.35);
  background: rgba(124,58,237,.16);
}
.catalog-v2 .catalog-invite p { margin: 0; flex: 1; min-width: 0; }
.catalog-v2 .catalog-invite .primary-button,
.catalog-v2 .catalog-invite .ghost-button { flex: 0 0 auto; }
.catalog-v2 .episode-actions .episode-sources {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 46%;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #ddd6fe;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.catalog-v2 .episode-actions .episode-sources:hover {
  border-color: rgba(167,139,250,.5);
  background: rgba(124,58,237,.18);
}
.episodes-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 4px 0 12px; }
.episodes-watched-summary, .episode-flags-legend { margin: 0; color: #d5cbe6; font-size: 13px; }
.episode-torbox { display: block; margin-top: 4px; color: #c4b5fd; font-size: 12px; line-height: 1.35; }
.episode-actions .episode-watched-toggle { min-height: 32px; padding: 0 10px; font-size: 12px; }
.episode-actions .episode-prepare { min-height: 32px; padding: 0 10px; font-size: 12px; }

/* Title card: the logo, the score line and the synopsis keep their height
   while they arrive, so the buttons below do not jump. */
.catalog-v2 .details-title-slot.has-logo-room {
  display: flex;
  align-items: flex-end;
  min-height: 104px;
}
.catalog-v2 .details-title-slot.has-logo-room .details-logo { margin-bottom: 0; }
.catalog-v2 .details-score-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
}
.catalog-v2 .details-score-line .details-scores { margin: 0; min-height: 30px; flex: 0 0 auto; }
.catalog-v2 .details-score-line .details-meta { margin: 0; min-width: 0; }
.catalog-v2 .details-copy > p.details-synopsis {
  height: calc(1.6em * 3);
}
.catalog-v2 .details-copy > p.details-synopsis[hidden] {
  display: -webkit-box;
  visibility: hidden;
}
@media (max-width: 900px) {
  .catalog-v2 .details-title-slot.has-logo-room { min-height: 88px; }
}
@media (max-width: 680px) {
  .catalog-v2 .details-title-slot.has-logo-room { min-height: 64px; }
}

/* iPad / coarse pointer: status, badges and captions were 9–11px. Floor is
   12px (13px for names and filter chips). Desktop rules above stay put. */
@media (max-width:1180px), (max-width:1400px) and (any-pointer:coarse) {
  .catalog-v2 :is(
    .card-flag, .anime-status, .anime-format, .season-progress-badge,
    .card-rating, .library-badge, .card-library-badge, .badge-scale, .episode-progress-badge,
    .row-count, .rating-scale, .fact-age, .personal-rating-status,
    .filter-count, .episode-watch-badge, .source-badge, .preparation-job-quality,
    .preparation-job-meta, .preparation-dock-note, .preparation-job-action,
    .preparation-queue-count, .preparation-job-stage, .disney-collection-brand,
    .cast-role, .genre-chip
  ) { font-size: 12px; }
  .catalog-v2 .hero #heroKicker,
  .catalog-v2 .details-heading > .eyebrow,
  .catalog-v2 .details-credits dt,
  .catalog-v2 .score-imdb b,
  .catalog-v2 .score-mal b,
  .catalog-v2 .details-meta .rating-source,
  .catalog-v2 .card-status :is(.episode-progress-badge, .season-progress-badge),
  .catalog-v2 .card-status .badge-scale,
  .catalog-v2 .details-copy .genre-chip,
  .catalog-v2 .preparation-dock :is(.preparation-job-stage, .preparation-job-meta) { font-size: 12px; }
  .catalog-v2 :is(.cast-name, .filter-chip),
  .catalog-v2 #discoveryPanel .filter-chip { font-size: 13px; }
}

/* Coarse pointers: the controls measured under 44px on an iPad. */
@media (any-pointer: coarse) {
  .toast-undo { min-height: 44px; padding: 0 14px; }
  .source-quality-option { min-height: 44px; }
  .preparation-dock .preparation-open { width: 44px; min-height: 44px; margin: 0; }
  .preparation-job-action { min-height: 44px; }
  .preparation-dock-control { width: 44px; height: 44px; }
  .preparation-job-controls { gap: 8px; }
  .episode-party { width: 44px; min-width: 44px; min-height: 44px; }
  .person-link { position: relative; }
  .person-link::before { content: ""; position: absolute; inset: -14px -4px; }
  .brand { min-height: 44px; }
}

/* Д-5 / Н-3: min-height beats max-height, so the cap has to set all three.
   The redesign sheet repeats this after its own min-height rule. */
@media (max-width: 1180px) {
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero {
    --hero-h: calc(min(82vh, 760px) - 96px);
    height: var(--hero-h);
    min-height: var(--hero-h);
    max-height: var(--hero-h);
  }
}

/* ==========================================================================
   Display face.

   The interface is set in Inter (served from /fonts/fonts.css). These rules
   give the headings the system's display voice: Unbounded.

   Unbounded is an expanded cut and sets about 1.29x wider than Inter at the
   same size (measured on the latin and cyrillic subsets at wght 700). Every
   rule below that puts a heading into a *fixed* box - the clamped hero title,
   a square brand mark, the absolutely placed top-10 digit - scales the size
   down by that ratio, so the box keeps its geometry and the text keeps its
   line count. Headings that flow in a normal block keep the size they had:
   they are free to wrap, and shrinking them would change the composition of
   every page for no reason.
   ========================================================================== */

/* Marks: one wide glyph inside a square. */
.brand-mark { font-family: var(--font-display); font-size: 19px; }
.brand-mark.large { font-size: 28px; }
.brand-copy strong { font-family: var(--font-display); font-size: 12px; }
.loader-logo { font-family: var(--font-display); font-size: 34px; }

/* Headings. */
.hero h1,
.section-heading h2,
.episodes-heading h3,
.details-copy h2,
.season-preparation-card h2,
.catalog-v2 #pageTitle,
.catalog-v2 .row-title h3,
.catalog-v2 .details-copy h2,
.recommendation-rows .row-title h3 {
  font-family: var(--font-display);
}

/* The hero title is clamped to two lines inside a fixed-height box, so it is
   the one headline that cannot simply wrap: 68px of Inter became 53px of
   Unbounded, which is the same width on the line. */
.catalog-v2 .hero #heroTitle,
.catalog-v2 .hero #heroTitle.has-logo { font-size: clamp(17px, 1.6vw, 22px); }

body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroTitle,
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroTitle.has-logo {
  font-size: 53px;
}

@media (max-width: 680px) {
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroTitle,
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroTitle.has-logo {
    font-size: 28px;
  }
}

/* Top-10 digits sit behind the poster at an absolute position, so they scale
   with their box too; the outline is absolute pixels and comes down with it. */
.ranked-row .rank-number {
  font-family: var(--font-display);
  font-size: clamp(88px, 8.8vw, 126px);
  -webkit-text-stroke-width: 1.6px;
}

@media (max-width: 680px) {
  .ranked-row .rank-number { font-size: 80px; }
}

/* Title card + hero logo, carried over from the Claude Design prototype
   "Watch redesign" (project Obscura Watch, templates/watch-redesign).
   React catalog only: appended after catalog/styles.css by
   build-catalog-next.mjs, so the classic catalog never loads it.
   Backup of the page before this: backups/catalog-redesign-20261029/. */

@keyframes rd-sheet-in { from { opacity: 0; transform: translateY(40px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rd-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rd-pop { 0% { opacity: 0; transform: translateY(14px) scale(.5); } 70% { opacity: 1; transform: translateY(-3px) scale(1.08); } 100% { opacity: 1; transform: none; } }

/* --- sheet ---------------------------------------------------------------- */
.catalog-v2 .modal-backdrop:has(> .title-redesign) { background: rgba(5,5,9,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
/* The sheet is the dialog. The frame used to be 20px wider than the card, so
   the round close button hung on the page beside the card's rounded corner —
   now the frame is the card's width and the button is a glass disc inside it.
   The card still scrolls (wheel, touch, keyboard, PageDown); its platform
   scrollbar is gone — the violet bar cut the card like a system control. */
.catalog-v2 .title-redesign { width: min(1080px, 100%); }
.catalog-v2 .title-redesign .details-card { border: 1px solid rgba(255,255,255,.07); border-radius: 28px; box-shadow: 0 40px 120px rgba(0,0,0,.6); animation: rd-sheet-in .5s cubic-bezier(.2,.8,.2,1) both; scrollbar-width: none; -ms-overflow-style: none; }
.catalog-v2 .title-redesign .details-card::-webkit-scrollbar { display: none; width: 0; height: 0; }
.catalog-v2 .title-redesign .modal-close {
  top: 18px; right: 18px;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(203,177,236,.24); border-radius: 50%;
  color: #f4efff; font-size: 20px; line-height: 1;
  background: radial-gradient(120% 120% at 62% 18%, rgba(196,167,240,.2), transparent 58%), rgba(15,13,24,.58);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(12,11,19,.25), 0 10px 26px rgba(0,0,0,.45);
  transition: transform .3s cubic-bezier(.3,1.4,.5,1), background .25s, border-color .25s, box-shadow .25s;
}
.catalog-v2 .title-redesign .modal-close:hover {
  transform: rotate(90deg);
  border-color: rgba(196,167,240,.5);
  background: radial-gradient(120% 120% at 62% 18%, rgba(196,167,240,.34), transparent 60%), rgba(20,17,32,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.5), 0 0 26px rgba(139,92,246,.32);
}
.catalog-v2 .title-redesign .modal-close:active { transform: scale(.94); }
.catalog-v2 .title-redesign .details-card { scrollbar-gutter: auto; }
/* The drifting backdrop fades out instead of ending on a hard edge. */
.catalog-v2 .title-redesign .details-backdrop { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.catalog-v2 .title-redesign .details-layout { grid-template-columns: 240px minmax(0,1fr); align-items: start; gap: 40px; padding: 84px 44px 0; }

/* --- poster + watched badge ----------------------------------------------- */
.title-redesign .details-poster-wrap { position: relative; min-width: 0; align-self: start; }
.catalog-v2 .title-redesign .details-poster-wrap .details-poster { display: block; width: 100%; border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08); transition: filter .4s, transform .4s; }
.title-redesign .details-poster-wrap.is-watched .details-poster { filter: saturate(.75) brightness(.85); }
.title-redesign .details-watched-badge { position: absolute; top: 12px; left: 12px; height: 28px; padding: 0 10px 0 8px; border-radius: 999px; background: rgba(16,185,129,.92); color: #04130d; font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: 5px; box-shadow: 0 6px 18px rgba(0,0,0,.4); animation: rd-pop .4s cubic-bezier(.2,.8,.2,1) both; }
.title-redesign .details-watched-badge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }

/* --- heading: eyebrow pill, logo fade, text fallback ---------------------- */
.catalog-v2 .title-redesign .details-heading .eyebrow { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(139,92,246,.16); border: 1px solid rgba(139,92,246,.35); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #c4b5fd; }
.catalog-v2 .title-redesign .details-heading .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; }
.catalog-v2 .title-redesign .details-title-slot { margin-top: 16px; min-height: 84px; display: flex; align-items: flex-end; }
.catalog-v2 .title-redesign .details-logo { max-width: min(440px,92%); max-height: 140px; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 8px 24px rgba(0,0,0,.55)); opacity: 0; transform: translateY(8px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); animation: none; }
.catalog-v2 .title-redesign .details-logo.is-ready { opacity: 1; transform: none; }
.catalog-v2 .title-redesign .details-title-slot h2 { margin: 0; font-size: clamp(34px,4.4vw,56px); line-height: .98; font-weight: 900; letter-spacing: -.035em; text-wrap: balance; transition: opacity .4s; }
.catalog-v2 .title-redesign .details-title-slot h2.is-pending { opacity: 0; }

/* --- rating tiles (dark glass square tiles) ------------------------------- */
.catalog-v2 .title-redesign .details-score-line { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.catalog-v2 .title-redesign .details-scores { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.catalog-v2 .title-redesign .score-chip {
  height: 48px; padding: 0 14px 0 10px; gap: 10px; border-radius: 14px;
  background: rgba(18,19,28,.65);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 18px rgba(0,0,0,.25);
  animation: none;
  transition: transform .25s cubic-bezier(.3,1.4,.5,1), border-color .25s, box-shadow .25s, background .25s;
}
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .title-redesign .score-chip:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px rgba(0,0,0,.35);
  }
}
.catalog-v2 .title-redesign .score-chip > b { display: inline-grid; place-items: center; padding: 3px 6px; border-radius: 5px; font-size: 12px; font-weight: 900; line-height: 1.1; }
.catalog-v2 .title-redesign .score-chip strong { font-size: 17px; font-weight: 800; line-height: 1; }
.title-redesign .score-chip-text { display: flex; flex-direction: column; gap: 3px; }
.title-redesign .score-chip-text small { font-size: 10px; font-weight: 700; line-height: 1; opacity: .65; }

.catalog-v2 .title-redesign .score-imdb { border-color: rgba(245,197,24,.25); color: #fde68a; }
.catalog-v2 .title-redesign .score-imdb > b { background: #f5c518; color: #000; }
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .title-redesign .score-imdb:hover { border-color: rgba(245,197,24,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 18px rgba(245,197,24,.25), 0 10px 24px rgba(0,0,0,.35); }
}

.catalog-v2 .title-redesign .score-tmdb { border-color: rgba(1,180,228,.25); color: #a5f3fc; }
.catalog-v2 .title-redesign .score-tmdb > b { background: linear-gradient(135deg,#90cea1,#01b4e4); color: #0d253f; font-size: 11px; }
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .title-redesign .score-tmdb:hover { border-color: rgba(1,180,228,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 18px rgba(1,180,228,.25), 0 10px 24px rgba(0,0,0,.35); }
}

.catalog-v2 .title-redesign .score-mal { border-color: rgba(96,130,220,.35); color: #c7d7ff; }
.catalog-v2 .title-redesign .score-mal > b { background: #2e51a2; color: #fff; font-size: 11px; }
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .title-redesign .score-mal:hover { border-color: rgba(96,130,220,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 18px rgba(96,130,220,.25), 0 10px 24px rgba(0,0,0,.35); }
}

.catalog-v2 .title-redesign :is(.score-rt-fresh,.score-rt-rotten) { border-color: rgba(239,68,68,.28); color: #fca5a5; }
.catalog-v2 .title-redesign .score-rt-audience { border-color: rgba(251,146,60,.28); color: #fdba74; }
.catalog-v2 .title-redesign :is(.score-rt-fresh,.score-rt-rotten,.score-rt-audience) > b { padding: 0 0 0 2px; background: none; font-size: 22px; line-height: 1; }
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .title-redesign :is(.score-rt-fresh,.score-rt-rotten):hover { border-color: rgba(239,68,68,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 18px rgba(239,68,68,.25), 0 10px 24px rgba(0,0,0,.35); }
  .catalog-v2 .title-redesign .score-rt-audience:hover { border-color: rgba(251,146,60,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 18px rgba(251,146,60,.25), 0 10px 24px rgba(0,0,0,.35); }
}

/* --- facts, synopsis, credits, genres ------------------------------------- */
.catalog-v2 .title-redesign .details-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; font-weight: 600; color: #cfcbe0; }
.catalog-v2 .title-redesign .details-meta > span + span::before { content: "•"; margin-right: 8px; color: #55536a; }
.catalog-v2 .title-redesign .details-meta .fact-age { padding: 2px 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.05); }
.catalog-v2 .title-redesign .details-synopsis { margin: 18px 0 0; max-width: 640px; font-size: 15px; line-height: 1.65; color: #d6d2e6; text-wrap: pretty; }
.catalog-v2 .title-redesign .details-credits dt { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #77758a; }
.catalog-v2 .title-redesign .details-credits dd { font-weight: 700; }
.catalog-v2 .title-redesign .genre-chip {
  padding: 6px 13px; border-radius: 999px;
  background: rgba(18,19,28,.55); border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 12px; font-weight: 600; color: #e4e1f0;
  transition: all .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .title-redesign .genre-chip:hover {
    background: rgba(30,28,44,.72); border-color: rgba(167,139,250,.4);
    color: #fff; transform: translateY(-1px);
  }
}

/* --- actions (dark glass hero & compact utility buttons) ------------------- */
.catalog-v2 .title-redesign .details-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.catalog-v2 .title-redesign .details-actions > :is(.primary-button,.ghost-button) {
  height: 44px; display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; font-size: 14px; font-weight: 600;
  transition: background .25s, transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s, border-color .25s;
}
.catalog-v2 .title-redesign .details-actions > .primary-button {
  padding: 0 24px 0 20px; border: 0;
  background: linear-gradient(135deg,#7c3aed,#c026d3); color: #fff; font-size: 14px; font-weight: 700;
  box-shadow: 0 10px 28px rgba(192,38,211,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.catalog-v2 .title-redesign .details-actions > .primary-button:not(:disabled):hover {
  transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 38px rgba(192,38,211,.55);
}
.catalog-v2 .title-redesign .details-actions > .primary-button:not(:disabled):active { transform: scale(.97); }

.catalog-v2 .title-redesign .details-actions > .details-sources-button {
  padding: 0 18px 0 16px; border: 1px solid rgba(255,255,255,.1);
  background: radial-gradient(120% 120% at 62% 18%, rgba(196,167,240,.15), transparent 60%), rgba(18,19,28,.65);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 24px rgba(0,0,0,.35);
  color: #f7f5ff;
}
.catalog-v2 .title-redesign .details-actions > .details-sources-button:not(:disabled):hover {
  background: radial-gradient(120% 120% at 62% 18%, rgba(196,167,240,.25), transparent 60%), rgba(26,24,38,.82);
  border-color: rgba(196,167,240,.45); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 28px rgba(0,0,0,.45), 0 0 20px rgba(139,92,246,.25);
}

.catalog-v2 .title-redesign .details-actions > .details-together-button {
  padding: 0 18px 0 16px; border: 1px solid rgba(255,255,255,.1);
  background: radial-gradient(120% 120% at 62% 18%, rgba(196,167,240,.15), transparent 60%), rgba(18,19,28,.65);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 24px rgba(0,0,0,.35);
  color: #f7f5ff;
}
.catalog-v2 .title-redesign .details-actions > .details-together-button:not(:disabled):hover {
  background: radial-gradient(120% 120% at 62% 18%, rgba(196,167,240,.25), transparent 60%), rgba(26,24,38,.82);
  border-color: rgba(196,167,240,.45); transform: translateY(-2px);
}

/* Compact quick utility buttons: 44px circular glass discs under the title */
.catalog-v2 .title-redesign .details-actions > :is(.details-trailer-button, .details-watched, .details-add-button, .details-remove-button) {
  flex: 0 0 44px;
  width: 44px; height: 44px; min-width: 44px; max-width: 44px; min-height: 44px; padding: 0;
  border-radius: 50%; display: inline-grid; place-items: center;
  border: 1px solid rgba(255,255,255,.1);
  background: radial-gradient(120% 120% at 62% 18%, rgba(196,167,240,.16), transparent 58%), rgba(18,19,28,.65);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 24px rgba(0,0,0,.35);
  color: #f4efff; cursor: pointer;
  transition: transform .3s cubic-bezier(.3,1.4,.5,1), background .25s, border-color .25s, box-shadow .25s, color .25s;
}
.catalog-v2 .title-redesign .details-actions .details-btn-label { display: none; }

@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .title-redesign .details-actions > :is(.details-trailer-button, .details-watched, .details-add-button, .details-remove-button):not(:disabled):hover {
    transform: translateY(-2px) scale(1.05);
    border-color: rgba(196,167,240,.5);
    background: radial-gradient(120% 120% at 62% 18%, rgba(196,167,240,.3), transparent 60%), rgba(26,23,38,.85);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 30px rgba(0,0,0,.5), 0 0 22px rgba(139,92,246,.32);
  }
}
.catalog-v2 .title-redesign .details-actions > :is(.details-trailer-button, .details-watched, .details-add-button, .details-remove-button):active {
  transform: scale(.94);
}

/* Line icons via masks */
.catalog-v2 .title-redesign .details-actions > :is(.details-play-button,.details-together-button,.details-sources-button,.details-trailer-button,.details-add-button,.details-remove-button)::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--rd-icon) center/contain no-repeat; mask: var(--rd-icon) center/contain no-repeat;
}
.title-redesign .details-play-button { --rd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4l15 8-15 8z'/%3E%3C/svg%3E"); }
.title-redesign .details-together-button { --rd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.5 3.3-5.5 6.5-5.5s5.7 2 6.5 5.5M16 4.8a3.5 3.5 0 0 1 0 6.4M18.5 14.8c1.6.8 2.6 2.6 3 5.2'/%3E%3C/svg%3E"); }
.title-redesign .details-sources-button { --rd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E"); }
.title-redesign .details-trailer-button { --rd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%3E%3Cpolygon points='10 9 15 12 10 15 10 9' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.title-redesign .details-add-button { --rd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }

/* Add/In library stateful styling */
.title-redesign .details-remove-button {
  --rd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'%3E%3Cpath d='M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2zm-5 11.5l-3.5-3.5 1.4-1.4 2.1 2.1 4.6-4.6 1.4 1.4-6 6z'/%3E%3C/svg%3E");
}
.catalog-v2 .title-redesign .details-actions > .details-remove-button {
  border-color: rgba(167,139,250,.55);
  background: radial-gradient(120% 120% at 62% 18%, rgba(167,139,250,.32), transparent 58%), rgba(38,22,64,.65);
  color: #e4d4ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 22px rgba(139,92,246,.38), 0 8px 24px rgba(0,0,0,.35);
}
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .title-redesign .details-actions > .details-remove-button:hover {
    border-color: rgba(244,63,94,.55);
    background: radial-gradient(120% 120% at 62% 18%, rgba(244,63,94,.32), transparent 58%), rgba(50,16,28,.75);
    color: #fca5a5;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 22px rgba(244,63,94,.4);
  }
  .catalog-v2 .title-redesign .details-actions > .details-remove-button:hover::before {
    transform: rotate(45deg);
  }
}
.catalog-v2 .title-redesign .details-actions > .details-play-button::before { width: 14px; height: 14px; }

/* Watched toggle disc */
.catalog-v2 .title-redesign .details-watched { color: #cfcbe0; }
.catalog-v2 .title-redesign .details-watched[aria-pressed="true"] {
  border-color: rgba(52,211,153,.55);
  background: radial-gradient(120% 120% at 62% 18%, rgba(52,211,153,.32), transparent 58%), rgba(6,78,59,.45);
  color: #6ee7b7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 22px rgba(16,185,129,.38), 0 8px 24px rgba(0,0,0,.35);
}
.title-redesign .details-watched-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; transition: all .3s cubic-bezier(.3,1.4,.5,1); }
.title-redesign .details-watched-dot svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; transition: all .3s; }
.title-redesign .details-watched[aria-pressed="true"] .details-watched-dot { background: #34d399; border-color: #34d399; }
.title-redesign .details-watched[aria-pressed="true"] .details-watched-dot svg { stroke: #04130d; }

/* Personal rating: dark glass card, glowing stars */
.catalog-v2 .title-redesign .details-personal { margin-top: 18px; }
.catalog-v2 .title-redesign #personalRating.personal-rating {
  border-radius: 16px;
  background: rgba(18,19,28,.65);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.08);
  padding: 14px 18px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.35);
  max-width: 520px;
}
.catalog-v2 .title-redesign .personal-rating-title { font-size: 13px; font-weight: 700; color: #e4e1f0; letter-spacing: .02em; }
.catalog-v2 .title-redesign .personal-rating-number { font-size: 20px; font-weight: 800; color: #fbbf24; }
.catalog-v2 .title-redesign .personal-rating-scale { color: #8b88a0; font-size: 12px; font-weight: 600; }
.catalog-v2 .title-redesign .personal-star {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  color: #5a5770;
  transition: transform .2s cubic-bezier(.3,1.5,.5,1), color .2s, background .2s, border-color .2s;
}
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .title-redesign .personal-star:not(:disabled):hover {
    transform: scale(1.22); color: #fbbf24;
    background: rgba(251,191,36,.16); border-color: rgba(251,191,36,.35);
    filter: drop-shadow(0 0 8px rgba(251,191,36,.45));
  }
}
.catalog-v2 .title-redesign .personal-star:not(:disabled):active { transform: scale(.85); }
.catalog-v2 .title-redesign .personal-star.is-filled, .catalog-v2 .title-redesign .personal-star.is-half {
  color: #fbbf24; background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.28);
  filter: drop-shadow(0 0 6px rgba(251,191,36,.3));
}
.catalog-v2 .title-redesign .personal-rating-step {
  width: 32px; height: 32px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05);
  color: #f4efff; font-size: 16px; transition: all .2s;
}
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .title-redesign .personal-rating-step:not(:disabled):hover {
    background: rgba(139,92,246,.22); border-color: rgba(139,92,246,.45); transform: translateY(-1px);
  }
}
.catalog-v2 .title-redesign .personal-rating-remove {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05);
  color: #a7a5b5; transition: all .2s;
}
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .title-redesign .personal-rating-remove:hover {
    background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.45);
    color: #fca5a5; transform: rotate(90deg);
  }
}

/* --- cast: round photos with a gradient ring ------------------------------- */
.catalog-v2 .title-redesign .details-cast { padding: 44px 44px 0; }
.catalog-v2 .title-redesign .details-section-title { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.catalog-v2 .title-redesign .cast-rail { gap: 6px; scrollbar-width: none; }
.catalog-v2 .title-redesign .cast-rail::-webkit-scrollbar { display: none; }
.catalog-v2 .title-redesign .cast-person { flex: 0 0 112px; }
.catalog-v2 .title-redesign .cast-person-link { width: 100%; padding: 8px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; background: none; transition: background .3s; }
.catalog-v2 .title-redesign .cast-person-link:hover { background: rgba(255,255,255,.05); }
.catalog-v2 .title-redesign .cast-avatar { position: relative; width: 84px; height: 84px; border-radius: 50%; padding: 0; overflow: hidden; display: grid; place-items: center; font-size: 22px; font-weight: 800; color: rgba(255,255,255,.85); background: linear-gradient(135deg,hsl(270 35% 32%),hsl(300 40% 16%)); border: 3px solid #0c0b13; box-shadow: 0 0 0 2px rgba(150,70,230,.75); transition: transform .35s cubic-bezier(.3,1.4,.5,1), box-shadow .35s; }
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .title-redesign .cast-person-link:hover .cast-avatar { transform: scale(1.08); box-shadow: 0 0 0 2px rgba(192,38,211,.85), 0 10px 30px rgba(192,38,211,.35); }
}
.catalog-v2 .title-redesign .cast-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.catalog-v2 .title-redesign .cast-name { margin-top: 10px; font-size: 13px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.catalog-v2 .title-redesign .cast-role { margin-top: 3px; font-size: 12px; color: #8e8ca0; line-height: 1.3; text-wrap: balance; }

/* --- similar: a closed "book" — a cover strip with the first posters stacked
   on its spine and one page-turn button on the side; opening it unfolds the
   second layer with every similar title in a grid ------------------------- */
.similar-book { position: relative; margin: 12px 52px 46px; }
.similar-book-heading { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.similar-book-cover {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 20px;
  width: 100%; min-height: 96px; padding: 12px 18px 12px 22px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 22px;
  background: linear-gradient(150deg, rgba(34,29,50,.74), rgba(15,14,24,.68));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 54px rgba(0,0,0,.42);
  color: inherit; text-align: left; cursor: pointer;
  transition: border-color .3s, box-shadow .3s, border-radius .35s;
}
/* the book spine */
.similar-book-cover::before { content: ""; position: absolute; inset: 12px auto 12px 9px; width: 4px; border-radius: 999px; background: linear-gradient(180deg, rgba(196,167,240,.9), rgba(139,92,246,.22)); box-shadow: 0 0 16px rgba(139,92,246,.55); }
/* the block of pages peeking under a closed book */
.similar-book-cover::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -4px; height: 4px; border-radius: 0 0 12px 12px; background: rgba(196,167,240,.16); box-shadow: 0 3px 0 rgba(196,167,240,.07), 0 6px 0 rgba(196,167,240,.035); transition: opacity .3s; }
.similar-book-cover:focus-visible { outline: 2px solid #d4aff9; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .similar-book-cover:hover { border-color: rgba(203,177,236,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 26px 60px rgba(0,0,0,.5), 0 0 30px rgba(139,92,246,.18); }
  .similar-book-cover:hover .similar-book-mini { transform: rotate(calc((var(--mini-index) - 1.5) * 7deg)) translateY(-2px); }
  .similar-book-cover:hover .similar-book-turn { border-color: rgba(203,177,236,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 30px rgba(0,0,0,.5), 0 0 26px rgba(139,92,246,.4); }
  .similar-book-cover:hover .similar-book-hint { color: #f0ebfa; }
}

/* the stack of covers on the spine */
.similar-book-stack { position: relative; flex: none; width: 118px; height: 72px; }
.similar-book-mini { position: absolute; top: 1px; left: calc(4px + var(--mini-index) * 20px); width: 46px; height: 70px; border-radius: 9px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(135deg,#2a2240,#14121d); box-shadow: 0 10px 24px rgba(0,0,0,.5); transform: rotate(calc((var(--mini-index) - 1.5) * 4deg)); transform-origin: 50% 88%; transition: transform .45s cubic-bezier(.3,1.2,.5,1); }
.similar-book-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

.similar-book-copy { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.similar-book-title { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #cbbae7; }
.similar-book-title .similar-count { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px; border: 1px solid rgba(203,177,236,.24); background: rgba(139,92,246,.14); font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #e4d6ff; }
.similar-book-hint { font-size: 13px; font-weight: 600; color: #8e8ca0; transition: color .25s; }

/* the round page-turn button on the right side of the cover */
.similar-book-turn { margin-left: auto; flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #f4efff; background: radial-gradient(120% 120% at 62% 18%, rgba(196,167,240,.3), transparent 58%), rgba(20,18,31,.72); border: 1px solid rgba(203,177,236,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 26px rgba(0,0,0,.4); transition: border-color .3s, box-shadow .3s; }
.similar-book-turn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.similar-book.is-open .similar-book-turn svg { transform: rotate(-90deg); }
.similar-book.is-open .similar-book-cover { border-radius: 22px 22px 6px 6px; }
.similar-book.is-open .similar-book-cover::after { opacity: 0; }

/* the second layer: a page that unfolds down from under the cover */
.similar-book-fold { display: grid; grid-template-rows: 0fr; perspective: 1500px; transition: grid-template-rows .58s cubic-bezier(.2,.8,.2,1); }
.similar-book.is-open .similar-book-fold { grid-template-rows: 1fr; }
.similar-book-page { min-height: 0; overflow: hidden; transform-origin: top center; transform: rotateX(-62deg) translateY(-10px); opacity: .2; transition: transform .58s cubic-bezier(.2,.8,.2,1), opacity .35s ease; }
.similar-book.is-open .similar-book-page { transform: none; opacity: 1; }
/* Flex rows rather than a grid: a title with four similar films gets one
   centred row instead of four cards hugging the left edge. */
.similar-book-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 14px; padding: 22px 22px 26px; border: 1px solid rgba(255,255,255,.07); border-top: 0; border-radius: 0 0 22px 22px; background: linear-gradient(180deg, rgba(21,19,32,.92), rgba(14,13,22,.94)); box-shadow: 0 34px 64px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.04); }

/* the cards inside the page */
.similar-book .similar-card { flex: 0 0 calc((100% - 72px) / 6); min-width: 0; border: 0; padding: 0; background: none; color: inherit; text-align: left; cursor: pointer; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.similar-book.is-open .similar-card { animation: rd-up .5s var(--similar-delay, 0ms) cubic-bezier(.2,.8,.2,1) backwards; }
.similar-card:focus-visible { transform: translateY(-8px); }
@media (hover: hover) and (pointer: fine) {
  .similar-card:hover { transform: translateY(-8px); }
}
.similar-card-poster { position: relative; display: block; aspect-ratio: 2/3; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg,#2a2240,#14121d); box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.07); transition: box-shadow .4s; }
.similar-card-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.similar-card-hover { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 8px; padding: 12px; background: linear-gradient(0deg, rgba(9,10,15,.9) 0%, rgba(9,10,15,0) 45%); opacity: 0; transition: opacity .35s; }
.similar-card:focus-visible .similar-card-hover { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .similar-card:hover .similar-card-hover { opacity: 1; }
  .similar-card:hover .similar-card-poster { box-shadow: 0 22px 50px rgba(139,92,246,.45), 0 0 0 1px rgba(255,255,255,.18); }
}
.similar-card-play { width: 38px; height: 38px; flex: none; border-radius: 50%; background: #fff; color: #090a0f; display: grid; place-items: center; font-size: 13px; }
.similar-card-reason { font-size: 12px; font-weight: 600; line-height: 1.3; color: #e4e1f0; }
.similar-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.similar-match { position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%; background: conic-gradient(#34d399 var(--match), rgba(255,255,255,.1) 0); display: grid; place-items: center; }
.similar-match > span { width: 24px; height: 24px; border-radius: 50%; background: #0c0b13; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #6ee7b7; }
.similar-card-copy { min-width: 0; display: flex; flex-direction: column; }
.similar-card-title { font-weight: 700; font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.similar-card-sub { font-size: 12px; color: #8e8ca0; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* tablet: narrower margins, four covers per row */
@media (min-width: 761px) and (max-width: 1100px) {
  .similar-book { margin: 10px 26px 40px; }
  .similar-book-cover { gap: 16px; padding: 12px 16px 12px 20px; }
  .similar-book-stack { width: 104px; }
  .similar-book-mini { left: calc(3px + var(--mini-index) * 18px); width: 42px; height: 64px; }
  .similar-book-grid { gap: 20px 12px; }
  .similar-book .similar-card { flex-basis: calc((100% - 38px) / 4); }
}
@media (min-width: 950px) and (max-width: 1100px) {
  .similar-book-grid { gap: 20px 12px; }
  .similar-book .similar-card { flex-basis: calc((100% - 48px) / 5); }
}

/* phone: compact cover, three covers per row */
@media (max-width: 760px) {
  .similar-book { margin: 8px 18px 34px; }
  .similar-book-cover { gap: 14px; min-height: 84px; padding: 10px 12px 10px 18px; border-radius: 18px; }
  .similar-book.is-open .similar-book-cover { border-radius: 18px 18px 6px 6px; }
  .similar-book-cover::before { inset: 10px auto 10px 7px; }
  .similar-book-cover::after { left: 12px; right: 12px; }
  .similar-book-stack { width: 90px; height: 58px; }
  .similar-book-mini { left: calc(2px + var(--mini-index) * 15px); width: 36px; height: 56px; border-radius: 7px; }
  .similar-book-title { font-size: 11px; gap: 8px; }
  .similar-book-hint { font-size: 12px; }
  .similar-book-turn { width: 44px; height: 44px; }
  .similar-book-turn svg { width: 16px; height: 16px; }
  .similar-book-grid { gap: 16px 10px; padding: 16px 14px 20px; border-radius: 0 0 18px 18px; }
  .similar-book .similar-card { flex-basis: calc((100% - 20px) / 3); }
  /* the match ring rides the poster, so two-line titles get the full card;
     150cqi is the poster height (the card is the inline-size container) */
  .similar-book .similar-card { position: relative; container-type: inline-size; }
  .similar-book .similar-match { position: absolute; left: 8px; top: calc(150cqi - 31px); z-index: 2; width: 24px; height: 24px; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
  .similar-book .similar-match > span { width: 19px; height: 19px; font-size: 9px; }
  .similar-book .similar-card-meta { display: block; margin-top: 8px; }
  .similar-book .similar-card-poster { border-radius: 12px; }
  .similar-book .similar-card-title { font-size: 11.5px; line-height: 1.25; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .similar-book .similar-card-sub { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .similar-book-fold, .similar-book-page, .similar-book-cover, .similar-book-turn svg, .similar-book-mini, .similar-card { transition: none; }
  .similar-book.is-open .similar-card { animation: none; }
  .similar-book-page { transform: none; opacity: 1; }
}

/* Episode cards: the watch-together button sits on the still (it used to
   cover « Sources »), « Prepare » keeps its text and the row wraps. */
.catalog-v2 .title-redesign .episode-grid:not(.episode-grid-list) > .episode-card > .episode-party { top: 10px; bottom: auto; right: 10px; }
.catalog-v2 .title-redesign .episode-grid:not(.episode-grid-list) .episode-actions { flex-wrap: wrap; }
.catalog-v2 .title-redesign .episode-actions .episode-prepare { flex: 0 0 auto; width: auto; padding: 0 12px; white-space: nowrap; }
.catalog-v2 .title-redesign .episode-actions > button { white-space: nowrap; }

/* Episodes, tracks, studio rail, anime facts keep their place in the sheet. */
.catalog-v2 .title-redesign :is(.episodes, .details-tracks, .studio-rail-wrap, .anime-facts, .episodes-tools) { margin-left: 44px; margin-right: 44px; }


/* --- narrow screens -------------------------------------------------------- */
@media (max-width: 760px) {
  .catalog-v2 .title-redesign .details-layout { grid-template-columns: 112px minmax(0,1fr); gap: 18px; padding: 72px 20px 0; }
  .catalog-v2 .title-redesign .details-card { border-radius: 22px; }
  .catalog-v2 .title-redesign .details-cast { padding: 32px 20px 0; }
  .catalog-v2 .title-redesign .details-actions .primary-button { flex: 1 1 100%; justify-content: center; }
  .catalog-v2 .title-redesign .details-actions .details-sources-button { flex: 1 1 auto; justify-content: center; }
  .catalog-v2 .title-redesign .details-actions > :is(.details-trailer-button, .details-watched, .details-add-button, .details-remove-button) { flex: 0 0 44px; width: 44px; height: 44px; }
    .catalog-v2 .title-redesign :is(.episodes, .details-tracks, .studio-rail-wrap, .anime-facts, .episodes-tools) { margin-left: 20px; margin-right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-v2 .title-redesign .details-card, .similar-card, .title-redesign .details-watched-badge { animation: none; }
  .catalog-v2 .title-redesign .details-logo { transition: none; }
}

/* ===========================================================================
   Floating menu (every section): glass pills over the page, the lit pill
   slides to the active section.
   ======================================================================== */
.catalog-v2 .topbar { border-bottom: 0; pointer-events: none; }
.catalog-v2 .topbar::before { background: rgba(12,12,20,.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: opacity .3s; }
.catalog-v2 .topbar:not(.scrolled)::before { opacity: 0; }
/* The field lives under the header magnifier: it is out of the page flow and
   only appears — pinned under the bar by the `.top-search-open` rule in
   catalog/styles.css — while the header search (or «/») is open. */
body.catalog-v2:not(.top-search-open) .catalog-search .search { display: none; }
body.catalog-v2.top-search-open .catalog-search .search {
  background: rgba(19,20,31,.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 48px rgba(0,0,0,.5);
}
.catalog-v2 .topbar > * { pointer-events: auto; }
/* Н-13: between the compact nav (≤1100px) and the sliding pill (≥1440px) the
   topbar kept its 24px gap, which pushed the profile 9.5px past the content
   edge at 1440px (1391.9 instead of 1382.4). 16px is the gap the design calls
   for and keeps every pill inside the edge from 1101 to 1550px. */
@media (min-width: 1101px) and (max-width: 1550px) {
  .catalog-v2 .topbar { gap: 16px; }
}
/* The 16px gap alone still left the row 5.6px too wide at exactly 1440px: from
   1440px up the nav becomes the padded pill and the party button shows its
   label, which is what pushes the profile over. Two pixels off each side of
   the nav items in that band give the 24px back without a visible change. */

/* Sliding pill only on a wide fine pointer. Coarse pointers through 1400px
   keep the single-row bottom tab bar, and 1181–1439px keeps the compact
   top nav so the profile is not clipped. Sizes stay at the 44px floor. */
@media (min-width: 1440px) {
  .catalog-v2 .topbar {
    padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
  }
}
@media (min-width: 1440px) and (hover: hover) and (pointer: fine) {
.catalog-v2 .main-nav { position: relative; gap: 0; padding: 5px; border-radius: 999px; background: rgba(18,19,28,.62); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.catalog-v2 .main-nav-indicator { position: absolute; top: 5px; left: 0; bottom: 5px; height: auto; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.08); transition: transform .45s cubic-bezier(.3,1.3,.5,1), width .45s cubic-bezier(.3,1.3,.5,1); pointer-events: none; }
.catalog-v2 .main-nav .nav-item { position: relative; padding: 8px 14px; border-radius: 999px; font-weight: 600; color: #a7a5b5; background: none; box-shadow: none; transition: color .25s; }
.catalog-v2 .main-nav .nav-item:hover { color: #f7f5ff; background: none; }
.catalog-v2 .main-nav .nav-item.active { color: #f7f5ff; background: none; box-shadow: none; }
.catalog-v2 .main-nav:has(.main-nav-indicator:not([hidden])) .nav-item.active { background: none; }
}
/* Н-13, second half: with the 16px gap the row is still 5.6px too wide at
   exactly 1440px, where the padded pill above and the party label both appear.
   Two pixels off each side of the nav items hand back 24px without a visible
   change. Declared after the pill block so it wins inside that band. */
@media (min-width: 1440px) and (max-width: 1550px) {
  .catalog-v2 .main-nav .nav-item { padding: 8px 12px; }
}
.catalog-v2 .top-search-button { flex: 0 0 auto; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); background: rgba(18,19,28,.62); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #a7a5b5; cursor: pointer; transition: color .2s, background .2s; }
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .top-search-button:hover { color: #f7f5ff; background: rgba(40,42,58,.8); }
}
.catalog-v2 .topbar :is(.party-mode-button, .ui-lang-trigger, .profile-button) { border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: rgba(18,19,28,.62); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.catalog-v2 .topbar .party-mode-button.active { border-color: rgba(192,38,211,.55); background: rgba(18,19,28,.62); box-shadow: 0 0 0 1px rgba(192,38,211,.2), 0 8px 26px rgba(192,38,211,.25); }

/* The search capsule wears the same floating glass as the pills beside it
   (the field still had the old purple catalog-v2 gradient). Only the surface
   changes here: the height/radius stay with the compact-home rules, and the
   scope listbox keeps its own styles from catalog/styles.css. */
body.catalog-v2 .catalog-search .search {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(18,19,28,.62);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
@media (hover: hover) and (pointer: fine) {
  body.catalog-v2 .catalog-search .search:hover { border-color: rgba(255,255,255,.16); background: rgba(24,26,38,.72); }
}
body.catalog-v2 .catalog-search .search:focus-within {
  border-color: rgba(167,139,250,.55);
  background: rgba(19,20,31,.86);
  box-shadow: 0 0 0 4px rgba(139,92,246,.16), 0 10px 40px rgba(0,0,0,.35);
}
/* If the capsule ever sits low enough for the listbox to fall off the bottom,
   it opens upwards instead (app.jsx toggles the class from the measured
   geometry). */
body.catalog-v2 .search-scope-menu.is-flipped { top: auto; bottom: calc(100% + 9px); transform-origin: bottom left; }

/* ===========================================================================
   Accueil: full-bleed hero under the floating menu, then the search and the
   rows (Claude Design prototype, catalog screen).
   ======================================================================== */
@keyframes rd-fade { from { opacity: 0; } to { opacity: 1; } }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main { display: flex; flex-direction: column; }
/* The hero bleeds under the fixed topbar, so only then may the page start at
   the very top. Without one (an empty library) the first block would slide
   under the topbar and the search field became unreachable. */
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main:has(> .hero) { padding-top: 0; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > .hero { order: -1; }
body.catalog-v2[data-view="home"] .catalog-intro .page-heading-main { display: none; }
body.catalog-v2[data-view="home"] .catalog-intro { margin-top: 28px; grid-template-columns: minmax(0,1fr); }
body.catalog-v2[data-view="home"] .hero { margin: 0 0 8px; min-height: min(82vh, 760px); padding: 0 clamp(20px,5vw,64px) 64px; display: flex; align-items: center; border: 0; border-radius: 0; background: #090a0f; box-shadow: none; }
body.catalog-v2[data-view="home"] .hero-image { background-position: center 30%; animation: rd-fade 1.2s ease both; }
body.catalog-v2[data-view="home"] .hero-shade { background: linear-gradient(90deg, rgba(9,10,15,.92) 0%, rgba(9,10,15,.55) 42%, rgba(9,10,15,0) 75%), linear-gradient(0deg, #0c0b13 0%, rgba(9,10,15,0) 45%); }
body.catalog-v2[data-view="home"] .hero-content { max-width: 620px; animation: rd-up .8s .15s cubic-bezier(.2,.8,.2,1) both; }
body.catalog-v2[data-view="home"] .hero #heroKicker { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #c4b5fd; margin-bottom: 14px; }
body.catalog-v2[data-view="home"] .hero #heroTitle { height: auto; min-height: 96px; max-width: 620px; display: flex; align-items: flex-end; font-size: clamp(38px,5.4vw,68px); line-height: .98; font-weight: 900; letter-spacing: -.035em; -webkit-line-clamp: unset; }
body.catalog-v2[data-view="home"] .hero #heroTitle.has-logo { height: 140px; min-height: 140px; max-width: min(480px,92%); background-position: left bottom; filter: drop-shadow(0 8px 24px rgba(0,0,0,.55)); }
body.catalog-v2[data-view="home"] .hero .hero-meta { margin: 18px 0 16px; font-size: 13px; font-weight: 600; color: #a7a5b5; }
body.catalog-v2[data-view="home"] .hero #heroDescription { max-width: 560px; font-size: 15px; line-height: 1.6; color: #cfcbe0; margin: 0 0 26px; }
body.catalog-v2[data-view="home"] .hero .hero-actions button { min-height: 50px; padding: 0 22px; border-radius: 14px; font-size: 15px; font-weight: 700; transition: transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s, background .25s; }
body.catalog-v2[data-view="home"] .hero .hero-actions .primary-button { border: 0; background: linear-gradient(135deg,#7c3aed,#c026d3); color: #fff; box-shadow: 0 10px 30px rgba(192,38,211,.35); }
body.catalog-v2[data-view="home"] .hero .hero-actions .primary-button:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 40px rgba(192,38,211,.5); }
body.catalog-v2[data-view="home"] .hero .hero-actions .ghost-button { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); backdrop-filter: blur(12px); color: #f7f5ff; }
body.catalog-v2[data-view="home"] .hero .hero-actions .ghost-button:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }

/* Rows: plain headings, posters lift and glow. */
.catalog-v2 .library-toolbar {
  border: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding-inline: 0;
}
.catalog-v2 .library-toolbar .library-refresh-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.catalog-v2 .library-layout button { width: 44px; height: 44px; }
.catalog-v2 .library-select,
.catalog-v2 :is(#library-sort, #library-rating) { height: 44px; min-height: 44px; }
/* Н-19: iOS Safari zooms the page when a focused control is under 16px, so on
   a coarse pointer the library's sort and rating selects get the full size. */
@media (pointer: coarse) {
  .catalog-v2 :is(#library-sort, #library-rating) { font-size: 16px; height: 44px; min-height: 44px; }
}
.catalog-v2 .catalog-row .row-title h3, .catalog-v2 .catalog-row > h3.row-title,
.catalog-v2 .recommendations-heading h2,
.catalog-v2 .recommendation-rows .row-title h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .poster-rail .media-card:hover .poster-wrap { box-shadow: 0 18px 44px rgba(124,58,237,.35), 0 0 0 1px rgba(255,255,255,.08); }
}

/* ===========================================================================
   Sources drawer: floating glass panel, quality chip + "ready now", the
   picked release starts from the button at the bottom.
   ======================================================================== */
@keyframes rd-drawer { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.catalog-v2 .source-drawer-scrim { background: rgba(0,0,0,.45); backdrop-filter: none; }
.catalog-v2 .source-drawer-panel { top: 12px; right: 12px; bottom: 12px; width: min(460px, calc(100vw - 24px)); border-radius: 24px; background: rgba(17,18,27,.92); backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 90px rgba(0,0,0,.6); overflow: hidden; animation: rd-drawer .45s cubic-bezier(.2,.8,.2,1) both; }
.catalog-v2 .source-drawer-head { padding: 22px 22px 8px; border: 0; }
.catalog-v2 .source-drawer-head h2 { font-size: 19px; font-weight: 800; }
.catalog-v2 .source-drawer-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); transition: transform .3s, background .2s; }
.catalog-v2 .source-drawer-close:hover { transform: rotate(90deg); background: rgba(255,255,255,.12); }
.catalog-v2 .source-drawer-hint { padding: 0 22px 8px; }
.catalog-v2 .source-quality-scopes { flex-wrap: wrap; padding: 4px 22px 14px; }
.catalog-v2 .source-quality-option { flex: 0 0 auto; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #a7a5b5; font-size: 12px; font-weight: 600; transition: border-color .25s, background .25s, color .25s; }
.catalog-v2 .source-quality-option.active { border-color: rgba(139,92,246,.6); background: rgba(139,92,246,.22); color: #ede9fe; }
.source-quality-count { margin-left: 5px; opacity: .6; }
.catalog-v2 .source-drawer-list { padding: 0 14px 14px; gap: 8px; }
.catalog-v2 .source-item { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); text-align: left; animation: rd-up .4s var(--source-delay, 0ms) cubic-bezier(.2,.8,.2,1) both; transition: background .25s, border-color .25s, transform .25s; }
.catalog-v2 .source-item:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); transform: translateX(-3px); }
.catalog-v2 .source-item.is-picked { border-color: rgba(139,92,246,.65); background: rgba(139,92,246,.14); }
.catalog-v2 .source-item.is-current:not(.is-picked) { border-color: rgba(52,211,153,.35); }
.source-item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.source-item-spacer { flex: 1; }
.source-q { padding: 3px 7px; border-radius: 6px; background: rgba(255,255,255,.14); color: #fff; font-size: 11px; font-weight: 900; }
.source-q.is-4k { background: linear-gradient(135deg,#7c3aed,#c026d3); }
.source-tag { padding: 3px 7px; border-radius: 6px; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 700; color: #d6d2e6; }
.source-current { font-size: 11px; font-weight: 700; color: #c4b5fd; }
.source-ready { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #6ee7b7; }
.source-ready::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #34d399; }
.catalog-v2 .source-item .source-item-title { font-size: 12px; font-weight: 500; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #bdb9cf; line-height: 1.45; word-break: break-all; }
.source-item-facts { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; font-weight: 600; color: #8e8ca0; }
.source-drawer-foot { padding: 14px 22px 22px; border-top: 1px solid rgba(255,255,255,.07); }
.catalog-v2 .source-drawer-watch { width: 100%; height: 50px; border: 0; border-radius: 14px; background: linear-gradient(135deg,#7c3aed,#c026d3); color: #fff; font-size: 15px; font-weight: 700; transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.catalog-v2 .source-drawer-watch:hover { transform: translateY(-2px); }
.catalog-v2 .source-drawer-watch::before { content: "▶"; margin-right: 10px; font-size: 12px; }
@media (max-width: 760px) {
  .catalog-v2 .source-drawer-panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 86dvh; }
  body.catalog-v2[data-view="home"] .hero { min-height: 72vh; padding-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-v2 .source-item, .catalog-v2 .source-drawer-panel, body.catalog-v2[data-view="home"] :is(.hero-image,.hero-content) { animation: none; }
  .catalog-v2 .main-nav-indicator { transition: none; }
}

/* #39: status, badges and captions stay at 12px on a phone and on a coarse
   pointer through 1400px. These rules outrank the prototype's 9–11px type
   because this sheet is appended after catalog/styles.css. Touch targets
   stay at 44px; the prototype does not shrink them. */
@media (max-width: 1180px), (max-width: 1400px) and (any-pointer: coarse) {
  .catalog-v2 .title-redesign .details-heading .eyebrow,
  .catalog-v2 .title-redesign .details-credits dt,
  .catalog-v2 .title-redesign .details-meta .fact-age,
  .catalog-v2 .title-redesign .score-chip > b,
  .catalog-v2 .title-redesign .score-tmdb > b,
  .title-redesign .score-chip-text small,
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroKicker,
  .source-q, .source-tag, .source-current, .source-ready,
  .similar-match > span,
  .catalog-v2 .card-sub,
  .catalog-v2 .anime-card-stats,
  .catalog-v2 .card-status .status-year,
  .catalog-v2 .card-status .card-personal-badge .badge-number,
  .catalog-v2 .brand-copy small,
  .catalog-v2 .filter-label,
  .catalog-v2 .library-toolbar .filter-label,
  .catalog-v2 :is(.library-count, .library-refresh-text, .library-toolbar b),
  .catalog-v2 #recommendationsStatus,
  .catalog-v2 #recommendationsEngine,
  .catalog-v2 .card-reason,
  .catalog-v2 .recommendation-rows .card-reason,
  .catalog-v2 .disney-brand-natgeo .disney-brand-mark { font-size: 12px; }
}
@media (any-pointer: coarse) {
  .catalog-v2 .source-drawer-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .catalog-v2 .title-redesign .modal-close { width: 44px; height: 44px; }
  .similar-card-play { width: 44px; height: 44px; }
  .catalog-v2 .collection-open-all,
  .catalog-v2 .library-see-all,
  .catalog-v2 .details-tracks-toggle { min-height: 44px; }
  .catalog-v2 :is(#library-sort, #library-rating) { height: 44px; min-height: 44px; }
  .catalog-v2 .library-refresh-button { width: 44px; height: 44px; }
  .catalog-v2 .library-layout button { width: 44px; height: 44px; }
  .catalog-v2 :is(.recommendation-less, .recommendation-dismiss)::before { content: ""; position: absolute; inset: -6px; }
}
@media (hover: none), (any-pointer: coarse) {
  .similar-card .similar-card-hover { opacity: 1; transform: none; }
  .similar-card:hover { transform: none; }
  .catalog-v2 .title-redesign .modal-close:hover,
  .catalog-v2 .title-redesign .details-actions > :is(.primary-button, .ghost-button):hover,
  .catalog-v2 .source-drawer-close:hover,
  .catalog-v2 .source-item:hover,
  .catalog-v2 .source-drawer-watch:hover,
  body.catalog-v2[data-view="home"] .hero .hero-actions :is(.primary-button, .ghost-button):hover { transform: none; }
}
/* Н-3: this follows the home min-height (and the 72vh rule under 760px).
   height and min-height have to match the cap, or the search sits under the tab bar. */
@media (max-width: 1180px) {
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero {
    --hero-h: calc(min(82vh, 760px) - 96px);
    height: var(--hero-h);
    min-height: var(--hero-h);
    max-height: var(--hero-h);
  }
}

/* Д-8 / Н-20: the recommendations grid was pinned to six columns, so at 1920px
   its cards grew to 283.7px while every other tab stays at ~205px. auto-fill
   keeps the count in step with the rails (6 columns at 1440, 8 at 1920); the
   ≤1100px rules in catalog/styles.css still hand phones their 4/2 columns. */
@media (min-width: 1101px) {
  .catalog-v2 .recommendations-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* ===========================================================================
   Accueil, Films, Séries, Anime — second pass: the page opens on the hero, the mood picker rides
   its lower edge, and a slide change no longer moves anything.
   ======================================================================== */
/* A fixed-height hero and fixed slots for every line of copy: a longer title
   or a missing synopsis on the next slide cannot shift the page. */
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero { height: min(86vh, 800px); min-height: 560px; padding-bottom: 196px; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroKicker { display: block; height: 14px; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroTitle { height: 140px; min-height: 140px; overflow: hidden; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroTitle:not(.has-logo) .hero-title-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero .hero-meta { height: 26px; overflow: hidden; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroDescription { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: calc(2 * 1.6em); }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroDescription[hidden] { display: block; visibility: hidden; }
/* A slower, softer swap: the copy sinks out quickly and rises back gently. */
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero .hero-content { transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero .hero-content.hero-content-out { opacity: 0; transform: translateY(10px); filter: blur(3px); transition-duration: .28s; transition-timing-function: ease-in; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero-image.hero-image-ghost { transition: opacity 1.4s cubic-bezier(.4,0,.2,1), transform 1.4s cubic-bezier(.4,0,.2,1); }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero-image.hero-image-ghost.is-leaving { transform: scale(1.03); }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero-dot { transition: width .5s cubic-bezier(.2,.8,.2,1), background .5s ease; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero-shade { background: linear-gradient(90deg, rgba(9,10,15,.92) 0%, rgba(9,10,15,.55) 42%, rgba(9,10,15,0) 75%), linear-gradient(0deg, #0c0b13 2%, rgba(12,11,19,.82) 22%, rgba(9,10,15,0) 52%); }

/* The mood picker on the hero's lower edge. */
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods { order: -1; position: relative; z-index: 2; margin: -168px 0 10px; padding: 0 clamp(20px,5vw,64px); animation: rd-up .8s .3s cubic-bezier(.2,.8,.2,1) both; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods .discovery-panel, body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods > section { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods .discovery-lead strong { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #c4b5fd; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods .mood-card { min-height: 0; padding: 14px 15px; gap: 10px; border-color: rgba(var(--mood),.22); background: linear-gradient(140deg, rgba(var(--mood),.16), rgba(14,14,22,.55)); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s, background .25s, box-shadow .35s; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods .mood-card:hover { transform: translateY(-4px); border-color: rgba(var(--mood),.5); box-shadow: 0 16px 40px rgba(var(--mood),.18), 0 10px 30px rgba(0,0,0,.3); }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods :is(.discovery-top button, .home-filters-toggle) { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .catalog-intro { margin-top: 18px; }
@media (max-width: 760px) {
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero { height: auto; min-height: 78vh; padding-bottom: 150px; }
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero #heroTitle { height: 96px; min-height: 96px; }
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods { margin-top: -132px; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods { animation: none; }
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero .hero-content, body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero-image.hero-image-ghost { transition: none; }
}

/* ===========================================================================
   Mood picker as pills (no glyphs): a hairline gradient border in the mood's
   colour, a glowing dot, a lift and glow on hover, a filled pill when on.
   ======================================================================== */
.catalog-v2 #discoveryPanel .mood-options { display: flex; flex-wrap: wrap; gap: 10px; overflow: visible; padding: 4px 0 6px; }
.catalog-v2 #discoveryPanel .mood-card {
  flex: 0 0 auto; min-height: 0; height: 46px; padding: 0 20px 0 16px; gap: 10px;
  flex-direction: row; align-items: center; border-radius: 999px; overflow: visible;
  border: 1px solid rgba(255,255,255,.09);
  /* Smoke glass in the site's style: mostly dark and see-through, the mood
     colour only whispers through the tint, the dot and the interactive ring. */
  background:
    linear-gradient(135deg, rgba(var(--mood),.07), rgba(10,9,16,.34) 52%, rgba(10,9,16,.45));
  backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 24px rgba(var(--mood),.05), 0 10px 26px rgba(0,0,0,.26);
  color: #ece8f6; text-shadow: 0 1px 2px rgba(0,0,0,.45); transform: none;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .3s ease, border-color .3s ease;
}
.catalog-v2 #discoveryPanel .mood-card::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--mood),.92); box-shadow: 0 0 7px 1px rgba(var(--mood),.4); transition: transform .35s cubic-bezier(.3,1.6,.5,1), box-shadow .3s ease; }
.catalog-v2 #discoveryPanel .mood-card::after { display: none; }
.catalog-v2 #discoveryPanel .mood-card .mood-icon { display: none; }
.catalog-v2 #discoveryPanel .mood-card .mood-copy { display: block; min-width: 0; }
.catalog-v2 #discoveryPanel .mood-card .mood-copy strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.005em; white-space: nowrap; }
.catalog-v2 #discoveryPanel .mood-card .mood-copy small { display: none; }
.catalog-v2 #discoveryPanel .mood-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--mood),.34);
  background:
    linear-gradient(135deg, rgba(var(--mood),.15), rgba(12,11,19,.4) 52%, rgba(12,11,19,.5));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 26px rgba(var(--mood),.08), 0 14px 32px rgba(0,0,0,.32), 0 0 20px rgba(var(--mood),.12);
}
.catalog-v2 #discoveryPanel .mood-card:hover::before { transform: scale(1.3); box-shadow: 0 0 10px 2px rgba(var(--mood),.55); }
.catalog-v2 #discoveryPanel .mood-card:active { transform: translateY(-1px) scale(.97); }
.catalog-v2 #discoveryPanel .mood-card[aria-pressed="true"] {
  border-color: rgba(var(--mood),.52);
  background:
    linear-gradient(135deg, rgba(var(--mood),.24), rgba(var(--mood),.08) 55%, rgba(10,9,17,.5));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 26px rgba(var(--mood),.12), 0 12px 30px rgba(0,0,0,.32), 0 0 22px rgba(var(--mood),.18);
  color: #fff;
}
.catalog-v2 #discoveryPanel .mood-card:focus-visible { outline: 2px solid rgba(var(--mood),.9); outline-offset: 3px; }

/* Raised further onto the hero. */
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero { padding-bottom: 168px; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods { margin-top: -152px; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods .discovery-top { margin-bottom: 12px; }
@media (max-width: 760px) {
  .catalog-v2 #discoveryPanel .mood-options { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 10px; }
  .catalog-v2 #discoveryPanel .mood-options::-webkit-scrollbar { display: none; }
  .catalog-v2 #discoveryPanel .mood-card { height: 42px; padding: 0 16px 0 14px; }
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .hero { padding-bottom: 132px; }
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods { margin-top: -120px; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-v2 #discoveryPanel .mood-card, .catalog-v2 #discoveryPanel .mood-card::before { transition: none; }
}
/* Accueil, final: the hero card stays centred (shared rule), the moods ride
   the lower part of the hero, centred, and the artwork darkens gradually
   under them instead of ending on an edge. */
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > #hero.hero { height: min(88vh, 820px); padding-bottom: 210px; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > #hero.hero .hero-shade {
  background:
    linear-gradient(90deg, rgba(9,10,15,.85) 0%, rgba(9,10,15,.45) 40%, rgba(9,10,15,0) 72%),
    linear-gradient(0deg, #0c0b13 0%, rgba(12,11,19,.94) 12%, rgba(12,11,19,.72) 24%, rgba(12,11,19,.38) 38%, rgba(12,11,19,.12) 50%, rgba(12,11,19,0) 62%);
}
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > .home-moods { margin-top: -206px; margin-bottom: 26px; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods #discoveryPanel .discovery-top { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 18px; text-align: center; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods .discovery-lead { flex: 0 0 auto; }
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods .mood-options { justify-content: center; }
@media (max-width: 760px) {
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > #hero.hero { height: auto; min-height: 82vh; padding-bottom: 176px; }
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > .home-moods { margin-top: -168px; }
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods .mood-options { justify-content: flex-start; }
}
/* The lead keeps a margin-right:auto from the shared sheet that pushed the
   «Surprise / Filters» buttons to the far edge; centred here as one group. */
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods #discoveryPanel .discovery-top > * { margin-left: 0; margin-right: 0; }

/* ===========================================================================
   One glass menu at every width. The top bar keeps the floating pill from
   1181px up whatever the pointer (it used to fall back to the old compact nav
   below 1440px), and the tablet / phone tab bar at the bottom wears the same
   glass with the same sliding pill. Item paddings stay with the width bands
   above (Н-13), only the surface changes here.
   ======================================================================== */
.catalog-v2 .main-nav {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(18,19,28,.62);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.catalog-v2 .main-nav-indicator {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.08);
  transition: transform .45s cubic-bezier(.3,1.3,.5,1), width .45s cubic-bezier(.3,1.3,.5,1);
}
.catalog-v2 .main-nav .nav-item { color: #a7a5b5; background: none; box-shadow: none; transition: color .25s; }
.catalog-v2 .main-nav .nav-item.active { color: #f7f5ff; background: none; box-shadow: none; }
.catalog-v2 .main-nav:not(:has(.main-nav-indicator:not([hidden]))) .nav-item.active { background: rgba(255,255,255,.1); }
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .main-nav .nav-item:hover { color: #f7f5ff; background: none; }
}
/* Top bar, 1181px and up: a full pill. */
@media (min-width: 1181px) {
  .catalog-v2 .main-nav { gap: 0; padding: 5px; border-radius: 999px; }
  .catalog-v2 .main-nav-indicator { top: 5px; bottom: 5px; height: auto; border-radius: 999px; }
  .catalog-v2 .main-nav .nav-item { border-radius: 999px; font-weight: 600; }
}
/* 1181–1439px: the prototype's text-only pill, so seven sections fit without
   the short labels running into the next icon. */
@media (min-width: 1181px) and (max-width: 1439px) {
  .catalog-v2 .main-nav .nav-item .ui-icon { display: none; }
  .catalog-v2 .main-nav .nav-item { padding: 8px 13px; }
}
/* Tablet and phone: the bottom tab bar as a floating glass pill. */
@media (max-width: 1180px), (max-width: 1400px) and (any-pointer: coarse) {
  .catalog-v2 .main-nav { padding: 6px; gap: 0; border-radius: 26px; background: rgba(18,19,28,.7); box-shadow: 0 16px 50px rgba(0,0,0,.5); }
  .catalog-v2 .main-nav-indicator { top: 6px; bottom: 6px; height: auto; border-radius: 20px; }
  .catalog-v2 .main-nav .nav-item { border-radius: 20px; font-weight: 600; }
  .catalog-v2 .main-nav .nav-item .ui-icon { display: block; opacity: .8; }
  .catalog-v2 .main-nav .nav-item.active .ui-icon { opacity: 1; }
  .catalog-v2 .topbar :is(.top-search-button, .party-mode-button, .ui-lang-trigger, .profile-button) { box-shadow: 0 8px 26px rgba(0,0,0,.3); }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-v2 .main-nav-indicator { transition: none; }
}

/* The hero grows with its copy instead of clipping it: on a short window
   (1280×800, iPad landscape) the centred card used to climb under the menu. */
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > #hero.hero {
  height: auto; max-height: none; min-height: min(88vh, 820px);
  padding-top: calc(env(safe-area-inset-top, 0px) + 100px);
}
@media (max-width: 760px) {
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > #hero.hero { min-height: 82vh; padding-top: calc(env(safe-area-inset-top, 0px) + 84px); }
}

/* One height for the whole top row: the nav pill, search, «À deux», the
   language globe and the profile all stand 46px tall (44px items inside the
   pill keep the touch floor; the lit pill sits 5px inside the edge). */
.catalog-v2 .topbar { --top-pill-h: 46px; }
@media (max-width: 680px) { .catalog-v2 .topbar { --top-pill-h: 44px; } }
.catalog-v2 .topbar :is(.top-search-button, .party-mode-button, .ui-lang-trigger, .profile-button) {
  height: var(--top-pill-h); min-height: var(--top-pill-h); box-sizing: border-box;
}
.catalog-v2 .topbar .top-search-button { width: var(--top-pill-h); min-width: var(--top-pill-h); display: grid; place-items: center; padding: 0; }
.catalog-v2 .topbar .profile-button .profile-avatar { width: 34px; height: 34px; }
@media (min-width: 1181px) {
  .catalog-v2 .main-nav { height: var(--top-pill-h); padding: 0 4px; box-sizing: border-box; align-items: center; }
  .catalog-v2 .main-nav .nav-item { height: 44px; min-height: 44px; }
  .catalog-v2 .main-nav-indicator { top: 4px; bottom: 4px; }
}
/* The same type on every pill: «À deux» was larger and heavier than the name
   and the language code beside it. */
.catalog-v2 .topbar :is(.party-mode-label, .profile-button-name) { font-size: 14px; font-weight: 600; letter-spacing: 0; }

/* Language switcher: Option 1 — Apple TV / MUBI style frosted glass */
.catalog-v2 .topbar .ui-lang-trigger {
  color: rgba(255, 255, 255, 0.75);
  padding: 0 13px 0 12px;
  gap: 7px;
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.catalog-v2 .topbar .ui-lang-trigger .ui-lang-globe {
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.75);
  transition: color .2s ease;
}
.catalog-v2 .topbar .ui-lang-trigger .ui-lang-code {
  font-family: var(--font-base, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  transition: color .2s ease;
}
.catalog-v2 .topbar .ui-lang-trigger .ui-lang-caret {
  display: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .topbar .ui-lang-trigger:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
  .catalog-v2 .topbar .ui-lang-trigger:hover .ui-lang-globe {
    color: #ffffff;
  }
  .catalog-v2 .topbar .ui-lang-trigger:hover .ui-lang-code {
    color: #ffffff;
  }
}
.catalog-v2 .topbar .ui-lang-trigger[aria-expanded="true"] {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.4);
}
.catalog-v2 .topbar .ui-lang-trigger[aria-expanded="true"] .ui-lang-globe {
  color: #ffffff;
}
.catalog-v2 .topbar .ui-lang-trigger[aria-expanded="true"] .ui-lang-code {
  color: #ffffff;
}

/* Frosted glass language dropdown menu */
.catalog-v2 .ui-lang-menu {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(16, 17, 26, 0.78);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 6px;
}
.catalog-v2 .ui-lang-item {
  height: 38px;
  border-radius: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  transition: color .15s ease, background .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .ui-lang-item:hover,
  .catalog-v2 .ui-lang-item.focused {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
  }
}
.catalog-v2 .ui-lang-item[aria-selected="true"] {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 700;
}
.catalog-v2 .ui-lang-item-code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  transition: color .15s ease;
}
.catalog-v2 .ui-lang-item:hover .ui-lang-item-code,
.catalog-v2 .ui-lang-item.focused .ui-lang-item-code,
.catalog-v2 .ui-lang-item[aria-selected="true"] .ui-lang-item-code {
  color: rgba(255, 255, 255, 0.85);
}
.catalog-v2 .ui-lang-check {
  stroke: rgba(255, 255, 255, 0.9);
}

/* Watch-party ("À deux") pill: frosted glass matching the lang trigger */
.catalog-v2 .topbar .party-mode-button {
  color: rgba(255, 255, 255, 0.75);
  padding: 0 14px 0 12px;
  gap: 7px;
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.catalog-v2 .topbar .party-mode-button .ui-icon {
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.75);
  transition: color .2s ease;
}
.catalog-v2 .topbar .party-mode-button .party-mode-label {
  font-family: var(--font-base, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.85);
  transition: color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .topbar .party-mode-button:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
  .catalog-v2 .topbar .party-mode-button:hover .ui-icon {
    color: #ffffff;
  }
  .catalog-v2 .topbar .party-mode-button:hover .party-mode-label {
    color: #ffffff;
  }
}
.catalog-v2 .topbar .party-mode-button:active {
  transform: scale(0.98);
}
.catalog-v2 .topbar .party-mode-button.active,
.catalog-v2 .topbar .party-mode-button[aria-pressed="true"] {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.4);
}
.catalog-v2 .topbar .party-mode-button.active .ui-icon,
.catalog-v2 .topbar .party-mode-button.active .party-mode-label,
.catalog-v2 .topbar .party-mode-button[aria-pressed="true"] .ui-icon,
.catalog-v2 .topbar .party-mode-button[aria-pressed="true"] .party-mode-label {
  color: #ffffff;
}
.catalog-v2 .topbar .party-mode-button.is-holding {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
}

/* Icon-only pills are squares, like the search button. */
@media (min-width: 1181px) and (max-width: 1439px), (max-width: 680px) {
  .catalog-v2 .topbar :is(.party-mode-button, .profile-button) { width: var(--top-pill-h); min-width: var(--top-pill-h); padding: 0; justify-content: center; }
}
/* Final proportions: the hero card is centred with clear room above the mood
   picker (≥80px on a 900px window, catalog-next-scope-browser.test.mjs), the
   picker keeps the lower band of the artwork. */
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > #hero.hero {
  min-height: min(92vh, 860px);
  padding-top: calc(env(safe-area-inset-top, 0px) + 88px);
  padding-bottom: 204px;
}
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > .home-moods { margin-top: -200px; }
@media (max-width: 760px) {
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > #hero.hero { min-height: 82vh; padding-top: calc(env(safe-area-inset-top, 0px) + 80px); padding-bottom: 176px; }
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > .home-moods { margin-top: -168px; }
}

/* ---------------------------------------------------------------------------
   Composition: one gutter, one card size, one row rhythm.
   --------------------------------------------------------------------------- */
/* The hero copy, the mood picker, the rails, the grids, the board and the
   library all start on the same vertical line: `--gutter`, the variable the
   topbar and the content shell already use. The hero and the picker used a 5vw
   scale instead, which is 64px at 1440 while the rails below them start at
   57.6px, so the two most prominent blocks of the page were 6.4px out of line
   with everything else (and the offset changed with the window width). */
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > #hero.hero,
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > .home-moods {
  padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
}
/* Every view that wears the hero reserves the same room under it. The home page
   used 8px and the category tabs 28px, so the mood picker — and the whole
   catalog below it — sat 20px higher on the home screen than on films. */
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > #hero.hero { margin-bottom: 28px; }

/* Grids wear the rail's card size. The rails are the reference the tabs were
   asked to match, so a poster is ~205px wide in a collection, in the library
   and in a rail — instead of 174px in a grid and 202px in a rail. Phones keep
   their fixed 4/3/2-column grids. */
@media (min-width: 1101px) {
  .catalog-v2 .poster-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* Rows below the fold were reserved at 340px while a real poster row measures
   ~430px, so the first scroll through the catalog grew row after row and the
   content slid down under the pointer. */
.catalog-v2 .catalog-row { contain-intrinsic-size: auto 430px; }

/* ---------------------------------------------------------------------------
   Composition pass 2: the billboard stops eating the page.
   --------------------------------------------------------------------------- */
/* On a 900px window the hero was 828px tall, so the first screen showed the
   artwork and a rail title and not one poster. The lockup (kicker, 140px logo
   slot, meta, two description lines, buttons) measures ~408px, so the hero can
   be shortened to ~660px without the copy sliding under the fixed bar — that
   returns ~130px of the catalog to the first screen. The picker keeps the lower
   band of the artwork and now stays inside it. */
@media (min-width: 761px) {
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > #hero.hero {
    height: clamp(656px, 73vh, 704px);
    min-height: clamp(656px, 73vh, 704px);
    padding-bottom: 156px;
  }
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > .home-moods { margin-top: -158px; }
}
/* The picker stays centred — title row and chips together — although the hero
   lockup above it starts on the gutter: it is its own block riding the lower
   band of the artwork, and left-aligning it (as this pass first did) left the
   title, the two buttons and the chips hugging the gutter with the rest of the
   band empty. The container keeps the shared gutter, so the block is centred
   in the page, not in a shifted box. Phones keep the left-aligned scroll
   strip: the `max-width: 760px` rule further up outranks the centred rule by
   source order. */
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > .home-moods { margin-bottom: 8px; }

/* An open collection or the collections board is the page the reader asked
   for: the billboard and the chips step aside and the grid starts under the
   fixed bar instead of below an 828px hero. `main:has(> .hero)` is repeated on
   purpose — the hero node stays in the DOM (hidden), and that rule is more
   specific, so without it the inset lost and the back button landed under the
   bar. 112px clears the 80px bar by a whole button height. */
body.catalog-v2:has(.disney-collection-page) main > #hero.hero,
body.catalog-v2:has(.disney-collections-row.is-board) main > #hero.hero,
body.catalog-v2:has(.disney-collection-page) main > .home-moods,
body.catalog-v2:has(.disney-collections-row.is-board) main > .home-moods { display: none; }
body.catalog-v2:has(.disney-collection-page) main:has(> .hero),
body.catalog-v2:has(.disney-collections-row.is-board) main:has(> .hero),
body.catalog-v2:has(.disney-collection-page) main,
body.catalog-v2:has(.disney-collections-row.is-board) main { padding-top: calc(112px + env(safe-area-inset-top, 0px)); }
body.catalog-v2 .row-head-actions .disney-back { margin: 0; }
body.catalog-v2[data-view="library"] main { padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
/* Inside a collection the long titles reserve two lines like the library rows
   (a 60-character title opened a ragged grid row) and the saved/to-watch pills
   keep their band, so the row of cards has one baseline instead of a hole. */
body.catalog-v2:has(.disney-collection-page) .poster-grid .card-title { min-height: 2.8em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
body.catalog-v2:has(.disney-collection-page) .poster-grid .card-library-badges { min-height: 22px; }

/* The top-10 row keeps its rank numerals. Six whole posters fit at 1440 and
   eight at 1920 with the rail's own 205px column, so the row no longer grows a
   283px card that the rows under it do not have. At 158px the stroke numeral
   was cut by the fold and printed over the poster wordmark; at 88px it reads as
   a rank badge in the card's lower-left corner. */
.catalog-v2 .ranked-row .poster-rail { grid-auto-columns: clamp(150px, 14vw, 205px); }
.catalog-v2 .ranked-row .rank-number { font-size: clamp(64px, 6.2vw, 88px); bottom: 84px; left: -8px; -webkit-text-stroke-width: 1.5px; }
/* The end fade covers the sliver of the next card instead of cutting it. 36px
   is the width of a peek, not of a whole card, so the last full card stays
   readable. */
.catalog-v2 .poster-rail.rail-fade-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%); }
.catalog-v2 .poster-rail.rail-fade-start.rail-fade-end { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 36px), transparent 100%); }

/* The collection tiles are sized by the column count they are meant to show:
   three per view at 1440 and four at 1920, each 16px short of a full column so
   the next tile shows a deliberate 30-40px edge instead of a 200px half card
   whose title was clipped by the fade. */
.disney-collections-row.is-rail .disney-collection { flex: 0 0 calc((100% - 2 * 14px) / 3 - 16px); max-width: none; }
.disney-collections-row.is-rail .rail-next { right: 6px; }
@media (min-width: 1601px) {
  .disney-collections-row.is-rail .disney-collection { flex: 0 0 calc((100% - 3 * 14px) / 4 - 16px); }
}

/* «Toutes les sélections»: a group with a single tile implied the missing cards
   of an auto-fill grid, and the search field was capped at 440px with the two
   ghost buttons pushed to the far edge, leaving a hole in the toolbar. */
.collection-board-group:has(.disney-collection:only-child) .disney-collections { grid-template-columns: minmax(0, 364px); }
.collection-search-wrap { flex: 1 1 260px; max-width: 720px; }
.collection-random-board { margin-left: 0; }

/* Médiathèque: titles reserve their two lines so the badges of a row sit on one
   line, the status pills wrap instead of being cut mid-token, and the next
   section no longer starts 24px under the badges. */
.catalog-v2 .library-section .card-title { min-height: 2.8em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.catalog-v2 .card-status { flex-wrap: wrap; overflow: visible; row-gap: 4px; }
.catalog-v2 .library-section + .library-section { margin-top: 40px; }

/* Title sheet: at 900px the cast names fell past the sheet's bottom edge —
   the rings were on screen and the credits were not. */
.catalog-v2 .title-redesign .details-layout { padding-top: 56px; }
.catalog-v2 .title-redesign .details-cast { padding: 28px 44px 20px; }
.catalog-v2 .details-card { max-height: calc(100dvh - 32px); }

/* «Toutes les sélections»: the eight long French group chips wrapped 7 + 1 at
   1440, so the toolbar grew to 168px and the last group sat alone on its own
   row. Four equal columns per row balance them 4 + 4 with every group still
   visible; between 561 and 1100px the row scrolls sideways instead of stacking. */
@media (min-width: 1101px) and (max-width: 1700px) {
  .catalog-v2 .collection-group-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .catalog-v2 .collection-group-tab { justify-content: center; }
}
@media (min-width: 561px) and (max-width: 1100px) {
  .catalog-v2 .collection-group-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .catalog-v2 .collection-group-tabs::-webkit-scrollbar { display: none; }
  .catalog-v2 .collection-group-tab { flex: 0 0 auto; }
}

/* The «En cours» rail on the Médiathèque page is a bare rail: it has no
   rail-shell and never got the fade classes, so the sixth poster was cut at the
   right edge with its title. The mask is static, and over empty space it fades
   nothing. */
body.catalog-v2[data-view="library"] .library-section .poster-rail {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%);
}

/* The collection tiles are the densest type on the page: the subtitle died on
   two-letter widows at 12.5px and the count pill was the dimmest text on the
   board. */
.catalog-v2 .disney-collection-subtitle { font-size: 13px; line-height: 1.35; }
.catalog-v2 .disney-collection-meta { color: #cfcbe0; }

/* ==========================================================================
   Display face, part two.

   The hero title and the top-10 digit are re-declared in this sheet with a
   specificity the catalog sheet cannot reach, so their Unbounded sizes have
   to be restated at this level as well. The reasoning - Unbounded is ~1.29x
   wider than Inter, so a fixed box scales by the same ratio - is in
   web/catalog/styles.css.
   ========================================================================== */

body.catalog-v2[data-view="home"] .hero #heroTitle { font-size: clamp(30px, 4.2vw, 53px); }

.catalog-v2 .ranked-row .rank-number {
  font-size: clamp(51px, 5vw, 70px);
  -webkit-text-stroke-width: 1.2px;
}

/* ==========================================================================
   Rails, part two: the redesigned edges.

   The top-10 row (and every other poster rail) gets floating glass ‹ ›
   buttons, a wider melt at both ends, a hairline scroll progress and the rank
   digits re-cut as glass and tucked under the poster. The state (ends, fades,
   progress fill, `is-scrollable`) lives in catalog-next/src/rail.js; this
   sheet only paints it. The wheel is intentionally not translated into rail
   motion: it always scrolls the page (owner decision). The mask is the lead-in
   for the button: the last card melts out over 76px so the cut reads as
   "there is more", not as a slice.
   ========================================================================== */

.catalog-v2 .rail-shell { --rail-fade: 76px; --rail-fade-soft: 18px; }
.catalog-v2 :is(.poster-rail, .disney-collections).rail-fade-start {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.14) 0, rgba(0,0,0,.58) var(--rail-fade-soft), #000 var(--rail-fade));
  mask-image: linear-gradient(90deg, rgba(0,0,0,.14) 0, rgba(0,0,0,.58) var(--rail-fade-soft), #000 var(--rail-fade));
}
.catalog-v2 :is(.poster-rail, .disney-collections).rail-fade-end {
  -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,.14) 0, rgba(0,0,0,.58) var(--rail-fade-soft), #000 var(--rail-fade));
  mask-image: linear-gradient(270deg, rgba(0,0,0,.14) 0, rgba(0,0,0,.58) var(--rail-fade-soft), #000 var(--rail-fade));
}
.catalog-v2 :is(.poster-rail, .disney-collections).rail-fade-start.rail-fade-end {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.14) 0, rgba(0,0,0,.58) var(--rail-fade-soft), #000 var(--rail-fade), #000 calc(100% - var(--rail-fade)), rgba(0,0,0,.58) calc(100% - var(--rail-fade-soft)), rgba(0,0,0,.14) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.14) 0, rgba(0,0,0,.58) var(--rail-fade-soft), #000 var(--rail-fade), #000 calc(100% - var(--rail-fade)), rgba(0,0,0,.58) calc(100% - var(--rail-fade-soft)), rgba(0,0,0,.14) 100%);
}

/* Horizontal only: with overflow-x:auto the vertical axis computes to auto
   too, and a few pixels of hidden vertical overflow (badges/edge shadows) let
   the browser spend one wheel notch on the rail's own scrollTop before the
   page moved. The owner's "колесо дёргает вниз-вверх" came from exactly that,
   so the vertical axis is closed for good; nothing was ever reachable there. */
.catalog-v2 .poster-rail,
.catalog-v2 .disney-collections-row.is-rail .disney-collections { overflow-y: hidden; }

/* The classic arrows were full-height gradient strips; now they are a floating
   glass disc with a violet rim light, a blurred backdrop so posters show
   through, and a chevron that leans into the scroll direction on hover. */
.catalog-v2 .rail-control {
  position: absolute; z-index: 6; top: 42%; bottom: auto; width: 54px; height: 54px; margin-top: -27px;
  display: none; place-items: center; padding: 0;
  border: 1px solid rgba(233,213,255,.17); border-radius: 50%;
  color: #f4f0ff;
  background:
    radial-gradient(120% 120% at 32% 16%, rgba(167,139,250,.3), rgba(167,139,250,0) 56%),
    linear-gradient(160deg, rgba(29,26,46,.84), rgba(10,10,18,.72));
  -webkit-backdrop-filter: blur(16px) saturate(1.45);
  backdrop-filter: blur(16px) saturate(1.45);
  box-shadow: 0 16px 38px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -10px 22px rgba(8,6,18,.4);
  cursor: pointer;
  opacity: 0; transform: scale(.94);
  transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .25s ease;
}
.catalog-v2 .rail-prev { left: 14px; }
.catalog-v2 .rail-next { right: 14px; }
/* The 42% default sits on the poster, not on the shell: the rail also carries
   the card titles under it, and a 50% centre dropped the disc onto the second
   title line. The top-10 row's posters are narrower (the rank padding steals
   width), so its centre is higher; the collection tiles are shorter, so theirs
   is a touch lower. */
.catalog-v2 .ranked-row .rail-control { top: 38%; }
.catalog-v2 .disney-collections-row.is-rail .rail-control { top: 53%; }
.catalog-v2 .rail-control[hidden] { display: none; }
.catalog-v2 .rail-control:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.catalog-v2 .rail-chevron {
  width: 22px; height: 22px; display: block; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.catalog-v2 .rail-prev .rail-chevron { transform: translateX(-1px); }
@media (hover: hover) and (min-width: 981px) {
  .catalog-v2 .rail-control:not([hidden]) { display: grid; opacity: .58; }
  .catalog-v2 .catalog-row:hover .rail-control,
  .catalog-v2 .catalog-row:focus-within .rail-control,
  .catalog-v2 .rail-control:focus-visible { opacity: 1; transform: scale(1); }
  .catalog-v2 .rail-control:not([hidden]):hover {
    border-color: rgba(196,181,253,.52);
    box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(196,181,253,.2), 0 0 34px rgba(139,92,246,.45), inset 0 1px 0 rgba(255,255,255,.22);
    transform: scale(1.06);
  }
  .catalog-v2 .rail-control:active { transform: scale(.94); }
  .catalog-v2 .rail-prev:not([hidden]):hover .rail-chevron { transform: translateX(-3px); }
  .catalog-v2 .rail-next:not([hidden]):hover .rail-chevron { transform: translateX(3px); }
}

/* A hairline progress under the rail: the thumb is filled by rail.js from the
   scroll position, and the line only shows while the row is hovered/focused
   (nine permanent lines under nine rows would be noise). */
.catalog-v2 .rail-progress {
  position: absolute; z-index: 5; left: 2px; right: 2px; bottom: 1px; height: 2px;
  border-radius: 999px; background: rgba(255,255,255,.07);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.catalog-v2 .rail-progress-thumb {
  display: block; height: 100%; width: 30%; border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #d946ef 65%, #f472b6);
  box-shadow: 0 0 10px rgba(217,70,239,.45);
}
@media (hover: hover) and (min-width: 981px) {
  .catalog-v2 .catalog-row:hover .rail-shell.is-scrollable .rail-progress,
  .catalog-v2 .catalog-row:focus-within .rail-shell.is-scrollable .rail-progress { opacity: .85; }
}

/* Top-10 digits: the outlined watermark becomes a glass numeral — a lavender
   to violet gradient inside a one-pixel rim, with the poster's glow coming up
   on hover. The digit is anchored by its RIGHT edge against the poster's left
   edge with a 12px peek underneath: the poster slightly covers the numeral, as
   the owner asked, and the overlap is the same for "1" and for the wider "10"
   (left-anchoring made the two-digit card swallow half the number). */
.catalog-v2 .ranked-row .rank-number {
  font-family: var(--font-display);
  font-size: clamp(50px, 5.2vw, 78px);
  line-height: .8;
  letter-spacing: -.08em;
  color: transparent;
  background-image:
    radial-gradient(120% 90% at 30% 4%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%),
    linear-gradient(168deg, rgba(243,232,255,.92) 0%, rgba(196,181,253,.64) 34%, rgba(139,92,246,.36) 68%, rgba(76,29,149,.07) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1.1px rgba(240,232,255,.5);
  paint-order: stroke;
  text-shadow: none;
  filter: drop-shadow(0 16px 32px rgba(124,58,237,.3));
  transition: filter .4s ease;
}
.catalog-v2 .ranked-row .rank-number {
  left: auto;
  right: calc(100% - clamp(46px, 5vw, 66px) - 12px);
}
.catalog-v2 .ranked-row .media-card:nth-child(10) .rank-number {
  right: calc(100% - clamp(70px, 7.5vw, 100px) - 12px);
}
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .ranked-row .media-card:hover .rank-number { filter: drop-shadow(0 18px 40px rgba(168,85,247,.55)) brightness(1.14); }
}

/* The quick ▶ on a ranked card follows the poster, not the card: with
   left:10px it landed in the rank gutter, over the numeral, and the owner
   reported "кнопка плей на постере должна появляться". The poster starts at
   the card's rank padding, so the button starts 10px inside that. */
.catalog-v2 .ranked-row .media-card > .card-quick { left: calc(clamp(46px, 5vw, 66px) + 10px); }
.catalog-v2 .ranked-row .media-card:nth-child(10) > .card-quick { left: calc(clamp(70px, 7.5vw, 100px) + 10px); }

/* A soft violet spotlight under the hovered poster, so the top-10 row answers
   the pointer the way the title sheet does. It rides the poster's box-shadow
   (the card already animates that property) instead of a pseudo-element:
   a ::before would either paint over the poster or re-anchor the absolutely
   positioned rank digit. */
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .ranked-row .media-card:hover .poster-wrap {
    box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 24px 56px rgba(0,0,0,.55), 0 18px 60px rgba(124,58,237,.42), 0 0 96px rgba(168,85,247,.28);
  }
}

/* On phones the rail is swiped, not hovered: the arrows already disappear, and
   the melt shrinks so a 148px card is not half faded. */
@media (max-width: 980px) {
  .catalog-v2 .rail-shell { --rail-fade: 54px; --rail-fade-soft: 14px; }
}
@media (max-width: 680px) {
  .catalog-v2 .rail-shell { --rail-fade: 42px; --rail-fade-soft: 12px; }
  .catalog-v2 .ranked-row .rank-number { font-size: 52px; bottom: 50px; -webkit-text-stroke-width: .8px; right: calc(100% - 42px - 12px); }
  .catalog-v2 .ranked-row .media-card:nth-child(10) .rank-number { right: calc(100% - 64px - 12px); }
  .catalog-v2 .ranked-row .media-card > .card-quick { left: 52px; }
  .catalog-v2 .ranked-row .media-card:nth-child(10) > .card-quick { left: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-v2 .rail-control,
  .catalog-v2 .rail-progress,
  .catalog-v2 .ranked-row .rank-number,
  .catalog-v2 .rail-chevron { transition: none; }
}

/* ==========================================================================
   Composition pass: a more compact home, with the artwork going lower.

   First pass (owner: «что думаешь? чтобы компактнее было, стоит?») pulled the
   copy, the picker and the rows together. Second pass (owner: «фото героя
   чтобы заходило под кнопки... опустить до куда отрисовывается фото»)
   keeps those compact positions but lets the billboard paint lower, behind
   the picker buttons, so the artwork gets a much bigger display area:
     hero box   605 -> 680px, while the copy is held exactly where the compact
                pass put it (padding-bottom 159 against the same 441px content
                band), so the dots stay at ~509, the picker at 530..666 and the
                rows at 688..1050 — the fold gain is untouched, but the photo
                now reaches under the mood label and the chips instead of
                fading out above them;
     shade      the old ramp went near-opaque from 12% of the bottom up, so the
                photo visibly «ended» above the buttons; the new bottom ramp
                stays transparent until the last ~36% and only fades into the
                page colour in the final ~245px (left-edge text contrast still
                comes from the horizontal scrim);
     picker     margin-top -150 pins it at 530..666 exactly as before; the
                label gets a soft text-shadow for the slides whose artwork is
                bright behind it.
   Everything is scoped to >=761px: phones keep their own hero/picker rules. */
@media (min-width: 761px) {
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > #hero.hero {
    height: 680px;
    min-height: 680px;
    padding-bottom: 159px;
    margin-bottom: 0;
  }
  /* Let the billboard stay visible under the picker: transparent until 36%
     above the bottom edge, then a short fade into the page colour. */
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > #hero.hero .hero-shade {
    background:
      linear-gradient(90deg, rgba(9,10,15,.88) 0%, rgba(9,10,15,.5) 38%, rgba(9,10,15,0) 72%),
      linear-gradient(0deg, #0c0b13 0%, rgba(12,11,19,.82) 4%, rgba(12,11,19,.45) 10%, rgba(12,11,19,.18) 18%, rgba(12,11,19,.05) 26%, rgba(12,11,19,0) 36%);
  }
  /* The picker rides the lower band of the artwork; -150px leaves 22px under
     the hero progress dots and -12px closes the gap before the rows. */
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > .home-moods {
    margin-top: -150px;
    margin-bottom: -12px;
  }
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) main > .home-moods .discovery-top { margin-bottom: 8px; }
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods .discovery-lead strong { text-shadow: 0 2px 10px rgba(0,0,0,.65); }
  .catalog-v2 .catalog-rows { gap: 26px; }
  .catalog-v2 .row-title { margin-bottom: 12px; }
}

/* The owner read the hairline progress under the rails as a scrollbar
   ("Top 10 du moment убрать полосу прокрутки"), so it is no longer painted.
   The element stays in the DOM — rail.js keeps filling its thumb for free —
   but every rail now relies on the glass arrows and the edge wipe alone. */
.catalog-v2 .rail-progress { display: none; }
/* Belt and braces: no native scrollbar may flash on the rails either (OS
   overlay bars, trackpad momentum, browsers that ignore one of the two
   earlier rules). Horizontal-only orientation still comes from rail.js. */
.catalog-v2 .poster-rail,
.catalog-v2 .disney-collections-row.is-rail .disney-collections {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.catalog-v2 .poster-rail::-webkit-scrollbar,
.catalog-v2 .disney-collections-row.is-rail .disney-collections::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ==========================================================================
   Title sheet, part three: the centred hero, the compact rating and the cast
   cards.

   The owner asked for a wider sheet, a centred wordmark, the square score
   tiles kept, a rating control that is compact until it is hovered, and the
   cast turned into part of the design. The sheet is now 1280 wide; the
   heading is its own full-width band (TitleDetails renders it as the first
   child of .details-layout) with the wordmark, the facts line and the score
   tiles centred over the backdrop; the poster and the copy sit in the body
   row under it, and the cast is a grid of glass cards. The wheel still
   scrolls the sheet, its platform scrollbar stays hidden (see above).
   ========================================================================== */

.catalog-v2 .title-redesign { width: min(1280px, 100%); }
.catalog-v2 .title-redesign .details-card {
  width: 100%;
  border-radius: 30px;
  border-color: rgba(203,177,236,.16);
  box-shadow: 0 50px 140px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.03);
}
/* The wordmark hides the text title only while a logo is shown; that rule used
   to be keyed to `.details-copy h2.has-logo`, and the heading now lives in its
   own band. */
.catalog-v2 .title-redesign .details-title-slot h2.has-logo { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Centred backdrop: a violet glow at the top, the bottom melts into the sheet
   so the poster and the copy below never meet a hard edge. */
.catalog-v2 .title-redesign .details-backdrop { height: 470px; }
.catalog-v2 .title-redesign .details-backdrop::after {
  background:
    linear-gradient(0deg, #0c0b13 0%, rgba(12,11,19,.97) 10%, rgba(12,11,19,.72) 32%, rgba(12,11,19,.26) 60%, rgba(12,11,19,.45) 100%),
    radial-gradient(100% 84% at 50% 36%, rgba(12,11,19,.74), transparent 82%),
    radial-gradient(90% 70% at 50% 0%, rgba(139,92,246,.22), transparent 62%);
}

/* ---- the band and the two body columns (tablet / phone defaults) ---------- */
.catalog-v2 .title-redesign .details-layout {
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 30px; row-gap: 0;
  align-items: start;
  padding: 0 30px 34px;
}
.catalog-v2 .title-redesign .details-heading {
  grid-column: 1 / -1; grid-row: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 34px 0 26px;
}
.catalog-v2 .title-redesign .details-heading > .eyebrow { margin: 0 0 18px; }
.catalog-v2 .title-redesign .details-title-slot { width: 100%; margin: 0; min-height: 0; justify-content: center; align-items: center; }
.catalog-v2 .title-redesign .details-logo { margin: 0 auto; max-width: min(560px, 86%); max-height: 140px; object-position: center bottom; }
.catalog-v2 .title-redesign .details-title-slot h2 { margin: 0 auto; text-align: center; }
.catalog-v2 .title-redesign .anime-original { text-align: center; margin: 10px auto 0; text-shadow: 0 2px 14px rgba(0,0,0,.85); }
/* Snapshot of the facts, then the ratings: the ratings are the lockup's last
   line, the personal tile continues that line as a compact pill. */
.catalog-v2 .title-redesign .details-score-line { flex-direction: column-reverse; align-items: center; margin-top: 14px; gap: 10px; }
.catalog-v2 .title-redesign .details-meta { justify-content: center; margin: 0; color: #f3effb; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 2px 16px rgba(0,0,0,.8); }
.catalog-v2 .title-redesign .details-scores { justify-content: center; }
.catalog-v2 .title-redesign .details-poster-wrap { grid-column: 1; grid-row: 2; }
.catalog-v2 .title-redesign .details-poster-wrap .details-poster {
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1), 0 0 70px rgba(139,92,246,.16);
}
.catalog-v2 .title-redesign .details-copy { grid-column: 2; grid-row: 2; padding-top: 20px; }
.catalog-v2 .title-redesign .details-personal { grid-column: 2; grid-row: 3; margin-top: 22px; }
.catalog-v2 .title-redesign .details-actions { margin-top: 26px; }

/* ---- cast: a grid of glass cards instead of free-floating rings ---------- */
.catalog-v2 .title-redesign .details-cast { padding: 6px 30px 24px; }
.catalog-v2 .title-redesign .details-section-title {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 16px;
  font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #c9b8e6;
}
.catalog-v2 .title-redesign .details-section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(167,139,250,.35), rgba(167,139,250,0)); }
.catalog-v2 .title-redesign .cast-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; overflow: visible; padding: 0; }
.catalog-v2 .title-redesign .cast-person { flex: none; min-width: 0; }
.catalog-v2 .title-redesign .cast-person-link {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px; align-content: center;
  width: 100%; height: 100%; min-height: 76px;
  padding: 9px 12px 9px 9px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(145deg, rgba(32,28,46,.62), rgba(17,16,26,.5));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  text-align: left;
  transition: transform .3s cubic-bezier(.3,1.4,.5,1), border-color .25s, box-shadow .3s, background .25s;
}
.catalog-v2 .title-redesign .cast-avatar {
  grid-row: 1 / span 2;
  width: 54px; height: 54px;
  border-radius: 13px; border: 0;
  box-shadow: 0 0 0 1px rgba(167,139,250,.42), 0 8px 20px rgba(0,0,0,.45);
  font-size: 16px;
  transition: box-shadow .3s;
}
.catalog-v2 .title-redesign .cast-name {
  grid-column: 2; grid-row: 1;
  margin: 0;
  font-size: 12.5px; font-weight: 700; line-height: 1.2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.catalog-v2 .title-redesign .cast-role {
  grid-column: 2; grid-row: 2;
  margin: 3px 0 0;
  font-size: 11.5px; color: #8f8ba3; line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .catalog-v2 .title-redesign .cast-person-link:hover {
    transform: translateY(-3px);
    border-color: rgba(167,139,250,.45);
    background: linear-gradient(145deg, rgba(46,38,68,.72), rgba(22,20,34,.6));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.5), 0 0 26px rgba(139,92,246,.25);
  }
  .catalog-v2 .title-redesign .cast-person-link:hover .cast-avatar { box-shadow: 0 0 0 1px rgba(196,167,240,.75), 0 12px 30px rgba(139,92,246,.4); }
}

/* ---- desktop: the wide sheet, the poster tucked into the art, the rating
   pill last in the ratings lockup; hovering it drops the star picker -------- */
@media (min-width: 1101px) {
  .catalog-v2 .title-redesign .details-layout { grid-template-columns: 296px minmax(0, 1fr); column-gap: 52px; padding: 0 52px 46px; }
  .catalog-v2 .title-redesign .details-heading { padding: 40px 0 30px; }
  .catalog-v2 .title-redesign .details-heading > .eyebrow { margin: 0 0 22px; }
  .catalog-v2 .title-redesign .details-logo { max-width: min(700px, 84%); max-height: 168px; }
  .catalog-v2 .title-redesign .details-score-line { margin-top: 16px; gap: 12px; }
  .catalog-v2 .title-redesign .details-personal { grid-column: 1 / -1; grid-row: 2; justify-self: center; position: relative; z-index: 6; margin: -12px 0 0; }
  .catalog-v2 .title-redesign .details-poster-wrap { grid-column: 1; grid-row: 3; width: 100%; margin-top: -46px; z-index: 3; }
  .catalog-v2 .title-redesign .details-poster-wrap .details-poster { border-radius: 20px; box-shadow: 0 30px 70px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1), 0 0 0 6px rgba(12,11,19,.5); }
  .catalog-v2 .title-redesign .details-copy { grid-column: 2; grid-row: 3; display: block; padding-top: 30px; }
  .catalog-v2 .title-redesign .details-synopsis { margin: 0; max-width: 680px; font-size: 15px; line-height: 1.72; color: #d8d4e6; }
  .catalog-v2 .title-redesign .details-credits { margin: 24px 0 0; }
  .catalog-v2 .title-redesign .genre-list { margin: 18px 0 0; }
  .catalog-v2 .title-redesign .details-actions { margin-top: 28px; }
  .catalog-v2 .title-redesign .preparation-detail { margin: 20px 0 0; }
  .catalog-v2 .title-redesign .details-backdrop { height: 640px; }
  .catalog-v2 .title-redesign .details-cast { padding: 8px 52px 26px; }
  .catalog-v2 .title-redesign .cast-rail { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
  .catalog-v2 .title-redesign .cast-person-link { grid-template-columns: 62px minmax(0,1fr); min-height: 84px; padding: 11px 14px 11px 11px; border-radius: 16px; column-gap: 14px; }
  .catalog-v2 .title-redesign .cast-avatar { width: 62px; height: 62px; border-radius: 14px; }
}

/* ---- desktop with a mouse: the personal rating is a compact pill in the
   ratings lockup; hovering (or keyboard focus) drops the star picker.
   Touch devices keep the expanded rating card so it stays usable. ---------- */
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  /* The compact personal rating: one glass pill in the ratings lockup. */
  .catalog-v2 .title-redesign #personalRating.personal-rating {
    display: block; width: auto; max-width: none; min-width: 0;
    padding: 0; border-radius: 14px;
    border: 1px solid rgba(203,177,236,.26);
    background: rgba(18,19,28,.7);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 10px 26px rgba(0,0,0,.35);
    transition: border-color .25s, box-shadow .25s;
  }
  .catalog-v2 .title-redesign #personalRating:hover,
  .catalog-v2 .title-redesign #personalRating:focus-within {
    border-color: rgba(203,177,236,.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 32px rgba(0,0,0,.45), 0 0 24px rgba(139,92,246,.3);
  }
  .catalog-v2 .title-redesign .personal-rating-head { display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 12px; }
  .catalog-v2 .title-redesign .personal-rating-head::before {
    content: ""; width: 17px; height: 17px; flex: none; background: #fbbf24;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.1 6.7.9-4.9 4.6 1.2 6.6L12 17l-5.9 3.2 1.2-6.6L2.4 9l6.7-.9z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.1 6.7.9-4.9 4.6 1.2 6.6L12 17l-5.9 3.2 1.2-6.6L2.4 9l6.7-.9z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .catalog-v2 .title-redesign .personal-rating-title { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #c7badf; }
  .catalog-v2 .title-redesign .personal-rating-value { margin-left: auto; gap: 3px; }
  .catalog-v2 .title-redesign .personal-rating-number { font-size: 17px; color: #fbbf24; }
  .catalog-v2 .title-redesign .personal-rating-scale { font-size: 11px; }
  .catalog-v2 .title-redesign .personal-rating-remove { width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.06); color: #a7a5b5; font-size: 13px; text-decoration: none; }
  /* The picker is a floating panel: the pill keeps its size, so nothing below
     it moves when the pointer lands on the rating. It is only transparent, not
     hidden, so Tab still reaches the stars and `:focus-within` opens it for
     the keyboard. */
  .catalog-v2 .title-redesign .personal-rating-controls,
  .catalog-v2 .title-redesign .personal-rating-footer {
    position: absolute; left: 50%; z-index: 7;
    transform: translateX(-50%) translateY(-6px);
    pointer-events: none; opacity: 0;
    transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .catalog-v2 .title-redesign .personal-rating-controls {
    top: calc(100% + 10px); width: 300px; padding: 14px 16px 12px;
    border-radius: 16px;
    border: 1px solid rgba(203,177,236,.28);
    background: linear-gradient(160deg, #201c2e, #14121f);
    box-shadow: 0 24px 60px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .catalog-v2 .title-redesign .personal-rating-controls::before {
    content: ""; position: absolute; top: -6px; left: 50%;
    width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
    background: #1f1b2c; border-left: 1px solid rgba(203,177,236,.28); border-top: 1px solid rgba(203,177,236,.28);
  }
  .catalog-v2 .title-redesign .personal-rating-footer { top: calc(100% + 86px); width: 300px; min-height: 0; padding: 8px 6px 0; justify-content: center; }
  .catalog-v2 .title-redesign .personal-rating-status { text-align: center; font-size: 11px; }
  .catalog-v2 .title-redesign #personalRating:hover .personal-rating-controls,
  .catalog-v2 .title-redesign #personalRating:focus-within .personal-rating-controls,
  .catalog-v2 .title-redesign #personalRating:hover .personal-rating-footer,
  .catalog-v2 .title-redesign #personalRating:focus-within .personal-rating-footer {
    opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
  }
  /* Invisible bridge between the pill and the panel, so travelling down with
     the pointer does not close the picker. */
  .catalog-v2 .title-redesign #personalRating::after { content: ""; position: absolute; left: -10px; right: -10px; top: 100%; height: 16px; }
  .catalog-v2 .title-redesign .personal-stars { justify-content: center; gap: 5px; }
  .catalog-v2 .title-redesign .personal-star { width: 44px; height: 44px; border-radius: 12px; }
  .catalog-v2 .title-redesign .personal-star svg { width: 24px; height: 24px; }
  .catalog-v2 .title-redesign .personal-rating-fine { justify-content: center; margin: 8px 0 0; gap: 8px; }
  .catalog-v2 .title-redesign .personal-rating-step { width: 38px; height: 34px; border-radius: 10px; }
}

/* ---- tablet: the same band, a narrower poster column ---------------------- */
@media (min-width: 761px) and (max-width: 1100px) {
  .catalog-v2 .title-redesign .details-layout { grid-template-columns: 190px minmax(0, 1fr); column-gap: 26px; padding: 0 26px 30px; }
  .catalog-v2 .title-redesign .details-heading { padding: 28px 0 22px; }
  .catalog-v2 .title-redesign .details-backdrop { height: 430px; }
  .catalog-v2 .title-redesign .details-cast { padding: 6px 26px 22px; }
  .catalog-v2 .title-redesign .cast-rail { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); }
}

/* ---- phone: the ratings wrap two by two, the poster is centred under the
   band and the copy runs the full width, the rating card closes it ---------- */
@media (max-width: 760px) {
  .catalog-v2 .title-redesign .details-layout { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; justify-items: stretch; padding: 0 18px 26px; }
  .catalog-v2 .title-redesign .details-heading { grid-column: 1; grid-row: 1; padding: 24px 0 18px; }
  .catalog-v2 .title-redesign .details-heading > .eyebrow { margin-bottom: 14px; }
  .catalog-v2 .title-redesign .details-logo { max-width: min(340px, 92%); max-height: 96px; }
  .catalog-v2 .title-redesign .details-title-slot h2 { font-size: clamp(24px, 7.5vw, 34px); }
  .catalog-v2 .title-redesign .details-score-line { margin-top: 12px; gap: 8px; }
  .catalog-v2 .title-redesign .details-scores { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 6px; }
  .catalog-v2 .title-redesign .score-chip { height: 42px; padding: 0 11px 0 8px; gap: 8px; }
  .catalog-v2 .title-redesign .score-chip > b { font-size: 11px; padding: 2px 5px; }
  .catalog-v2 .title-redesign .score-chip strong { font-size: 15px; }
  .catalog-v2 .title-redesign .details-poster-wrap { grid-column: 1; grid-row: 2; justify-self: center; width: 148px; }
  .catalog-v2 .title-redesign .details-poster { width: 100%; border-radius: 16px; }
  .catalog-v2 .title-redesign .details-copy { display: block; grid-column: 1; grid-row: 3; padding-top: 22px; }
  .catalog-v2 .title-redesign .details-copy > * { grid-column: auto; }
  .catalog-v2 .title-redesign .details-personal { grid-column: 1; grid-row: 4; margin-top: 20px; }
  .catalog-v2 .title-redesign #personalRating.personal-rating { max-width: none; }
  .catalog-v2 .title-redesign .personal-stars { gap: 3px; }
  .catalog-v2 .title-redesign .personal-star { width: 38px; height: 38px; }
  .catalog-v2 .title-redesign .details-actions { margin-top: 22px; }
  .catalog-v2 .title-redesign .details-backdrop { height: 330px; }
  .catalog-v2 .title-redesign .details-cast { padding: 4px 18px 20px; }
  .catalog-v2 .title-redesign .cast-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .catalog-v2 .title-redesign .cast-person-link { grid-template-columns: 46px minmax(0, 1fr); min-height: 66px; padding: 8px 10px 8px 8px; border-radius: 13px; column-gap: 10px; }
  .catalog-v2 .title-redesign .cast-avatar { width: 46px; height: 46px; border-radius: 11px; }
  .catalog-v2 .title-redesign .cast-name { font-size: 11.5px; }
  .catalog-v2 .title-redesign .cast-role { font-size: 10.5px; }
}

/* ---------------------------------------------------------------------------
   The «Surprise / Filters» controls ride the hero artwork: smoked glass thin
   enough to let the frame show through, dark enough to keep the label crisp,
   the violet kept as a thin accent (tint, dot-free ring on hover/open).
   The artwork underneath is bright, so the glass stays a touch denser than
   the mood pills under it, but it is clearly see-through now.
   --------------------------------------------------------------------------- */
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods #discoveryPanel .discovery-top .surprise-button {
  color: #f1ebfc;
  background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(8,7,14,.42) 46%, rgba(8,7,14,.54));
  border-color: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 20px rgba(139,92,246,.06), 0 8px 22px rgba(0,0,0,.28);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods #discoveryPanel .discovery-top .surprise-button:hover {
    background: linear-gradient(135deg, rgba(139,92,246,.24), rgba(10,8,18,.46) 50%, rgba(10,8,18,.58));
    border-color: rgba(196,161,243,.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.32), 0 0 18px rgba(139,92,246,.16);
  }
}
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods #discoveryPanel .discovery-top .surprise-button.rolling {
  border-color: rgba(196,161,243,.5);
  background: linear-gradient(135deg, rgba(139,92,246,.3), rgba(10,8,18,.46) 52%, rgba(10,8,18,.58));
}
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods #discoveryPanel .discovery-top .home-filters-toggle {
  color: #e9e2f6;
  background: linear-gradient(135deg, rgba(139,92,246,.08), rgba(8,7,14,.4) 50%, rgba(8,7,14,.52));
  border-color: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.26);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
@media (hover: hover) and (pointer: fine) {
  body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods #discoveryPanel .discovery-top .home-filters-toggle:hover {
    border-color: rgba(196,161,243,.34);
    background: linear-gradient(135deg, rgba(139,92,246,.16), rgba(10,8,18,.44) 50%, rgba(10,8,18,.56));
  }
}
body.catalog-v2:is([data-view="home"], [data-view="movies"], [data-view="series"], [data-view="anime"]) .home-moods #discoveryPanel .discovery-top .home-filters-toggle[aria-expanded="true"] {
  color: #f4ecff;
  background: linear-gradient(135deg, rgba(167,139,250,.26), rgba(11,9,19,.46) 56%, rgba(11,9,19,.58));
  border-color: rgba(196,161,243,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 26px rgba(0,0,0,.3), 0 0 18px rgba(139,92,246,.18);
}