:root {
  color-scheme: dark;
  /* Dark-only palette. Telegram's theme colors are not inherited: in a light
     Telegram theme they gave dark text on these fixed dark surfaces. The
     header/background colors set from app.js (APP_BACKGROUND) match --bg. */
  --bg: #0d151f;
  --surface: #152232;
  --surface-raised: #1b2b3e;
  --text: #f3f7fb;
  --muted: #8fa1b5;
  --accent: #62d7b1;
  --accent-text: #071713;
  --line: rgba(143, 161, 181, 0.16);
  --warm: #ffb86b;
  --app-tg-safe-area-inset-top: 0px;
  --app-tg-safe-area-inset-right: 0px;
  --app-tg-safe-area-inset-bottom: 0px;
  --app-tg-safe-area-inset-left: 0px;
  --app-tg-content-safe-area-inset-top: 0px;
  --app-tg-content-safe-area-inset-right: 0px;
  --app-tg-content-safe-area-inset-bottom: 0px;
  --app-tg-content-safe-area-inset-left: 0px;
  --system-safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px), var(--app-tg-safe-area-inset-top));
  --system-safe-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px), var(--app-tg-safe-area-inset-right));
  --system-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), var(--app-tg-safe-area-inset-bottom));
  --system-safe-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px), var(--app-tg-safe-area-inset-left));
  --content-safe-top: max(var(--tg-content-safe-area-inset-top, 0px), var(--app-tg-content-safe-area-inset-top));
  --content-safe-right: max(var(--tg-content-safe-area-inset-right, 0px), var(--app-tg-content-safe-area-inset-right));
  --content-safe-bottom: max(var(--tg-content-safe-area-inset-bottom, 0px), var(--app-tg-content-safe-area-inset-bottom));
  --content-safe-left: max(var(--tg-content-safe-area-inset-left, 0px), var(--app-tg-content-safe-area-inset-left));
  --safe-top: calc(var(--system-safe-top) + var(--content-safe-top));
  --safe-right: calc(var(--system-safe-right) + var(--content-safe-right));
  --safe-bottom-raw: calc(var(--system-safe-bottom) + var(--content-safe-bottom));
  --safe-bottom: max(12px, var(--safe-bottom-raw));
  --safe-left: calc(var(--system-safe-left) + var(--content-safe-left));
  --viewport-stable-height: var(--tg-viewport-stable-height, var(--app-viewport-stable-height, 100dvh));
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Type floor (2026-09-29): nothing below 11px - Apple's smallest text style
   (caption 2) and Material's label-small. Pure hints used 8px, the profile
   badge 7px. Form fields stay at 16px, below which iOS zooms into the page
   on focus. Touch targets aim at 44px (Apple HIG), never under WCAG 2.2's 24px. */
* { box-sizing: border-box; }
/* The browser's default <small> is 0.83em, which put unstyled hints under 11px. */
small { font-size: max(11px, .83em); }
[hidden] { display: none !important; }
/* Only ever visible on desktop/web Telegram clients — touch WebViews
   (Android/iOS) render their own thin overlay scrollbar regardless of this,
   never the OS-chrome one this replaces. */
html { min-height: 100%; background: var(--bg); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent; }
html::-webkit-scrollbar, .detail-scroll::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track, .detail-scroll::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb, .detail-scroll::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
html::-webkit-scrollbar-thumb:hover, .detail-scroll::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }
body { margin: 0; background: var(--bg); color: var(--text); min-height: var(--viewport-stable-height); overscroll-behavior-y: none; }
body.sheet-open { overflow: hidden; }
body.title-open { overflow: hidden; }
/* Title details are a real route. The regular shell stays mounted (so its
   cached DOM/state survives) but is neither visible nor interactive while the
   page is open. */
