@font-face {
  font-family: "Dramo UI";
  src: url("../fonts/iransans.ttf") format("truetype");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Dramo UI";
  src: url("../fonts/iransans-bold.ttf") format("truetype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Dramo Latin Digits";
  src: local("SF Pro Text"), local(".SF NS"), local("Helvetica Neue"), local("Roboto"), local("Segoe UI"), local("Arial");
  unicode-range: U+0030-0039;
  font-display: swap;
}
@font-face {
  font-family: "Dramo Kurdish";
  src: url("../fonts/rabar.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Dramo Web — design system
   Palette & metrics mirror the Android app (Colors.kt / Shapes.kt)
   ============================================================ */

:root {
  /* brand */
  --main: #0b82d2;
  --main-light: #4db3f5;
  --main-deep: #062c46;

  /* surfaces */
  --bg: #0b0b0f;
  --bnv: #14141b;
  --card: #191922;
  --card-2: #22222d;
  --sheet: #121218;
  --field: #16161e;
  --stroke: rgba(255, 255, 255, .08);
  --stroke-strong: rgba(255, 255, 255, .14);

  /* semantic */
  --age: #ff4757;
  --green: #34c759;
  --danger: #a31d1d;
  --gold: #f59e0b;

  /* text */
  --tx: #ffffff;
  --tx-2: rgba(255, 255, 255, .62);
  --tx-3: rgba(255, 255, 255, .4);

  /* shapes */
  --r-card: 16px;
  --r-small: 12px;
  --r-btn: 14px;
  --r-badge: 8px;
  --r-sheet: 24px;
  --r-dialog: 20px;

  --nav-h: 64px;
  --nav-gap: 14px;

  --font: "Dramo UI", -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

  --shadow-1: 0 6px 24px rgba(0, 0, 0, .45);
  --shadow-2: 0 14px 44px rgba(0, 0, 0, .55);

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
img.image-loading, img.image-missing { color: transparent; background: linear-gradient(135deg, rgba(77,179,245,.12), rgba(255,255,255,.025)), var(--card); }

html, body {
  height: var(--app-h, 100%);
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  touch-action: manipulation;
}
html[lang="ku"] { --font: "Dramo Latin Digits", "Dramo Kurdish", "Dramo UI", sans-serif; }
/* IranSans draws even the Latin digits 0–9 with Persian shapes (4 → ۴). The
   code already converts digits explicitly for Persian (toLocalDigits), so the
   other languages take 0–9 from a system font: "4Kurd", "TV-14", Arabic UI. */
html[lang="en"], html[lang="ar"] { --font: "Dramo Latin Digits", "Dramo UI", -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif; }

body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
img { -webkit-touch-callout: none; }
button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .62; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--main-light);
  outline-offset: 3px;
}

/* ---------- app shell ---------- */
#app {
  position: absolute;
  inset: 0;
  height: var(--app-h, 100dvh);
  overflow: hidden;
  background: var(--bg);
}

.boot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: radial-gradient(120% 80% at 50% 0%, #101024 0%, var(--bg) 60%);
  z-index: 200;
  transition: opacity .45s ease, visibility .45s;
}
.boot.hide { opacity: 0; visibility: hidden; }
.boot-logo svg { filter: drop-shadow(0 10px 40px rgba(11, 130, 210, .45)); animation: boot-pulse 2.2s ease-in-out infinite; }
.boot-logo img { width: 216px; max-width: 58vw; filter: drop-shadow(0 14px 44px rgba(11, 130, 210, .4)); animation: boot-pulse 2.2s ease-in-out infinite; }
.boot-name { font-weight: 800; font-size: 20px; letter-spacing: .5px; opacity: .9; }
.boot-status { font-size: 13px; color: var(--tx-3); min-height: 18px; }
.boot-retry { display: none; margin-top: 8px; }
.boot.error .boot-retry { display: inline-flex; }
@keyframes boot-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

/* ---------- pages ---------- */
.tabpanes { position: absolute; inset: 0; }
.tabpane {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--nav-h) + var(--nav-gap) * 2 + var(--sab) + 12px);
  display: none;
}
.tabpane.active { display: block; }

.page {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 40;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform .32s cubic-bezier(.32, .72, .34, 1);
  visibility: hidden;
}
html[dir="rtl"] .page { transform: translateX(-105%); }
.page.open { transform: translateX(0); visibility: visible; }
html[dir="rtl"] .page.open { transform: translateX(0); visibility: visible; }
.page.closing { transform: translateX(105%); }
html[dir="rtl"] .page.closing { transform: translateX(-105%); }

.page > .page-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* top bar inside stacked pages */
.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(var(--sat) + 10px) 16px 10px;
  background: linear-gradient(rgba(11, 11, 15, .92), rgba(11, 11, 15, 0));
  transition: background .25s;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar.solid { background: rgba(15, 15, 21, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.topbar-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .2s;
}
.topbar.solid .topbar-title { opacity: 1; }

.iconbtn {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(11, 11, 15, .55);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex: none;
  transition: transform .12s, background .2s;
}
.iconbtn:active { transform: scale(.9); }
.iconbtn svg { width: 20px; height: 20px; }

/* ---------- home hero slider ---------- */
.hero {
  position: relative;
  height: min(61dvh, 480px);
  min-height: 340px;
  border-radius: 0 0 28px 28px;
  overflow: hidden;
  background: var(--card);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(180deg, rgba(11,11,15,.1) 40%, rgba(11,11,15,.55) 72%, var(--bg) 100%);
  pointer-events: none;
}
.hero-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  position: relative;
  height: 100%;
}
.hero-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-dots {
  position: absolute;
  bottom: calc(18px + var(--sab, 0px) * 0);
  inset-inline-start: 18px;
  display: flex;
  gap: 6px;
  z-index: 5;
}
.hero-dot {
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .25);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.hero-dot.on { width: 22px; background: var(--main); }
.hero-dot:not(.on) { width: 7px; }
/* Phones and the installed iPhone app show the portrait (3:4) mobile artwork
   at its own proportions, so the title art at the top is not cropped. */
.hero.hero-portrait { height: auto; min-height: 0; aspect-ratio: 3 / 4; max-height: 78svh; }
.hero.hero-portrait .hero-slide img { object-position: center top; }
.hero-slide[role="link"] { cursor: pointer; }

/* ---------- sections ---------- */
.section { margin-top: 26px; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px 12px;
}
.section-title { font-size: 16.5px; font-weight: 800; letter-spacing: .2px; }
.section-more { font-size: 12.5px; color: var(--main-light); font-weight: 600; display: flex; align-items: center; gap: 3px; }

.hrow {
  display: flex;
  gap: 10px;
  padding: 0 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hrow::-webkit-scrollbar { display: none; }
.hrow > * { flex: none; scroll-snap-align: start; }

/* ---------- cards ---------- */
.filmcard {
  width: 128px;
  display: block;
  animation: fadeup .4s both;
}
.filmcard:active { transform: scale(.96); }
.filmcard .poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-card);
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgba(77, 179, 245, .2), transparent 66%),
    linear-gradient(155deg, var(--card-2), var(--main-deep));
  box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
  transition: transform .15s;
}
.filmcard .poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../icons/logo-colored.png") center / 64% auto no-repeat;
  opacity: .28;
}
.filmcard .poster img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.filmcard .poster img.image-loading, .filmcard .poster img.image-missing { opacity: 0; }
.filmcard .poster:has(> img.image-loading)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .07) 48%, transparent 64%);
  transform: translateX(-100%);
  animation: poster-sheen 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes poster-sheen { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .filmcard .poster::after { animation: none !important; } }
.poster-badges { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.badge {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.badge.year { top: 7px; inset-inline-start: 7px; color: rgba(255,255,255,.92); }
.badge.free { top: 7px; inset-inline-end: 7px; background: rgba(52, 199, 89, .9); color: #04240f; }
.badge.rate { bottom: 7px; inset-inline-end: 7px; color: #ffd54f; display: flex; gap: 3px; align-items: center; }
.badge.rate svg { width: 11px; height: 11px; }
/* The watched-episodes chip shares the corner: keep the score above it. */
.poster:has(.watched-badge) .badge.rate { bottom: 36px; }
.progress-chip {
  position: absolute;
  bottom: 7px; inset-inline-start: 7px;
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .62);
  color: var(--main-light);
}
.poster-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: rgba(255,255,255,.12);
}
.poster-progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--main), var(--main-light)); border-radius: 0 3px 3px 0; }
.filmcard .ft {
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, .92);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.filmcard .fs { margin-top: 1px; font-size: 11px; color: var(--tx-3); }

/* live card 3:2 */
.livecard { width: 220px; display: block; }
.livecard:active { transform: scale(.97); }
.livecard .thumb {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-1);
}
.livecard .thumb img { width: 100%; height: 100%; object-fit: cover; }
.livechip {
  position: absolute;
  top: 9px; inset-inline-start: 9px;
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 800;
  padding: 4px 9px;
  border-radius: 99px;
  background: rgba(211, 47, 47, .92);
}
.livechip .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.4s infinite; }
.livechip.soon { background: rgba(0, 0, 0, .65); }
@keyframes blink { 50% { opacity: .3; } }
.livecard .lt { margin-top: 9px; font-size: 13px; font-weight: 700; }
.livecard .lt { min-height: 40px; display: flex; align-items: flex-start; line-height: 1.7; }

/* person chip */
.personchip { width: 84px; text-align: center; display: block; }
.personchip:active { transform: scale(.95); }
.personchip img {
  width: 78px; height: 78px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--card-2);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.personchip .pn { margin-top: 8px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.9); }
.personchip .pr { font-size: 10px; color: var(--tx-3); }
.cast-section-title { margin-top: 24px; color: var(--tx-2); font-size: 13px; }
.cast-row { gap: 10px; padding-bottom: 8px; }
.cast-card {
  width: 116px;
  min-height: 164px;
  padding: 12px 10px 10px;
  border: 1px solid var(--stroke);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--card);
  text-align: center;
}
.cast-card img { width: 88px; height: 88px; border-color: rgba(77,179,245,.22); }
.cast-card .pn { min-height: 38px; display: grid; place-items: center; margin-top: 9px; line-height: 1.55; }
.cast-card .pr { min-height: 18px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cast-card:hover { border-color: rgba(77,179,245,.34); background: rgba(11,130,210,.07); }

/* collection square */
.colcard { width: 110px; display: block; }
.colcard:active { transform: scale(.96); }
.colcard img { width: 110px; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-1); }
.colcard .cn { margin-top: 8px; font-size: 12px; font-weight: 600; text-align: center; }

/* banner 5:2 */
.banner { margin: 26px 16px 0; border-radius: var(--r-card); overflow: hidden; position: relative; box-shadow: var(--shadow-1); display: block; }
.banner img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; display: block; }
.banner:active { transform: scale(.985); }
.banner-carousel {
  margin: 26px 16px 0;
  position: relative;
  aspect-ratio: 5 / 2;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-1);
}
.banner-carousel::after {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .48));
  pointer-events: none;
}
.banner-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.banner-carousel-track::-webkit-scrollbar { display: none; }
.banner-carousel-slide {
  display: block;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: center;
}
.banner-carousel-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.banner-carousel-controls {
  position: absolute;
  z-index: 1;
  inset-inline: 10px;
  bottom: 9px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  pointer-events: none;
}
.banner-carousel-count {
  margin-inline-end: auto;
  padding: 8px 10px;
  color: #fff;
  background: rgba(0, 0, 0, .48);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 100px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.banner-carousel-control {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #fff;
  background: rgba(0, 0, 0, .58);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.banner-carousel-control svg { width: 19px; height: 19px; }
.banner-carousel-control:focus-visible,
.banner-carousel-slide:focus-visible { outline: 2px solid var(--main-light); outline-offset: -3px; }
.banner-carousel-control:active { background: var(--main); }
.banner-previous svg { transform: rotate(180deg); }
html[dir="rtl"] .banner-previous svg { transform: none; }
html[dir="rtl"] .banner-next svg { transform: rotate(180deg); }

@media (max-width: 1023px) {
  .banner-carousel, .banner img { aspect-ratio: 25 / 11; }
  .banner-carousel::after { display: none; }
  .banner-carousel-controls { display: none; }
}

/* genre card 2:1 */
.genregrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 16px 8px; }
.tabpane[data-tab="genres"] .genregrid { padding-top: calc(var(--sat) + 24px); }
.genrecard {
  position: relative;
  aspect-ratio: 2 / 1;
  border-radius: var(--r-card);
  overflow: hidden;
  display: block;
  box-shadow: var(--shadow-1);
}
.genrecard img { width: 100%; height: 100%; object-fit: cover; }
.genrecard .gfade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(5,5,10,.85)); }
.genrecard .gname {
  position: absolute;
  bottom: 12px; left: 14px; right: auto;
  max-width: calc(100% - 28px);
  font-size: 14.5px; font-weight: 800;
  line-height: 1.55;
  text-align: left;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
html[dir="rtl"] .genrecard .gname { left: auto; right: 14px; text-align: right; }
.genrecard:active { transform: scale(.97); }

/* grid of posters (film list / search) */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; padding: 6px 16px 10px; }
.pgrid .filmcard { width: 100%; }

/* ---------- film preferences ---------- */
.preferences-page .page-scroll {
  padding: calc(var(--sat) + 78px) 16px 28px;
}
.preferences-hero {
  max-width: 920px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  background: linear-gradient(135deg, rgba(11,130,210,.16), rgba(11,130,210,.025)), var(--card);
}
.preferences-hero-icon {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--main-light);
  background: rgba(11,130,210,.16);
}
.preferences-hero-icon svg { width: 27px; height: 27px; }
.preferences-hero h1 { font-size: 17px; line-height: 1.5; }
.preferences-hero p { margin-top: 4px; color: var(--tx-2); font-size: 12px; line-height: 1.75; }
.preferences-hero small { display: block; margin-top: 5px; color: var(--tx-3); font-size: 10.5px; line-height: 1.65; }
.preferences-grid {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 12px;
}
.preference-card {
  min-width: 0;
  padding: 0;
  color: var(--tx-1);
  text-align: start;
  border-radius: var(--r-card);
  cursor: pointer;
}
.preference-poster {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: 0 4px 18px rgba(0,0,0,.38);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.preference-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(180deg, rgba(5,15,24,.05), rgba(5,15,24,.58));
  transition: opacity .2s ease;
}
.preference-poster img { width: 100%; height: 100%; display: block; object-fit: cover; }
.preference-check {
  position: absolute;
  z-index: 2;
  top: 9px;
  inset-inline-end: 9px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  color: transparent;
  background: rgba(0,0,0,.54);
  backdrop-filter: blur(7px);
  transform: scale(.92);
  transition: transform .2s ease, color .2s ease, background .2s ease;
}
.preference-check svg { width: 18px; height: 18px; stroke-width: 2.4; }
.preference-title {
  display: block;
  margin-top: 8px;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.55;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preference-card.selected .preference-poster { border-color: var(--main-light); box-shadow: 0 9px 30px rgba(11,130,210,.3); transform: translateY(-2px); }
.preference-card.selected .preference-poster::after { opacity: 1; }
.preference-card.selected .preference-check { color: #fff; background: var(--main); border-color: var(--main-light); transform: scale(1); }
.preference-card:focus-visible { outline: none; }
.preference-card:focus-visible .preference-poster { outline: 3px solid rgba(77,179,245,.85); outline-offset: 3px; }
.preferences-loading { padding: 24px; color: var(--tx-2); text-align: center; font-size: 12px; }
.preferences-loading[hidden] { display: none; }
.preferences-actions {
  position: relative;
  z-index: 22;
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px calc(var(--sab) + 12px);
  border-top: 1px solid var(--stroke);
  background: rgba(15,15,21,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.preferences-actions[hidden] { display: none; }
.preferences-selection { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--tx-2); font-size: 10.5px; }
.preferences-count { color: var(--tx-1); font-size: 19px; font-variant-numeric: tabular-nums; }
.preferences-action-buttons { display: flex; gap: 8px; }
.preferences-action-buttons .btn { min-width: 104px; min-height: 46px; }
.preferences-guest { padding: 20px 0; }

/* ---------- bottom navigation ---------- */
.bnv {
  position: absolute;
  inset-inline: 16px;
  bottom: max(6px, calc(var(--sab) * .35));
  height: var(--nav-h);
  background: rgba(20, 20, 27, .92);
  border: 1px solid var(--stroke);
  border-radius: 28px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-2);
  display: flex;
  z-index: 30;
}
.bnv-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  color: rgba(255, 255, 255, .5);
  transition: color .2s;
}
.bnv-item svg { width: 23px; height: 23px; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.bnv-item span { font-size: 10.5px; font-weight: 600; }
.bnv-item.on { color: var(--main-light); }
.bnv-item.on svg { transform: scale(1.14); }
.bnv-item.on::before {
  content: "";
  position: absolute;
  inset: 8px 10px 30px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(11,130,210,.32), rgba(77,179,245,.14));
  z-index: -1;
}
.bnv-item:active svg { transform: scale(.86); }

/* ---------- film details ---------- */
.fd-hero { position: relative; }
.fd-hero img.bg {
  width: 100%;
  aspect-ratio: 10 / 9;
  object-fit: cover;
  display: block;
  mask-image: linear-gradient(180deg, #000 55%, transparent 98%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 98%);
}
.fd-hero .fd-head {
  position: relative;
  margin-top: -38px;
  padding: 0 18px;
  text-align: center;
}
.fd-title { font-size: 22px; font-weight: 800; text-shadow: 0 2px 14px rgba(0,0,0,.8); }
.fd-sub { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--card);
  border: 1px solid var(--stroke);
  color: rgba(255,255,255,.85);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chip.age { background: rgba(255, 71, 87, .16); border-color: rgba(255, 71, 87, .35); color: #ff8a94; }
.chip.imdb { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .3); color: #ffd54f; font-weight: 800; }
.chip-btn:active { transform: scale(.95); }

.fd-actions { display: flex; gap: 10px; padding: 18px; }
.btn {
  border-radius: var(--r-btn);
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .12s, opacity .2s;
  border: 1px solid transparent;
}
.btn:active { transform: scale(.97); }
.btn.primary { flex: 2; background: linear-gradient(135deg, var(--main), #0a6cb1); box-shadow: 0 8px 22px rgba(11,130,210,.35); }
.btn.mirror { flex: 1.4; background: var(--card-2); border-color: var(--stroke); }
.btn.ghost { background: transparent; border-color: var(--stroke-strong); }
.btn.white { flex: 2; background: #fff; color: #0b0b0f; }
.btn.danger { background: rgba(163, 29, 29, .15); border-color: rgba(163, 29, 29, .4); color: #ff7b7b; }
.btn.small { padding: 9px 14px; font-size: 12.5px; flex: none; }
.btn svg { width: 18px; height: 18px; }
.btn.loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.loading svg { opacity: 0; }
.btn.loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* continue bar */
.fd-continue { margin: 0 18px; background: var(--card); border: 1px solid var(--stroke); border-radius: var(--r-small); padding: 12px 14px; }
.fd-continue .row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; }
.fd-continue .row b { color: var(--main-light); }
.fd-continue .bar { margin-top: 9px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.09); overflow: hidden; }
.fd-continue .bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--main), var(--main-light)); }

/* reactions */
.fd-react { margin: 12px 18px 0; display: flex; align-items: center; justify-content: space-around; gap: 8px; background: var(--card); border: 1px solid var(--stroke); border-radius: var(--r-card); padding: 10px; }
.react {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 0;
  border-radius: var(--r-small);
  background: var(--card-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--tx-2);
  transition: transform .12s;
}
.react:active { transform: scale(.94); }
.react.on { color: var(--main-light); }
.react svg { width: 17px; height: 17px; }

/* tabs */
.tabs {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  gap: 4px;
  padding: 16px 12px 0;
  background: linear-gradient(var(--bg) 75%, transparent);
  margin-bottom: 4px;
}
.tab {
  flex: 1;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tx-3);
  padding: 9px 4px 12px;
  position: relative;
}
.tab.on { color: var(--tx); }
.tab::after {
  content: "";
  position: absolute;
  bottom: 4px; left: 50%;
  width: 0; height: 3.5px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--main), var(--main-light));
  transform: translateX(-50%);
  transition: width .25s cubic-bezier(.4, 0, .2, 1);
}
.tab.on::after { width: 56%; }

.tabbody > section { display: none; }
.tabbody > section.on { display: block; animation: fadeup .3s both; }

/* details info */
.info-card { margin: 10px 16px; background: var(--card); border: 1px solid var(--stroke); border-radius: var(--r-card); padding: 14px 16px; font-size: 13.5px; line-height: 2; color: rgba(255,255,255,.85); }
.info-label { font-size: 12px; font-weight: 700; color: var(--tx-3); margin: 16px 16px 10px; display: flex; align-items: center; gap: 6px; }
.info-label::after { content: ""; flex: 1; height: 1px; background: var(--stroke); }
.clampable { position: relative; }
.clampable.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-more { margin-top: 6px; font-size: 12px; color: var(--main-light); font-weight: 700; }

/* person details */
.person-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--sat) + 76px) 20px 22px;
  overflow: hidden;
  text-align: center;
}
.person-hero::before {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  top: calc(var(--sat) - 100px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11,130,210,.24), transparent 68%);
  pointer-events: none;
}
.person-portrait { position: relative; width: 140px; height: 140px; padding: 5px; border: 1px solid rgba(77,179,245,.28); border-radius: 50%; background: rgba(11,130,210,.08); box-shadow: 0 16px 42px rgba(0,0,0,.4); }
.person-portrait img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; background: var(--card); }
.person-identity { position: relative; display: grid; justify-items: center; gap: 7px; margin-top: 16px; }
.person-identity h1 { max-width: 26ch; font-size: 22px; line-height: 1.55; text-wrap: balance; }
.person-role { padding: 5px 11px; border-radius: 99px; color: var(--main-light); background: rgba(11,130,210,.12); font-size: 11.5px; font-weight: 750; }
.person-work-count { color: var(--tx-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.person-login-hint { margin-top: 4px; text-align: center; line-height: 2.1; color: var(--tx-2); font-size: 13px; }
.person-bio-card { margin: 0 16px 20px; padding: 16px; border: 1px solid var(--stroke); border-radius: var(--r-card); background: var(--card); }
.person-bio-card h2, .person-works-title { font-size: 14px; font-weight: 800; }
.person-bio { margin-top: 9px; color: var(--tx-2); font-size: 13px; line-height: 2; text-align: start; white-space: pre-line; }
.person-bio-toggle { min-height: 44px; margin-top: 2px; padding: 9px 2px; color: var(--main-light); font-size: 12px; font-weight: 800; }
.person-works-title { margin: 2px 16px 8px; }
.person-filmography { padding-top: 4px; }

/* episodes */
.seasonbar { display: flex; gap: 8px; padding: 2px 16px 10px; overflow-x: auto; scrollbar-width: none; }
.seasonbar::-webkit-scrollbar { display: none; }
.season-pill {
  flex: none;
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--card);
  border: 1px solid var(--stroke);
  color: var(--tx-2);
}
.season-pill.on { background: rgba(11,130,210,.16); border-color: rgba(77,179,245,.45); color: var(--main-light); }

.eprow {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 16px 10px;
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
}
.eprow:active { transform: scale(.985); }
.epthumb { position: relative; width: 122px; aspect-ratio: 16/10; border-radius: var(--r-small); overflow: hidden; flex: none; background: var(--card-2); }
.epthumb img { width: 100%; height: 100%; object-fit: cover; }
.epthumb .playover { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.25); }
.epthumb .playover svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.epbody { flex: 1; min-width: 0; }
.epbody .et { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epbody .em { margin-top: 4px; font-size: 11.5px; color: var(--tx-3); display: flex; gap: 8px; }
.epbody .eprog { margin-top: 7px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.epbody .eprog > i { display: block; height: 100%; background: var(--main); }
.epwatch { position: absolute; top: 6px; inset-inline-end: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--green); display: grid; place-items: center; }
.epwatch svg { width: 11px; height: 11px; color: #06330f; }

/* comments */
.comment {
  margin: 0 16px 10px;
  padding: 13px 14px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
}
.comment .chead { display: flex; align-items: center; gap: 10px; }
.comment img.avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.comment .cname { font-size: 13px; font-weight: 700; }
.comment .cdate { font-size: 10.5px; color: var(--tx-3); margin-top: 2px; }
.comment .cbody { margin-top: 10px; font-size: 13px; line-height: 1.9; color: rgba(255,255,255,.88); }
.comment .cfoot { margin-top: 10px; display: flex; gap: 14px; }
.cbtn { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--tx-3); font-weight: 600; }
.cbtn:active { transform: scale(.94); }
.cbtn.on { color: var(--main-light); }
.cbtn.danger.on { color: #ff7b7b; }
.cbtn svg { width: 14px; height: 14px; }

/* ---------- search ---------- */
.searchbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: calc(var(--sat) + 12px) 16px 12px;
  display: flex;
  gap: 10px;
  background: linear-gradient(var(--bg) 80%, transparent);
}
.searchfield {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--field);
  border: 1px solid var(--stroke);
  border-radius: var(--r-btn);
  padding: 0 14px;
  height: 46px;
}
.searchfield svg { width: 18px; height: 18px; color: var(--tx-3); flex: none; }
.searchfield input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  color: var(--tx);
  font-family: inherit;
  font-size: 14.5px;
}
.searchfield input::placeholder { color: var(--tx-3); }
.filterbtn {
  width: 46px; height: 46px;
  flex: none;
  border-radius: var(--r-btn);
  background: var(--field);
  border: 1px solid var(--stroke);
  display: grid;
  place-items: center;
  position: relative;
}
.filterbtn svg { width: 19px; height: 19px; color: var(--tx-2); }
.filterbtn.active { border-color: rgba(77,179,245,.5); color: var(--main-light); }
.filterbtn.active svg { color: var(--main-light); }
.filterbtn .fdot { position: absolute; top: 10px; inset-inline-end: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--main-light); box-shadow: 0 0 8px var(--main-light); }
.filter-count {
  position: absolute;
  top: -5px;
  inset-inline-end: -5px;
  min-width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  padding-inline: 5px;
  border: 2px solid var(--bg);
  border-radius: 99px;
  background: var(--main);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}
.filter-count[hidden] { display: none; }

.histrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  font-size: 13.5px;
  color: var(--tx-2);
}
.histrow svg { width: 16px; height: 16px; color: var(--tx-3); }
.histrow .hx { width: 38px; height: 38px; margin: -8px -9px -8px auto; display: grid; place-items: center; color: var(--tx-3); border-radius: 11px; }
html[dir="rtl"] .histrow .hx { margin: -8px auto -8px -9px; }

.search-results { padding-bottom: 24px; }
.search-discovery { width: 100%; max-width: 920px; margin-inline: auto; }
.search-discovery-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 10px 16px 20px;
  padding: 16px;
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  background: linear-gradient(135deg, rgba(11,130,210,.15), rgba(11,130,210,.025)), var(--card);
}
.search-discovery-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: none; border-radius: 15px; color: var(--main-light); background: rgba(11,130,210,.17); }
.search-discovery-icon svg { width: 25px; height: 25px; }
.search-discovery h1 { font-size: 16px; line-height: 1.5; }
.search-discovery-head p { margin-top: 3px; color: var(--tx-2); font-size: 11.5px; line-height: 1.75; }
.search-history-block { margin-bottom: 22px; }
.search-suggestion-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 16px 12px; }
.search-suggestion-heading > div { display: grid; gap: 3px; }
.search-suggestion-heading strong { font-size: 14.5px; }
.search-suggestion-heading small, .search-suggestion-heading > span { color: var(--tx-3); font-size: 10.5px; line-height: 1.65; }
.search-suggestions-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: 118px;
  justify-content: start;
  gap: 14px;
  padding: 0 16px 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
}
.search-suggestions-grid::-webkit-scrollbar { display: none; }
.search-suggestions-grid .filmcard { width: 118px; scroll-snap-align: start; }

.search-filter-sheet { max-height: min(92dvh, 860px); padding-bottom: calc(var(--sab) + 92px); }
.filter-sheet-intro { margin: -4px 2px 18px; color: var(--tx-2); font-size: 11.5px; line-height: 1.8; }
.filter-basic-grid, .year-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.compact-field { min-width: 0; }
.filter-card { margin-bottom: 12px; padding: 15px; border: 1px solid var(--stroke); border-radius: var(--r-card); background: var(--card); }
.filter-card-heading { min-width: 0; display: flex; align-items: center; gap: 11px; text-align: start; }
.filter-card-heading > span:first-child { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border-radius: 12px; color: var(--main-light); background: rgba(11,130,210,.14); }
.filter-card-heading svg { width: 20px; height: 20px; }
.filter-card-heading > div { min-width: 0; display: grid; gap: 2px; }
.filter-card-heading strong { font-size: 13px; }
.filter-card-heading small { color: var(--tx-3); font-size: 10.5px; font-weight: 500; line-height: 1.55; }
.rating-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.rating-preset { min-height: 48px; padding: 7px 5px; display: grid; place-items: center; border: 1px solid var(--stroke); border-radius: 12px; color: var(--tx-2); background: var(--card-2); font-size: 11px; font-weight: 750; }
.rating-preset > span { display: grid; gap: 2px; }
.rating-preset b { font-size: 10.5px; white-space: nowrap; }
.rating-preset small { color: inherit; font-size: 9px; }
.rating-preset.selected { border-color: rgba(77,179,245,.62); color: #fff; background: rgba(11,130,210,.22); box-shadow: inset 0 0 0 1px rgba(77,179,245,.08); }
.year-filter-grid { margin-top: 14px; }
.year-filter-grid .field { margin-bottom: 0; }
.filter-multi-card { padding: 0; overflow: clip; }
.filter-disclosure { width: 100%; min-height: 72px; display: flex; align-items: center; gap: 10px; padding: 14px 15px; text-align: start; }
.filter-disclosure .filter-card-heading { flex: 1; }
.filter-selection-count { min-width: 33px; height: 27px; display: grid; place-items: center; padding-inline: 8px; border-radius: 99px; color: var(--tx-3); background: var(--card-2); font-size: 10.5px; font-weight: 800; }
.filter-selection-count.active { color: var(--main-light); background: rgba(11,130,210,.17); }
.filter-disclosure-chevron { width: 18px; height: 18px; color: var(--tx-3); transition: transform .2s ease; }
.filter-disclosure-chevron svg { width: 18px; height: 18px; }
.filter-disclosure.open .filter-disclosure-chevron { transform: rotate(90deg); }
html[dir="rtl"] .filter-disclosure.open .filter-disclosure-chevron { transform: rotate(-90deg); }
.filter-selection-summary { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 15px 13px; }
.filter-selection-summary[hidden], .filter-picker-panel[hidden] { display: none; }
.selected-filter-chip { max-width: 180px; min-height: 34px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(77,179,245,.24); border-radius: 99px; color: var(--main-light); background: rgba(11,130,210,.1); font-size: 10.5px; white-space: nowrap; }
.selected-filter-chip > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.selected-filter-chip svg { width: 13px; height: 13px; }
.selected-filter-more { min-height: 34px; display: grid; place-items: center; padding: 6px 10px; border-radius: 99px; color: var(--tx-2); background: var(--card-2); font-size: 10.5px; }
.filter-picker-panel { padding: 16px 15px 15px; border-top: 1px solid var(--stroke); background: linear-gradient(180deg, rgba(77,179,245,.025), transparent 80px); }
.filter-picker-search-wrap {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px;
  padding-inline: 14px 7px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)), #17171e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 8px 22px rgba(0,0,0,.12);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.filter-picker-search-wrap:focus-within {
  border-color: rgba(77,179,245,.7);
  background: linear-gradient(145deg, rgba(11,130,210,.09), rgba(255,255,255,.025)), #17171e;
  box-shadow: 0 0 0 3px rgba(77,179,245,.11), 0 12px 28px rgba(0,0,0,.18);
}
.filter-search-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border-radius: 12px; color: var(--main-light); background: rgba(11,130,210,.13); pointer-events: none; }
.filter-search-icon svg { width: 19px; height: 19px; }
.filter-picker-search { min-width: 0; height: 44px; flex: 1; padding: 0; border: 0; outline: 0; color: var(--tx); background: transparent; font: 600 16px/1.5 var(--font); }
.filter-picker-search::placeholder { color: var(--tx-3); font-weight: 500; opacity: 1; }
.filter-picker-search::-webkit-search-cancel-button { display: none; }
.filter-search-clear { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: 12px; color: var(--tx-2); background: rgba(255,255,255,.055); transition: color .18s, background .18s; }
.filter-search-clear:hover { color: #fff; background: rgba(255,255,255,.09); }
.filter-search-clear:focus-visible { outline: 2px solid var(--main-light); outline-offset: 2px; }
.filter-search-clear[hidden] { display: none; }
.filter-search-clear svg { width: 17px; height: 17px; }
.filter-search-meta { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 4px 7px; color: var(--tx-3); font-size: 10.5px; font-weight: 700; }
.filter-search-count { min-width: 48px; padding: 3px 8px; border-radius: 99px; color: var(--main-light); background: rgba(11,130,210,.1); font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 9.5px; text-align: center; }
.filter-option-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.filter-option { min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 9px 11px; border: 1px solid var(--stroke); border-radius: 11px; color: var(--tx-2); background: var(--card-2); text-align: start; font-size: 11.5px; }
.filter-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-option-mark { width: 17px; height: 17px; flex: none; color: var(--main-light); }
.filter-option svg { width: 17px; height: 17px; }
.filter-option.selected { border-color: rgba(77,179,245,.42); color: #fff; background: rgba(11,130,210,.14); }
.filter-show-more { width: 100%; min-height: 44px; margin-top: 9px; border-radius: 11px; color: var(--main-light); background: rgba(11,130,210,.08); font-size: 11.5px; font-weight: 800; }
.filter-show-more[hidden] { display: none; }
.filter-empty { grid-column: 1 / -1; padding: 28px 12px; color: var(--tx-3); text-align: center; font-size: 11.5px; }
.filter-actions { position: sticky; z-index: 4; bottom: calc(var(--sab) * -1); display: grid; grid-template-columns: .85fr 1.4fr; gap: 9px; margin: 18px -18px calc((var(--sab) + 92px) * -1); padding: 12px 18px calc(var(--sab) + 12px); border-top: 1px solid var(--stroke); background: rgba(18,18,24,.97); backdrop-filter: blur(16px); }
.filter-actions .btn { min-height: 50px; }

/* ---------- sheets & dialogs ---------- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 300;
  opacity: 0;
  transition: opacity .28s;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sheet-backdrop.show { opacity: 1; }
.sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 305;
  background: var(--sheet);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  border-top: 1px solid var(--stroke-strong);
  padding: 10px 18px calc(var(--sab) + 20px);
  max-height: 86dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(105%);
  transition: transform .34s cubic-bezier(.32, .72, .34, 1);
  box-shadow: var(--shadow-2);
}
.sheet.show { transform: translateY(0); }
.sheet-grab { width: 40px; height: 4.5px; border-radius: 99px; background: rgba(255,255,255,.18); margin: 4px auto 14px; }
.sheet-close { position: absolute; top: 10px; inset-inline-end: 12px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--card-2); border: 1px solid var(--stroke); }
.sheet-close svg { width: 19px; height: 19px; }
.sheet-title { font-size: 16px; font-weight: 800; margin-bottom: 14px; text-align: center; }

/* ---------- PWA / connectivity ---------- */
.network-banner {
  position: fixed;
  z-index: 220;
  top: calc(var(--sat) + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 28px), 520px);
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 15px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 750;
  text-align: center;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: notice-in .26s ease both;
}
.network-banner[hidden] { display: none; }
.network-banner.offline { background: rgba(126,34,45,.94); }
.network-banner.online { background: rgba(22,112,68,.94); }
.network-banner svg { width: 20px; height: 20px; flex: none; }

.app-notice {
  position: fixed;
  z-index: 210;
  inset-inline: 14px;
  bottom: calc(var(--sab) + var(--nav-h) + 28px);
  max-width: 540px;
  min-height: 58px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 13px;
  border: 1px solid rgba(77,179,245,.28);
  border-radius: 17px;
  background: rgba(16,19,27,.96);
  box-shadow: 0 16px 46px rgba(0,0,0,.56);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: notice-in .3s ease both;
}
.app-notice-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border-radius: 12px; background: rgba(77,179,245,.12); color: var(--main-light); }
.app-notice-icon svg { width: 20px; height: 20px; }
.app-notice-copy { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 700; line-height: 1.7; }
.app-notice-action { min-height: 44px; padding: 8px 12px; border-radius: 11px; background: var(--main); font-size: 11px; font-weight: 850; }
.app-notice-close { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: 11px; color: var(--tx-2); }
.app-notice-close svg { width: 18px; height: 18px; }
.app-notice button:hover { background-color: rgba(77,179,245,.22); }
@keyframes notice-in { from { opacity: 0; transform: translate(-50%, -10px); } }
.app-notice { animation-name: notice-rise; }
@keyframes notice-rise { from { opacity: 0; transform: translateY(12px); } }

.server-update-gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: max(20px, var(--sat)) 20px max(20px, var(--sab)); background: rgba(4,7,12,.78); opacity: 0; backdrop-filter: blur(18px); transition: opacity .25s ease; }
.server-update-gate.show { opacity: 1; }
.server-update-card { width: min(100%, 440px); padding: 28px 24px 24px; border: 1px solid rgba(77,179,245,.28); border-radius: 26px; background: radial-gradient(circle at 50% 0%, rgba(11,130,210,.2), transparent 45%), #15151d; box-shadow: 0 28px 90px rgba(0,0,0,.6); text-align: center; }
.server-update-visual { position: relative; width: 100px; height: 100px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 32px; color: var(--main-light); background: rgba(11,130,210,.12); overflow: hidden; }
.server-update-visual::before { content: ""; position: absolute; inset: 13px; border: 1px dashed rgba(77,179,245,.32); border-radius: 50%; animation: update-spin 9s linear infinite; }
.server-update-visual > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 17px; background: rgba(11,130,210,.22); }
.server-update-visual svg { width: 28px; height: 28px; }
.server-update-visual i { position: absolute; width: 7px; height: 7px; top: 13px; border-radius: 50%; background: var(--main-light); box-shadow: 0 0 14px var(--main-light); }
@keyframes update-spin { to { transform: rotate(360deg); } }
.server-update-badge { display: inline-flex; margin-bottom: 10px; padding: 5px 10px; border-radius: 99px; color: #9bd9ff; background: rgba(11,130,210,.13); font-size: 10px; font-weight: 900; }
.server-update-gate.forced .server-update-badge { color: #ffd19a; background: rgba(245,158,11,.12); }
.server-update-card h2 { font-size: 20px; line-height: 1.55; text-wrap: balance; }
.server-update-card > p { max-width: 34em; margin: 10px auto 23px; color: var(--tx-2); font-size: 12.5px; line-height: 1.9; }
.server-update-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.server-update-gate.forced .server-update-actions { grid-template-columns: 1fr; }
.server-update-actions .btn { min-height: 50px; }

.cached-content-note {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin: calc(var(--sat) + 12px) 16px 2px;
  padding: 9px 12px;
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 13px;
  background: rgba(245,158,11,.08);
  color: #ffd48a;
  font-size: 11px;
  font-weight: 700;
}
.cached-content-note svg { width: 19px; height: 19px; flex: none; }

.install-hero { position: relative; width: 120px; height: 94px; margin: 2px auto 16px; }
.install-hero img { position: absolute; inset-inline-end: 0; bottom: 0; width: 76px; height: 76px; border-radius: 21px; box-shadow: 0 12px 30px rgba(11,130,210,.28); }
.install-hero > span { position: absolute; z-index: 1; inset-inline-start: 0; top: 0; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(77,179,245,.3); border-radius: 17px; background: var(--main-deep); color: var(--main-light); }
.install-hero svg { width: 27px; height: 27px; }
.install-desc, .install-browser-hint { color: var(--tx-2); font-size: 12.5px; line-height: 2; text-align: center; }
.install-steps { margin: 17px 20px; padding-inline-start: 20px; color: var(--tx-2); font-size: 12px; line-height: 2.25; }
.install-steps li::marker { color: var(--main-light); font-weight: 900; }
.install-browser-hint { margin: 17px 0; padding: 13px; border-radius: 14px; background: rgba(255,255,255,.04); }
.install-done { width: 100%; margin-top: 12px; }

/* form elements */
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--tx-2); margin: 0 4px 8px; }
.field .control {
  width: 100%;
  background: var(--field);
  border: 1px solid var(--stroke);
  border-radius: var(--r-btn);
  padding: 13px 14px;
  color: var(--tx);
  font-family: inherit;
  font-size: 16px;
  min-height: 50px;
  outline: 0;
  transition: border-color .2s;
}
.field .control:focus { border-color: rgba(77, 179, 245, .55); }
.field-hint { margin: 7px 4px 0; color: var(--tx-3); font-size: 11.5px; line-height: 1.8; }
select.control { appearance: none; -webkit-appearance: none; }
.input-row { display: flex; gap: 8px; }
.input-row .control { flex: 1; }