body.title-open .app-shell { visibility: hidden; }
body.player-open { overflow-x: hidden; }
button { color: inherit; font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .58; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button, [data-anime] { -webkit-tap-highlight-color: transparent; }
.app-shell { width: min(100%, 720px); min-height: var(--viewport-stable-height); margin: 0 auto; padding: 0 var(--safe-right) calc(77px + max(8px, var(--safe-bottom-raw))) var(--safe-left); overflow: hidden; overflow: clip; }
/* clip, not hidden, where supported: it cuts overflow the same way but is not a
   scroll container, so the sticky headers below can stick (2026-09-30). */
.topbar { display: flex; justify-content: space-between; align-items: center; padding: calc(22px + var(--safe-top)) 20px 14px; }
.eyebrow, .kicker { margin: 0 0 5px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 25px; letter-spacing: -.03em; }
h2 { margin-bottom: 0; font-size: 20px; letter-spacing: -.025em; }
.avatar { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: linear-gradient(145deg, var(--accent), #4fa9e8); color: #071713; font-weight: 900; transition: transform .18s ease, box-shadow .18s ease; }
.avatar.active { transform: scale(.94); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.hero-card { margin: 8px 16px 26px; padding: 22px; min-height: 194px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 28px; background: radial-gradient(circle at 92% 12%, rgba(255,184,107,.28), transparent 35%), linear-gradient(145deg, #20374d, #172536); box-shadow: 0 18px 45px rgba(0,0,0,.2); }
.hero-carousel-shell { margin: 8px 16px 26px; }
.hero-carousel-heading { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 9px; }
.hero-carousel-heading .kicker { margin: 0; }
.hero-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 10px; overflow-x: auto; border-radius: 28px; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hero-carousel::-webkit-scrollbar { display: none; }
.hero-carousel .hero-card, .hero-carousel-shell > .hero-card { position: relative; width: 100%; height: 220px; min-height: 220px; margin: 0; overflow: hidden; isolation: isolate; border-radius: 28px; box-shadow: none; clip-path: inset(0 round 28px); scroll-snap-align: start; scroll-snap-stop: always; }
.hero-carousel .hero-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 92% 8%, rgba(98,215,177,.16), transparent 38%), radial-gradient(circle at 8% 100%, rgba(65,137,208,.18), transparent 46%), linear-gradient(90deg, rgba(13,21,31,.8) 0%, rgba(13,21,31,.66) 53%, rgba(13,21,31,.36) 76%, rgba(13,21,31,.18) 100%); }
/* The card's backdrop is its own cover, heavily blurred (owner, 2026-09-30);
   the gradient above it keeps the text readable on any cover. */
.hero-atmosphere { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; filter: blur(28px) saturate(1.35); transform: scale(1.25); pointer-events: none; }
.hero-art { position: absolute; top: 10px; right: 10px; z-index: -2; width: 42%; height: calc(100% - 20px); border: 1px solid rgba(255,255,255,.08); border-radius: 19px; object-fit: cover; object-position: center; opacity: .86; box-shadow: 0 10px 28px rgba(0,0,0,.22); }
.hero-carousel .hero-copy, .hero-carousel .hero-time { position: relative; z-index: 1; }
.hero-carousel .hero-copy { max-width: 78%; }
.hero-carousel .hero-copy h2 { display: -webkit-box; overflow: hidden; margin-top: 10px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: clamp(20px, 6vw, 25px); line-height: 1.04; }
.hero-carousel .hero-copy p { white-space: nowrap; }
.hero-carousel-dots { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 19px; padding-top: 9px; }
.hero-carousel-dot { width: 5px; height: 5px; padding: 0; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--muted) 42%, transparent); transition: width .2s ease, background-color .2s ease; }
.hero-carousel-dot.active { width: 17px; background: var(--accent); }
.hero-copy { max-width: 74%; }
.hero-copy h2 { margin: 12px 0 8px; font-size: 27px; line-height: 1.04; }
.hero-copy p { margin-bottom: 0; color: #b7c5d4; font-size: 13px; line-height: 1.45; }
.pill { display: inline-flex; padding: 6px 10px; border-radius: 99px; background: rgba(98,215,177,.14); color: #86e7c8; font-size: 11px; font-weight: 750; }
/* The card is the first thing seen; a moved episode says so here, not only in
   the timeline further down. */
.pill-delay { background: rgba(242,180,118,.16); color: #f2b476; white-space: nowrap; }
.hero-time { display: flex; align-items: baseline; gap: 10px; }
.hero-time strong { font-size: 31px; letter-spacing: -.04em; }
.hero-time span { color: var(--warm); font-size: 12px; font-weight: 700; }
.section-block { margin: 0 16px 28px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.text-button { min-height: 44px; margin: -11px 0; padding: 0 2px; border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 700; }
.collection-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: -2px 0 14px; }
.collection-stat { min-width: 0; min-height: 44px; display: flex; align-items: baseline; gap: 7px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--text); text-align: left; }
.collection-stat.active { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.collection-stat strong { flex: 0 0 auto; color: var(--accent); font-size: 17px; font-variant-numeric: tabular-nums; }
.collection-stat span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.timeline { padding: 4px 0 4px 3px; }
.timeline-day { margin: 18px 0 10px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.timeline-day:first-child { margin-top: 0; }
.timeline-row { display: grid; grid-template-columns: 42px 12px 1fr; gap: 10px; min-height: 68px; position: relative; }
.timeline-row:not(.day-end)::after { content: ""; position: absolute; left: 58px; top: 21px; bottom: -2px; width: 1px; background: var(--line); }
.timeline-row time { padding-top: 2px; color: var(--accent); font: 700 12px ui-monospace, monospace; }
.timeline-dot { width: 9px; height: 9px; margin-top: 5px; border: 2px solid var(--bg); outline: 2px solid var(--accent); border-radius: 50%; background: var(--accent); z-index: 1; }
.timeline-dot.accent { outline-color: var(--warm); background: var(--warm); }
/* Today's episodes that already aired stay in the timeline, quieter than
   what is still ahead (owner, 2026-09-30). */
.timeline-dot.done { outline-color: var(--muted); background: var(--bg); }
.timeline-row.is-aired time, .schedule-item.is-aired time { color: var(--muted); }
.timeline-row.is-aired strong, .schedule-item.is-aired strong { color: color-mix(in srgb, var(--text) 70%, var(--muted)); }
.timeline-row strong, .poster-card strong { display: block; font-size: 13px; line-height: 1.35; }
.timeline-row small, .poster-card small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.poster-row { display: grid; grid-auto-flow: column; grid-auto-columns: 39%; gap: 12px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
.poster-row::-webkit-scrollbar { display: none; }
.poster { aspect-ratio: 2 / 3; margin-bottom: 10px; border-radius: 18px; background-position: center; background-size: cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.poster img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.placeholder.p1 { background: linear-gradient(155deg, #68889b, #d68d65 48%, #273748); }
.placeholder.p2 { background: linear-gradient(155deg, #241e49, #a63e5e 48%, #183a56); }
.placeholder.p3 { background: linear-gradient(155deg, #466c8a, #d7a65a 45%, #181e37); }
.poster-card strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bottom-nav { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 720px); display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px calc(12px + var(--safe-right)) max(8px, var(--safe-bottom-raw)) calc(12px + var(--safe-left)); background: color-mix(in srgb, var(--bg) 98%, #111a24); border-top: 1px solid var(--line); z-index: 20; }
.nav-item { position: relative; min-height: 48px; display: grid; justify-items: center; align-content: center; gap: 3px; padding: 4px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); }
.nav-item span { display: grid; place-items: center; height: 24px; line-height: 1; }
.nav-item.active svg { stroke-width: 2.2; }
/* An explicit line height: WebKit's "normal" for this font stack is taller
   than Chromium's, which made the bar 63px on iPhone and 61px elsewhere. */
.nav-item small { font-size: 11px; line-height: 13px; }
.nav-item.active { color: var(--accent); }
.loading-state, .empty-state, .error-state { min-height: 55vh; display: grid; place-content: center; justify-items: center; padding: 28px; color: var(--muted); text-align: center; }
.loading-state span { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.loading-state p { margin: 14px 0 0; font-size: 13px; }
@keyframes spin { to { transform: rotate(360deg); } }
.screen-header { padding: 8px 16px 18px; }
.screen-header p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.profile-screen { display: grid; gap: 14px; padding: 4px 16px 24px; }
.profile-identity { display: grid; grid-template-columns: 62px minmax(0,1fr); align-items: center; gap: 14px; padding: 7px 2px 10px; }
.profile-avatar { width: 62px; height: 62px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; color: var(--accent-text); background: linear-gradient(145deg, var(--accent), #4fa9e8); font-size: 23px; font-weight: 900; box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.profile-identity h2 { font-size: 24px; }
.profile-identity p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.settings-card { padding: 17px 15px; border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.settings-heading h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.settings-description { margin: 10px 0 15px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.timezone-clock { flex: 0 0 auto; text-align: right; }
.timezone-clock strong, .timezone-clock span { display: block; }
.timezone-clock strong { color: var(--accent); font: 800 17px ui-monospace, monospace; }
.timezone-clock span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.timezone-card { padding-bottom: 13px; }
.timezone-hint { margin: 7px 0 11px; color: var(--muted); font-size: 11px; }
.timezone-summary { width: 100%; min-height: 58px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto 8px; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: var(--surface-raised); text-align: left; transition: border-color .16s ease, background-color .16s ease; }
.timezone-summary[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface-raised)); }
.timezone-summary-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 18px; }
.timezone-summary-copy { min-width: 0; }
.timezone-summary-copy strong, .timezone-summary-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timezone-summary-copy strong { font-size: 11px; }
.timezone-summary-copy small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.timezone-summary-action { color: var(--accent); font-size: 11px; font-weight: 800; }
.timezone-summary-chevron { color: var(--muted); font-size: 17px; transform: rotate(0); transition: transform .16s ease; }
.timezone-summary[aria-expanded="true"] .timezone-summary-chevron { transform: rotate(90deg); }
.timezone-settings { padding-top: 11px; }
.timezone-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.timezone-option { position: relative; min-width: 0; padding: 10px 9px; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); background: var(--surface); font-size: 11px; font-weight: 700; text-align: center; }
.timezone-option input { position: absolute; opacity: 0; }
.timezone-option:has(input:checked) { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.device-timezone { width: 100%; margin: 9px 0 0; padding: 10px; border: 0; border-radius: 13px; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: 11px; font-weight: 800; }
.profile-field { display: grid; gap: 6px; margin-top: 13px; }
.profile-field > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.profile-field input { width: 100%; min-height: 45px; padding: 0 12px; border: 1px solid var(--line); border-radius: 14px; outline: 0; color: var(--text); background: var(--surface); font: inherit; font-size: 16px; }
.profile-field input:focus { border-color: var(--accent); }
.settings-card .primary-button { margin-top: 10px; }
.settings-card .secondary-button { min-height: 46px; }
.one-way-badge { padding: 5px 7px; border-radius: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 11px; font-weight: 850; letter-spacing: .08em; white-space: nowrap; }
.profile-result { margin: 10px 2px 0; color: var(--muted); font-size: 11px; text-align: center; }
.profile-result strong { color: var(--accent); }
.schedule-context { display: flex; align-items: center; gap: 6px; margin: 8px 16px 18px; color: var(--muted); font-size: 11px; }
.schedule-context span { color: var(--accent); opacity: .72; }
.catalog-tools { position: relative; display: flex; align-items: center; gap: 8px; margin: 8px 16px; }
.search-box { min-height: 50px; flex: 1; display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); transition: border-color .18s ease, box-shadow .18s ease; }
.search-box:focus-within { border-color: color-mix(in srgb, var(--accent) 72%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
.search-box input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font: inherit; }
.search-box input::placeholder { color: var(--muted); }
.search-icon { color: var(--accent); font-size: 22px; line-height: 1; transform: translateY(-1px); }
.search-clear { width: 46px; height: 46px; flex: 0 0 auto; border: 0; border-radius: 15px; background: var(--surface); color: var(--muted); font-size: 24px; line-height: 1; }
.inline-spinner { width: 17px; height: 17px; flex: 0 0 auto; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .75s linear infinite; }
.result-meta { min-height: 18px; margin: 0 16px 11px; color: var(--muted); font-size: 11px; }
/* The count line carries the ongoing order (owner, 2026-10-04): no third row
   of switches. The menu hangs from the chip, over the grid. */
.catalog-status-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 16px 11px; }
.catalog-status-row .result-meta { margin: 0; min-width: 0; }
.catalog-sort { flex: 0 0 auto; }
.sort-chip { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700; white-space: nowrap; }
.sort-chip svg { color: var(--accent); }
.sort-chip[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); }
.sort-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: min(260px, calc(100vw - 32px)); padding: 6px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-raised); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.sort-menu button { width: 100%; min-height: 52px; display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-align: left; font-size: 14px; font-weight: 700; }
.sort-menu button small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 500; }
.sort-menu button[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sort-menu .sort-tick { color: var(--accent); visibility: hidden; }
.sort-menu button[aria-checked="true"] .sort-tick { visibility: visible; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; margin: 0 16px 18px; padding: 4px; border-radius: 15px; background: var(--surface); }
.segmented button { padding: 9px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; }
/* Collection sections stay reachable in a long list (preview, 2026-09-30). */
/* In Telegram fullscreen the status bar and Telegram's own Close / ⋯ row
   float over the page (--safe-top). A sticky header stops under them, so
   without this the list stayed visible scrolling above it (owner, Android,
   2026-09-30). The band is the app's own background: at rest it covers the
   top bar's empty padding; in a normal (not fullscreen) window it is 1 px,
   the extra pixel only closes an anti-aliased seam above sticky headers. */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 15; height: calc(var(--safe-top) + 1px); background: var(--bg); pointer-events: none; }
body.player-open::before, body.title-open::before { display: none; }
.collection-tabs-bar { position: sticky; top: var(--safe-top); z-index: 3; padding-top: 8px; margin-bottom: 6px; background: var(--bg); }
.collection-tabs-bar .collection-tabs { margin-bottom: 12px; }
/* Content fades into the bar instead of being cut by a hard edge (owner). */
.collection-tabs-bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; background: linear-gradient(var(--bg), transparent); pointer-events: none; }
.segmented button.active { color: var(--text); background: var(--surface-raised); box-shadow: 0 4px 12px rgba(0,0,0,.16); }
.catalog-mode-switch { margin-bottom: 12px; }
.catalog-mode-switch button { min-height: 40px; }
.catalog-scope { margin-bottom: 18px; }
.discovery-filter-row { display: flex; margin: 0 0 18px; padding: 0 16px; }
.filter-button { min-width: 88px; max-width: 100%; min-height: 35px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 12px; color: var(--accent); background: var(--surface); font-size: 11px; font-weight: 750; text-align: left; }
.filter-button small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.filter-button.active { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.filter-button.active small { color: color-mix(in srgb, var(--accent) 62%, var(--muted)); }
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; min-height: 180px; padding: 0 16px 24px; transition: opacity .16s ease; }
.catalog-grid.is-updating { opacity: .45; pointer-events: none; }
.catalog-card { min-width: 0; border: 0; border-radius: 18px; padding: 0 0 4px; text-align: left; background: transparent; }
.catalog-card:active { transform: scale(.985); }
.catalog-card .poster { position: relative; margin-bottom: 9px; }
.poster-fallback { width: 100%; height: 100%; display: grid; place-items: center; border-radius: inherit; background: linear-gradient(145deg,#2c4358,#192637); color: var(--muted); font-size: 30px; font-weight: 900; }
.poster-badge { position: absolute; top: 9px; z-index: 2; min-height: 25px; display: inline-flex; align-items: center; gap: 3px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: #f7fbff; background: rgba(10,18,27,.92); box-shadow: 0 4px 14px rgba(0,0,0,.24); font-size: 11px; font-weight: 850; line-height: 1; }
.rating-badge { left: 9px; color: #ffd28a; }
.episode-badge { right: 9px; color: #a7efd8; }
.tracked-mark { position: absolute; right: 9px; bottom: 9px; z-index: 2; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 10px; color: var(--accent-text); background: var(--accent); box-shadow: 0 4px 15px rgba(0,0,0,.3); font-weight: 900; }
/* Kodik blocks the title (owner, 2026-10-06, variant C): the poster is dimmed
   and says so in the middle, so it reads as unavailable while scrolling. */
.poster.is-blocked img { filter: grayscale(.9) brightness(.55); }
.blocked-tag { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); max-width: calc(100% - 16px); display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; color: #fff; background: rgba(10,18,27,.86); font-size: 11px; font-weight: 850; white-space: nowrap; }
.blocked-tag svg { flex: 0 0 auto; }
.detail-blocked { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, #ff8a7a 35%, var(--line)); border-radius: 14px; color: var(--muted); background: color-mix(in srgb, #ff8a7a 8%, var(--surface)); font-size: 12px; line-height: 1.45; }
.detail-blocked svg { flex: 0 0 auto; margin-top: 2px; color: #ff9b8c; }
.detail-blocked strong { color: var(--text); }
.translation-blocked { color: #ff9b8c; font-weight: 700; }
.catalog-card strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 13px; line-height: 1.35; min-height: calc(13px * 1.35 * 2); }
.catalog-card small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.catalog-genres { display: block; overflow: hidden; margin-top: 4px; color: color-mix(in srgb, var(--accent) 68%, var(--muted)); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.load-more { width: calc(100% - 32px); margin: 0 16px 24px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); font-weight: 750; }
.catalog-empty { grid-column: 1 / -1; min-height: 220px; display: grid; place-content: center; padding: 32px 20px; text-align: center; color: var(--muted); }
.catalog-empty strong { color: var(--text); font-size: 15px; }
.catalog-empty p { max-width: 280px; margin: 8px 0 0; font-size: 12px; line-height: 1.5; }
.compact-empty { min-width: 230px; padding: 18px; border-radius: 18px; background: var(--surface); }
.compact-empty p, .muted-copy { color: var(--muted); }
.subscription-list { display: grid; gap: 10px; padding: 0 16px 24px; }
.subscription-card { width: 100%; display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 12px; padding: 9px; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); text-align: left; }
.subscription-card:not(.archive-card):active { transform: scale(.992); }
.subscription-card img, .subscription-card .mini-poster { width: 62px; height: 86px; border-radius: 13px; object-fit: cover; background: linear-gradient(145deg,#2c4358,#192637); }
.subscription-card strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 13px; }
.subscription-card small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }
.subscription-card.archive-card { grid-template-columns: minmax(0,1fr) auto; gap: 4px; padding: 5px; }
.archive-open { min-width: 0; display: grid; grid-template-columns: 62px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 4px; border: 0; color: var(--text); background: transparent; text-align: left; }
.archive-open:active { transform: scale(.992); }
/* An announced title in "Подписки": the premiere, as precise as it is known. */
.premiere-chip { display: inline-flex; margin-top: 7px; padding: 3px 8px; border-radius: 99px; background: rgba(255, 184, 107, .12); color: var(--warm); font-size: 11px; font-style: normal; font-weight: 750; }
/* «Новое» (app/feed.js, owner 2026-10-04): one shape of row for every event,
   grouped by day; the kind is a mark on the poster and the colour of the
   first word. Only the newest unread episode gets the big card. */
.nav-item .nav-badge { position: absolute; top: 1px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border: 2px solid var(--bg); border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 10.5px; font-weight: 800; line-height: 1; }
.nav-item .nav-badge[hidden] { display: none; }
.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 16px 12px; }
.feed-head p { margin: 0; color: var(--muted); font-size: 12px; }
.feed-head b { color: var(--text); }
.feed-head button { min-height: 44px; margin: -12px 0; padding: 0; border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 700; }
.feed-chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 16px; scrollbar-width: none; }
.feed-chips::-webkit-scrollbar { display: none; }
.feed-chip { flex: 0 0 auto; min-height: 34px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; }
.feed-chip.active { border-color: color-mix(in srgb, var(--accent) 38%, transparent); background: var(--surface-raised); color: var(--text); }
.feed-hero { position: relative; display: block; width: calc(100% - 32px); margin: 0 16px 18px; padding: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .07); border-radius: 22px; background: var(--surface); color: var(--text); text-align: left; }
.feed-hero:active { transform: scale(.992); }
.feed-hero-bg { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; object-position: center 30%; filter: blur(24px) saturate(1.25); opacity: .6; }
.feed-hero-shade { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(9, 15, 23, .94) 35%, rgba(9, 15, 23, .5)); }
.feed-hero-in { position: relative; display: grid; grid-template-columns: 78px 1fr; gap: 14px; align-items: center; padding: 14px; }
.feed-hero-in > img, .feed-hero-in > .feed-thumb-empty { width: 78px; height: 110px; border-radius: 13px; object-fit: cover; box-shadow: 0 10px 22px rgba(0, 0, 0, .45); }
.feed-hero-in > span { min-width: 0; }
.feed-hero-kicker { display: block; color: var(--accent); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; }
.feed-hero-in strong { display: block; margin: 5px 0 3px; font-size: 16px; line-height: 1.2; }
.feed-hero-sub { display: block; overflow: hidden; color: #c4cfdb; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.feed-hero-play { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; margin-top: 10px; padding: 0 15px 0 11px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), #6ec3e8); color: var(--accent-text); font-size: 13px; font-weight: 800; }
.feed-day h3 { margin: 0 16px 8px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.feed-group { margin: 0 16px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--surface) 92%, transparent); }
.feed-row { position: relative; width: 100%; min-height: 84px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border: 0; background: transparent; color: var(--text); text-align: left; }
.feed-row + .feed-row::before { content: ""; position: absolute; top: 0; left: 70px; right: 0; height: 1px; background: var(--line); }
.feed-row:active { background: color-mix(in srgb, var(--surface-raised) 70%, transparent); }
.feed-thumb { position: relative; width: 46px; height: 64px; }
.feed-thumb img, .feed-thumb-empty { display: block; width: 46px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--surface-raised); }
.feed-mark { position: absolute; right: -5px; bottom: -5px; width: 22px; height: 22px; display: grid; place-items: center; border: 2.5px solid var(--surface); border-radius: 50%; color: #0b131c; }
.feed-mark.new { background: var(--accent); }
.feed-mark.move { background: #f2b45a; }
.feed-mark.seq { background: #8eb6f2; }
.feed-mark.done { background: #7ad7a0; }
.feed-text { min-width: 0; }
.feed-text strong, .feed-text > span, .feed-text small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.feed-text strong { font-size: 14px; line-height: 1.25; }
.feed-text > span { margin-top: 3px; color: #d3dbe4; font-size: 13px; line-height: 1.3; }
.feed-text small { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.3; }
.feed-text em { font-style: normal; font-weight: 700; }
.feed-text em.new { color: var(--accent); }
.feed-text em.move { color: #f2b45a; }
.feed-text em.seq { color: #8eb6f2; }
.feed-text em.done { color: #7ad7a0; }
.feed-meta { align-self: start; display: grid; justify-items: end; gap: 8px; padding-top: 6px; }
.feed-meta time { color: var(--muted); font-size: 11px; font-weight: 600; }
.feed-meta i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.feed-row:not(.unread) .feed-text strong { color: #c6d0db; font-weight: 600; }
.feed-row:not(.unread) .feed-text > span { color: var(--muted); }
.feed-row:not(.unread) .feed-text em { color: inherit; font-weight: 600; }
.feed-row:not(.unread) .feed-thumb img { filter: saturate(.55) brightness(.8); }
.feed-row:not(.unread) .feed-mark { filter: saturate(.3) brightness(.85); }
.empty-state strong { color: var(--text); font-size: 15px; }
.chevron { color: var(--muted); padding-right: 5px; font-size: 20px; }
.remove-follow { width: 34px; height: 34px; border: 0; border-radius: 12px; color: #ff9b9b; background: rgba(255,90,90,.09); font-size: 20px; }
.schedule-day { margin: 0 16px 22px; }
.schedule-day h3 { margin: 0 -16px 8px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
/* The day being read follows at the top of «Расписание» until the next day's
   heading pushes it away (owner, 2026-09-30). Full-bleed background so rows
   do not show through; below Telegram's header in fullscreen. */
.schedule-day h3 { position: sticky; top: var(--safe-top); z-index: 3; padding: 10px 16px 8px; background: var(--bg); }
/* Schedule rows open their title (2026-09-29); before, nothing in the
   schedule could be tapped although every row names a title. */
.timeline-row[data-anime], .schedule-item[data-anime] { cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 10px; }
.timeline-row[data-anime]:active, .schedule-item[data-anime]:active { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.timeline-row[data-anime]:focus-visible, .schedule-item[data-anime]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.schedule-item { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.schedule-item time { color: var(--accent); font: 750 13px ui-monospace, monospace; }
.schedule-item strong { display: block; font-size: 13px; }
.schedule-item small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(2,7,12,.72); }
/* Anchored to the bottom, deliberately. Top-anchoring was tried to survive a
   Mini App window shorter than the page, and it moved the sheet down by the
   safe-area inset for everyone — the dock was cut off and a gap opened above.
   A rare glitch is not worth a layout that is wrong the rest of the time. */
.detail-sheet { position: fixed; left: 50%; bottom: 0; z-index: 41; width: min(100%, 720px); height: calc(var(--viewport-stable-height) - var(--safe-top)); max-height: calc(var(--viewport-stable-height) - var(--safe-top)); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; transform: translate(-50%, var(--sheet-drag-y, 0px)); transition: transform .28s cubic-bezier(.22,.8,.32,1); padding: 2px calc(16px + var(--safe-right)) calc(20px + var(--safe-bottom-raw)) calc(16px + var(--safe-left)); border-radius: 28px 28px 0 0; background: var(--bg); box-shadow: 0 -20px 60px rgba(0,0,0,.35); }
/* The title page spans the window edge to edge by top AND bottom, not by a
   height: Telegram Android can report a stable height taller than the
   window, and a top-anchored page of that height pushed the «Смотреть» dock
   below the screen (2026-09-30). */
.detail-sheet.anime-page { top: 0; bottom: 0; height: auto; max-height: none; overflow: hidden; transform: translateX(-50%); transition: none; padding: 0; border-radius: 0; box-shadow: none; }
.anime-page .detail-scroll { padding: calc(18px + var(--safe-top)) calc(16px + var(--safe-right)) 24px calc(16px + var(--safe-left)); }
.anime-page .detail-dock { padding: 12px calc(16px + var(--safe-right)) max(16px, var(--safe-bottom-raw)) calc(16px + var(--safe-left)); }
.anime-page .title-loading, .anime-page .title-error { padding: calc(44px + var(--safe-top)) calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom-raw)) calc(20px + var(--safe-left)); }
.detail-sheet.is-dragging, .translation-picker-panel.is-dragging { transition: none; }
.detail-sheet.is-dismissing, .translation-picker-panel.is-dismissing { pointer-events: none; transition-timing-function: cubic-bezier(.4,0,1,1); }
.sheet-handle, .translation-picker-handle { position: relative; width: 64px; height: 24px; display: block; flex: 0 0 auto; padding: 0; border: 0; outline-offset: -2px; border-radius: 12px; background: transparent; touch-action: none; cursor: grab; }
.sheet-handle { margin: 0 auto 6px; }
.sheet-handle::after, .translation-picker-handle::after { content: ""; position: absolute; left: 50%; top: 10px; width: 38px; height: 4px; transform: translateX(-50%); border-radius: 9px; background: var(--line); }
.sheet-close { position: absolute; top: 14px; right: calc(16px + var(--safe-right)); z-index: 1; width: 40px; height: 40px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--muted); font-size: 25px; line-height: 1; }
.discovery-filter-form { display: grid; gap: 17px; padding-bottom: 8px; }
.filter-sheet-heading { padding-right: 48px; }
.filter-sheet-heading h2 { margin: 3px 0 0; font-size: 21px; }
.filter-sheet-heading p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.filter-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.filter-section legend { margin-bottom: 8px; padding: 0; font-size: 11px; font-weight: 800; }
.filter-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.filter-choice-grid.compact { grid-template-columns: repeat(3,minmax(0,1fr)); }
.filter-choice { position: relative; min-width: 0; }
.filter-choice input, .genre-choice input { position: absolute; opacity: 0; pointer-events: none; }
.filter-choice span { min-height: 40px; display: grid; place-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); background: var(--surface); font-size: 11px; font-weight: 750; text-align: center; }
.filter-choice:has(input:checked) span { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.genre-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.genre-choice { position: relative; }
.genre-choice span { display: block; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--surface); font-size: 11px; font-weight: 700; }
.genre-choice:has(input:checked) span { border-color: color-mix(in srgb, var(--accent) 68%, var(--line)); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.filter-actions { position: sticky; bottom: calc(-20px - var(--safe-bottom-raw)); z-index: 2; display: grid; grid-template-columns: .72fr 1.28fr; gap: 8px; margin: 3px -16px -8px; padding: 11px 16px calc(11px + var(--safe-bottom-raw)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(14px); }
.filter-actions .primary-button, .filter-actions .secondary-button { min-height: 46px; margin: 0; }
.detail-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 16px; align-items: start; overflow: hidden; padding: 16px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 23px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface)); }
.detail-artwork, .detail-poster { width: 96px; aspect-ratio: 2/3; border-radius: 13px; object-fit: cover; background: var(--surface); box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.detail-artwork-button { display: block; padding: 0; border: 0; border-radius: 13px; background: none; cursor: zoom-in; }
/* The title card's poster, or its frames, nearly full screen over a dimmed
   page. The pictures sit on one strip, a screen apart plus a 16px gap
   (VIEWER_GAP in title.js), which the viewer moves with the finger. */
.poster-zoom { position: fixed; inset: 0; z-index: 60; overflow: hidden; background: rgba(3, 7, 12, .88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; cursor: zoom-out; touch-action: none; }
.poster-zoom.open { opacity: 1; }
.poster-zoom-track { position: absolute; inset: 0; display: flex; gap: 16px; will-change: transform; }
.poster-zoom-slide { flex: 0 0 100%; display: grid; place-items: center; min-width: 0; padding: calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom-raw)) calc(16px + var(--safe-left)); }
.poster-zoom img { max-width: 100%; max-height: 100%; border-radius: 18px; object-fit: contain; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); -webkit-user-drag: none; user-select: none; }
.poster-zoom img:not([src]) { visibility: hidden; }
.poster-zoom .poster-zoom-slide.current img { transform: scale(.94); transition: transform .24s cubic-bezier(.22, .8, .32, 1); }
.poster-zoom.open .poster-zoom-slide.current img { transform: none; }
.poster-zoom:focus { outline: none; }
.poster-zoom-count { position: absolute; left: 50%; bottom: calc(18px + var(--safe-bottom-raw)); transform: translateX(-50%); padding: 6px 12px; border-radius: 99px; color: var(--text); background: rgba(3, 7, 12, .72); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.poster-zoom-nav { position: absolute; top: 50%; width: 48px; height: 64px; transform: translateY(-50%); border: 0; border-radius: 16px; color: var(--text); background: rgba(3, 7, 12, .55); font-size: 34px; line-height: 1; cursor: pointer; }
.poster-zoom-nav:disabled { opacity: .3; cursor: default; }
.poster-zoom-nav.prev { left: calc(12px + var(--safe-left)); }
.poster-zoom-nav.next { right: calc(12px + var(--safe-right)); }
@media (hover: none) { .poster-zoom-nav { display: none; } }
/* The title card's backdrop: its cover, heavily blurred and visible (it was
   at 12% and read as plain dark), darkened by the ::after layer for text. */
.detail-atmosphere { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: blur(26px) saturate(1.35); opacity: .9; transform: scale(1.25); pointer-events: none; }
.detail-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(145deg, rgba(13,21,31,.52), rgba(13,21,31,.74)); pointer-events: none; }
.detail-title-copy { min-width: 0; align-self: center; }
.detail-hero h2 { margin-top: 9px; font-size: 19px; line-height: 1.28; overflow-wrap: break-word; hyphens: auto; }
.detail-original { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.detail-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 7px; background: color-mix(in srgb, var(--bg) 45%, transparent); color: var(--muted); font-size: 11px; font-weight: 700; }
.detail-status.airing { color: var(--accent); }
.detail-status.airing::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.detail-format { display: flex; flex-wrap: wrap; gap: 0 7px; margin: 10px 0 0; font-size: 11px; color: var(--muted); }
/* Each fact wraps with its separator, never leaving "·" at a line's end. */
.detail-format > span { white-space: nowrap; }
.detail-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding-top: 13px; border-top: 1px solid var(--line); }
.detail-episodes { display: flex; align-items: baseline; gap: 10px; }
.detail-episodes > small { color: var(--muted); font-size: 11px; }
.detail-episodes > strong { font-size: 17px; }
.detail-episodes strong > span { color: var(--muted); font-size: 12px; font-weight: 500; }
/* The premiere's label sits above its date: side by side with the rating,
   "Премьера 1 октября 2026" overflowed a 320 px phone by 48 px. */
.detail-facts > .detail-rating { margin-left: auto; }
.detail-episodes.premiere { flex-direction: column; align-items: flex-start; gap: 2px; }
.detail-episodes.premiere > strong > .detail-date { color: inherit; font-size: inherit; font-weight: inherit; white-space: nowrap; }
.detail-episodes.premiere > strong > .detail-planned { display: block; margin-top: 2px; white-space: nowrap; }
.detail-rating { display: flex; align-items: baseline; gap: 5px; }
.detail-rating > span { color: var(--warm); font-size: 14px; }
.detail-rating > strong { font-size: 17px; }
.detail-rating > small { font-size: 11px; color: var(--muted); }
.detail-genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
/* Inside the title card (owner, 2026-09-30: one card, not a second box):
   the next episode, under the same hairline as the episode count, on the
   card's own blurred backdrop. */
.detail-now { grid-column: 1 / -1; display: grid; margin: -6px 0 -6px; border-top: 1px solid var(--line); }
.detail-now[hidden] { display: none; }
.detail-now-row { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0; padding: 10px 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; }
.detail-now-row[hidden] { display: none; }
.detail-now-row + .detail-now-row { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.detail-now-icon { display: grid; place-items: center; width: 22px; height: 22px; color: var(--accent); }
.detail-now-copy { min-width: 0; display: grid; gap: 2px; }
.detail-now-copy strong { font-size: 13px; line-height: 1.3; }
.detail-now-copy small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.detail-now-copy .timeline-delay { margin: 4px 0 0; }
/* Access screen for someone not let in yet (app/miniapp/routes/access.py). */
body.access-locked .bottom-nav, body.access-locked #profile-button { display: none; }
.access-screen { display: grid; gap: 12px; margin: 8px 16px 0; padding: 24px 20px; border: 1px solid var(--line); border-radius: 23px; background: color-mix(in srgb, var(--surface) 74%, transparent); text-align: left; }
.access-screen h2 { margin: 0; font-size: 21px; line-height: 1.25; overflow-wrap: anywhere; }
.access-screen p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.access-screen .access-ask { margin-top: 6px; }
.access-poster { width: 120px; aspect-ratio: 2 / 3; border-radius: 14px; object-fit: cover; background: var(--surface); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
/* «Поделиться» sits in the card's top-right corner, over its blurred cover. */
.detail-share { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; color: var(--text); background: color-mix(in srgb, var(--bg) 55%, transparent); cursor: pointer; }
.detail-share:disabled { opacity: .55; }
.detail-share:active { transform: scale(.96); }
/* Only the chip row sits beside the share button; the title below it uses
   the full column (with the padding on the whole block, a 320 px phone broke
   "Провожающая" as "Провожаю-/щая"). */
.detail-chips { padding-right: 46px; }
.detail-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.detail-age { padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 7px; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.2; }
.detail-studio { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
/* Frame strip: a few 332 px previews; the viewer opens the originals. */
.detail-frames { margin: 22px 0 4px; }
.detail-frames h3 { margin: 0 0 10px; font-size: 16px; }
.frames-strip { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.frames-strip::-webkit-scrollbar { display: none; }
.frame-thumb { flex: 0 0 auto; width: 148px; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--surface); scroll-snap-align: start; cursor: zoom-in; }
.frame-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.franchise-more { display: block; width: 100%; min-height: 44px; margin: 4px 0 6px; border: 0; border-radius: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font: inherit; font-size: 13px; font-weight: 700; }
.detail-genres > span { padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); font-size: 11px; line-height: 1.3; }
@media (min-width: 600px) { .detail-hero { grid-template-columns: 116px minmax(0,1fr); gap: 20px; padding: 20px; } .detail-artwork, .detail-poster { width: 116px; } .detail-hero h2 { font-size: 25px; } }
#subscription-form { flex: 1 0 auto; display: flex; flex-direction: column; gap: 18px; }
.choice-list { min-width: 0; display: grid; gap: 8px; margin: 20px 0 0; padding: 0; border: 0; }
.choice-list legend { width: 100%; margin-bottom: 10px; padding: 0; font-size: 13px; font-weight: 800; }
.choice-list legend span, .choice-list legend small { display: block; }
.choice-list legend small { margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.choice { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.choice:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.choice input { accent-color: var(--accent); }
.choice strong { font-size: 12px; }
.choice small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.subtitle-choice { display: grid; grid-template-columns: 20px 1fr; gap: 10px; margin: 0; padding: 13px; border-radius: 15px; background: rgba(255,184,107,.1); color: var(--warm); font-size: 11px; transition: opacity .18s ease; }
.subtitle-choice input { accent-color: var(--warm); }
.subtitle-choice strong, .subtitle-choice small { display: block; }
.subtitle-choice small { margin-top: 3px; opacity: .78; }
.subtitle-choice.is-disabled { opacity: .4; }
.subtitle-choice[hidden] { display: none; }
.alert-settings { gap: 9px; }
.alert-mode-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.delivery-settings { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.delivery-settings legend { margin-bottom: 9px; color: var(--text); font-size: 13px; font-weight: 800; }
.delivery-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 4px; border-radius: 17px; background: color-mix(in srgb, var(--surface) 90%, #000); }
.delivery-choice { position: relative; min-width: 0; padding: 10px 9px; border: 1px solid transparent; border-radius: 13px; color: var(--muted); text-align: center; }
.delivery-choice input { position: absolute; opacity: 0; pointer-events: none; }
.delivery-choice strong, .delivery-choice small { display: block; }
.delivery-choice strong { color: inherit; font-size: 11px; }
.delivery-choice small { margin-top: 3px; font-size: 11px; }
.delivery-choice.selected { border-color: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.delivery-note { margin: 8px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.season-wait-card .pill { color: #a8f2df; background: rgba(35,120,104,.38); }
.season-wait-card .hero-time strong { color: #a8f2df; }
.alert-mode-card { position: relative; min-width: 0; min-height: 78px; display: grid; grid-template-columns: 29px minmax(0,1fr); align-items: center; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 17px; color: var(--text); background: var(--surface); }
.alert-mode-card.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.alert-mode-card > input { position: absolute; opacity: 0; pointer-events: none; }
.alert-mode-card strong, .alert-mode-card small { display: block; }
.alert-mode-card strong { font-size: 11px; line-height: 1.25; }
.alert-mode-card small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.25; }
.alert-mode-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 13px; }
.subtitle-choice.compact { position: relative; grid-template-columns: minmax(0,1fr) 34px; align-items: center; padding: 10px 11px; color: var(--text); background: color-mix(in srgb, var(--warm) 8%, var(--surface)); }
.subtitle-choice.compact > input { position: absolute; opacity: 0; }
.toggle-mark { position: relative; width: 34px; height: 20px; border-radius: 20px; background: var(--line); transition: background .18s ease; }
.toggle-mark::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .18s ease, background .18s ease; }
.subtitle-choice.compact:has(input:checked) .toggle-mark { background: color-mix(in srgb, var(--warm) 55%, var(--line)); }
.subtitle-choice.compact:has(input:checked) .toggle-mark::after { transform: translateX(14px); background: #fff; }
.specific-mode { display: block; min-height: 0; padding: 0; overflow: hidden; }
.specific-mode > button { width: 100%; min-height: 66px; display: grid; grid-template-columns: 29px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 10px 11px; border: 0; color: var(--text); background: transparent; text-align: left; }
.specific-copy { min-width: 0; }
.specific-copy small, .specific-copy strong, .specific-copy > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.specific-copy small { margin: 0 0 3px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.specific-copy strong { font-size: 12px; }
.specific-copy > span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.watch-button { width: 100%; min-height: 62px; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; margin: 18px 0 2px; padding: 12px 14px; border: 0; border-radius: 17px; color: var(--accent-text); background: linear-gradient(135deg, var(--accent), #72cce8); text-align: left; box-shadow: 0 12px 26px rgba(0,0,0,.2); }
.watch-button > span:first-child { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: rgba(7,23,19,.12); font-size: 15px; }
.watch-button strong, .watch-button small { display: block; }
.watch-button strong { font-size: 14px; }
.watch-button small { margin-top: 2px; opacity: .72; font-size: 11px; }

/* Collection: the same four destinations, with watching separate from alerts. */
.collection-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 25px; }
.collection-tabs button { min-height: 44px; padding: 10px 4px; font-size: 11px; }
.collection-heading { margin: 0 20px 20px; }
.collection-heading h2 { margin: 7px 0 8px; font-size: 24px; letter-spacing: -.035em; }
.collection-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.continue-list { display: grid; gap: 14px; margin: 0 16px; }
.continue-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.continue-card:first-child { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.continue-info { width: 100%; display: grid; grid-template-columns: 78px minmax(0,1fr) 10px; align-items: center; gap: 13px; padding: 14px; border: 0; color: var(--text); background: transparent; text-align: left; }
.continue-poster { width: 78px; height: 113px; border-radius: 12px; overflow: hidden; background: var(--surface-raised); }
.continue-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.continue-copy { min-width: 0; }
.continue-source { display: block; margin-bottom: 7px; color: var(--muted); font-size: 11px; letter-spacing: .12em; font-weight: 700; }
.continue-copy > strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.35; letter-spacing: -.015em; }
.continue-episode { display: block; margin-top: 11px; color: var(--accent); font-size: 13px; font-weight: 700; }
.continue-episode > span { color: var(--muted); font-weight: 400; }
.continue-copy > small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.continue-play { display: flex; justify-content: center; align-items: center; gap: 10px; width: calc(100% - 28px); min-height: 44px; margin: 0 14px 14px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--text); font-size: 12px; font-weight: 700; }
.continue-play > span { font-size: 11px; color: var(--accent); }
.continue-card:first-child .continue-play { border: 0; color: var(--accent-text); background: var(--accent); }
.continue-card:first-child .continue-play > span { color: inherit; }
.collection-explainer { margin: 24px 20px 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.collection-explainer summary { min-height: 44px; cursor: pointer; padding: 10px 0; }
.collection-explainer p { margin: 4px 0 10px; }
.collection-empty { padding: 36px 24px; border: 1px dashed var(--line); border-radius: 24px; text-align: center; }
.collection-empty > span { display: block; font-size: 40px; color: var(--accent); }
.collection-empty h3 { font-size: 19px; }
.collection-empty p { margin-bottom: 25px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.anime-sheet { overflow: hidden; padding-bottom: 0; }
.anime-sheet .sheet-handle { margin-bottom: 8px; }
.detail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 0 24px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent; }
.detail-description { margin: 26px 0 12px; }
.detail-description h3 { margin: 0 0 10px; font-size: 16px; }
.description-copy { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin: 0; white-space: pre-line; color: var(--muted); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.description-copy.expanded { display: block; }
.description-toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; background: transparent; color: var(--accent); border: 0; font-size: 12px; font-weight: 700; }
.description-missing { color: var(--muted); font-size: 13px; line-height: 1.5; }
.player-resume-notice { padding: 12px; border: 1px solid color-mix(in srgb, var(--warm) 35%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--warm) 6%, var(--surface)); color: var(--warm); font-size: 12px; line-height: 1.6; }
.detail-subscription { margin-top: 18px; padding: 16px 0 0; border-top: 1px solid var(--line); scroll-margin-top: 12px; }
.detail-subscription h3 { margin: 0; font-size: 17px; }
.detail-dock { flex: 0 0 auto; display: flex; align-items: stretch; gap: 10px; padding: 12px 0 max(16px, var(--safe-bottom-raw)); border-top: 1px solid var(--line); background: var(--bg); }
.detail-dock .watch-button { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; min-height: 60px; box-shadow: none; grid-template-columns: 28px minmax(0,1fr); gap: 8px; padding: 10px; }
.detail-dock .watch-button > span:first-child { width: 28px; height: 32px; font-size: 12px; }
.detail-dock .watch-button small { font-size: 11px; line-height: 1.3; }
/* Laid out like «Смотреть» beside it: an icon, then a word and a hint
   (owner, 2026-10-05, variant B), kept narrow so «Смотреть» keeps its room. */
.detail-subscribe { flex: 0 0 124px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: 17px; color: var(--text); background: var(--surface); text-align: left; }
.detail-subscribe-icon { flex: 0 0 auto; display: grid; color: var(--muted); }
.detail-subscribe-icon svg { width: 18px; height: 18px; }
.detail-subscribe.subscribed .detail-subscribe-icon { color: var(--accent); }
.detail-subscribe-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.detail-subscribe-copy strong { font-size: 12px; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.detail-subscribe-copy small { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1.15; white-space: nowrap; }
.detail-subscribe-copy small svg { flex: 0 0 auto; transition: transform .2s ease; }
.detail-subscribe[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.detail-subscribe[aria-expanded="true"] .detail-subscribe-copy small { color: var(--accent); }
.detail-subscribe[aria-expanded="true"] .detail-subscribe-copy small svg { transform: rotate(180deg); }
@media (min-width: 600px) {
  .continue-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .collection-empty { grid-column: 1 / -1; }
}
.franchise-block { margin: 22px 0 4px; padding: 16px 14px 8px; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--surface) 74%, transparent); }
.franchise-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 9px; }
.franchise-heading h3, .episodes-heading h3 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.franchise-heading > span { min-width: 26px; padding: 4px 8px; border-radius: 9px; color: var(--muted); background: var(--surface-raised); font-size: 11px; font-weight: 800; text-align: center; }
.franchise-group + .franchise-group { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.franchise-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 1px 3px; }
.franchise-group-heading strong { font-size: 12px; }
.franchise-group-heading small { color: var(--muted); font-size: 10px; text-align: right; }
.franchise-list { position: relative; }
.franchise-item { position: relative; width: 100%; min-height: 68px; display: grid; grid-template-columns: 10px 38px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border: 0; background: transparent; color: var(--text); text-align: left; }
.franchise-item:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 43px; bottom: -25px; width: 1px; background: var(--line); }
.franchise-node { width: 8px; height: 8px; z-index: 1; border: 2px solid var(--surface); outline: 1px solid var(--muted); border-radius: 50%; background: var(--muted); }
.franchise-item.current .franchise-node { outline: 2px solid var(--accent); background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.franchise-item img, .franchise-poster { width: 38px; height: 54px; display: block; border-radius: 9px; object-fit: cover; background: linear-gradient(145deg,#2c4358,#192637); }
.franchise-copy { min-width: 0; }
.franchise-copy strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 11px; line-height: 1.3; }
.franchise-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.franchise-item.current .franchise-copy strong { color: var(--accent); }
.franchise-current { padding: 5px 7px; border-radius: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); font-size: 11px; font-weight: 850; }
.choice-divider { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.choice-divider::before, .choice-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.sheet-actions { position: sticky; bottom: calc(-20px - var(--safe-bottom-raw)); margin: 18px calc(-16px - var(--safe-right)) calc(-20px - var(--safe-bottom-raw)) calc(-16px - var(--safe-left)); padding: 12px calc(16px + var(--safe-right)) calc(20px + var(--safe-bottom-raw)) calc(16px + var(--safe-left)); border-top: 1px solid var(--line); background: var(--bg); }
#subscription-form .sheet-actions { margin-top: auto; }
.sheet-actions.compact-actions { grid-template-columns: minmax(0,1fr) 48px; display: grid; gap: 8px; }
/* `relative`, not `static`: the row must stop sticking here, but it is also
   what the actions menu is positioned against. Made static, the menu fell
   back to the sheet and opened 145px above its top edge — invisible, so
   the button looked dead and the app looked unable to unsubscribe. */
.anime-sheet .sheet-actions { position: relative; margin: 18px 0 0; padding: 12px 0 0; }
.subscription-autosave { align-self: center; margin: 0; color: var(--muted); font-size: 12px; }
.sheet-actions.compact-actions:empty { display: none; }
.more-actions-button { width: 48px; min-height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 15px; color: var(--muted); background: var(--surface); font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.subscription-action-menu { position: absolute; right: calc(16px + var(--safe-right)); bottom: calc(100% + 7px); width: min(300px, calc(100% - 32px)); padding: 7px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-raised); box-shadow: 0 18px 48px rgba(0,0,0,.42); }
.subscription-action-menu[hidden] { display: none; }
.subscription-action-menu > span { display: block; padding: 6px 8px 7px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.subscription-action-menu button { width: 100%; padding: 10px 9px; border: 0; border-radius: 12px; color: var(--text); background: transparent; text-align: left; }
.subscription-action-menu button:active { background: var(--surface); }
.subscription-action-menu strong, .subscription-action-menu small { display: block; }
.subscription-action-menu strong { font-size: 11px; }
.subscription-action-menu small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.subscription-action-menu button.danger strong { color: #ff9b9b; }
.primary-button, .secondary-button, .danger-button { width: 100%; min-height: 48px; padding: 13px 14px; border: 0; border-radius: 15px; font-weight: 800; }
.primary-button { color: var(--accent-text); background: var(--accent); }
.secondary-button { margin-top: 9px; color: var(--text); background: var(--surface); }
.danger-button { margin-top: 7px; color: #ff9b9b; background: transparent; }
.toast { position: fixed; left: 50%; bottom: calc(88px + var(--safe-bottom)); z-index: 80; transform: translate(-50%, 20px); opacity: 0; padding: 10px 14px; border-radius: 12px; background: #f2f5f8; color: #101922; font-size: 12px; font-weight: 700; transition: .2s ease; pointer-events: none; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.has-action { width: min(360px, calc(100vw - 32px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: auto; padding: 6px 6px 6px 14px; line-height: 1.35; }
.toast-action { flex: 0 0 auto; min-height: 32px; padding: 0 12px; border: 0; border-radius: 9px; color: #fff; background: #101922; font: inherit; }

body.player-open .app-shell { padding-bottom: var(--safe-bottom); }
body.player-open .bottom-nav { display: none; }
body.player-open .topbar { display: none; }
.player-screen { padding: 0 16px calc(24px + var(--safe-bottom)); }
.player-heading { display: block; padding-top: calc(12px + var(--safe-top)); margin-bottom: 14px; }
.player-heading h2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 18px; line-height: 1.2; }
.player-frame { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #05080c; box-shadow: 0 18px 38px rgba(0,0,0,.32); }
.player-frame iframe { width: 100%; height: 100%; display: block; border: 0; background: #05080c; }
.player-fullscreen-exit { display: none; position: absolute; top: 10px; right: 10px; z-index: 3; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #fff; background: rgba(7,12,18,.56); line-height: 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 22px rgba(0,0,0,.35); }
.player-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; margin-top: 14px; }
.control-label { color: var(--muted); font-size: 11px; font-weight: 750; }
.translation-trigger { width: 100%; min-height: 56px; display: grid; grid-template-columns: minmax(0,1fr) 34px; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: var(--surface); text-align: left; }
.translation-trigger strong, .translation-trigger small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.translation-trigger strong { font-size: 12px; }
.translation-trigger small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.translation-trigger-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 18px; }
.translation-picker { position: fixed; inset: 0; z-index: 140; display: grid; align-items: end; }
.translation-picker[hidden] { display: none; }
.translation-picker-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(2,6,10,.78); }
.translation-picker-panel { position: relative; width: min(100%, 640px); max-height: min(76dvh, calc(var(--viewport-stable-height) - var(--safe-top) - 12px)); justify-self: center; display: grid; grid-template-rows: auto auto auto minmax(0,1fr); transform: translateY(var(--sheet-drag-y, 0px)); transition: transform .28s cubic-bezier(.22,.8,.32,1); padding: 1px calc(14px + var(--safe-right)) calc(14px + var(--safe-bottom)) calc(14px + var(--safe-left)); border: 1px solid var(--line); border-bottom: 0; border-radius: 26px 26px 0 0; background: var(--bg); box-shadow: 0 -24px 70px rgba(0,0,0,.46); }
.translation-picker-handle { justify-self: center; margin-bottom: 2px; }
.translation-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.translation-picker-heading h3 { margin: 2px 0 0; font-size: 18px; }
.translation-picker-close { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 13px; color: var(--muted); background: var(--surface); font-size: 23px; }
.translation-search { min-height: 44px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 6px; margin: 12px 0 9px; padding: 0 11px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); background: var(--surface); }
.translation-search:focus-within { border-color: var(--accent); }
.translation-search input { min-width: 0; height: 42px; border: 0; outline: 0; color: var(--text); background: transparent; font: inherit; font-size: 16px; }
.translation-options { min-height: 0; display: grid; align-content: start; gap: 7px; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 2px; }
/* Landscape phone (2026-09-29): handle, kicker, title and search each took a
   row, and the panel was capped at 76% of a ~375px screen, leaving the list a
   quarter of it. Here the title, search and close share one row, the panel
   may use the whole height under Telegram's bar, and the list runs in two
   columns. Back, the backdrop and × still close it. */
@media (orientation: landscape) and (max-height: 540px) {
  .translation-picker-panel { width: min(100%, 760px); max-height: calc(var(--viewport-stable-height) - var(--safe-top) - 8px); grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); column-gap: 12px; padding-top: 10px; }
  .translation-picker-handle, .translation-picker-heading .kicker { display: none; }
  .translation-picker-heading { display: contents; }
  .translation-picker-heading > div { grid-column: 1; grid-row: 1; align-self: center; margin-bottom: 8px; }
  .translation-picker-heading h3 { margin: 0; font-size: 16px; white-space: nowrap; }
  .translation-search { grid-column: 2; grid-row: 1; margin: 0 0 8px; }
  .translation-picker-close { grid-column: 3; grid-row: 1; align-self: start; }
  .translation-options { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .translation-empty { grid-column: 1 / -1; }
}
.translation-option { width: 100%; min-height: 58px; display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: var(--surface); text-align: left; }
.translation-option.current { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.translation-option-mark { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--muted); border-radius: 50%; color: var(--accent-text); font-size: 11px; }
.translation-option.current .translation-option-mark { border-color: var(--accent); background: var(--accent); }
.translation-option-copy { min-width: 0; }
.translation-option-copy strong, .translation-option-copy small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.translation-option-copy strong { font-size: 12px; }
.translation-option-copy small { margin-top: 4px; color: var(--muted); font-size: 11px; }
/* Once a studio's exact number list is loaded, colour its coverage label when
   the episode being watched is absent. Unloaded estimates are never guessed. */
.translation-count.behind { color: var(--warm); }
.translation-current { padding: 5px 7px; border-radius: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); font-size: 11px; font-weight: 850; }
.translation-empty { margin: 24px 10px; color: var(--muted); font-size: 11px; text-align: center; }
.player-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.player-actions button, .player-fullscreen, .player-external { min-height: 46px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 12px; font-weight: 750; }
.player-fullscreen { width: 100%; margin-top: 10px; color: var(--text); }
.player-external { width: 100%; margin-top: 9px; color: var(--accent); background: transparent; }
.episodes-section { margin-top: 28px; scroll-margin-top: calc(12px + var(--safe-top)); }
.episodes-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.episode-count { color: var(--muted); font-size: 11px; }
.episode-pager { display: grid; grid-template-columns: 30px auto 30px; align-items: center; gap: 7px; }
.episode-pager button { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--surface); font-size: 18px; }
.episode-pager span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.episode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* A long series (50+ episodes): hundreds in a select, jumps, a grid of numbers
   (owner, 2026-10-03). Tiles are 44 px tall, the smallest comfortable tap. */
.episode-range { min-height: 44px; max-width: 52%; padding: 0 30px 0 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2362d7b1' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 11px center; font: inherit; font-size: 13px; font-weight: 700; appearance: none; -webkit-appearance: none; }
.episode-jumps { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; margin-bottom: 12px; }
.episode-jumps > button { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--surface); font-size: 12px; font-weight: 600; white-space: nowrap; }
.episode-goto { display: grid; grid-template-columns: minmax(0, 1fr) 44px; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.episode-goto:focus-within { border-color: var(--accent); }
.episode-goto input { min-width: 0; min-height: 42px; padding: 0 10px; border: 0; color: var(--text); background: transparent; font: inherit; font-size: 16px; appearance: textfield; -moz-appearance: textfield; }
.episode-goto input::-webkit-outer-spin-button, .episode-goto input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.episode-goto button { border: 0; color: var(--accent); background: transparent; font-size: 18px; font-weight: 700; }
.episode-grid.compact { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.episode-tile { position: relative; min-width: 0; min-height: 44px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: var(--surface); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color .16s ease, transform .16s ease, box-shadow .3s ease; }
.episode-tile:active { transform: scale(.96); }
.episode-tile.current { border-color: var(--accent); color: #07121c; background: var(--accent); font-weight: 800; }
.episode-tile.is-new::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.episode-tile.current.is-new::after { background: #07121c; }
.episode-tile.is-pointed { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warm) 70%, transparent); }
.episode-card { min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; color: var(--text); background: var(--surface); text-align: left; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.episode-card:active { transform: scale(.98); }
.episode-card.current { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent); }
.episode-progress { position: absolute; z-index: 2; inset: auto 0 0; display: block; width: 100%; height: 3px; border: 0; appearance: none; background: #ffffff30; pointer-events: none; }
.episode-progress::-webkit-progress-bar { background: #ffffff30; }
.episode-progress::-webkit-progress-value { background: var(--accent); }
.episode-progress::-moz-progress-bar { background: var(--accent); }
.episode-preview { position: relative; aspect-ratio: 16/9; display: block; overflow: hidden; background: linear-gradient(145deg,#21384c,#101a26); }
.episode-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.preview-loading, .preview-unavailable { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.preview-unavailable, .loaded .preview-loading, .preview-error .preview-loading { display: none; }
.preview-error:not(.loaded) .preview-unavailable { display: grid; }
.episode-preview:not(.loaded) img { opacity: 0; }
.episode-preview.loaded img { opacity: 1; transition: opacity .2s; }
.episode-preview .episode-preview-fallback { font-size: 11px; color: var(--muted); }
.player-unit { position: relative; margin-inline: -8px; border-radius: 18px; background: #05080c; box-shadow: 0 12px 28px rgba(0,0,0,.18); }
/* Floats over the player: no layout shift, no click ever caught, gone in a few
   seconds. It sits above the control bar, never on it. */
/* Anchored to the top: the native top bar ends at 52px and every control the
   viewer needs is at the bottom, so this is the one strip it can never block. */
.player-moved-notice { position: absolute; left: 50%; top: 60px; z-index: 5; transform: translateX(-50%);
  max-width: min(92%, 420px); margin: 0; padding: 9px 14px; border-radius: 999px; pointer-events: none;
  background: #050c14e6; color: var(--warm); font-size: 12px; line-height: 1.45; text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); animation: moved-note-in .22s ease both; }
.player-moved-notice.is-leaving { animation: moved-note-out .35s ease both; }
@keyframes moved-note-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes moved-note-out { to { opacity: 0; } }
.player-unit .player-frame { border: 0; border-radius: 18px 18px 0 0; box-shadow: none; }
body.player-frame-expanded .player-unit .player-frame, .player-unit .player-frame:fullscreen, .player-unit .player-frame:-webkit-full-screen { border-radius: 0; }
.player-toolbar { margin: 0; border: 0; border-radius: 0 0 18px 18px; background: #05080c; padding: 6px 8px; }
.player-stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; text-align: center; margin-top: 14px; padding: 4px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.player-stepper strong { font-size: 13px; }
.player-stepper strong span { color: var(--muted); font-size: 11px; font-weight: 500; }
.player-stepper button, .player-icon-button, .player-more summary { display: grid; place-items: center; width: 44px; min-height: 44px; border: 0; border-radius: 12px; color: var(--text); background: transparent; font-size: 24px; cursor: pointer; }
.player-tools { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; align-items: center; gap: 4px; }
/* "‹ N серия ›" is never shown: the episode grid switches episodes in both
   players. The dub button lives in the toolbar under Kodik's frame; in our
   player the whole toolbar is hidden (native-player.css) and its own dub
   control opens the same picker. */
.player-screen .player-stepper { display: none; }
/* Kodik's player (owner, 2026-10-06, variant B2): its frame stands alone, with
   nothing of ours over it and no black strip under it. Below, part of the
   page: a thin status line, then the dub, our fullscreen and ⋯. */
.player-screen:not(.native-mode) .player-unit { margin-inline: 0; background: transparent; box-shadow: none; }
.player-screen:not(.native-mode) .player-unit .player-frame { border: 1px solid var(--line); border-radius: 16px; }
.player-screen:not(.native-mode) .player-toolbar { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; border-radius: 0; background: transparent; }
.player-reserve-status { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.player-reserve-status > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.player-reserve-status > span i { width: 7px; height: 7px; border-radius: 99px; background: var(--warm, #f2c14e); }
.player-reserve-back { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 2px; border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 800; }
.player-reserve-blocked { color: #ff9b8c; font-size: 12px; font-weight: 800; }
.player-screen.single-episode .episodes-section { display: none; }
.player-toolbar .player-tools { display: flex; align-items: center; gap: 8px; }
.player-toolbar .translation-trigger { flex: 1 1 auto; width: auto; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--text); background: var(--surface); text-align: left; }
.player-toolbar .translation-trigger strong { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.player-dub-icon { flex: 0 0 auto; display: grid; color: var(--accent); }
.player-dub-chevron { flex: 0 0 auto; display: grid; margin-left: auto; color: var(--muted); }
.player-toolbar .player-icon-button, .player-toolbar .player-more summary { width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 13px; color: var(--text); background: var(--surface); font-size: 18px; }
body.player-frame-expanded .player-screen .player-toolbar { display: none; }
/* A cinema recording (owner, 2026-10-03, variant a) is still marked when the
   dub is picked in Kodik's own list: a badge beside the corner buttons. Our
   own player marks it on its dub button instead. */
.player-tools .player-camrip { align-self: center; margin: 0; padding: 6px 8px; border-radius: 10px; }
.player-tools .player-camrip[hidden], .player-screen.native-mode .player-tools .player-camrip { display: none; }
button.native-translation .camrip-tag { flex: 0 0 auto; margin-left: 0; }
.player-more { position: relative; }
.player-more summary { list-style: none; }
.player-more summary::-webkit-details-marker { display: none; }
.player-more > button { position: absolute; z-index: 5; right: 0; top: 48px; width: 190px; min-height: 48px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--surface); box-shadow: 0 8px 28px #0006; font-size: 12px; }
.player-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.player-resume button { flex: 1 0 auto; min-height: 44px; padding: 10px 14px; border: 1px solid transparent; border-radius: 999px; background: var(--accent); color: var(--button-text, #07121c); font-size: 12px; font-weight: 600; }
.player-resume button:last-child { flex-grow: 0; color: var(--text); background: var(--surface); border-color: var(--line); }
.episode-new { position: absolute; top: 7px; left: 7px; padding: 4px 7px; border-radius: 7px; background: var(--accent); color: #07121c; font-size: 11px; font-weight: 800; letter-spacing: .5px; box-shadow: 0 2px 8px #0005; }
.hero-open { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.hero-open:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
@media (min-width: 641px) { .player-unit { margin-inline: 0; } }
.episode-pager button { min-width: 44px; min-height: 44px; }
.episode-pager { grid-template-columns: 44px auto 44px; }
.continue-card { position: relative; }
.continue-copy { padding-right: 24px; }
.history-remove { position: absolute; z-index: 2; right: 4px; top: 4px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--surface) 70%, transparent); color: color-mix(in srgb, var(--text) 65%, transparent); font-size: 23px; cursor: pointer; }
.history-remove:hover, .history-remove:focus-visible { color: var(--text); background: var(--surface); }
/* "Продолжить" once grown: one list, a labelled line where a new period starts. */
.continue-divider { display: flex; align-items: center; gap: 10px; margin: 8px 4px 0; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.continue-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.continue-list + .load-more { margin-top: 14px; }
/* "Показать ещё" scrolls the new cards to the top: keep them clear of the
   Telegram controls that sit over the page in fullscreen. */
.continue-card, .continue-divider { scroll-margin-top: calc(var(--safe-top) + 16px); }
.history-explainer { margin: 18px 20px; font-size: 11px; line-height: 1.6; color: var(--muted); }
.history-undo { position: fixed; z-index: 140; left: 50%; transform: translateX(-50%); bottom: calc(82px + var(--safe-bottom)); width: max-content; max-width: calc(100% - 24px); padding: 4px 12px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: var(--surface); box-shadow: 0 8px 32px #0008; font-size: 12px; }
.history-undo button { min-height: 44px; border: 0; color: var(--accent); background: transparent; font-weight: 700; }
.episode-preview::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(4,8,12,.82)); pointer-events: none; }
.episode-preview-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: color-mix(in srgb, var(--accent) 65%, transparent); font-size: 22px; }
.episode-number, .episode-current { position: absolute; z-index: 1; bottom: 7px; padding: 4px 6px; border-radius: 7px; color: #fff; background: rgba(5,10,15,.9); font-size: 11px; font-weight: 850; }
.episode-number { left: 7px; }
.episode-current { right: 7px; color: #071713; background: var(--accent); }
.episode-card > strong { display: block; overflow: hidden; padding: 8px 9px; color: var(--muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.player-note { margin: 14px 4px 0; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: center; }
/* In Kodik's player the status line says it all; the note under the episodes
   stays for our player. */
.player-screen:not(.native-mode) .player-note { display: none; }
body.player-frame-expanded { overflow: hidden; }
body.player-frame-expanded .player-frame,
.player-frame:fullscreen,
.player-frame:-webkit-full-screen { position: fixed; inset: 0; z-index: 120; width: 100vw; height: var(--viewport-stable-height); max-width: none; max-height: none; aspect-ratio: auto; border: 0; border-radius: 0; background: #000; box-shadow: none; }
body.player-frame-expanded .player-fullscreen-exit,
.player-frame:fullscreen .player-fullscreen-exit,
.player-frame:-webkit-full-screen .player-fullscreen-exit { display: grid; place-items: center; top: calc(10px + var(--safe-top)); right: calc(10px + var(--safe-right)); }

@supports (height: 100dvh) {
  body.player-frame-expanded .player-frame,
  .player-frame:fullscreen,
  .player-frame:-webkit-full-screen { height: 100dvh; }
}

@media (min-width: 600px) {
  .hero-card { min-height: 230px; }
  .poster-row { grid-auto-columns: 26%; }
  .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .player-screen { padding-inline: 28px; }
}

@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 postponement announced by the source, shown under the schedule row. The
   original text stays in the source's own words, the way the bot's notice
   labels it "Причина (оригинал)" rather than machine-translating it. */
.timeline-delay { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline;
  padding: 6px 9px; border-radius: 9px; background: rgba(242,180,118,.12); font-size: 11px; line-height: 1.4; }
.timeline-delay b { color: var(--orange, #f2b476); font-weight: 700; white-space: nowrap; }
.timeline-delay span { color: var(--muted); }

/* Touch target for the 5px carousel dots: an invisible area 44px tall.
   Positioning only, so the layout does not move. Dots sit 10px apart
   (5px dot + 5px gap), so the area grows vertically only and never covers a
   neighbour. Deliberately not applied to .text-button/.remove-follow: an
   overhanging area there could steal taps from controls next to them. */
.hero-carousel-dot { position: relative; }
.hero-carousel-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: calc(100% + 5px); height: 44px; transform: translate(-50%, -50%);
}

/* Kodik "camrip": a cinema-screen recording, marked wherever a dub is named
   in the player (2026-10-03). */
.camrip-tag { display: inline-block; margin-left: 6px; padding: 1px 5px; border: 1px solid color-mix(in srgb, var(--warm) 60%, transparent); border-radius: 6px; color: var(--warm); font-size: 11px; font-weight: 700; line-height: 1.3; vertical-align: 1px; }