/* phone country + searchable city controls */
.phone-control {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--stroke);
  border-radius: var(--r-btn);
  background: var(--field);
  transition: border-color .2s, box-shadow .2s;
}
.phone-control:focus-within { border-color: rgba(77,179,245,.58); box-shadow: 0 0 0 3px rgba(77,179,245,.09); }
.phone-country-trigger {
  min-width: 72px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border-inline-end: 1px solid var(--stroke);
  color: var(--tx);
  font-size: 13px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.phone-country-trigger:hover { background: rgba(255,255,255,.035); }
.phone-country-trigger:focus-visible { outline: 3px solid rgba(77,179,245,.58); outline-offset: -3px; }
.phone-country-trigger > svg:first-child { width: 32px; height: 22px; flex: none; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.phone-country-trigger > svg:last-child { width: 13px; height: 13px; color: var(--tx-3); }
.phone-number-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 13px 14px;
  color: var(--tx);
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  text-align: left;
}
.country-list { display: grid; gap: 7px; margin-top: 8px; }
.country-option {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  color: var(--tx);
  background: var(--card);
  text-align: start;
}
.country-option:hover { background: rgba(255,255,255,.045); }
.country-option.selected { border-color: rgba(77,179,245,.48); background: rgba(11,130,210,.11); }
.country-flag { width: 33px; height: 22px; display: block; flex: none; overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.country-flag svg { width: 100%; height: 100%; display: block; }
.country-name { flex: 1; font-size: 13.5px; font-weight: 700; }
.country-option b { color: var(--tx-2); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.country-check { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--main); }
.country-check svg { width: 14px; height: 14px; stroke-width: 2.5; }
.search-select-control { display: flex; align-items: center; gap: 12px; text-align: start; cursor: pointer; }
.search-select-control > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-select-control .placeholder { color: var(--tx-3); }
.search-select-chevron { width: 18px; height: 18px; color: var(--tx-3); flex: none; }
.search-select-chevron svg { width: 18px; height: 18px; }
.city-picker-sheet { max-height: min(78dvh, 680px); }
.city-search-wrap { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 2px 0 12px; background: var(--sheet); }
.city-search-wrap > span { width: 19px; height: 19px; margin-inline-start: 13px; margin-inline-end: -41px; z-index: 1; color: var(--tx-3); pointer-events: none; }
.city-search-wrap svg { width: 19px; height: 19px; }
.city-search-input { padding-inline-start: 42px !important; }
.city-option-list { display: grid; gap: 6px; max-height: min(52dvh, 430px); overflow-y: auto; overscroll-behavior: contain; }
.city-option {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 13px;
  color: var(--tx-2);
  background: var(--card);
  text-align: start;
}
.city-option:hover { background: rgba(255,255,255,.045); color: var(--tx); }
.city-option.selected { color: var(--main-light); background: rgba(11,130,210,.12); }
.city-option > span:first-child { flex: 1; }
.city-option svg { width: 17px; height: 17px; }
.city-empty { padding: 36px 16px; color: var(--tx-3); text-align: center; font-size: 12.5px; }

/* radio rows (language sheet) */
.radiorow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border-radius: var(--r-small);
  border: 1px solid transparent;
  margin-bottom: 6px;
  background: var(--card);
}
.radiorow.on { border-color: rgba(77,179,245,.5); background: rgba(11,130,210,.08); }
.radiorow .rr-name { flex: 1; font-size: 14.5px; font-weight: 600; }
.radiodot { width: 21px; height: 21px; border-radius: 50%; border: 2px solid var(--tx-3); display: grid; place-items: center; flex: none; }
.radiorow.on .radiodot { border-color: var(--main-light); }
.radiorow.on .radiodot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--main-light); }

/* range sliders */
.rangewrap { padding: 6px 4px 2px; }
.rangewrap .rv { display: flex; justify-content: space-between; font-size: 12px; color: var(--tx-2); margin-bottom: 8px; font-weight: 700; }
input[type="range"] { width: 100%; accent-color: var(--main); height: 26px; }

/* toggle chips multi-select */
.chipcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.mchip {
  padding: 8px 14px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--card);
  border: 1px solid var(--stroke);
  color: var(--tx-2);
}
.mchip.on { background: rgba(11,130,210,.16); border-color: rgba(77,179,245,.5); color: var(--main-light); }

/* ---------- toast ---------- */
#toasts {
  position: fixed;
  top: calc(var(--sat) + 14px);
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 300;
  pointer-events: none;
}
.toast {
  background: rgba(34, 34, 45, .96);
  border: 1px solid var(--stroke-strong);
  color: var(--tx);
  border-radius: 99px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-2);
  animation: toast-in .3s cubic-bezier(.34, 1.56, .64, 1);
  max-width: 86vw;
  text-align: center;
}
.toast.err { border-color: rgba(255, 71, 87, .4); }
@keyframes toast-in { from { transform: translateY(-24px); opacity: 0; } }

/* ---------- skeleton ---------- */
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sk {
  background: linear-gradient(100deg, var(--card) 40%, var(--card-2) 50%, var(--card) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-card);
}
.sk.hero-s { height: 300px; border-radius: 0 0 28px 28px; }
.sk.row-s { display: flex; gap: 10px; padding: 0 16px; }
.sk.row-s .sk { width: 110px; aspect-ratio: 2/3; flex: none; }
.sk.title-s { height: 15px; width: 130px; margin: 26px 16px 14px; border-radius: 6px; }

/* ---------- empty & error states ---------- */
.statebox { text-align: center; padding: 60px 30px; color: var(--tx-2); }
.statebox svg { width: 46px; height: 46px; color: var(--tx-3); margin-bottom: 14px; }
.statebox .st { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.85); }
.statebox .sd { font-size: 12.5px; margin-top: 8px; line-height: 1.9; }
.statebox .btn { margin: 18px auto 0; min-width: 140px; display: inline-flex; }

/* ---------- profile ---------- */
.profile-head {
  margin: 16px;
  padding: 18px;
  border-radius: var(--r-card);
  background: linear-gradient(145deg, rgba(11,130,210,.22), rgba(11,130,210,.04) 55%), var(--card);
  border: 1px solid rgba(11,130,210,.25);
  display: flex;
  align-items: center;
  gap: 14px;
}
.profile-head img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; border: 2.5px solid rgba(77,179,245,.5); }
.profile-head .pn { font-size: 17px; font-weight: 800; }
.profile-head .pm { font-size: 12px; color: var(--tx-2); margin-top: 4px; }
.subbadge { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 99px; background: rgba(52,199,89,.14); border: 1px solid rgba(52,199,89,.35); color: #7ee2a0; }
.subbadge.none { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); color: #ffd54f; }
.subbadge > span:first-child { width: 15px; height: 15px; display: grid; place-items: center; flex: none; }
.subbadge svg { width: 15px; height: 15px; }
.profile-subscription-cta {
  position: relative;
  width: calc(100% - 32px);
  min-height: 104px;
  margin: 8px 16px 16px;
  padding: 15px 16px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 13px;
  overflow: hidden;
  border: 1px solid rgba(245,158,11,.28);
  border-radius: var(--r-card);
  color: var(--tx);
  background:
    radial-gradient(circle at 0 0, rgba(245,158,11,.18), transparent 44%),
    linear-gradient(135deg, rgba(11,130,210,.15), rgba(255,255,255,.018)), var(--card);
  box-shadow: 0 14px 36px rgba(0,0,0,.16);
  text-align: start;
  transition: border-color .18s, background .18s, transform .12s;
}
.profile-subscription-cta::after { content: ""; position: absolute; width: 118px; height: 118px; inset: auto -42px -70px auto; border-radius: 50%; background: rgba(245,158,11,.07); pointer-events: none; }
.profile-subscription-cta:hover { border-color: rgba(245,158,11,.48); background-color: var(--card-2); }
.profile-subscription-cta:active { transform: scale(.988); }
.profile-subscription-cta:focus-visible { outline: 3px solid rgba(245,158,11,.56); outline-offset: 3px; }
.profile-subscription-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 17px; color: #ffd76a; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.22); }
.profile-subscription-icon svg { width: 27px; height: 27px; }
.profile-subscription-copy { min-width: 0; display: grid; gap: 3px; }
.profile-subscription-copy small { color: #ffd98a; font-size: 10.5px; font-weight: 800; line-height: 1.55; }
.profile-subscription-copy strong { font-size: 15px; line-height: 1.55; }
.profile-subscription-copy em { color: var(--tx-2); font-size: 10.5px; font-style: normal; line-height: 1.65; }
.profile-subscription-arrow { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: var(--main-light); background: rgba(11,130,210,.12); }
.profile-subscription-arrow svg { width: 17px; height: 17px; }
html[dir="rtl"] .profile-subscription-arrow svg { transform: scaleX(-1); }

.pgroup { margin: 8px 16px 16px; background: var(--card); border: 1px solid var(--stroke); border-radius: var(--r-card); overflow: hidden; }
.pgroup-title { font-size: 11.5px; font-weight: 700; color: var(--tx-3); padding: 14px 16px 6px; }
.prow {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13.5px 16px;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  text-align: start;
  transition: background .15s;
}
.prow:active { background: rgba(255,255,255,.04); }
.prow svg { width: 20px; height: 20px; color: var(--main-light); flex: none; }
.prow .chev { margin-inline-start: auto; color: var(--tx-3); width: 16px; height: 16px; }
.prow-status { margin-inline-start: auto; color: var(--tx-3); font-size: 9.5px; font-weight: 750; }
.prow-status.granted { color: #81dfa0; }
.prow-status.denied { color: #ff989f; }
.prow-status.unconfigured { color: #ffd38d; }
.prow-status + .chev { margin-inline-start: 0; }
.prow.red { color: #ff7b7b; }
.prow.red svg { color: #ff7b7b; }
.socials { display: flex; justify-content: center; gap: 14px; padding: 6px 0 18px; }
.socials a { width: 46px; height: 46px; border-radius: 50%; background: var(--card); border: 1px solid var(--stroke); display: grid; place-items: center; transition: border-color .2s, background .2s; }
.socials a:hover { border-color: rgba(77,179,245,.38); background: rgba(11,130,210,.1); }
.socials svg { width: 19px; height: 19px; color: var(--tx-2); }
.profile-social-group { margin: 26px 16px 2px; text-align: center; }
.profile-social-group > span { display: block; margin-bottom: 10px; color: var(--tx-3); font-size: 10.5px; font-weight: 750; }
.profile-social-group .socials { padding-bottom: 4px; }
.profile-version { padding: 10px 0 calc(var(--sab) + 18px); color: var(--tx-3); font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 10.5px; text-align: center; }
.notification-hero { width: 88px; height: 88px; margin: 2px auto 19px; display: grid; place-items: center; border-radius: 28px; color: var(--main-light); background: radial-gradient(circle, rgba(77,179,245,.2), rgba(11,130,210,.07)); }
.notification-hero > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(11,130,210,.18); }
.notification-hero svg { width: 27px; height: 27px; }
.notification-status { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--stroke); border-radius: var(--r-card); background: var(--card); text-align: start; }
.notification-status > span { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border-radius: 12px; color: var(--main-light); background: rgba(11,130,210,.12); }
.notification-status svg { width: 20px; height: 20px; }
.notification-status strong { font-size: 13px; }
.notification-status p { margin-top: 4px; color: var(--tx-2); font-size: 11px; line-height: 1.7; }
.notification-status.granted { border-color: rgba(52,199,89,.26); }
.notification-status.granted > span { color: #7ee2a0; background: rgba(52,199,89,.1); }
.notification-status.denied, .notification-status.error { border-color: rgba(255,71,87,.25); }
.notification-status.denied > span, .notification-status.error > span { color: #ff939b; background: rgba(255,71,87,.08); }
.notification-browser-help { margin: -4px 3px 16px; color: #ffd38d; font-size: 11px; line-height: 1.8; }
.notification-sheet > .btn { width: 100%; min-height: 50px; }
.profile-switcher {
  min-height: 52px;
  margin: calc(var(--sat) + 10px) 16px 0;
  margin-inline-start: auto;
  padding: 7px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--stroke);
  border-radius: 99px;
  background: var(--card);
}
.profile-switcher img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.profile-switcher-icon { width: 36px; height: 36px; display: grid !important; place-items: center; border-radius: 50%; color: var(--main-light); background: var(--card-2); }
.profile-switcher-icon svg { width: 19px; height: 19px; }
.profile-switcher > span:not(.chev) { display: grid; text-align: start; }
.profile-switcher small { color: var(--tx-3); font-size: 9.5px; }
.profile-switcher strong { margin-top: 2px; font-size: 12.5px; }
.profile-switcher .chev svg { width: 15px; height: 15px; color: var(--tx-3); }
.pgroup .prow + .prow { border-top: 1px solid var(--stroke); }

/* account, watch profiles, devices, TV activation */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.simple-page-pad {
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  padding: calc(var(--sat) + 76px) 18px calc(var(--sab) + 34px);
}
.settings-form { width: 100%; max-width: 540px; margin-inline: auto; }
.avatar-editor { display: grid; place-items: center; gap: 12px; margin-bottom: 28px; }
.avatar-preview-wrap { position: relative; width: 104px; height: 104px; }
.profile-avatar-preview { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; background: var(--card-2); border: 3px solid rgba(77,179,245,.38); }
.avatar-preview-wrap > span {
  position: absolute;
  inset-inline-end: -2px;
  bottom: 2px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--main);
  border: 3px solid var(--bg);
}
.avatar-preview-wrap svg { width: 17px; height: 17px; }
.avatar-pick { min-height: 44px; padding-block: 9px; }
.settings-section-note {
  margin: 30px 0 16px;
  padding: 13px 14px;
  color: var(--tx-2);
  font-size: 12px;
  line-height: 1.9;
  background: rgba(11,130,210,.08);
  border: 1px solid rgba(77,179,245,.18);
  border-radius: var(--r-small);
}
.settings-submit { width: 100%; min-height: 52px; margin-top: 24px; }
.danger-link {
  width: 100%;
  min-height: 48px;
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #ff8a94;
  border-radius: var(--r-btn);
  border: 1px solid rgba(255,71,87,.24);
  background: rgba(255,71,87,.06);
  font-weight: 700;
}
.danger-link svg { width: 19px; height: 19px; }
.dialog-copy, .danger-copy { margin: 8px 8px 18px; color: var(--tx-2); font-size: 13px; line-height: 1.9; text-align: center; }
.danger-copy { color: #ffb0b7; }
.dialog-actions { display: flex; gap: 10px; margin-top: 18px; }
.dialog-actions .btn { flex: 1; min-height: 48px; }

/* complete film report flow */
.report-sheet { max-height: min(90dvh, 780px); }
.report-intro { margin: -2px 2px 14px; color: var(--tx-2); font-size: 12.5px; line-height: 1.9; text-align: center; }
.report-issues { display: grid; gap: 7px; }
.report-issue { overflow: hidden; border: 1px solid var(--stroke); border-radius: 15px; background: var(--card); }
.report-check { min-height: 50px; display: flex; align-items: center; gap: 11px; padding: 10px 12px; color: var(--tx-2); font-size: 13px; font-weight: 700; cursor: pointer; }
.report-check input, .report-language-chip input { position: absolute; opacity: 0; pointer-events: none; }
.report-checkmark { width: 23px; height: 23px; display: grid; place-items: center; flex: none; border: 1.5px solid var(--tx-3); border-radius: 7px; color: transparent; transition: background .16s, border-color .16s, color .16s; }
.report-checkmark svg { width: 15px; height: 15px; stroke-width: 2.5; }
.report-check input:checked + .report-checkmark { color: #fff; border-color: var(--main); background: var(--main); }
.report-check:has(input:focus-visible) { outline: 3px solid rgba(77,179,245,.58); outline-offset: -3px; }
.report-issue-details { padding: 0 12px 12px; border-top: 1px solid var(--stroke); }
.report-issue-details[hidden] { display: none; }
.report-language-label { padding: 10px 1px 8px; color: var(--tx-3); font-size: 11px; }
.report-language-list { display: flex; flex-wrap: wrap; gap: 7px; }
.report-language-chip { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border: 1px solid var(--stroke); border-radius: 99px; color: var(--tx-2); background: var(--field); font-size: 11.5px; cursor: pointer; }
.report-language-chip:has(input:checked) { color: var(--main-light); border-color: rgba(77,179,245,.5); background: rgba(11,130,210,.13); }
.report-language-chip:has(input:focus-visible) { outline: 3px solid rgba(77,179,245,.58); outline-offset: 2px; }
.report-description { width: 100%; min-height: 116px; margin-top: 12px; padding: 12px 13px; resize: vertical; border: 1px solid var(--stroke); border-radius: var(--r-btn); outline: none; color: var(--tx); background: var(--field); font-family: inherit; font-size: 16px; line-height: 1.8; }
.report-description:focus { border-color: rgba(77,179,245,.58); box-shadow: 0 0 0 3px rgba(77,179,245,.09); }
.report-actions { position: sticky; bottom: calc(var(--sab) * -1 - 20px); z-index: 2; padding: 12px 0 0; background: linear-gradient(transparent, var(--sheet) 18%); }
.profile-loader { min-height: 55dvh; display: grid; place-items: center; align-content: center; gap: 14px; color: var(--tx-2); font-size: 13px; }
.profile-loader .ring { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.14); border-top-color: var(--main-light); animation: spin .8s linear infinite; }

.watch-profile-hero { padding: calc(var(--sat) + 84px) 20px 24px; display: grid; place-items: center; gap: 16px; }
.watch-profile-hero img { width: 150px; max-width: 45vw; }
.watch-profile-hero h1 { font-size: 20px; }
.watch-profile-grid { width: min(100% - 36px, 620px); margin: 0 auto calc(var(--sab) + 32px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
.watch-profile-card { position: relative; min-width: 0; padding: 10px; border-radius: var(--r-card); background: transparent; border: 1px solid transparent; }
.watch-profile-card.selected { background: rgba(11,130,210,.08); border-color: rgba(77,179,245,.26); }
.watch-profile-select { width: 100%; min-height: 150px; display: grid; place-items: center; align-content: center; gap: 7px; border-radius: var(--r-small); }
.watch-profile-avatar-wrap { position: relative; }
.watch-profile-avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; background: var(--card-2); border: 2px solid var(--stroke-strong); }
.watch-profile-select strong { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.watch-profile-select > span { color: var(--tx-3); font-size: 11px; }
.profile-selected-mark { position: absolute; inset-inline-end: 0; bottom: 2px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--main); border: 3px solid var(--bg); }
.profile-selected-mark svg { width: 14px; height: 14px; }
.watch-profile-delete { position: absolute; top: 4px; inset-inline-end: 4px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #ff8a94; background: rgba(11,11,15,.8); border: 1px solid rgba(255,71,87,.2); }
.watch-profile-delete svg { width: 17px; height: 17px; }
.watch-profile-add { min-height: 170px; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--tx-2); background: rgba(255,255,255,.025); border: 1px dashed var(--stroke-strong); }
.add-profile-icon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--card-2); color: var(--main-light); }
.add-profile-icon svg { width: 28px; height: 28px; }
.profile-add-form { padding-top: 8px; }
.profile-add-photo { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 18px; margin: 12px 4px 22px; }
.watch-profile-add-preview { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.profile-add-photo .btn { min-height: 46px; }
.check-row { min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 8px 4px; cursor: pointer; color: var(--tx-2); font-size: 13.5px; font-weight: 700; }
.check-row input { position: absolute; opacity: 0; pointer-events: none; }
.check-ui { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--stroke-strong); background: var(--field); }
.check-ui svg { width: 16px; height: 16px; opacity: 0; }
.check-row input:checked + .check-ui { background: var(--main); border-color: var(--main); }
.check-row input:checked + .check-ui svg { opacity: 1; }
.check-row input:focus-visible + .check-ui { outline: 3px solid var(--main-light); outline-offset: 3px; }

.page-intro { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 16px; border-radius: var(--r-card); background: linear-gradient(145deg, rgba(11,130,210,.14), transparent), var(--card); border: 1px solid var(--stroke); }
.page-intro-icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: var(--r-small); color: var(--main-light); background: rgba(11,130,210,.15); }
.page-intro-icon svg { width: 25px; height: 25px; }
.page-intro h1 { font-size: 16px; }
.page-intro p { margin-top: 5px; color: var(--tx-2); font-size: 11.5px; line-height: 1.7; }
.device-list { display: grid; gap: 10px; }
.device-row { width: 100%; min-height: 76px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; text-align: start; border: 1px solid var(--stroke); border-radius: var(--r-card); background: var(--card); }
.device-row:active { background: var(--card-2); }
.device-icon { width: 48px; height: 48px; flex: none; object-fit: contain; border-radius: 50%; background: rgba(11,130,210,.12); padding: 8px; }
.device-copy { min-width: 0; flex: 1; display: grid; gap: 6px; }
.device-copy strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-copy small { color: var(--tx-3); font-size: 11px; }
.device-copy small.online { color: #7ee2a0; }
.online-dot { display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(52,199,89,.1); }
.device-chevron { color: var(--tx-3); }
.device-chevron svg { width: 17px; height: 17px; }
.tv-cta { width: 100%; min-height: 52px; margin-top: 22px; }
.device-sheet-head { display: grid; place-items: center; gap: 8px; margin: 10px 0 18px; text-align: center; }
.device-sheet-icon { width: 64px; height: 64px; object-fit: contain; padding: 10px; border-radius: 50%; background: rgba(11,130,210,.12); }
.device-sheet-head strong { font-size: 15px; }
.device-sheet-head span { color: var(--tx-3); font-size: 12px; }
.device-sheet-head span.online { color: #7ee2a0; }

/* login device-limit recovery */
.device-replacement-sheet { max-height: min(92dvh, 760px); }
.device-replacement-hero { width: 62px; height: 62px; margin: 2px auto 12px; display: grid; place-items: center; border: 1px solid rgba(77,179,245,.26); border-radius: 20px; color: var(--main-light); background: rgba(11,130,210,.13); }
.device-replacement-hero svg { width: 30px; height: 30px; }
.device-replacement-intro { max-width: 46ch; margin: 0 auto 15px; color: var(--tx-2); font-size: 12.5px; line-height: 1.9; text-align: center; }
.device-replacement-error { margin-bottom: 10px; }
.device-replacement-list { display: grid; gap: 9px; }
.device-replacement-row { width: 100%; min-height: 74px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--stroke); border-radius: 15px; background: var(--card); text-align: start; transition: border-color .18s, background .18s; }
.device-replacement-row:hover { border-color: rgba(77,179,245,.38); background: var(--card-2); }
.device-replacement-row:focus-visible { outline: 3px solid rgba(77,179,245,.65); outline-offset: 2px; }
.device-replacement-icon { width: 46px; height: 46px; object-fit: contain; padding: 7px; border-radius: 14px; background: rgba(11,130,210,.11); }
.device-replacement-copy { min-width: 0; display: grid; gap: 5px; }
.device-replacement-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.device-replacement-copy small { color: var(--tx-3); font-size: 10.5px; line-height: 1.5; }
.device-replacement-action { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; border-radius: 11px; color: #fff; background: var(--main); font-size: 10.5px; font-weight: 850; white-space: nowrap; }
.device-replacement-note { margin: 13px 4px 0; color: var(--tx-3); font-size: 10.5px; line-height: 1.7; text-align: center; }

@media (max-width: 480px) {
  .device-replacement-sheet { padding-inline: 12px; }
  .device-replacement-row { grid-template-columns: 44px minmax(0, 1fr); }
  .device-replacement-action { grid-column: 1 / -1; width: 100%; min-height: 42px; }
}

.tv-login-main { display: grid; place-items: center; min-height: 100%; }
.tv-login-card { width: 100%; max-width: 520px; padding: 24px 20px; border: 1px solid var(--stroke); border-radius: var(--r-card); background: radial-gradient(circle at 50% 0%, rgba(11,130,210,.13), transparent 42%), var(--card); text-align: center; }
.tv-illustration { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 16px; color: var(--main-light); border-radius: 22px; background: rgba(11,130,210,.13); }
.tv-illustration svg { width: 38px; height: 38px; }
.tv-login-card h1 { font-size: 20px; }
.tv-login-card > p { margin: 10px auto 22px; max-width: 400px; color: var(--tx-2); font-size: 13px; line-height: 1.9; }
.tv-code-form { text-align: start; }
.tv-code { text-align: center; letter-spacing: .48em; font-size: 24px !important; font-weight: 800; font-variant-numeric: tabular-nums; }
.scan-button { width: 100%; min-height: 50px; }
.qr-scanner { position: absolute; inset: 0; z-index: 180; overflow: hidden; background: #000; }
.qr-scanner[hidden] { display: none; }
.qr-video { width: 100%; height: 100%; object-fit: cover; }
.qr-scrim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, transparent 0 106px, rgba(0,0,0,.7) 108px); pointer-events: none; }
.qr-frame { position: absolute; top: 46%; left: 50%; width: 210px; height: 210px; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 24px; box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
.qr-hint { position: absolute; top: calc(46% + 126px); left: 20px; right: 20px; text-align: center; font-size: 13px; text-shadow: 0 2px 8px #000; }
.qr-close { position: absolute; bottom: calc(var(--sab) + 22px); left: 50%; min-height: 48px; transform: translateX(-50%); background: rgba(18,18,24,.9); white-space: nowrap; }

/* support, content request, referral */
.request-form { padding-bottom: 10px; }
.form-page-intro { margin-bottom: 26px; }
.request-form textarea.control { min-height: 132px; line-height: 1.9; resize: vertical; }
.field .control[aria-invalid="true"] { border-color: rgba(255,71,87,.62); box-shadow: 0 0 0 3px rgba(255,71,87,.08); }
.field-error { margin: 7px 4px 0; color: #ff9da6; font-size: 11.5px; line-height: 1.7; }
.field-error[hidden] { display: none; }
.form-summary strong { display: block; font-size: 13px; margin-bottom: 5px; }
.form-summary ul { margin: 0; padding-inline-start: 20px; }
.form-summary li { margin-top: 3px; }
.form-summary a { text-decoration: underline; text-underline-offset: 3px; }
.referral-hero {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin: 6px auto 16px;
  border-radius: 24px;
  color: var(--main-light);
  background: radial-gradient(circle at 50% 20%, rgba(77,179,245,.22), transparent 65%), rgba(11,130,210,.11);
  border: 1px solid rgba(77,179,245,.2);
}
.referral-hero svg { width: 38px; height: 38px; }
.referral-desc { max-width: 440px; margin: 0 auto 20px; color: var(--tx-2); font-size: 13px; line-height: 1.95; text-align: center; }
.referral-code {
  width: 100%;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-card);
  background: var(--field);
  text-align: start;
  transition: border-color .2s, background .2s;
}
.referral-code > span:first-child { min-width: 0; flex: 1; display: grid; gap: 5px; }
.referral-code small { color: var(--tx-3); font-size: 11px; }
.referral-code strong { direction: ltr; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 21px; letter-spacing: .12em; overflow-wrap: anywhere; }
.referral-copy-icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 13px; color: var(--main-light); background: rgba(11,130,210,.13); }
.referral-copy-icon svg { width: 20px; height: 20px; }
.referral-code.copied { border-color: rgba(52,199,89,.38); background: rgba(52,199,89,.07); }
.referral-code.copied .referral-copy-icon { color: #7ee2a0; background: rgba(52,199,89,.12); }
.referral-status { min-height: 22px; padding-top: 6px; color: #7ee2a0; font-size: 11.5px; text-align: center; }
.referral-share { width: 100%; min-height: 50px; margin-top: 8px; }

/* subscription checkout */
.subscription-page-pad { max-width: 860px; padding-bottom: calc(var(--sab) + 52px); }
.subscription-hero {
  min-height: 132px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
  margin-bottom: 28px;
  border: 1px solid rgba(77,179,245,.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 10%, rgba(77,179,245,.22), transparent 46%),
    linear-gradient(145deg, rgba(11,130,210,.16), rgba(255,255,255,.015)), var(--card);
}
.subscription-hero-icon { width: 68px; height: 68px; flex: none; display: grid; place-items: center; border-radius: 22px; color: #ffd76a; background: rgba(245,158,11,.11); border: 1px solid rgba(245,158,11,.22); }
.subscription-hero-icon svg { width: 34px; height: 34px; }
.subscription-hero h1 { font-size: 20px; line-height: 1.55; }
.subscription-hero p { max-width: 560px; margin-top: 7px; color: var(--tx-2); font-size: 12.5px; line-height: 1.9; }
.subscription-card {
  position: relative;
  margin: 20px 0 30px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(77,179,245,.24);
  border-radius: 22px;
  background: radial-gradient(circle at 10% 0%, rgba(77,179,245,.18), transparent 38%), var(--card);
}
.subscription-card::after { content: ""; position: absolute; inset: auto -50px -70px auto; width: 180px; height: 180px; border-radius: 50%; background: rgba(11,130,210,.06); pointer-events: none; }
.subscription-card-visual { position: relative; width: 100%; aspect-ratio: 1.58; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.14); border-radius: 21px 21px 0 0; background: #061a32; }
.subscription-card-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.subscription-card-body { min-width: 0; padding: 20px; }
.subscription-card-eyebrow { color: var(--main-light); font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.subscription-card h2 { margin-top: 5px; font-size: 17px; line-height: 1.55; }
.subscription-card-body > p { margin: 6px 0 13px; color: var(--tx-2); font-size: 11.5px; line-height: 1.75; }
.subscription-card-label { display: block; margin: 0 0 7px; color: var(--tx-1); font-size: 12px; font-weight: 800; }
.subscription-card-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.subscription-card-input { width: 100%; min-width: 0; min-height: 50px; padding: 12px 14px; border: 1px solid var(--stroke-strong); border-radius: var(--r-btn); outline: none; color: #fff; background: var(--field); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 17px; font-weight: 800; letter-spacing: .18em; text-align: center; }
.subscription-card-input:focus { border-color: rgba(77,179,245,.62); box-shadow: 0 0 0 3px rgba(77,179,245,.09); }
.subscription-card-submit { min-width: 160px; min-height: 50px; }
.subscription-card-status { min-height: 18px; margin-top: 7px; color: var(--tx-3); font-size: 10.5px; line-height: 1.6; }
.subscription-card-status.error { color: #ff939b; }
.subscription-empty { border: 1px dashed var(--stroke-strong); border-radius: var(--r-card); }
.subscription-success-sheet { text-align: center; }
.subscription-success-mark { position: relative; width: 92px; height: 92px; margin: 6px auto 20px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(52,199,89,.26), rgba(52,199,89,.07) 68%); }
.subscription-success-mark::before, .subscription-success-mark::after { content: ""; position: absolute; border: 1px solid rgba(52,199,89,.24); border-radius: 50%; inset: -9px; }
.subscription-success-mark::after { inset: -18px; opacity: .5; }
.subscription-success-mark > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); box-shadow: 0 10px 30px rgba(52,199,89,.24); }
.subscription-success-mark svg { width: 26px; height: 26px; stroke-width: 2.4; }
.subscription-success-sheet h2 { font-size: 21px; }
.subscription-success-sheet > p { margin: 9px auto 15px; max-width: 34em; color: var(--tx-2); font-size: 12.5px; line-height: 1.9; }
.subscription-success-plan { display: inline-flex; margin-bottom: 20px; padding: 7px 12px; border-radius: 99px; color: #8ee5aa; background: rgba(52,199,89,.1); font-size: 12px; }
.subscription-success-sheet .btn { width: 100%; }
.subscription-section-title { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 11px; }
.subscription-section-title span { color: var(--main-light); font-size: 10.5px; font-weight: 800; letter-spacing: .02em; }
.subscription-section-title h2 { font-size: 15px; }
.subscription-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 26px; }
.subscription-option {
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  text-align: start;
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  background: var(--card);
  transition: border-color .18s, background .18s, transform .12s;
}
.subscription-option:active { transform: scale(.985); }
.subscription-option.selected { border-color: rgba(77,179,245,.58); background: linear-gradient(145deg, rgba(11,130,210,.14), rgba(11,130,210,.035)), var(--card); box-shadow: inset 0 0 0 1px rgba(77,179,245,.08); }
.subscription-option:focus-visible { outline: 3px solid rgba(77,179,245,.5); outline-offset: 3px; }
.plan-mark { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 15px; color: #ffd76a; background: rgba(245,158,11,.1); }
.plan-mark svg { width: 23px; height: 23px; }
.gateway-logo { width: 58px; height: 42px; flex: none; object-fit: contain; padding: 5px; border-radius: 11px; background: #fff; }
.subscription-option-copy { min-width: 0; flex: 1; display: grid; gap: 6px; }
.subscription-option-copy strong { font-size: 14px; overflow-wrap: anywhere; }
.subscription-option-copy small { color: var(--tx-2); font-size: 11.5px; line-height: 1.65; overflow-wrap: anywhere; }
.subscription-option.plan .subscription-option-copy small { color: #ffe39b; font-size: 14px; font-weight: 800; }
.subscription-option.selected .radiodot { border-color: var(--main-light); }
.subscription-option.selected .radiodot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--main-light); }
.subscription-discount { margin: 4px 0 18px; padding: 18px; border: 1px solid var(--stroke); border-radius: var(--r-card); background: var(--card); }
.subscription-discount label { display: block; font-size: 13.5px; font-weight: 800; }
.subscription-discount p { margin: 6px 0 12px; color: var(--tx-3); font-size: 11.5px; line-height: 1.75; }
.subscription-discount .control { width: 100%; text-align: start; background: var(--field); border: 1px solid var(--stroke); border-radius: var(--r-btn); padding: 13px 14px; color: var(--tx); font-family: inherit; font-size: 15px; font-weight: 600; min-height: 50px; outline: none; }
.subscription-discount .control:focus { border-color: rgba(77,179,245,.55); }
.payment-safety { display: flex; align-items: flex-start; gap: 12px; margin: 18px 2px; color: var(--tx-2); }
.payment-safety > span { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #7ee2a0; background: rgba(52,199,89,.1); }
.payment-safety svg { width: 19px; height: 19px; }
.payment-safety strong { color: var(--tx); font-size: 12.5px; }
.payment-safety p { margin-top: 4px; font-size: 11px; line-height: 1.8; }
.subscription-action { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 16px; border-radius: var(--r-card); background: var(--card-2); border: 1px solid var(--stroke-strong); }
.subscription-total { min-width: 0; flex: 1; display: grid; gap: 5px; }
.subscription-total span { color: var(--tx-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subscription-total strong { font-size: 16px; overflow-wrap: anywhere; }
.subscription-submit { min-width: 240px; min-height: 52px; }
.subscription-submit:disabled { opacity: .42; box-shadow: none; cursor: not-allowed; }
.payment-review { margin: 8px 0 14px; padding: 4px 16px; border: 1px solid var(--stroke); border-radius: var(--r-card); background: var(--card); }
.payment-review-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; min-height: 49px; padding: 13px 0; }
.payment-review-row + .payment-review-row { border-top: 1px solid var(--stroke); }
.payment-review-row span { color: var(--tx-2); font-size: 12px; }
.payment-review-row b { max-width: 60%; text-align: end; font-size: 13px; overflow-wrap: anywhere; }
.payment-review-row.total b { color: #ffe39b; font-size: 16px; }
.payment-review-note { margin: 0 4px 16px; color: var(--tx-3); font-size: 11.5px; line-height: 1.85; }

@media (max-width: 560px), (min-width: 720px) and (max-width: 1023px) {
  .subscription-hero { align-items: flex-start; padding: 18px; border-radius: var(--r-card); }
  .subscription-hero-icon { width: 54px; height: 54px; border-radius: 17px; }
  .subscription-hero-icon svg { width: 27px; height: 27px; }
  .subscription-hero h1 { font-size: 17px; }
  .subscription-options { grid-template-columns: 1fr; }
  .subscription-action { align-items: stretch; flex-direction: column; }
  .subscription-submit { width: 100%; min-width: 0; }
  .subscription-card-body { padding: 17px 16px 16px; }
  .subscription-card-controls { grid-template-columns: 1fr; }
  .subscription-card-submit { width: 100%; min-width: 0; }
}

@media (min-width: 720px) {
  .watch-profile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .simple-page-pad { padding-inline: 28px; }
}

/* guest card */
.guestcard {
  margin: 16px;
  padding: 22px 18px;
  text-align: center;
  border-radius: var(--r-card);
  background: linear-gradient(160deg, rgba(11,130,210,.18), rgba(6,44,70,.25)), var(--card);
  border: 1px solid rgba(11,130,210,.3);
}
.guestcard .gt { font-size: 16px; font-weight: 800; }
.guestcard .gd { font-size: 12.5px; color: var(--tx-2); margin: 10px 0 16px; line-height: 1.9; }
.guestcard > div:first-child svg { width: 44px; height: 44px; color: var(--main-light); }

/* ---------- site footer + company pages ---------- */
.site-footer {
  width: calc(100% - 32px);
  max-width: 1180px;
  margin: 50px auto 14px;
  padding: 25px;
  border: 1px solid var(--stroke);
  border-radius: 24px;
  color: var(--tx-2);
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(11,130,210,.13), transparent 66%),
    linear-gradient(145deg, rgba(255,255,255,.025), transparent), var(--card);
}
.site-footer-grid { display: grid; grid-template-columns: minmax(280px, 1.7fr) minmax(140px, .65fr) minmax(150px, .65fr); gap: clamp(28px, 5vw, 72px); }
.site-footer-brand { min-width: 0; }
.site-footer-logo { width: 138px; min-height: 44px; display: flex; align-items: center; }
.site-footer-logo img { width: 100%; height: auto; object-fit: contain; }
.site-footer-brand > p { max-width: 48ch; margin-top: 13px; font-size: 12px; line-height: 1.8; }
.site-footer-verso { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 13px; margin-top: 14px; font-size: 11px; line-height: 1.7; }
.site-footer-verso a { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--main-light); font-weight: 800; }
.site-footer-verso svg { width: 15px; height: 15px; }
.site-footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.site-footer-column strong { margin-bottom: 9px; color: var(--tx); font-size: 12.5px; }
.site-footer-column a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; color: var(--tx-2); font-size: 11.5px; line-height: 1.5; transition: color .18s; }
.site-footer-column a:hover { color: var(--main-light); }
.site-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--stroke); color: var(--tx-3); font-size: 10.5px; line-height: 1.65; }

.site-info-scroll { scrollbar-width: thin; scrollbar-color: #26262f transparent; }
.site-info-container { width: 100%; max-width: 980px; margin-inline: auto; padding: 28px 20px 64px; }
.site-info-hero { min-height: 154px; display: flex; align-items: center; gap: 20px; margin-bottom: 24px; padding: clamp(22px, 4vw, 38px); border: 1px solid rgba(77,179,245,.18); border-radius: 26px; background: radial-gradient(circle at 12% 10%, rgba(77,179,245,.16), transparent 42%), var(--card); }
.site-info-hero > span { width: 66px; height: 66px; display: grid; place-items: center; flex: none; border-radius: 21px; color: var(--main-light); background: rgba(11,130,210,.17); box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.site-info-hero svg { width: 32px; height: 32px; }
.site-info-hero h1 { font-size: clamp(21px, 3vw, 31px); line-height: 1.45; text-wrap: balance; }
.site-info-hero p { max-width: 64ch; margin-top: 7px; color: var(--tx-2); font-size: 13px; line-height: 1.9; }
.guide-grid, .download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.download-version { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 99px; background: rgba(11,130,210,.16); color: var(--main-light); font-size: 11px; font-weight: 700; }
.guide-card, .download-card { min-width: 0; padding: 22px; border: 1px solid var(--stroke); border-radius: 20px; background: var(--card); }
.guide-card-icon, .download-device { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 15px; color: var(--main-light); background: rgba(11,130,210,.13); }
.guide-card-icon svg, .download-device svg { width: 24px; height: 24px; }
.guide-card h2, .download-card h2 { font-size: 16px; line-height: 1.55; }
.guide-card > p, .download-card p { margin-top: 7px; color: var(--tx-2); font-size: 11.5px; line-height: 1.85; }
.guide-card ol { margin-top: 18px; padding-inline-start: 22px; color: var(--tx-2); font-size: 11.5px; line-height: 1.9; }
.guide-card li + li { margin-top: 8px; }
.download-card { display: flex; flex-direction: column; }
.download-card > div { flex: 1; }
.download-card .btn { width: 100%; min-height: 48px; margin-top: 20px; text-align: center; }
.btn.is-disabled { opacity: .48; cursor: not-allowed; pointer-events: none; }
.site-info-main-action { min-width: min(100%, 300px); min-height: 50px; margin: 24px auto 0; }
.company-card { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 24px; border: 1px solid var(--stroke); border-radius: 22px; background: var(--card); }
.company-card-logo { width: 110px; height: 70px; object-fit: contain; }
.company-card span, .contact-row small { color: var(--tx-3); font-size: 10.5px; font-weight: 750; }
.company-card h2 { margin-top: 3px; font-family: system-ui, sans-serif; font-size: 22px; }
.company-card p { margin-top: 6px; color: var(--tx-2); font-size: 11.5px; line-height: 1.8; }
.company-card .btn { min-width: 190px; }
.contact-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.contact-row { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--stroke); border-radius: 16px; background: var(--card); }
.contact-row > span { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border-radius: 12px; color: var(--main-light); background: rgba(11,130,210,.12); }
.contact-row svg { width: 20px; height: 20px; }
.contact-row div { min-width: 0; display: grid; gap: 3px; }
.contact-row strong { overflow-wrap: anywhere; font-size: 12px; }
.legal-container { max-width: 860px; }
.legal-sections { display: grid; gap: 12px; }
.legal-section { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; padding: 20px; border: 1px solid var(--stroke); border-radius: 18px; background: var(--card); }
.legal-section > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--main-light); background: rgba(11,130,210,.12); font-family: ui-monospace, monospace; font-size: 11px; font-weight: 850; }
.legal-section h2 { font-size: 15px; line-height: 1.6; }
.legal-section p { margin-top: 6px; color: var(--tx-2); font-size: 12px; line-height: 2; }
.company-notice { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 17px 18px; border: 1px solid rgba(77,179,245,.2); border-radius: 16px; color: var(--tx-2); background: rgba(11,130,210,.08); font-size: 11.5px; line-height: 1.8; }
.company-notice > span { width: 22px; height: 22px; flex: none; color: var(--main-light); }
.company-notice svg { width: 22px; height: 22px; }
.company-notice p { flex: 1; }
.company-notice a { min-height: 44px; display: inline-flex; align-items: center; color: var(--main-light); font-family: system-ui, sans-serif; font-weight: 800; }
.kids-page-scroll > .section { max-width: 1180px; margin-inline: auto; }
.kids-page-hero { max-width: 1180px; min-height: 118px; display: flex; align-items: center; gap: 18px; margin: 24px auto; padding: 24px; border: 1px solid rgba(77,179,245,.18); border-radius: 22px; background: linear-gradient(135deg, rgba(11,130,210,.16), rgba(11,130,210,.03)), var(--card); }
.kids-page-hero > span { width: 58px; height: 58px; display: grid; place-items: center; flex: none; border-radius: 19px; color: var(--main-light); background: rgba(11,130,210,.16); }
.kids-page-hero svg { width: 29px; height: 29px; }
.kids-page-hero h1 { font-size: 22px; }
.kids-page-hero p { margin-top: 5px; color: var(--tx-2); font-size: 12px; line-height: 1.8; }

@media (max-width: 719px) {
  .site-footer { width: calc(100% - 24px); margin-top: 34px; padding: 20px 16px; border-radius: 20px; }
  .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px 16px; }
  .site-footer-brand { grid-column: 1 / -1; }
  .site-footer-bottom { align-items: flex-start; flex-direction: column; gap: 5px; }
  .site-info-container { padding: 18px 14px 50px; }
  .site-info-hero { min-height: 0; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 20px; }
  .site-info-hero > span { width: 52px; height: 52px; border-radius: 17px; }
  .site-info-hero svg { width: 26px; height: 26px; }
  .site-info-hero h1 { font-size: 19px; }
  .guide-grid, .download-grid, .contact-list { grid-template-columns: 1fr; }
  .guide-card, .download-card { padding: 18px; }
  .company-card { grid-template-columns: 76px minmax(0, 1fr); gap: 15px; padding: 18px; }
  .company-card-logo { width: 76px; height: 54px; }
  .company-card .btn { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .company-notice { align-items: flex-start; flex-wrap: wrap; }
  .company-notice p { min-width: calc(100% - 38px); }
  .company-notice a { margin-inline-start: 34px; }
  .kids-page-hero { margin: 14px; padding: 18px; border-radius: 18px; }
}

/* tabs pill (my list) */
.pilltabs { display: flex; gap: 8px; padding: 14px 16px; }
.pilltab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-radius: var(--r-btn);
  font-size: 13px;
  font-weight: 700;
  background: var(--card);
  border: 1px solid var(--stroke);
  color: var(--tx-2);
}
.pilltab.on { background: rgba(11,130,210,.14); border-color: rgba(77,179,245,.45); color: var(--main-light); }

/* history rows */
.histcard {
  display: flex;
  gap: 12px;
  margin: 0 16px 12px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  overflow: hidden;
}
.histcard .hthumb { position: relative; width: 128px; flex: none; }
.histcard .hthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.histcard .hbody { flex: 1; padding: 12px 14px 12px 0; min-width: 0; display: flex; flex-direction: column; }
html[dir="rtl"] .histcard .hbody { padding: 12px 0 12px 14px; }
.histcard .ht { font-size: 13.5px; font-weight: 700; }
.histcard .hd { font-size: 11.5px; color: var(--tx-3); margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.histcard .hprog { margin-top: auto; padding-top: 10px; }
.histcard .hprog .bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.histcard .hprog .bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--main), var(--main-light)); }
.histcard .hprog .plabel { font-size: 10.5px; color: var(--main-light); font-weight: 700; margin-top: 6px; }

/* ---------- live detail ---------- */
.livehero { position: relative; }
.livehero img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; mask-image: linear-gradient(180deg, #000 60%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); }
.countdown { display: flex; justify-content: center; gap: 10px; margin: 18px 0 6px; }
.cdbox { min-width: 64px; padding: 12px 8px; text-align: center; background: #2a2a35; border-radius: var(--r-small); }
.cdbox b { display: block; font-size: 21px; font-weight: 800; color: var(--main-light); font-variant-numeric: tabular-nums; }
.cdbox span { font-size: 10.5px; color: var(--tx-3); }

/* ---------- player ---------- */
.pv-media-surface { position: absolute; inset: 0; overflow: hidden; }
.pv-media-surface[hidden], .pv-wrap > video[hidden] { display: none; }
.pv-media-surface canvas, .pv-media-surface video { display: block; }
/* MKV remuxed to MSE plays in a <video> inside the surface: size it like the native one. */
.pv-media-surface video { width: 100% !important; height: 100% !important; object-fit: contain; background: #000; }
.playerpage[data-resize="zoom"] .pv-media-surface video { object-fit: cover; }
.playerpage[data-resize="fill"] .pv-media-surface canvas,
.playerpage[data-resize="fill"] .pv-media-surface video { width: 100% !important; height: 100% !important; object-fit: fill; }
.playerpage {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: #000;
  display: none;
  isolation: isolate;
}
.playerpage.open { display: block; }
html.player-active body, html.player-active #app { width: 100vw; height: var(--app-h, 100dvh); max-width: none; margin: 0; border-radius: 0; box-shadow: none; }
html.player-active .playerpage { width: 100vw; height: var(--app-h, 100dvh); max-width: none; }
.pv-wrap { position: absolute; inset: 0; display: grid; place-items: center; }
.pv-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.playerpage[data-resize="fit"] .pv-wrap video { object-fit: contain; }
.playerpage[data-resize="zoom"] .pv-wrap video { object-fit: cover; }
.playerpage[data-resize="fill"] .pv-wrap video { object-fit: fill; }
.pv-gesture { position: absolute; inset: 0; z-index: 2; }
.pv-controls {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(0,0,0,.8) 0, rgba(0,0,0,.28) 19%, transparent 38%),
    linear-gradient(0deg, rgba(0,0,0,.88) 0, rgba(0,0,0,.42) 25%, transparent 49%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--sat) + 14px) clamp(14px, 3vw, 42px) calc(var(--sab) + 18px);
  transition: opacity .25s ease;
}
.pv-controls.hide { opacity: 0; pointer-events: none; }
.pv-top, .pv-bottom { width: min(100%, 1280px); margin-inline: auto; }
.pv-top { display: flex; align-items: center; gap: 9px; }
.pv-top .iconbtn, .pv-top-btn {
  width: 44px;
  height: 44px;
  flex: none;
  background: rgba(10,10,14,.58);
  border: 1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.pv-title { flex: 1; min-width: 0; font-size: clamp(14px, 1.6vw, 19px); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 10px rgba(0,0,0,.85); }
.pv-live-badge { flex: none; padding: 6px 10px; border-radius: 99px; background: rgba(232,52,67,.9); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .03em; box-shadow: 0 5px 18px rgba(232,52,67,.28); }
.pv-center { display: flex; align-items: center; justify-content: center; gap: clamp(34px, 7vw, 92px); }
.pv-big, .pv-skip {
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(7,9,14,.56);
  box-shadow: 0 12px 34px rgba(0,0,0,.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.pv-big { width: clamp(68px, 8vw, 88px); height: clamp(68px, 8vw, 88px); background: rgba(11,130,210,.83); border-color: rgba(132,211,255,.46); }
.pv-big svg { width: 34px; height: 34px; filter: drop-shadow(0 4px 14px rgba(0,0,0,.3)); }
.pv-skip { position: relative; width: 54px; height: 54px; }
.pv-skip svg { width: 29px; height: 29px; }
.pv-skip > span { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 1px; font-size: 9px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pv-big:hover, .pv-skip:hover { transform: scale(1.06); background: rgba(11,130,210,.9); border-color: rgba(132,211,255,.6); }
.pv-bottom { display: flex; flex-direction: column; gap: 10px; }
.pv-timeline { direction: ltr; }
.pv-seek { position: relative; height: 30px; display: flex; align-items: center; cursor: pointer; border-radius: 12px; outline: none; }
.pv-track { position: absolute; left: 0; right: 0; height: 5px; border-radius: 99px; background: rgba(255,255,255,.22); overflow: hidden; transition: height .16s ease; }
.pv-buf, .pv-played { position: absolute; left: 0; top: 0; height: 100%; }
.pv-buf { background: rgba(255,255,255,.32); }
.pv-played { background: linear-gradient(90deg, #0b82d2, #70c9ff); }
.pv-knob { position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 2px 9px rgba(0,0,0,.55); transform: translateY(-50%); }
.pv-seek:hover .pv-track, .pv-seek:focus-visible .pv-track { height: 8px; }
.pv-seek:focus-visible { box-shadow: 0 0 0 3px rgba(77,179,245,.55); }
.pv-times { display: flex; justify-content: space-between; margin-top: -2px; padding-inline: 2px; font-size: 11.5px; color: rgba(255,255,255,.82); font-variant-numeric: tabular-nums; }
.pv-btns {
  align-self: center;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 3px;
  max-width: 100%;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(10,11,16,.64);
  box-shadow: 0 14px 38px rgba(0,0,0,.34);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.pv-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: clamp(49px, 10vw, 72px); min-height: 50px; padding: 5px 7px; border-radius: 14px; font-size: 9.5px; font-weight: 750; color: rgba(255,255,255,.86); }
.pv-btn svg { width: 21px; height: 21px; }
.pv-btn[hidden] { display: none; }
.pv-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.pv-btn:active { transform: scale(.94); }
.pv-btn:focus-visible, .pv-big:focus-visible, .pv-skip:focus-visible, .pv-top button:focus-visible, .pv-unlock:focus-visible { outline: 3px solid rgba(77,179,245,.85); outline-offset: 2px; }
.is-live .pv-timeline, .is-live .pv-skip, .is-live .pv-speed-btn { display: none; }
.pv-spin {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; pointer-events: none;
}
.pv-spin .ring { width: 46px; height: 46px; border-radius: 50%; border: 3.5px solid rgba(255,255,255,.2); border-top-color: var(--main-light); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pv-subtitle {
  position: absolute;
  left: 8%; right: 8%;
  bottom: calc(var(--sab) + 122px + var(--sub-lift, 16px));
  text-align: center;
  z-index: 2;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  transition: bottom .25s ease;
  font-family: var(--sub-font, "Dramo Kurdish", sans-serif);
  font-size: var(--sub-size, 17px);
  font-weight: 600;
  color: var(--sub-color, #fff);
  text-shadow: var(--sub-shadow, 0 1px 4px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9));
  line-height: 1.65;
}
/* With the controls hidden the subtitle drops closer to the edge. */
.pv-controls.hide ~ .pv-subtitle, .playerpage:has(.pv-controls.hide) .pv-subtitle { bottom: calc(var(--sab) + 22px + var(--sub-lift, 16px)); }
.pv-subtitle span { background: var(--sub-bg, transparent); padding: 3px 10px; border-radius: 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pv-skip-feedback {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -35%) scale(.94);
  padding: 9px 14px;
  border-radius: 99px;
  background: rgba(5,7,12,.75);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  backdrop-filter: blur(12px);
}
.pv-skip-feedback.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pv-next-overlay {
  position: absolute;
  z-index: 4;
  inset-inline-end: clamp(16px, 4vw, 48px);
  bottom: calc(var(--sab) + 152px);
  width: min(340px, calc(100% - 32px));
  padding: 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 19px;
  background: rgba(9,11,17,.86);
  box-shadow: 0 18px 50px rgba(0,0,0,.48);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.pv-next-overlay[hidden] { display: none; }
.pv-next-overlay > span { display: block; color: var(--main-light); font-size: 10px; font-weight: 850; }
.pv-next-overlay strong { display: block; margin: 5px 0 6px; font-size: 14px; line-height: 1.7; }
.pv-next-overlay .pv-next-countdown { display: block; margin-bottom: 12px; color: #e0e5ef; font-size: 12px; font-variant-numeric: tabular-nums; }
.pv-next-actions { display: flex; gap: 8px; }
.pv-next-overlay .btn { min-height: 44px; flex: 1; padding: 9px 12px; }
.pv-next-overlay .btn.mirror { flex: 0 0 auto; }
.pv-next-overlay button:focus-visible { outline: 3px solid var(--main-light); outline-offset: 2px; }
@media (max-height: 460px) and (orientation: landscape) {
  .pv-next-overlay { width: min(300px, 44%); padding: 12px; bottom: calc(var(--sab) + 120px); }
  .pv-next-overlay strong { font-size: 12px; }
}
.pv-unlock {
  position: absolute;
  z-index: 5;
  inset-inline-start: clamp(14px, 3vw, 42px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 99px;
  background: rgba(8,10,15,.72);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(14px);
}
.pv-unlock[hidden] { display: none; }
.pv-unlock svg { width: 20px; height: 20px; }
.controls-locked .pv-subtitle { bottom: calc(var(--sab) + 34px); }
.pv-adtag {
  position: absolute; top: calc(var(--sat) + 14px); inset-inline-start: 14px; z-index: 4;
  background: rgba(211,47,47,.94); font-size: 11px; font-weight: 800;
  padding: 6px 12px; border-radius: 99px;
}
.pv-adtag[hidden] { display: none; }
.pv-adtag strong { font-size: 11px; font-weight: 900; }
.pv-adtag span { padding-inline-start: 8px; margin-inline-start: 8px; border-inline-start: 1px solid rgba(255,255,255,.28); font-variant-numeric: tabular-nums; }
.ad-showing .pv-bottom, .ad-showing .pv-skip, .ad-showing .pv-speed-btn,
.ad-showing .pv-top-btn, .ad-showing .pv-btns { display: none; }
.ad-showing .pv-center { margin-bottom: 0; }
.ad-showing .pv-subtitle { display: none; }

/* player settings */
.sheet-backdrop.player-sheet-layer { z-index: 300; }
.sheet.player-sheet-layer { z-index: 305; background: rgba(18,19,25,.97); }
.player-settings-sheet { padding-inline: clamp(18px, 4vw, 28px); }
.player-setting-summary { display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; padding: 13px; border: 1px solid rgba(77,179,245,.18); border-radius: 17px; background: linear-gradient(135deg, rgba(11,130,210,.16), rgba(77,179,245,.04)); }
.player-setting-summary > span { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border-radius: 13px; background: rgba(77,179,245,.14); color: var(--main-light); }
.player-setting-summary svg { width: 22px; height: 22px; }
.player-setting-summary strong { font-size: 13.5px; }
.player-setting-summary p { margin-top: 3px; color: var(--tx-2); font-size: 11px; line-height: 1.7; }
.player-setting-title { margin: 18px 2px 9px; color: var(--tx-2); font-size: 11px; font-weight: 800; }
.player-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.player-choice-grid.compact { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }
.player-choice { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--stroke); border-radius: 13px; background: var(--card); color: var(--tx-2); font-size: 11.5px; font-weight: 750; text-align: start; }
.player-choice:hover { border-color: rgba(77,179,245,.34); color: #fff; }
.player-choice.selected { border-color: rgba(77,179,245,.58); background: rgba(11,130,210,.16); color: #fff; }
.radiodot { width: 14px; height: 14px; flex: none; border: 2px solid rgba(255,255,255,.28); border-radius: 50%; }
.player-choice.selected .radiodot { border: 4px solid var(--main-light); background: #fff; }
.player-setting-empty, .player-keyboard-hint { padding: 12px; border-radius: 13px; background: rgba(255,255,255,.04); color: var(--tx-3); font-size: 11px; line-height: 1.8; }
.player-keyboard-hint { margin-top: 18px; direction: ltr; text-align: center; font-variant-numeric: tabular-nums; }
.player-volume-head, .subtitle-size-head { display: flex; align-items: center; justify-content: space-between; }
.player-volume-value, .subtitle-size-value { color: var(--main-light); font-size: 11px; font-weight: 850; font-variant-numeric: tabular-nums; }
.player-volume-range, .subtitle-size-range { width: 100%; height: 34px; accent-color: var(--main-light); cursor: pointer; }
.subtitle-preview { min-height: 110px; display: grid; place-items: center; margin-bottom: 18px; padding: 20px; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 70% 18%, rgba(77,179,245,.16), transparent 38%), linear-gradient(150deg, #20232c, #090a0e); text-align: center; }
.subtitle-preview span { padding: 3px 9px; border-radius: 5px; line-height: 1.65; box-decoration-break: clone; }
.subtitle-appearance { margin-top: 18px; border: 1px solid var(--stroke); border-radius: 16px; background: rgba(255,255,255,.025); overflow: hidden; }
.subtitle-appearance summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; cursor: pointer; list-style: none; }
.subtitle-appearance summary::-webkit-details-marker { display: none; }
.subtitle-appearance summary strong, .subtitle-appearance summary small { display: block; }
.subtitle-appearance summary strong { font-size: 12.5px; }
.subtitle-appearance summary small { margin-top: 3px; color: var(--tx-3); font-size: 10.5px; }
.subtitle-summary-chevron { transition: transform .2s ease; }
.subtitle-summary-chevron svg { width: 18px; height: 18px; }
.subtitle-appearance[open] .subtitle-summary-chevron { transform: rotate(90deg); }
html[dir="rtl"] .subtitle-appearance[open] .subtitle-summary-chevron { transform: rotate(-90deg); }
.subtitle-appearance-body { padding: 0 14px 16px; border-top: 1px solid var(--stroke); }
.subtitle-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.subtitle-color { position: relative; width: 42px; height: 42px; border: 2px solid rgba(255,255,255,.18); border-radius: 13px; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.subtitle-color.selected { border-color: var(--main-light); box-shadow: 0 0 0 3px rgba(77,179,245,.15); }
.subtitle-color:focus-visible, .player-choice:focus-visible, .player-volume-range:focus-visible, .subtitle-size-range:focus-visible { outline: 3px solid rgba(77,179,245,.68); outline-offset: 2px; }
.subtitle-color[style*="transparent"] { background: repeating-conic-gradient(#30323b 0 25%, #e2e2e5 0 50%) 50% / 14px 14px; }
.transparent-line { position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: #ff5363; transform: rotate(-35deg); }

@media (max-width: 480px) {
  .report-sheet { padding-inline: 12px; }
  .report-description { min-height: 124px; }
  .pv-controls { padding-inline: 10px; }
  .pv-btns { gap: 0; }
  .pv-btn { min-width: 48px; padding-inline: 4px; }
  .pv-btn span { max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pv-title { font-size: 13px; }
  .pv-top .iconbtn, .pv-top-btn { width: 44px; height: 44px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .pv-controls { padding-top: calc(var(--sat) + 7px); padding-bottom: calc(var(--sab) + 8px); }
  .pv-top .iconbtn, .pv-top-btn { width: 44px; height: 44px; }
  .pv-center { gap: 46px; }
  .pv-big { width: 62px; height: 62px; }
  .pv-skip { width: 46px; height: 46px; }
  .pv-bottom { gap: 3px; }
  .pv-seek { height: 24px; }
  .pv-btns { padding: 4px; border-radius: 16px; }
  .pv-btn { min-height: 44px; min-width: 54px; flex-direction: row; font-size: 9px; }
  .pv-btn svg { width: 18px; height: 18px; }
  .pv-subtitle { bottom: calc(var(--sab) + 96px + var(--sub-lift, 16px)); }
  .pv-next-overlay { bottom: calc(var(--sab) + 126px); }
}

/* ---------- auth ---------- */
.authpage { position: absolute; inset: 0; background: var(--bg); z-index: 80; display: flex; flex-direction: column; }
.auth-bg { position: absolute; inset: 0; overflow: hidden; }
.auth-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .17; filter: blur(2px) saturate(.8); transform: scale(1.1); }
.auth-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,15,.5), var(--bg) 85%); }
.auth-body { position: relative; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(var(--sat) + 70px) 22px 40px; }
.auth-logo { display: grid; place-items: center; margin-bottom: 26px; }
.auth-logo.compact { margin-bottom: 18px; }
.auth-logo.compact img { width: 148px; max-width: 48vw; filter: drop-shadow(0 12px 32px rgba(11,130,210,.35)); }
.auth-title { font-size: 22px; font-weight: 800; text-align: center; }
.auth-sub { font-size: 13px; color: var(--tx-2); text-align: center; margin-top: 10px; line-height: 2; }
.auth-form { max-width: 420px; margin: 26px auto 0; }
.auth-panel { position: relative; width: 100%; }
.auth-back { position: absolute; top: calc(var(--sat) * -1 - 54px); inset-inline-start: -6px; z-index: 2; }
.auth-progress { display: flex; direction: ltr; justify-content: center; gap: 7px; margin: 0 auto 20px; }
.auth-progress i { width: 30px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.12); }
.auth-progress i.on { background: linear-gradient(90deg, var(--main), var(--main-light)); }
.form-alert {
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(255,71,87,.38);
  border-radius: var(--r-small);
  color: #ffb0b7;
  background: rgba(255,71,87,.09);
  font-size: 12.5px;
  line-height: 1.8;
}
.form-alert[hidden] { display: none; }
.auth-submit { width: 100%; min-height: 50px; margin-top: 5px; }
.auth-link {
  display: flex;
  min-height: 44px;
  margin: 9px auto 0;
  padding: 10px 12px;
  align-items: center;
  justify-content: center;
  color: var(--main-light);
  font-size: 12.5px;
  font-weight: 700;
}
.auth-link.loading { position: relative; color: transparent; }
.auth-link.loading::after {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(77,179,245,.3);
  border-top-color: var(--main-light);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.auth-separator { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; color: var(--tx-3); font-size: 11px; }
.auth-separator::before, .auth-separator::after { content: ""; flex: 1; height: 1px; background: var(--stroke); }
.auth-socials { display: grid; gap: 12px; }
.google-auth, .apple-auth { min-height: 52px; display: grid; place-items: center; overflow: hidden; }
.google-auth:empty { display: none; }
.google-auth {
  width: 100%;
  padding: 4px;
  border: 1px solid rgba(77,179,245,.24);
  border-radius: 999px;
  background: linear-gradient(135deg, #1b1e27, #11141b);
  box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.google-auth:hover {
  border-color: rgba(77,179,245,.38);
  background: linear-gradient(135deg, #202633, #121720);
  box-shadow: 0 14px 34px rgba(0,0,0,.34), 0 0 0 3px rgba(77,179,245,.07);
}
.google-auth:focus-within { outline: 3px solid rgba(77,179,245,.5); outline-offset: 2px; }
.google-auth > div { width: 100% !important; display: flex !important; justify-content: center; }
.google-auth iframe { max-width: 100% !important; border-radius: 999px !important; }
.apple-auth-button {
  position: relative;
  width: min(100%, 360px);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 99px;
  color: #fff;
  background: #050505;
  font-family: inherit;
  font-size: 13px;
  font-weight: 750;
}
.apple-auth-button:hover { background: #151515; border-color: rgba(255,255,255,.42); }
.apple-auth-button:focus-visible { outline: 3px solid rgba(77,179,245,.58); outline-offset: 2px; }
.apple-auth-button svg { width: 18px; height: 18px; flex: none; }
.apple-auth-button.loading { color: transparent; pointer-events: none; }
.apple-auth-button.loading svg { opacity: 0; }
.apple-auth-button.loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
.auth-switch { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 18px; color: var(--tx-2); font-size: 12.5px; }
.auth-switch button { min-height: 44px; padding: 8px; color: var(--main-light); font-weight: 800; }
.otp-control { text-align: center; letter-spacing: .42em; font-size: 21px !important; font-variant-numeric: tabular-nums; }

@media (max-width: 390px) {
  .auth-body { padding-inline: 18px; }
  .auth-form { margin-top: 20px; }
  .auth-logo.compact img { width: 132px; }
}

/* language select (first run) */
.langpage { position: absolute; inset: 0; z-index: 85; overflow-y: auto; background: var(--bg); padding: calc(var(--sat) + 24px) 18px calc(var(--sab) + 24px); }
.lang-back { position: fixed; z-index: 3; top: calc(var(--sat) + 12px); inset-inline-start: 16px; }
.language-shell { width: min(100%, 1040px); min-height: 100%; margin: 0 auto; display: grid; align-items: center; }
.language-brand { display: none; }
.language-card { width: min(100%, 460px); margin: auto; padding: 22px 18px; }
.language-mobile-logo { display: grid; place-items: center; margin-bottom: 18px; }
.language-mobile-logo img { width: 74px; height: 74px; border-radius: 21px; box-shadow: 0 14px 38px rgba(11,130,210,.3); }
.language-card-label { display: block; color: var(--main-light); font-size: 10.5px; font-weight: 850; letter-spacing: .08em; text-align: center; }
.langpage .lp-title { margin-top: 7px; font-size: 22px; font-weight: 850; text-align: center; }
.language-card-desc { margin: 8px auto 0; max-width: 34em; color: var(--tx-2); font-size: 12.5px; line-height: 1.9; text-align: center; }
.langlist { display: grid; gap: 9px; margin-top: 22px; }
.language-option {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 12px;
  border: 1px solid var(--stroke);
  border-radius: 17px;
  color: var(--tx);
  background: var(--card);
  text-align: start;
  transition: border-color .2s, background .2s, transform .15s;
}
.language-option:hover { border-color: rgba(77,179,245,.3); background: rgba(255,255,255,.045); }
.language-option:active { transform: scale(.985); }
.language-option.on { border-color: rgba(77,179,245,.55); background: rgba(11,130,210,.12); box-shadow: 0 8px 24px rgba(11,130,210,.08); }
.language-flag { width: 39px; height: 26px; display: block; flex: none; overflow: hidden; border-radius: 5px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.language-flag svg { width: 100%; height: 100%; display: block; }
.language-option-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.language-option-copy strong { font-size: 14px; }
.language-option-copy small { color: var(--tx-3); font-size: 9.5px; letter-spacing: .08em; }
.language-check { width: 28px; height: 28px; display: grid; place-items: center; flex: none; border: 1px solid var(--stroke); border-radius: 50%; color: #fff; }
.language-option.on .language-check { border-color: var(--main-light); background: var(--main); }
.language-check svg { width: 16px; height: 16px; stroke-width: 2.5; }

/* ---------- misc ---------- */
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } }
.fadeup { animation: fadeup .4s both; }
.loading-more { display: grid; place-items: center; padding: 18px; }
.loading-more .ring { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--main-light); animation: spin .9s linear infinite; }
.divider { height: 1px; background: var(--stroke); margin: 6px 0; }

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

/* tablet / small desktop: phone-width stage */
@media (min-width: 720px) and (max-width: 1023px) {
  body::before {
    content: "";
    position: fixed; inset: 0;
    background:
      radial-gradient(60% 50% at 20% 20%, rgba(11,130,210,.14), transparent 60%),
      radial-gradient(50% 40% at 80% 80%, rgba(77,179,245,.08), transparent 60%),
      #060609;
  }
  #app {
    inset: 0;
    margin: auto;
    max-width: 430px;
    height: min(100dvh, 900px);
    border-radius: 0;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 90px rgba(0,0,0,.8);
  }
  .playerpage { max-width: none; margin: 0; }
  .sheet, #toasts { max-width: 430px; margin: auto; }
}

/* ============ DESKTOP (≥1024px) — same UI, wide layout ============ */
@media (min-width: 1024px) {
  :root { --rail-w: 96px; --content-gap: 32px; }

  body::before {
    content: "";
    position: fixed; inset: 0;
    background:
      radial-gradient(50% 45% at 85% 12%, rgba(11,130,210,.12), transparent 60%),
      radial-gradient(45% 40% at 12% 88%, rgba(77,179,245,.07), transparent 60%),
      #060609;
  }

  #app { max-width: none; box-shadow: none; }

  /* bottom nav → vertical side rail (inline-start = right in RTL) */
  .bnv {
    inset-inline: 18px auto;
    inset-inline-start: 18px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: var(--rail-w);
    height: auto;
    flex-direction: column;
    padding: 14px 0 10px;
    border-radius: 28px;
    gap: 4px;
  }
  .bnv::before {
    content: "";
    width: 52px; height: 52px;
    margin: 2px auto 16px;
    border-radius: 16px;
    background: url("../icons/app-icon-512.png") center / cover no-repeat;
    box-shadow: 0 6px 18px rgba(11,130,210,.35);
    flex: none;
  }
  .bnv-item { padding: 9px 0 7px; border-radius: 18px; }
  .bnv-item.on::before { inset: 4px 14px; border-radius: 16px; }
  .bnv-item:hover { color: #fff; }
  .bnv-item.on:hover { color: var(--main-light); }

  /* shift all content clear of the rail */
  .tabpane { padding-inline-start: calc(var(--rail-w) + 40px); padding-inline-end: var(--content-gap); }
  .page { padding-inline-start: calc(var(--rail-w) + 40px); }
  .topbar { inset-inline-start: calc(var(--rail-w) + 40px); }
  .page-scroll { scrollbar-width: thin; scrollbar-color: #26262f transparent; }

  /* wider sections (pane itself is already inset — zero the inner mobile paddings) */
  .section-head, .hrow, .pgrid, .genregrid, .banner,
  .info-card, .info-label, .eprow, .comment, .fd-actions, .fd-continue,
  .fd-react, .histcard, .pilltabs, .guestcard, .pgroup, .profile-head,
  .profile-subscription-cta, .seasonbar, .searchbar, .langpage {
    margin-inline: 0;
  }
  .section-head, .hrow { padding-inline: 0; }
  .pgrid { padding: 6px 0 10px; }
  .genregrid { padding: 4px 0 8px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .seasonbar { padding-inline: 0; }
  .pilltabs { padding-inline: 0; }
  .searchbar { width: min(100%, 760px); margin-inline: auto; padding-inline: 0; top: 0; padding-top: calc(var(--sat) + 18px); }
  .info-card, .guestcard, .pgroup, .profile-head, .profile-subscription-cta { max-width: 780px; }
  .tabpane[data-tab="profile"] > .guestcard,
  .tabpane[data-tab="profile"] > .profile-head,
  .tabpane[data-tab="profile"] > .profile-subscription-cta,
  .tabpane[data-tab="profile"] > .pgroup,
  .tabpane[data-tab="profile"] > .profile-social-group,
  .tabpane[data-tab="profile"] > .profile-version { width: min(100%, 780px); margin-inline: auto; }
  .tabpane[data-tab="profile"] > .profile-switcher { width: auto; margin-inline: auto; }
  .searchfield { max-width: none; }
  .search-discovery { max-width: 780px; }
  .search-suggestions-grid { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 150px)); grid-auto-columns: auto; justify-content: center; gap: 18px; overflow: visible; }
  .search-suggestions-grid .filmcard { width: min(100%, 150px); }
  html[dir="rtl"] .tabpane[data-tab="search"] > .searchbar,
  html[dir="rtl"] .tabpane[data-tab="search"] .search-discovery,
  html[dir="rtl"] .tabpane[data-tab="profile"] > .guestcard,
  html[dir="rtl"] .tabpane[data-tab="profile"] > .profile-switcher,
  html[dir="rtl"] .tabpane[data-tab="profile"] > .profile-head,
  html[dir="rtl"] .tabpane[data-tab="profile"] > .profile-subscription-cta,
  html[dir="rtl"] .tabpane[data-tab="profile"] > .pgroup,
  html[dir="rtl"] .tabpane[data-tab="profile"] > .profile-social-group,
  html[dir="rtl"] .tabpane[data-tab="profile"] > .profile-version { transform: translateX(calc((var(--rail-w) + 8px) / 2)); }
  html[dir="ltr"] .tabpane[data-tab="search"] > .searchbar,
  html[dir="ltr"] .tabpane[data-tab="search"] .search-discovery,
  html[dir="ltr"] .tabpane[data-tab="profile"] > .guestcard,
  html[dir="ltr"] .tabpane[data-tab="profile"] > .profile-switcher,
  html[dir="ltr"] .tabpane[data-tab="profile"] > .profile-head,
  html[dir="ltr"] .tabpane[data-tab="profile"] > .profile-subscription-cta,
  html[dir="ltr"] .tabpane[data-tab="profile"] > .pgroup,
  html[dir="ltr"] .tabpane[data-tab="profile"] > .profile-social-group,
  html[dir="ltr"] .tabpane[data-tab="profile"] > .profile-version { transform: translateX(calc((var(--rail-w) + 8px) / -2)); }

  .filmcard { width: 164px; }
  .filmcard:hover .poster { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(0,0,0,.55); }
  .filmcard .poster { transition: transform .25s ease, box-shadow .25s ease; }
  .colcard { width: 140px; }
  .colcard img { width: 140px; }
  .livecard { width: 300px; }
  .banner, .banner-carousel { margin-top: 30px; border-radius: 20px; }
  .banner:hover { transform: scale(.995); }
  .genrecard:hover { transform: scale(1.02); }

  /* hero: big cinematic inset banner (pane padding handles the inset) */
  .hero {
    height: min(66dvh, 620px);
    min-height: 420px;
    margin: 24px 0 0;
    border-radius: 24px;
  }
  .hero::after { border-radius: 24px; }
  .hero-dots { bottom: 22px; inset-inline-start: 24px; }

  /* pgrid columns */
  .pgrid { grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 20px 16px; }
  .preferences-grid { grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 22px 16px; }
  .preferences-page .page-scroll { padding-inline: 28px; }
  .preferences-actions { padding-inline: max(28px, calc((100vw - 980px) / 2)); }

  /* film details: wide backdrop, centered column */
  .fd-hero img.bg { aspect-ratio: auto; height: min(58dvh, 560px); width: 100%; object-fit: cover; }
  .fd-head { max-width: 860px; margin-inline: auto; }
  .fd-actions, .fd-continue, .fd-react, .tabs, .tabbody { max-width: 860px; margin-inline: auto; }
  .fd-actions, .fd-continue { margin-top: 18px; }
  .tabbody .info-card, .tabbody .info-label, .tabbody .eprow, .tabbody .comment,
  .tabbody .pgrid { margin-inline: auto; max-width: 860px; }
  .tabbody .info-label { max-width: 824px; }

  /* overlays centered */
  .sheet, #toasts { max-width: 560px; margin: auto; }
  .sheet { border-radius: var(--r-sheet); border: 1px solid var(--stroke-strong); bottom: auto; top: 50%; transform: translateY(-50%) scale(.98); }
  .sheet.show { transform: translateY(-50%) scale(1); }
  .sheet-grab { display: none; }

  /* auth / language: centered card on the branded backdrop */
  .auth-body, .langpage { max-width: 480px; margin-inline: auto; width: 100%; }
  .langpage { position: absolute; inset: 0; padding-inline: 24px; }

  /* person / live detail columns */
  .page.open .fd-title { font-size: 26px; }

  /* skeletons */
  .sk.hero-s { height: 420px; margin: 24px 0 0; border-radius: 24px; }
  .sk.row-s { padding-inline: 0; }
  .sk.title-s { margin-inline: 0; }

  /* state boxes */
  .statebox { padding: 70px 40px; }

  /* scrollbars */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: #26262f; border-radius: 99px; border: 2px solid var(--bg); }
  ::-webkit-scrollbar-track { background: transparent; }
}

@media (min-width: 1024px) {
  .langpage {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 34px clamp(34px, 5vw, 82px);
    background:
      radial-gradient(48% 62% at 18% 18%, rgba(11,130,210,.19), transparent 70%),
      radial-gradient(40% 46% at 88% 86%, rgba(77,179,245,.08), transparent 72%),
      var(--bg);
  }
  .language-shell {
    grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr);
    gap: clamp(42px, 7vw, 100px);
  }
  .language-brand {
    display: block;
    max-width: 480px;
    padding-inline-start: clamp(18px, 4vw, 58px);
  }
  .language-brand img { width: min(310px, 70%); filter: drop-shadow(0 22px 52px rgba(11,130,210,.28)); }
  .language-eyebrow { display: block; margin-top: 46px; color: var(--main-light); font-size: 11px; font-weight: 900; letter-spacing: .22em; }
  .language-brand h1 { margin-top: 10px; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.35; text-wrap: balance; }
  .language-brand p { max-width: 42em; margin-top: 14px; color: var(--tx-2); font-size: 14px; line-height: 2; }
  .language-card {
    width: 100%;
    max-width: 480px;
    padding: 32px;
    border: 1px solid var(--stroke-strong);
    border-radius: 28px;
    background: rgba(18,18,24,.88);
    box-shadow: 0 30px 80px rgba(0,0,0,.42);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .language-mobile-logo { display: none; }
  .language-card-label, .langpage .lp-title, .language-card-desc { text-align: start; }
  .langpage .lp-title { font-size: 25px; }
  .language-option { min-height: 68px; padding-inline: 15px; }
}

/* iOS Safari owns the viewport. Keep the shell pinned to that viewport and
   apply the safe area to content instead of translating the entire app. */
@media (max-width: 719px) and (orientation: portrait) {
  html.ios-safari:not(.player-active) #app {
    position: fixed;
    inset: 0 0 auto;
    height: var(--app-h, 100%);
  }
  html.ios-safari:not(.player-active) .tabpane[data-tab="profile"] {
    padding-top: max(var(--sat), 12px);
  }
}

/* Menus stay portrait on handheld devices, including browsers that ignore
   the manifest orientation hint. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  html:not(.player-active) #app {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 100dvh;
    height: 100dvw;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center;
  }
}

/* Playback always gets a landscape canvas. The Screen Orientation API is
   requested in JS; this is the iPhone/unsupported-browser fallback. */
@media (orientation: portrait) and (max-width: 900px) {
  html.player-active.force-landscape .playerpage {
    inset: auto;
    top: 50%;
    left: 50%;
    width: var(--app-h, 100dvh);
    height: 100vw;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
  }
  html.player-active.force-landscape .pv-controls {
    padding: 10px max(14px, var(--sat)) 10px max(14px, var(--sab));
  }
  html.player-active.force-landscape .pv-subtitle { bottom: calc(96px + var(--sub-lift, 16px)); }
  html.player-active.force-landscape .pv-next-overlay { bottom: 126px; width: min(300px, 44%); }
}

/* ---------- fixes 2026-09 ---------- */
.histcard { width: 100%; text-align: start; font: inherit; color: inherit; }
button.histcard { cursor: pointer; }
.infinite-retry { display: block; width: calc(100% - 32px); margin: 8px 16px 18px; }
.infinite-retry[hidden] { display: none; }
.cbody.spoiler-hidden { position: relative; }
.cbody.spoiler-hidden > :not(.spoiler-reveal), .cbody.spoiler-hidden { color: transparent; text-shadow: 0 0 9px rgba(255,255,255,.75); }
.spoiler-reveal { display: inline-flex; margin-top: 8px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--stroke-strong); background: var(--card-2); color: var(--tx); text-shadow: none; font-size: 12px; font-weight: 700; }
/* Player sheets are mounted inside the player (so they rotate with it). */
.playerpage > .sheet-backdrop.player-sheet-layer, .playerpage > .sheet.player-sheet-layer { position: absolute; }
.playerpage > .sheet.player-sheet-layer { max-height: 86%; }
@media (max-width: 1023px) {
  .sk.hero-s { height: auto; aspect-ratio: 3 / 4; max-height: 78svh; }
}


/* ======================================================================
   Player refresh (2026-09) — calmer chrome, clearer hierarchy
   ====================================================================== */
.pv-controls {
  background:
    linear-gradient(180deg, rgba(0,0,0,.72) 0, rgba(0,0,0,.2) 22%, transparent 40%),
    linear-gradient(0deg, rgba(0,0,0,.9) 0, rgba(0,0,0,.45) 26%, transparent 52%);
}
.pv-top { gap: 12px; }
.pv-top .iconbtn, .pv-top-btn { width: 42px; height: 42px; border-radius: 14px; background: rgba(18,20,28,.5); border-color: rgba(255,255,255,.1); }
.pv-title { font-size: clamp(14px, 1.5vw, 18px); letter-spacing: -.01em; }
.pv-center { gap: clamp(40px, 8vw, 110px); direction: ltr; } /* rewind left, forward right, like the timeline */
.pv-big { width: clamp(70px, 8vw, 86px); height: clamp(70px, 8vw, 86px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); box-shadow: 0 16px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18); }
.pv-big svg { width: 32px; height: 32px; }
.pv-skip { width: 56px; height: 56px; background: rgba(12,14,20,.42); border-color: rgba(255,255,255,.12); }
.pv-big:hover, .pv-skip:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.pv-bottom { gap: 12px; }
.pv-timeline { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.pv-timeline .pv-times { display: contents; }
.pv-timeline .pv-times > span:first-child { grid-column: 1; grid-row: 1; }
.pv-timeline .pv-seek { grid-column: 2; grid-row: 1; }
.pv-timeline .pv-times > span:last-child { grid-column: 3; grid-row: 1; }
.pv-times > span { min-width: 44px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.9); text-align: center; }
.pv-track { height: 4px; background: rgba(255,255,255,.2); }
.pv-seek:hover .pv-track, .pv-seek:focus-visible .pv-track, .pv-seek:active .pv-track { height: 7px; }
.pv-played { background: linear-gradient(90deg, #1391e6, #7fd0ff); box-shadow: 0 0 12px rgba(77,179,245,.55); }
.pv-knob { width: 16px; height: 16px; border: 3px solid #7fd0ff; background: #fff; transition: transform .15s ease; }
.pv-seek:active .pv-knob { transform: translateY(-50%) scale(1.25); }
.pv-btns { gap: 2px; padding: 5px; border-radius: 18px; background: rgba(16,18,26,.58); border-color: rgba(255,255,255,.09); }
.pv-btn { min-height: 48px; border-radius: 13px; font-size: 10px; color: rgba(255,255,255,.82); }
.pv-btn svg { width: 20px; height: 20px; }
.pv-btn:hover, .pv-btn[aria-pressed="true"] { background: rgba(255,255,255,.09); color: #fff; }

/* ---------- playback / subtitle settings sheet ---------- */
.ps-sheet { padding-inline: clamp(16px, 4vw, 26px); }
.ps-sheet .sheet-title { margin-bottom: 16px; font-size: 17px; }
.ps-intro { margin: -6px 0 6px; color: var(--tx-2); font-size: 12px; line-height: 1.9; text-align: center; }
.ps-tabs { position: sticky; top: -10px; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 14px; padding: 4px; border-radius: 15px; background: rgba(255,255,255,.06); backdrop-filter: blur(12px); }
.ps-tab { min-height: 40px; border-radius: 11px; color: var(--tx-2); font-size: 12.5px; font-weight: 800; transition: background .2s ease, color .2s ease; }
.ps-tab.on { background: var(--main); color: #fff; box-shadow: 0 6px 18px rgba(11,130,210,.35); }
.ps-pane[hidden] { display: none; }
.ps-section { margin-top: 18px; }
.ps-section-title, .ps-group-title { margin: 0 2px 10px; color: var(--tx-2); font-size: 11.5px; font-weight: 800; }
.ps-group-title { margin-top: 4px; color: #fff; font-size: 13.5px; }
.ps-title-row { display: flex; align-items: center; justify-content: space-between; }
.ps-value { min-width: 34px; padding: 2px 8px; border-radius: 99px; background: rgba(77,179,245,.14); color: var(--main-light); font-size: 11px; font-weight: 850; text-align: center; }
.ps-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ps-chips.wrap { display: flex; flex-wrap: wrap; }
.ps-chips.wrap .ps-chip { flex: 1 1 auto; }
.ps-chip { min-height: 44px; padding: 9px 14px; border: 1px solid var(--stroke); border-radius: 13px; background: var(--card); color: var(--tx-2); font-size: 12px; font-weight: 750; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .15s ease; }
.ps-chip:active { transform: scale(.96); }
.ps-chip:hover { color: #fff; border-color: rgba(77,179,245,.35); }
.ps-chip.selected { border-color: rgba(77,179,245,.7); background: linear-gradient(135deg, rgba(11,130,210,.3), rgba(77,179,245,.1)); color: #fff; box-shadow: inset 0 0 0 1px rgba(77,179,245,.25); }
.ps-empty { padding: 14px; border-radius: 13px; background: rgba(255,255,255,.04); color: var(--tx-3); font-size: 12px; text-align: center; }
.ps-preview { position: relative; height: 150px; margin-bottom: 4px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: #07080c; }
.ps-preview-scene { position: absolute; inset: 0; background:
  radial-gradient(60% 70% at 78% 18%, rgba(255,190,110,.35), transparent 60%),
  radial-gradient(50% 60% at 18% 30%, rgba(77,179,245,.28), transparent 62%),
  linear-gradient(180deg, #1c2233 0%, #0d1018 62%, #05060a 100%); }
.ps-preview-scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent); }
.ps-preview-bar { position: absolute; left: 14px; right: 14px; bottom: 10px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--main-light) 38%, rgba(255,255,255,.22) 38%); opacity: .8; }
.ps-preview-cue { position: absolute; left: 6%; right: 6%; bottom: calc(18px + var(--sub-lift, 16px) * .6); text-align: center; font-family: var(--sub-font); font-size: min(var(--sub-size, 20px), 26px); font-weight: 600; line-height: 1.6; color: var(--sub-color, #fff); text-shadow: var(--sub-shadow); transition: bottom .2s ease; }
.ps-preview-cue span { padding: 2px 9px; border-radius: 6px; background: var(--sub-bg, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ps-range-row { display: flex; align-items: center; gap: 12px; }
.ps-range { flex: 1; height: 34px; accent-color: var(--main-light); cursor: pointer; }
.ps-range-cap { color: var(--tx-2); font-weight: 800; line-height: 1; }
.ps-range-cap.small { font-size: 12px; }
.ps-range-cap.large { font-size: 20px; }
.ps-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.ps-swatch { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255,255,255,.14); background: var(--swatch); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); transition: transform .15s ease; }
.ps-swatch span { display: none; color: #0b0b0f; }
.ps-swatch svg { width: 18px; height: 18px; stroke-width: 2.6; }
.ps-swatch.selected { border-color: var(--main-light); box-shadow: 0 0 0 4px rgba(77,179,245,.2); transform: scale(1.06); }
.ps-swatch.selected span { display: block; }
.ps-divider { height: 1px; margin: 22px 0 16px; background: var(--stroke); }
.ps-reset { width: 100%; margin-top: 20px; }
.ps-chip:focus-visible, .ps-tab:focus-visible, .ps-swatch:focus-visible, .ps-range:focus-visible { outline: 3px solid rgba(77,179,245,.7); outline-offset: 2px; }
.playerpage .ps-preview { height: 118px; }

/* ---------- watched episodes ---------- */
.ep-summary { display: flex; align-items: center; gap: 9px; margin: 4px 16px 8px; padding: 10px 12px; border: 1px solid var(--stroke); border-radius: 14px; background: rgba(255,255,255,.03); font-size: 12px; color: var(--tx-2); }
.ep-summary-icon { width: 24px; height: 24px; display: grid; place-items: center; flex: none; border-radius: 50%; background: rgba(52,199,89,.14); color: var(--green); }
.ep-summary-icon svg { width: 13px; height: 13px; stroke-width: 2.6; }
.ep-summary b { color: #fff; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ep-summary-bar { flex: 1; height: 5px; min-width: 40px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.ep-summary-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #26b24b, #57e07a); }
html[dir="rtl"] .ep-summary-bar i { margin-inline-start: 0; }
.ep-summary.complete { border-color: rgba(52,199,89,.35); background: rgba(52,199,89,.06); }
.season-pill { display: inline-flex; align-items: center; gap: 7px; }
.season-count { padding: 1px 7px; border-radius: 99px; background: rgba(255,255,255,.08); color: var(--tx-3); font-size: 10.5px; font-weight: 800; }
.season-pill.complete .season-count { background: rgba(52,199,89,.18); color: var(--green); }
.epwatch { z-index: 1; box-shadow: 0 3px 10px rgba(0,0,0,.45); }
.epwatch.started { background: rgba(11,130,210,.95); }
.epwatch.started svg { color: #fff; }
.epthumb-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.55); }
.epthumb-progress i { display: block; height: 100%; background: var(--main-light); }
.eprow.watched .epthumb-progress i { background: var(--green); }
.eprow.watched .epthumb img { filter: saturate(.75) brightness(.8); }
.ep-state { padding: 1px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; }
.ep-state.watched { background: rgba(52,199,89,.14); color: var(--green); }
.ep-state.started { background: rgba(77,179,245,.14); color: var(--main-light); }

/* Controls hidden → subtitles sit low; this wins over the size-specific rules above. */
html .playerpage:has(.pv-controls.hide) .pv-subtitle { bottom: calc(var(--sab) + 20px + var(--sub-lift, 16px)); }
html.player-active.force-landscape .playerpage:has(.pv-controls.hide) .pv-subtitle { bottom: calc(20px + var(--sub-lift, 16px)); }

/* Player sheets on a landscape canvas (phones held sideways, or the rotated
   portrait fallback) slide in as a side panel so the video stays visible. */
@media (orientation: landscape) and (max-height: 560px) {
  .playerpage > .sheet.player-sheet-layer {
    top: 0; bottom: 0; left: auto; right: 0;
    width: min(420px, 60%);
    max-height: none;
    padding-top: calc(var(--sat) + 10px);
    border-radius: 22px 0 0 22px;
    border-top: 0;
    border-left: 1px solid var(--stroke-strong);
    transform: translateX(105%);
  }
  .playerpage > .sheet.player-sheet-layer.show { transform: translateX(0); }
  .playerpage > .sheet.player-sheet-layer .sheet-grab { display: none; }
}
@media (orientation: portrait) and (max-width: 900px) {
  html.player-active.force-landscape .playerpage > .sheet.player-sheet-layer {
    top: 0; bottom: 0; left: auto; right: 0;
    width: min(420px, 60%);
    max-height: none;
    border-radius: 22px 0 0 22px;
    border-top: 0;
    border-left: 1px solid var(--stroke-strong);
    transform: translateX(105%);
  }
  html.player-active.force-landscape .playerpage > .sheet.player-sheet-layer.show { transform: translateX(0); }
  html.player-active.force-landscape .playerpage > .sheet.player-sheet-layer .sheet-grab { display: none; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .playerpage > .sheet-backdrop.player-sheet-layer { background: rgba(0, 0, 0, .28); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- player loading state (replaces the old ring over a dark disk) ---------- */
.pv-spin { display: none; }
.playerpage.is-loading .pv-spin { display: grid; }
/* Controls visible: the play button becomes the loader. */
.playerpage.is-loading .pv-controls:not(.hide) ~ .pv-spin,
.playerpage.is-loading:has(.pv-controls:not(.hide)) .pv-spin { display: none; }
.pv-spin-arc {
  width: 38px; height: 38px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 55%, rgba(127,208,255,.25) 70%, #7fd0ff 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  filter: drop-shadow(0 0 8px rgba(77,179,245,.55));
  animation: spin .85s linear infinite;
}
.playerpage.is-loading .pv-big { position: relative; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.playerpage.is-loading .pv-big svg { opacity: 0; }
.playerpage.is-loading .pv-big::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 50%, rgba(127,208,255,.2) 68%, #7fd0ff 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: spin .85s linear infinite;
}
.playerpage.is-loading .pv-skip { opacity: .35; }
.pv-loading-caption {
  position: absolute; z-index: 4; left: 50%; top: calc(50% + 62px); transform: translateX(-50%);
  padding: 6px 14px; border-radius: 99px; background: rgba(8,10,16,.55);
  color: rgba(255,255,255,.85); font-size: 12px; font-weight: 700; white-space: nowrap;
  pointer-events: none; animation: pv-fade-in .4s ease both;
}
.pv-loading-caption[hidden] { display: none; }
@keyframes pv-fade-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) {
  .pv-spin-arc, .playerpage.is-loading .pv-big::after { animation-duration: 2.4s; }
}

/* ======================================================================
   Profile redesign (2026-09)
   ====================================================================== */
html.ios-safari:not(.player-active) .tabpane[data-tab="profile"] { padding-top: 0; }
.profile-hero {
  position: relative;
  isolation: isolate;
  margin: 0 0 6px;
  padding: calc(var(--sat) + 26px) 18px 20px;
  border-radius: 0 0 30px 30px;
  overflow: hidden;
  background: #0d1120;
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.ph-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(90% 70% at 85% 0%, rgba(11,130,210,.55), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(255,190,90,.14), transparent 60%),
    linear-gradient(160deg, #13203a 0%, #0c1020 55%, #0b0b0f 100%); }
.ph-backdrop-img { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover; filter: blur(34px) saturate(1.3); opacity: .35; }
.ph-backdrop::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,15,.1), rgba(11,11,15,.55) 70%, rgba(11,11,15,.85)); }
.ph-identity { display: flex; align-items: center; gap: 15px; }
.ph-avatar { position: relative; width: 78px; height: 78px; flex: none; padding: 3px; border-radius: 50%;
  background: conic-gradient(from 200deg, #7fd0ff, #0b82d2, #ffd166, #7fd0ff); box-shadow: 0 10px 30px rgba(11,130,210,.35); }
.ph-avatar img, .ph-avatar-fallback { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; object-fit: cover; border: 3px solid #0d1120; background: #1b2336; }
.ph-avatar-fallback svg { width: 34px; height: 34px; color: var(--main-light); }
.ph-avatar-edit { position: absolute; bottom: 0; inset-inline-end: -2px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #0d1120; background: var(--main); color: #fff; }
.ph-avatar-edit svg { width: 13px; height: 13px; }
.ph-names { min-width: 0; }
.ph-name { font-size: 21px; font-weight: 900; line-height: 1.4; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-mobile { margin-top: 3px; color: rgba(255,255,255,.66); font-size: 12.5px; font-weight: 600; text-align: start; }
.profile-hero.guest .ph-mobile { font-size: 12px; line-height: 1.8; }
.ph-subscription { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: rgba(12,15,26,.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.ph-ring { position: relative; width: 104px; height: 104px; flex: none; }
.ph-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
html[dir="rtl"] .ph-ring svg { transform: rotate(-90deg) scaleY(-1); }
.ph-ring-track { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 8; }
.ph-ring-value { fill: none; stroke: url(#ph-ring-grad); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 6px rgba(77,179,245,.55)); }
.ph-ring.inactive .ph-ring-value { stroke: transparent; filter: none; }
.ph-ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ph-ring-center strong { font-size: 27px; font-weight: 900; line-height: 1.1; }
.ph-ring-center small { margin-top: 2px; color: rgba(255,255,255,.68); font-size: 10px; font-weight: 700; }
.ph-ring.inactive .ph-ring-center strong { color: rgba(255,255,255,.45); }
.ph-sub-copy { flex: 1; min-width: 0; display: grid; gap: 8px; justify-items: start; }
.ph-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; font-size: 11.5px; font-weight: 800; }
.ph-chip svg { width: 14px; height: 14px; }
.ph-chip.active { background: rgba(255,209,102,.14); border: 1px solid rgba(255,209,102,.4); color: #ffd98a; }
.ph-chip.inactive { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.75); }
.ph-sub-meta { color: rgba(255,255,255,.7); font-size: 11.5px; line-height: 1.8; }
.ph-sub-cta { min-height: 40px; padding: 8px 14px; font-size: 12.5px; }
.ph-sub-cta svg { width: 16px; height: 16px; }
.ph-guest-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; margin-top: 20px; }
.ph-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 16px 8px; }
.ph-tile { display: grid; justify-items: center; gap: 8px; padding: 14px 6px 12px; border: 1px solid var(--stroke); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); color: var(--tx-2); font-size: 11px; font-weight: 750; line-height: 1.5; text-align: center; transition: transform .15s ease, border-color .2s ease; }
.ph-tile:active { transform: scale(.96); }
.ph-tile:hover { border-color: rgba(77,179,245,.35); color: #fff; }
.ph-tile-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: rgba(11,130,210,.14); color: var(--main-light); }
.ph-tile-icon svg { width: 21px; height: 21px; }
/* settings rows: icon chips */
.tabpane[data-tab="profile"] .pgroup { border-radius: 20px; }
.tabpane[data-tab="profile"] .prow svg:first-child { box-sizing: content-box; padding: 8px; border-radius: 12px; background: rgba(11,130,210,.12); }
.tabpane[data-tab="profile"] .prow.red svg:first-child { background: rgba(255,123,123,.12); }
/* language sheet uses the language page's options */
.language-sheet-desc { margin: -6px 0 4px; color: var(--tx-2); font-size: 12px; text-align: center; }
.language-sheet .langlist { margin-top: 14px; }
@media (min-width: 1024px) {
  .profile-hero { width: min(100%, 780px); margin: 24px auto 6px; border-radius: 30px; padding-top: 30px; }
  .ph-tiles { width: min(100%, 780px); margin-inline: auto; }
  html[dir="rtl"] .tabpane[data-tab="profile"] > .profile-hero,
  html[dir="rtl"] .tabpane[data-tab="profile"] > .ph-tiles { transform: translateX(calc((var(--rail-w) + 8px) / 2)); }
  html[dir="ltr"] .tabpane[data-tab="profile"] > .profile-hero,
  html[dir="ltr"] .tabpane[data-tab="profile"] > .ph-tiles { transform: translateX(calc((var(--rail-w) + 8px) / -2)); }
}

/* ---------- My List header: clear of the status bar / notch ---------- */
.tabpane[data-tab="mylist"] > .pilltabs {
  position: sticky; top: 0; z-index: 6;
  padding-top: calc(var(--sat) + 14px);
  background: linear-gradient(180deg, var(--bg) 78%, rgba(11,11,15,0));
}

/* ======================================================================
   Bottom navigation refresh (2026-09)
   ====================================================================== */
.bnv {
  inset-inline: 14px;
  height: 66px;
  padding: 6px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(30,32,42,.86), rgba(16,17,24,.92));
  box-shadow: 0 18px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
}
.bnv-indicator {
  position: absolute; top: 6px; bottom: 6px; left: 0; width: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(11,130,210,.34), rgba(77,179,245,.14));
  box-shadow: inset 0 0 0 1px rgba(127,208,255,.22), 0 6px 18px rgba(11,130,210,.25);
  opacity: 0;
  pointer-events: none;
}
.bnv-indicator.ready { opacity: 1; transition: transform .38s cubic-bezier(.34, 1.3, .64, 1), width .3s ease; }
.bnv-item { z-index: 1; gap: 3px; border-radius: 20px; color: rgba(255,255,255,.52); }
.bnv-item.on::before { display: none; }
.bnv-item .bnv-icon { display: grid; place-items: center; font-size: inherit; }
.bnv-item svg { width: 22px; height: 22px; }
.bnv-item.on svg { transform: translateY(-1px) scale(1.08); stroke-width: 2; filter: drop-shadow(0 0 8px rgba(77,179,245,.55)); }
.bnv-item .bnv-label { font-size: 10px; font-weight: 650; letter-spacing: -.01em; transition: color .2s ease; }
.bnv-item.on { color: #9bdcff; }
.bnv-item.on .bnv-label { font-weight: 850; color: #fff; }
@media (min-width: 1024px) {
  .bnv { height: auto; padding: 14px 0 10px; inset-inline: 18px auto; }
  .bnv-indicator { display: none; }
  .bnv-item.on::before { display: block; }
}

/* ======================================================================
   Search redesign (2026-09)
   ====================================================================== */
/* The sticky search bar below is pulled up by the safe-area height (so it
   clears the notch once stuck); the hero's bottom padding absorbs that overlap. */
.search-hero { padding: calc(var(--sat) + 22px) 18px calc(var(--sat) + 4px); }
.search-hero h1 { font-size: 26px; font-weight: 900; letter-spacing: -.02em; }
.search-hero p { margin-top: 4px; color: var(--tx-2); font-size: 12.5px; line-height: 1.8; }
.tabpane[data-tab="search"] > .searchbar {
  position: sticky; top: 0; z-index: 6;
  padding: calc(var(--sat) + 10px) 16px 12px;
  margin-top: calc(var(--sat) * -1);
  background: linear-gradient(180deg, var(--bg) 80%, rgba(11,11,15,0));
}
.searchfield { position: relative; min-height: 52px; border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, #1b1d27, #15161e); box-shadow: 0 10px 26px rgba(0,0,0,.28); transition: border-color .2s ease, box-shadow .2s ease; }
.searchfield:focus-within { border-color: rgba(77,179,245,.6); box-shadow: 0 0 0 4px rgba(11,130,210,.18), 0 10px 26px rgba(0,0,0,.3); }
.searchfield:focus-within svg { color: var(--main-light); }
.searchfield input { font-size: 15px; }
.searchfield input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-clear { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--tx-2); }
.search-clear[hidden] { display: none; }
.search-clear svg { width: 15px; height: 15px; }
.filterbtn { width: 52px; height: 52px; border-radius: 18px; }
.search-idle, .search-results { padding-bottom: 8px; }
.search-section { margin-top: 22px; }
.search-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 16px 11px; }
.search-section-head h2 { font-size: 15px; font-weight: 850; }
.search-link { min-height: 32px; padding: 0 4px; color: var(--main-light); font-size: 12px; font-weight: 750; }
.search-chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; }
.search-chip-row.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.search-chip-row.scroll::-webkit-scrollbar { display: none; }
.recent-chip { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid var(--stroke); border-radius: 99px; background: var(--card); }
.recent-chip-main { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px; padding-inline-end: 4px; color: var(--tx); font-size: 12.5px; font-weight: 650; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-chip-main svg { width: 14px; height: 14px; color: var(--tx-3); flex: none; }
.recent-chip-x { width: 32px; height: 32px; display: grid; place-items: center; margin-inline-end: 3px; border-radius: 50%; color: var(--tx-3); }
.recent-chip-x svg { width: 13px; height: 13px; }
.recent-chip-x:hover { background: rgba(255,255,255,.08); color: #fff; }
.genre-chip { flex: none; min-height: 40px; padding: 0 16px; border: 1px solid rgba(77,179,245,.22); border-radius: 99px; background: linear-gradient(135deg, rgba(11,130,210,.16), rgba(255,255,255,.02)); color: #d9efff; font-size: 12.5px; font-weight: 750; white-space: nowrap; }
.genre-chip:active, .type-tile:active { transform: scale(.96); }
.type-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 16px; }
.type-tile { position: relative; min-height: 86px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 13px 14px; border-radius: 20px; overflow: hidden; text-align: start; border: 1px solid rgba(255,255,255,.08); }
.type-tile strong { font-size: 15px; font-weight: 900; }
.type-tile-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.14); }
.type-tile-icon svg { width: 19px; height: 19px; }
.type-tile.tone-0 { background: radial-gradient(120% 120% at 100% 0%, rgba(77,179,245,.45), transparent 60%), linear-gradient(135deg, #0f3b63, #10151f); }
.type-tile.tone-1 { background: radial-gradient(120% 120% at 100% 0%, rgba(255,160,90,.42), transparent 60%), linear-gradient(135deg, #5a2a17, #15121a); }
.type-tile.tone-2 { background: radial-gradient(120% 120% at 100% 0%, rgba(160,120,255,.42), transparent 60%), linear-gradient(135deg, #2c1d5c, #12111c); }
.type-tile.tone-3 { background: radial-gradient(120% 120% at 100% 0%, rgba(80,220,150,.38), transparent 60%), linear-gradient(135deg, #123f2c, #10161a); }
.search-rank-rail { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.search-rank-rail::-webkit-scrollbar { display: none; }
.rank-item { position: relative; display: flex; align-items: flex-end; flex: none; scroll-snap-align: start; }
.rank-number { margin-inline-end: -14px; z-index: 0; font-size: 84px; font-weight: 900; line-height: .8; color: rgba(11,130,210,.18); -webkit-text-stroke: 2px rgba(127,208,255,.75); padding-bottom: 36px; padding-inline-start: 4px; font-family: system-ui, sans-serif; }
.rank-item .filmcard { width: 112px; z-index: 1; }
.search-summary { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 14px 16px 10px; }
.search-summary small { display: block; color: var(--tx-3); font-size: 11px; font-weight: 700; }
.search-summary strong { display: block; max-width: 60vw; margin-top: 2px; font-size: 17px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-count { flex: none; padding: 5px 11px; border-radius: 99px; background: rgba(11,130,210,.14); color: var(--main-light); font-size: 11px; font-weight: 800; }
.active-filters { margin-bottom: 4px; }
.filter-chip-active { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 99px; background: var(--main); color: #fff; font-size: 12px; font-weight: 750; box-shadow: 0 6px 16px rgba(11,130,210,.3); }
.filter-chip-active svg { width: 13px; height: 13px; }
.person-rail { display: flex; gap: 14px; overflow-x: auto; padding: 0 16px 4px; scrollbar-width: none; }
.person-rail::-webkit-scrollbar { display: none; }
.person-pill { flex: none; width: 76px; display: grid; justify-items: center; gap: 7px; text-align: center; }
.person-pill img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(77,179,245,.35); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.person-pill span { font-size: 11px; font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-empty { display: grid; justify-items: center; gap: 8px; margin: 40px 24px; text-align: center; }
.search-empty-icon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 24px; background: rgba(11,130,210,.12); color: var(--main-light); }
.search-empty-icon svg { width: 32px; height: 32px; }
.search-empty strong { font-size: 16px; }
.search-empty p { color: var(--tx-2); font-size: 12.5px; line-height: 1.8; }
.search-loading .pgrid { margin-top: 14px; }
.search-sk-card { aspect-ratio: 2 / 3; border-radius: var(--r-card); }
@media (min-width: 1024px) {
  .search-hero, .search-idle, .search-results > * { max-width: 920px; margin-inline: auto; }
  .search-hero { padding-top: 32px; }
  .type-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .search-summary strong { max-width: 520px; }
}

/* ======================================================================
   Footer refresh (2026-09)
   ====================================================================== */
.site-footer { padding: 0; overflow: hidden; border-radius: 26px; background:
  radial-gradient(70% 90% at 100% 0%, rgba(11,130,210,.16), transparent 60%),
  linear-gradient(160deg, #151a26, #101118 70%); }
.footer-apps { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border-bottom: 1px solid var(--stroke); background: linear-gradient(90deg, rgba(11,130,210,.18), rgba(11,130,210,.04)); }
.footer-apps-copy strong { display: block; color: #fff; font-size: 15px; font-weight: 900; }
.footer-apps-copy p { margin-top: 3px; color: var(--tx-2); font-size: 11.5px; }
.footer-apps-list { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-app { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(8,10,16,.55); color: #fff; font-size: 12px; font-weight: 750; transition: border-color .2s ease, transform .15s ease; }
.footer-app:hover { border-color: rgba(127,208,255,.5); }
.footer-app:active { transform: scale(.97); }
.footer-app.disabled { opacity: .45; pointer-events: none; }
.footer-app-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(11,130,210,.25); color: #9bdcff; }
.footer-app-icon svg { width: 16px; height: 16px; }
.site-footer-grid { padding: 24px; }
.footer-socials { display: flex; gap: 8px; margin-top: 16px; }
.footer-social { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--stroke); background: rgba(255,255,255,.04); color: var(--tx-2); transition: color .2s ease, border-color .2s ease; }
.footer-social:hover { color: #fff; border-color: rgba(127,208,255,.45); }
.footer-social svg { width: 19px; height: 19px; }
.site-footer-bottom { margin: 0; padding: 14px 24px 18px; border-top: 1px solid var(--stroke); }
.footer-verso { color: var(--tx-3); letter-spacing: .02em; }
@media (max-width: 719px) {
  .site-footer { width: calc(100% - 24px); padding: 0; }
  .footer-apps { flex-direction: column; align-items: stretch; padding: 18px 16px; }
  .footer-apps-list { display: grid; grid-template-columns: 1fr 1fr; }
  .footer-apps-list .footer-app:nth-child(odd):last-child { grid-column: 1 / -1; }
  .site-footer-grid { padding: 20px 16px; }
  .site-footer-bottom { padding: 14px 16px 18px; }
}

/* ---------- search: top picks (5, aligned) + genre tiles ---------- */
.search-rank-rail { align-items: flex-start; gap: 4px; }
.rank-item { align-items: flex-start; padding-top: 0; }
.rank-item .filmcard { width: 108px; }
.rank-item .filmcard .ft { min-height: 3.2em; }
.rank-number { align-self: flex-start; margin-top: calc(108px * 1.5 - 64px); padding-bottom: 0; font-size: 72px; }
.genre-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 16px; }
.genre-tile { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: flex-end; padding: 10px 11px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); color: #fff; font-size: 13px; font-weight: 850; text-align: start; isolation: isolate; transition: transform .15s ease; }
.genre-tile:active { transform: scale(.96); }
.genre-tile-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.genre-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8,9,14,.88) 5%, rgba(8,9,14,.2) 70%); }
.genre-tile.tone-0 { background: linear-gradient(135deg, #0f3b63, #10151f); }
.genre-tile.tone-1 { background: linear-gradient(135deg, #5a2a17, #15121a); }
.genre-tile.tone-2 { background: linear-gradient(135deg, #2c1d5c, #12111c); }
.genre-tile.tone-3 { background: linear-gradient(135deg, #123f2c, #10161a); }
.genre-tile.tone-4 { background: linear-gradient(135deg, #5c1d3a, #14101a); }
.genre-tile.tone-5 { background: linear-gradient(135deg, #3d4a12, #12140e); }
@media (min-width: 1024px) { .genre-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------- filter sheet redesign ---------- */
.fx-sheet { padding-inline: clamp(16px, 4vw, 26px); }
.fx-head-actions { display: flex; justify-content: flex-start; margin: -48px 0 10px; }
.fx-reset { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--tx-2); font-size: 12px; font-weight: 750; }
.fx-reset svg { width: 15px; height: 15px; }
.fx-block { margin-top: 20px; }
.fx-block:first-of-type { margin-top: 26px; }
.fx-title { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; font-size: 13px; font-weight: 850; }
.fx-title span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: rgba(11,130,210,.14); color: var(--main-light); }
.fx-title svg { width: 16px; height: 16px; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; padding: 0 14px; border: 1px solid var(--stroke); border-radius: 13px; background: var(--card); color: var(--tx-2); font-size: 12.5px; font-weight: 750; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease; }
.fx-chip:active { transform: scale(.95); }
.fx-chip:hover { color: #fff; border-color: rgba(77,179,245,.35); }
.fx-chip.selected { border-color: rgba(127,208,255,.7); background: linear-gradient(135deg, rgba(11,130,210,.42), rgba(11,130,210,.16)); color: #fff; box-shadow: 0 6px 16px rgba(11,130,210,.22); }
.fx-chips.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255,255,255,.05); }
.fx-chips.segmented .fx-chip { min-height: 42px; border: 0; background: transparent; }
.fx-chips.segmented .fx-chip.selected { background: var(--main); box-shadow: 0 6px 18px rgba(11,130,210,.4); }
.fx-chips.rating .fx-chip { flex: 1 1 0; padding: 0 8px; }
.fx-star { display: inline-grid; color: #ffc93c; }
.fx-star svg { width: 14px; height: 14px; }
.fx-chips.cloud .fx-chip { min-height: 36px; padding: 0 12px; border-radius: 99px; font-size: 12px; }
.fx-year-custom { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; }
.fx-year-custom[hidden] { display: none; }
.fx-year-custom label { flex: 1; display: grid; gap: 5px; }
.fx-year-custom small { color: var(--tx-3); font-size: 11px; font-weight: 700; }
.fx-year-custom .control { min-height: 46px; text-align: center; font-size: 15px; font-weight: 800; }
.fx-dash { padding-bottom: 12px; color: var(--tx-3); }
.fx-actions { grid-template-columns: .8fr 1.6fr; }
.fx-apply { font-weight: 850; font-variant-numeric: tabular-nums; }
.fx-sheet .filter-multi-card { margin: 0; border-radius: 16px; }
.search-rank-rail { scroll-snap-type: none; gap: 8px; }
.rank-number { margin-inline-end: -6px; min-width: 34px; text-align: center; }
/* Sticky apply bar sits flush with the sheet bottom (nothing scrolls out below it). */
.search-filter-sheet.fx-sheet { padding-bottom: 0; }
.fx-sheet .filter-actions.fx-actions { position: sticky; bottom: 0; margin: 22px -18px 0; padding: 12px 18px calc(var(--sab) + 14px); }

/* ---------- Android parity (2026-09) ---------- */
/* player: brightness / volume swipe */
.playerpage.brightness-adjusted .pv-wrap { filter: brightness(var(--pv-brightness, 1)); }
.pv-level { position: absolute; z-index: 6; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 8px; width: 64px; padding: 12px 0; border-radius: 20px; background: rgba(8,10,16,.72); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); pointer-events: none; }
.pv-level[hidden] { display: none; }
.pv-level-icon svg { width: 22px; height: 22px; }
.pv-level-bar { position: relative; width: 6px; height: 88px; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; }
.pv-level-bar i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: inherit; background: linear-gradient(0deg, #1391e6, #7fd0ff); }
.pv-level b { font-size: 12px; font-variant-numeric: tabular-nums; }
/* series card: watched episodes */
.watched-badge { position: absolute; bottom: 8px; inset-inline-end: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 8px; background: rgba(0,0,0,.8); color: #fff; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.watched-badge svg { width: 12px; height: 12px; color: var(--green); stroke-width: 2.6; }
/* profile: current watch profile */
.ph-switcher { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 5px 8px 5px 5px; padding-inline: 5px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; background: rgba(8,10,18,.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-align: start; }
.ph-switcher-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(11,130,210,.3); color: #cfeeff; }
.ph-switcher-icon svg { width: 17px; height: 17px; }
.ph-switcher-copy { display: grid; line-height: 1.3; }
.ph-switcher-copy small { color: rgba(255,255,255,.6); font-size: 9.5px; font-weight: 700; }
.ph-switcher-copy strong { font-size: 12.5px; font-weight: 850; }
.ph-switcher-chevron svg { width: 14px; height: 14px; color: rgba(255,255,255,.6); transform: rotate(90deg); }
/* Less crowded filter: sort & year options scroll in one line; genres collapse. */
.fx-block .fx-chips:not(.segmented):not(.cloud):not(.rating) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -2px; padding: 2px; }
.fx-block .fx-chips:not(.segmented):not(.cloud):not(.rating)::-webkit-scrollbar { display: none; }
.fx-block .fx-chips:not(.segmented):not(.cloud):not(.rating) .fx-chip { flex: none; white-space: nowrap; }
.fx-chip[hidden] { display: none; }
.fx-chip.fx-more { border-style: dashed; color: var(--main-light); background: transparent; }
/* Device list: platform chip under the readable name */
.device-kind { display: inline-flex; width: fit-content; margin-top: 3px; padding: 1px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; background: rgba(255,255,255,.07); color: var(--tx-2); }
.device-kind.tv { background: rgba(52,199,89,.14); color: var(--green); }
.device-kind.web { background: rgba(77,179,245,.14); color: var(--main-light); }

/* ---------- list sort / country bar (list-filters.js) ---------- */
.lf-wrap { position: relative; z-index: 3; }
.lf-bar {
  display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 10px 16px 12px; scroll-padding-inline: 16px;
}
.lf-bar::-webkit-scrollbar { display: none; }
.lf-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .78); font: inherit; font-size: 12.5px; font-weight: 750; white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.lf-chip svg { width: 15px; height: 15px; flex: 0 0 auto; }
.lf-chip:active { transform: scale(.96); }
.lf-chip.on {
  color: #fff; border-color: rgba(127, 208, 255, .55);
  background: linear-gradient(180deg, rgba(11, 130, 210, .72), rgba(11, 130, 210, .42));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 18px rgba(11, 130, 210, .28);
}
.lf-chip .lf-caret { width: 12px; height: 12px; opacity: .7; transform: rotate(90deg); }
.lf-chip.clear { padding: 0; width: 38px; justify-content: center; color: rgba(255, 255, 255, .7); }
.lf-sep { flex: 0 0 1px; align-self: stretch; margin: 8px 2px; background: rgba(255, 255, 255, .12); }
@media (hover: hover) { .lf-chip:hover { border-color: rgba(255, 255, 255, .26); color: #fff; } }
.lf-chip:focus-visible, .lf-option:focus-visible { outline: 2px solid #7FD0FF; outline-offset: 2px; }

.lf-sheet .lf-search {
  width: 100%; min-height: 46px; margin: 4px 0 10px; padding: 0 14px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: #fff; font: inherit; font-size: 14px;
}
.lf-list { display: flex; flex-direction: column; gap: 6px; max-height: min(52vh, 460px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 4px; }
.lf-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 0 14px;
  border-radius: 13px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .85); font: inherit; font-size: 14px; text-align: start;
}
.lf-option .lf-tick { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; border: 1.5px solid rgba(255, 255, 255, .25); color: transparent; }
.lf-option .lf-tick svg { width: 14px; height: 14px; stroke-width: 2.6; }
.lf-option.on { border-color: rgba(127, 208, 255, .45); background: rgba(11, 130, 210, .16); color: #fff; }
.lf-option.on .lf-tick { background: #0B82D2; border-color: #0B82D2; color: #fff; }
.lf-empty { padding: 26px 8px; text-align: center; color: rgba(255, 255, 255, .55); font-size: 13px; }
.lf-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding-top: 12px; }
.lf-actions .lf-apply { min-height: 46px; }

/* ---------- favourites: remove button under each poster (mylist.js) ---------- */
.bm-cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: opacity .22s ease, transform .22s ease; }
.bm-cell.removing { opacity: 0; transform: scale(.94); }
.bm-remove {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; width: 100%;
  border-radius: 12px; border: 1px solid rgba(255, 99, 99, .28); background: rgba(255, 70, 70, .08);
  color: #ff8a8a; font: inherit; font-size: 12.5px; font-weight: 750;
  transition: background .2s ease, border-color .2s ease;
}
.bm-remove svg { width: 15px; height: 15px; }
.bm-remove:disabled { opacity: .5; }
@media (hover: hover) { .bm-remove:hover { background: rgba(255, 70, 70, .16); border-color: rgba(255, 99, 99, .5); } }

/* ---------- IMDb Top 250 rank (components.js / film.js) ---------- */
.badge.top {
  top: 7px; inset-inline-end: 7px; display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 7px 3px 5px; border-radius: 9px; color: #3a2400; font-weight: 900;
  background: linear-gradient(135deg, #ffe08a, #f5b82e 55%, #d98e0b);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.badge.top svg { width: 12px; height: 12px; stroke-width: 2.2; }
.badge.top i { font-style: normal; font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.poster:has(.badge.top) .badge.free { top: 34px; }
.chip.top250 { display: inline-flex; align-items: center; gap: 5px; color: #3a2400; font-weight: 800;
  background: linear-gradient(135deg, #ffe08a, #f5b82e 55%, #d98e0b); border-color: transparent; }
.chip.top250 svg { width: 14px; height: 14px; stroke-width: 2.2; }

/* ---------- UX fixes 2026-10 ---------- */
.clamp-more[hidden], .pv-top-btn[hidden], .hrow-arrow[hidden] { display: none; }

/* Player: iPhone pseudo-fullscreen (no element fullscreen there) keeps the
   overlay subtitles and controls; it only lifts the player over the banners. */
.playerpage.pseudo-fullscreen { z-index: 250; }

/* Player: "connection lost, retrying" */
.pv-reconnect {
  position: absolute; z-index: 6; top: calc(var(--sat) + 70px); left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px;
  background: rgba(16, 19, 27, .9); border: 1px solid rgba(245, 158, 11, .35); color: #ffd48a;
  font-size: 12px; font-weight: 750; white-space: nowrap; pointer-events: none;
}
.pv-reconnect[hidden] { display: none; }
.pv-reconnect-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pv-reconnect-pulse 1.1s ease-in-out infinite; }
@keyframes pv-reconnect-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pv-reconnect-dot { animation: none; } }

/* Horizontal rows: ‹ › for mouse/trackpad users only (touch keeps swiping). */
.hrow-wrap { position: relative; }
.hrow-arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hrow-arrow {
    position: absolute; z-index: 4; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%;
    color: #fff; background: rgba(0, 0, 0, .66); border: 1px solid rgba(255, 255, 255, .24);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; transition: opacity .2s ease, background .2s ease;
  }
  .hrow-wrap:hover .hrow-arrow { opacity: 1; }
  .hrow-arrow:hover { background: var(--main); }
  .hrow-arrow.prev { inset-inline-start: 6px; }
  .hrow-arrow.next { inset-inline-end: 6px; }
  .hrow-arrow svg { width: 18px; height: 18px; }
  .hrow-arrow.prev svg { transform: rotate(180deg); }
  html[dir="rtl"] .hrow-arrow.prev svg { transform: none; }
  html[dir="rtl"] .hrow-arrow.next svg { transform: rotate(180deg); }
}

/* Home + Profile: subscription ending soon */
.expiry-banner {
  display: flex; align-items: center; gap: 10px; margin: 18px 16px 0; padding: 8px 8px 8px 12px;
  border: 1px solid rgba(245, 158, 11, .3); border-radius: var(--r-card); background: rgba(245, 158, 11, .09);
}
html[dir="rtl"] .expiry-banner { padding: 8px 12px 8px 8px; }
.expiry-banner-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 11px; background: rgba(245, 158, 11, .14); color: var(--gold); }
.expiry-banner-icon svg { width: 19px; height: 19px; }
.expiry-banner-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center; }
.expiry-banner-copy strong { font-size: 12.5px; font-weight: 800; color: #ffd48a; }
.expiry-banner-copy span { font-size: 11.5px; font-weight: 700; color: var(--main-light); }
.expiry-banner-close { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 11px; color: var(--tx-2); }
.expiry-banner-close svg { width: 18px; height: 18px; }
.profile-hero + .expiry-banner { margin-bottom: 4px; }

/* Home: "Continue watching" (3:2 cards, like WatchHistoryElements.kt) */
.cw-card { width: 168px; display: block; animation: fadeup .4s both; }
.cw-card:active { transform: scale(.96); }
.cw-thumb {
  position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-small); overflow: hidden;
  background: linear-gradient(155deg, var(--card-2), var(--main-deep)); box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
}
.cw-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.cw-thumb img.image-loading, .cw-thumb img.image-missing { opacity: 0; }
.cw-play {
  position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .3);
}
.cw-play svg { width: 17px; height: 17px; }
.cw-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(255, 255, 255, .14); }
.cw-progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--main), var(--main-light)); }
.cw-title { margin-top: 8px; font-size: 12.5px; font-weight: 650; color: rgba(255, 255, 255, .92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-meta { margin-top: 2px; font-size: 11px; color: var(--tx-3); }