/* Addict Film — премиум-редизайн. Фиксированная high-end тёмная тема. */
:root{
  color-scheme: dark;
  /* Верхний безопасный отступ: max(вырез устройства, панель Telegram из JS).
     В обычном режиме = notch; в полноэкранном — ещё и высота шапки Telegram. */
  --tg-inset-top:0px; --tg-inset-bottom:0px;
  --tg-safe-area-inset-bottom:0px; --tg-content-safe-area-inset-bottom:0px;
  --safe-top:max(env(safe-area-inset-top,0px), var(--tg-inset-top));
  --safe-bottom:max(env(safe-area-inset-bottom,0px), var(--tg-inset-bottom), var(--tg-safe-area-inset-bottom), var(--tg-content-safe-area-inset-bottom));
  /* Просвет под плавающей навигацией: её верхний край = 16px + высота 60px, плюс
     безопасная зона устройства и дыхание. Раньше экраны прибивали 124px без
     env(), и на iPhone таббар накрывал последнюю карточку. */
  --nav-clearance:calc(112px + var(--safe-bottom));
  /* С плашкой админ-режима (bottom:92px, высота 32px) просвет должен быть больше,
     иначе она ложится поверх карточки. */
  --nav-clearance-admin:calc(160px + var(--safe-bottom));
  --bg:#050505;
  --s1:#0F1013; --s2:#15171B; --s3:#1C1F24;
  --accent:#7B61FF; --accent-2:#9D7BFF; --accent-rgb:123,97,255;
  --ink:#FFFFFF; --ink-2:#9CA3AF;
  --hair:rgba(255,255,255,.06); --hair-2:rgba(255,255,255,.09);
  --shadow:0 18px 40px -22px rgba(0,0,0,.9);
  --font:-apple-system,"SF Pro Display","SF Pro Text",system-ui,"Helvetica Neue",sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
.sr-only{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;}
html,body{background:var(--bg);}
html{touch-action:manipulation;}  /* убирает двойной тап = зум (viewport-мета глушит только pinch) */
body{
  font-family:var(--font);color:var(--ink);letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding-bottom:var(--nav-clearance);
  background:radial-gradient(120% 45% at 50% -8%, #0b0d11 0%, transparent 55%), var(--bg);
  min-height:100vh;
  overscroll-behavior-y:none;  /* iOS-стиль: без «резинового» оттягивания фона за края */
}
#screen{max-width:520px;margin:0 auto;}
/* Нижний отступ даёт body (клиренс плавающего таб-бара) — свой не добавляем,
   иначе получается двойной отступ и пустая прокрутка под последним блоком. */
#stats{scroll-padding-bottom:var(--nav-clearance);}

/* ── header ─────────────────────────────────── */
.app-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(var(--safe-top) + 16px) 20px 0;}
.brand{min-width:0;flex:1;}
.brand h1{font-size:26px;font-weight:700;letter-spacing:-0.03em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand p{margin-top:4px;font-size:14.5px;color:var(--ink-2);font-weight:450;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bell{flex:none;width:42px;height:42px;border-radius:50%;background:var(--s2);border:1px solid var(--hair);
  display:grid;place-items:center;position:relative;color:var(--ink);box-shadow:var(--shadow);}
.bell svg{width:20px;height:20px;}
.bell .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--s2);}

/* ── Notification inbox ─────────────────────────────────────────────────── */
.notification-head{justify-content:space-between;gap:10px;padding-bottom:14px;}
.notification-head h1{min-width:0;margin-right:auto;font-size:clamp(20px,6vw,24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.notification-mark-all{flex:none;min-height:38px;padding:0 2px;border:0;background:transparent;color:var(--accent-2);font:600 13px var(--font);white-space:nowrap;cursor:pointer;}
.notification-mark-all:disabled{color:#5f6570;cursor:default;}
.notifications-page{padding:0 20px calc(132px + var(--safe-bottom));}
.notification-filters{display:flex;gap:7px;margin-bottom:18px;padding:3px;border:1px solid var(--hair);border-radius:16px;background:#0b0c0f;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.notification-filters::-webkit-scrollbar{display:none;}
.notification-filter{display:flex;align-items:center;justify-content:center;gap:7px;flex:1 0 auto;min-width:72px;height:42px;padding:0 12px;border:0;border-radius:13px;background:transparent;color:var(--ink-2);font:580 13px var(--font);white-space:nowrap;cursor:pointer;}
.notification-filter.active{background:var(--accent);color:#fff;}
.notification-filter b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#202227;color:#fff;font:650 11px var(--font);}
.notification-filter.active b{background:rgba(9,9,12,.66);}
.notifications-content{min-height:260px;}
.notifications-list{display:flex;flex-direction:column;gap:12px;}
.notification-card{display:grid;grid-template-columns:52px minmax(0,1fr) 22px;align-items:start;gap:12px;min-width:0;padding:15px;border:1px solid var(--hair-2);border-radius:18px;background:#0e0f12;box-shadow:0 14px 32px -28px #000;cursor:pointer;transition:border-color .16s,background .16s,transform .14s;}
.notification-card:active{transform:scale(.992);}
.notification-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.notification-card.is-unread{border-color:rgba(var(--accent-rgb),.28);background:#111017;}
.notification-event-icon{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:#1a1729;color:var(--accent-2);}
.notification-event-icon svg{width:27px;height:27px;}
.notification-event-icon i{position:absolute;top:-4px;right:-4px;width:11px;height:11px;border:2px solid #111017;border-radius:50%;background:var(--accent);}
.notification-event-rating{color:#a578ff;}
.notification-event-paired,.notification-event-invite{color:#a578ff;}
.notification-event-ended{color:#9a70ff;}
.notification-event-system{color:#9ca3af;background:#17191e;}
.notification-copy{display:flex;flex-direction:column;min-width:0;gap:5px;padding-top:2px;}
.notification-copy b{font-size:15px;font-weight:680;line-height:1.25;letter-spacing:-.015em;}
.notification-copy span{display:-webkit-box;overflow:hidden;color:var(--ink-2);font-size:13px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:3;}
.notification-copy time{margin-top:5px;color:#777e89;font-size:11.5px;line-height:1.2;}
.notification-chevron{display:grid;place-items:center;width:22px;height:32px;margin-top:7px;color:#8c93a0;}
.notification-chevron svg{width:18px;height:18px;}
.notification-action{grid-column:2/4;justify-self:end;min-width:92px;min-height:38px;margin-top:1px;padding:0 15px;border:1px solid rgba(var(--accent-rgb),.18);border-radius:12px;background:rgba(var(--accent-rgb),.12);color:var(--accent-2);font:620 13px var(--font);cursor:pointer;}
.notification-card.is-unread .notification-action{border-color:transparent;background:var(--accent);color:#fff;}
.notifications-more{display:block;width:100%;min-height:46px;margin:14px 0 0;border:1px solid var(--hair-2);border-radius:14px;background:#0e0f12;color:var(--accent-2);font:620 13px var(--font);cursor:pointer;}
.notifications-empty{display:flex;flex-direction:column;align-items:center;padding:62px 20px;text-align:center;}
.notifications-empty>span{display:grid;place-items:center;width:56px;height:56px;margin-bottom:17px;border:1px solid var(--hair-2);border-radius:18px;background:#111219;color:var(--accent-2);}
.notifications-empty svg{width:27px;height:27px;}
.notifications-empty h2{font-size:18px;font-weight:670;}
.notifications-empty p{max-width:280px;margin-top:8px;color:var(--ink-2);font-size:13px;line-height:1.5;}
.notifications-error .notifications-more{max-width:220px;}
.notification-skeleton{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding:15px;border:1px solid var(--hair);border-radius:18px;background:#0e0f12;}
.notification-skeleton>i,.notification-skeleton span>*{display:block;background:#1a1c21;animation:notification-pulse 1.25s ease-in-out infinite;}
.notification-skeleton>i{width:52px;height:52px;border-radius:15px;}
.notification-skeleton span{display:flex;flex-direction:column;gap:8px;padding-top:4px;}
.notification-skeleton b{width:58%;height:14px;border-radius:6px;}
.notification-skeleton em{width:92%;height:10px;border-radius:5px;}
.notification-skeleton small{width:32%;height:9px;border-radius:5px;}
@keyframes notification-pulse{50%{opacity:.48;}}
@media(prefers-reduced-motion:reduce){.notification-skeleton>i,.notification-skeleton span>*{animation:none;}.notification-card{transition:none;}}
/* ── search (home tile) ─────────────────────── */
.search{margin:18px 20px 0;height:54px;border-radius:16px;background:var(--s2);border:1px solid var(--hair);
  display:flex;align-items:center;gap:10px;padding:0 8px 0 16px;box-shadow:0 10px 26px -20px rgba(0,0,0,.85);}
.search .q{flex:1;color:var(--ink-2);font-size:15px;font-weight:450;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search .icn{color:var(--ink-2);flex:none;display:grid;place-items:center;}
.search .icn svg{width:19px;height:19px;}
.search .filter{width:38px;height:38px;border-radius:11px;background:var(--s3);border:1px solid var(--hair);display:grid;place-items:center;color:var(--ink-2);transition:transform .15s;}
.search .filter:active{transform:scale(.9);}
.search .filter svg{width:18px;height:18px;}

/* ── chips ──────────────────────────────────── */
.chips{display:flex;gap:8px;padding:18px 20px 4px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 15px 0 12px;
  border-radius:999px;border:1px solid var(--hair);background:var(--s2);color:#D7D9DE;cursor:pointer;
  font:550 13.5px/1 var(--font);letter-spacing:-.01em;white-space:nowrap;scroll-snap-align:start;
  transition:transform .15s,background .16s,color .16s,border-color .16s;}
.chip:active{transform:scale(.95);}
/* Один и тот же вертикальный "оптический центр" у разных outline-иконок.
   Их viewBox разный по заполненности, поэтому одного математического центра
   недостаточно: огонь, кубок и сетка иначе выглядят на разных высотах. */
.chip.active{background:rgba(var(--accent-rgb),.15);color:var(--accent-2);border-color:rgba(var(--accent-rgb),.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.035);}
.chip .e{display:grid;place-items:center;flex:0 0 18px;width:18px;height:18px;line-height:0;}
.chip .e svg{display:block;width:17px;height:17px;overflow:visible;stroke:currentColor;}
/* The flame path itself sits lower in its 24×24 viewBox than the other
   icons, so it needs a stronger optical correction than the wrapper centre. */
.chip .e[data-chip-icon="pop"]{transform:translateY(-1px);}.chip .e[data-chip-icon="top"]{transform:translateY(.15px);}.chip .e[data-chip-icon="gen"]{transform:translateY(-.1px);}.chip .e[data-chip-icon="coll"]{transform:translateY(.1px);}
.chip .e[data-chip-icon="pop"] svg{width:16.5px;height:16.5px;}.chip .e[data-chip-icon="top"] svg{width:17.5px;height:17.5px;}.chip .e[data-chip-icon="gen"] svg{width:16.5px;height:16.5px;}
/* Активный чип наследует общий фиолетовый акцент — без индивидуального цвета/glow иконки. */
.chip-label{display:block;transform:translateY(-.15px);}
.chip:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}
@media(max-width:370px){.chips{padding-left:16px;padding-right:16px;scroll-padding-inline:16px;}.chip{gap:7px;min-height:42px;padding-left:11px;padding-right:13px;font-size:13px;}}

/* ── section + rail ─────────────────────────── */
section{margin-top:30px;}
.head{display:flex;align-items:center;justify-content:space-between;padding:0 20px 13px;}
.head h2{font-size:19px;font-weight:650;letter-spacing:-0.03em;}
.rail{display:flex;align-items:flex-start;gap:14px;padding:2px 20px 4px;overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;}
.rail::-webkit-scrollbar{display:none;}
.rail-empty{color:var(--ink-2);font-size:14px;padding:14px 4px;}

/* ── poster ─────────────────────────────────── */
.poster{cursor:pointer;min-width:0;}
.poster .art{transition:transform 80ms cubic-bezier(.2,.8,.2,1);transform-origin:center;}
.poster:active .art,.poster.is-activating .art{transform:scale(.982);}
.rail > .poster{flex:0 0 148px;scroll-snap-align:start;}
.art{position:relative;width:100%;aspect-ratio:2/3;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#15171b,#0a0b0d);box-shadow:var(--shadow);border:1px solid var(--hair);}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;}
.art::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 22%);}
/* плейсхолдер всегда под постером: если постера нет или он не загрузился (img удаляется) — виден он */
.noposter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:10px;font-size:12.5px;font-weight:600;color:var(--ink-2);}
.rate{position:absolute;top:9px;left:9px;z-index:2;display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:9px;font-size:12px;font-weight:600;color:#fff;
  background:rgba(8,9,11,.6);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-variant-numeric:tabular-nums;}
.rate.mark{left:auto;right:9px;background:rgba(123,97,255,.9);border-color:transparent;}
.meta{padding:11px 2px 0;}
.meta .t{font-size:14px;font-weight:550;letter-spacing:-0.015em;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.meta .title-alt{margin-top:3px;color:var(--ink-2);font-size:11.5px;font-weight:450;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;}
.meta .y{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;}
/* компактная оценка в мета-строке (вынесена из-под постера): деликатная, не спорит с годом */
.rate-pill{flex:none;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:7px;
  font-size:12px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.05);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.rate-pill .s{color:#F4B740;font-size:11px;line-height:1;}

/* ── grid (списки, поиск, жанр) ─────────────── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 20px;}
.load-more{display:block;margin:22px auto 8px;min-height:44px;padding:0 20px;border:1px solid var(--hair-2);border-radius:14px;background:var(--s2);color:var(--ink);font:600 14px var(--font);cursor:pointer;}.load-more:disabled{opacity:.58;cursor:default;}

/* ── genre cards ────────────────────────────── */
.grail > .genre{flex:0 0 172px;scroll-snap-align:start;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1);}
.genre:active{transform:scale(.955);}
.gart{position:relative;width:100%;aspect-ratio:16/10;border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow);border:1px solid var(--hair);display:flex;align-items:flex-end;
  /* Детерминированный тинт жанра (--gtint из GENRE_VISUALS) поверх тёмной кинематографической базы. */
  background:radial-gradient(130% 140% at 88% -12%,var(--gtint,rgba(111,136,170,.2)),transparent 56%),linear-gradient(160deg,#14171d,#08090c);}
.gart::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.55));}
.gart::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:140px 140px;opacity:.05;mix-blend-mode:overlay;}
/* Фоновое изображение жанра (пакет WebP, см. GENRE_BACKDROPS): приглушено и
   затемнено, лежит под виньеткой ::before — текст читаем всегда. Пока файла
   нет, слой отсутствует и работает tint-фолбэк из фона .gart. */
/* В кадры пакета уже вшито затемнение + нижний градиент, поэтому CSS-фильтр
   мягкий — иначе двойное затемнение делает карточки почти чёрными. */
.gart-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.82) saturate(.88);}
.gart .lbl{position:relative;z-index:2;padding:13px 14px;}
.gart .lbl b{display:block;font-size:16px;font-weight:600;letter-spacing:-0.02em;}
.gart .lbl span{display:block;margin-top:2px;font-size:12px;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums;}

/* ── page heads / back ──────────────────────── */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(var(--safe-top) + 16px) 20px 18px;}
.page-head h1{font-size:26px;font-weight:700;letter-spacing:-0.03em;}
.page-head-action{width:38px;height:38px;flex:none;border:1px solid var(--hair-2);border-radius:12px;background:var(--s2);color:var(--ink);font:600 20px/1 var(--font);cursor:pointer;box-shadow:var(--shadow);}
.sub-head{display:flex;align-items:center;gap:12px;padding:calc(var(--safe-top) + 14px) 20px 18px;}
.sub-head h1{font-size:22px;font-weight:650;letter-spacing:-0.03em;}
.back{width:38px;height:38px;flex:none;border:none;border-radius:12px;background:var(--s2);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;border:1px solid var(--hair);transition:transform .18s;}
.back:active{transform:scale(.9);}
.back svg{width:20px;height:20px;}

/* ── detail v2 (Quiet Luxury) ───────────────── */
.detail-v2{position:relative;}

/* sticky header — invisible until backdrop scrolls past */
.d-sticky{position:fixed;top:0;left:0;right:0;z-index:40;
  height:calc(52px + var(--safe-top));padding-top:var(--safe-top);
  display:flex;align-items:center;justify-content:space-between;padding-left:12px;padding-right:12px;
  background:rgba(5,5,5,0);opacity:0;pointer-events:none;
  transition:opacity .2s linear,background-color .2s linear;border-bottom:1px solid transparent;}
.d-sticky.show{opacity:1;pointer-events:auto;background:rgba(5,5,5,.82);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  border-bottom-color:var(--hair);}
.d-sticky .t{flex:1;text-align:center;font-size:15px;font-weight:600;letter-spacing:-0.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px;
  opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;}
.d-sticky.show .t{opacity:1;transform:none;}

/* floating circular controls — backdrop + sticky share the same look */
.d-ctrl{width:36px;height:36px;flex:none;border:none;border-radius:50%;background:rgba(20,21,24,.55);
  color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);transition:transform .15s;}
/* Атрибут `hidden` обязан побеждать. У .d-ctrl собственный display, а он
   специфичнее правила [hidden]{display:none} из таблицы браузера — без этой
   строки скрытая кнопка оставалась на экране. */
.d-ctrl[hidden]{display:none;}
.d-ctrl:active{transform:scale(.88);}
.d-ctrl svg{width:19px;height:19px;}

/* Геометрия и слои героя карточки живут в одном месте — см. «Detail hero
   geometry» ниже. Здесь их намеренно нет: раньше .d-backdrop определялся в
   трёх местах, и какое правило работает, решал порядок строк в файле. */
.d-floatctrls{position:absolute;top:0;left:0;right:0;z-index:3;
  padding:calc(10px + var(--safe-top)) 14px 0;display:flex;align-items:center;justify-content:space-between;}

/* poster + identity block — overlaps backdrop bottom edge */
.d-poster-wrap{position:relative;width:fit-content;margin-inline:auto;display:flex;justify-content:center;will-change:transform;transform-origin:center top;}
.d-poster{position:relative;width:128px;aspect-ratio:2/3;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#15171b,#0a0b0d);box-shadow:0 20px 40px -16px rgba(0,0,0,.85);
  border:1px solid var(--hair);transition:opacity .1s;}
.d-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.d-poster .fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:12px;font-size:13px;font-weight:600;color:var(--ink-2);}
.d-poster-admin-edit{position:absolute;right:8px;bottom:8px;z-index:3;width:30px;height:30px;
  padding:0;border:1px solid rgba(255,255,255,.28);border-radius:50%;color:#fff;
  background:rgba(11,12,15,.78);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(10px);}
.d-poster-admin-edit svg{width:15px;height:15px;}
.poster-curator-overlay{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-end;
  background:rgba(0,0,0,.58);backdrop-filter:blur(8px);}
.poster-curator-sheet{width:100%;max-height:82vh;overflow:auto;padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  border-radius:24px 24px 0 0;background:#111;}
.poster-curator-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.poster-curator-close{width:32px;height:32px;border:0;border-radius:50%;color:var(--ink);background:var(--s2);font-size:24px;line-height:1;}
.poster-curator-current{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:var(--ink-2);font-size:13px;}
.poster-curator-current img{display:block;width:44px;aspect-ratio:2/3;object-fit:cover;border-radius:7px;}
.poster-curator-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.poster-curator-option{position:relative;padding:0;border:1px solid transparent;border-radius:12px;overflow:hidden;background:#181818;}
.poster-curator-option img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;}
.poster-curator-option span{position:absolute;right:5px;bottom:5px;padding:3px 5px;border-radius:6px;background:rgba(0,0,0,.65);color:#fff;font-size:10px;}
.poster-curator-option.is-selected{border-color:rgba(255,255,255,.9);}
.poster-curator-save{width:100%;min-height:48px;margin-top:16px;}
.poster-curator-empty{margin:8px 0 0;color:var(--ink-2);font-size:14px;}

.d-title{text-align:center;font-size:26px;font-weight:700;letter-spacing:-0.03em;line-height:1.15;margin-top:16px;}
.d-original{text-align:center;font-size:15px;color:var(--ink-2);margin-top:3px;}
.d-meta{text-align:center;font-size:14px;color:var(--ink-2);font-weight:500;margin-top:8px;}
.d-genres{text-align:center;font-size:14px;color:var(--ink-2);margin-top:3px;}
.d-director{text-align:center;font-size:14px;color:var(--ink-2);margin-top:3px;}
.d-director b{color:var(--ink);font-weight:500;}

/* ratings — 3 unified pills, community visually promoted */
.d-ratings{display:flex;justify-content:center;gap:10px;margin-top:22px;}
.d-rpill{flex:0 0 92px;background:var(--s1);border:1px solid var(--hair);border-radius:16px;padding:11px 8px;text-align:center;}
.d-rpill .v{font-size:18px;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.d-rpill .l{font-size:11px;color:var(--ink-2);font-weight:600;margin-top:2px;text-transform:uppercase;letter-spacing:.02em;}
.d-rpill .c{font-size:10.5px;color:var(--ink-2);margin-top:1px;}
.d-rpill.accent{background:var(--accent);border-color:transparent;}
.d-rpill.accent .v,.d-rpill.accent .l{color:#fff;}
.d-rpill.accent .c{color:rgba(255,255,255,.75);}

.d-overview{font-size:15px;line-height:1.55;color:#D7D9DE;margin-top:22px;}

/* primary action zone — state-aware CTA + persistent share */
.d-actions{display:flex;align-items:center;gap:10px;margin-top:26px;}
.d-cta{flex:1;height:52px;border-radius:16px;font-size:15px;font-weight:600;background:var(--s1);
  color:var(--ink);border:1px solid var(--hair);cursor:pointer;transition:transform .12s,opacity .12s;font-family:var(--font);}
.d-cta:active{transform:scale(.97);opacity:.85;}
.d-cta.primary{background:var(--accent);color:#fff;border-color:transparent;}
.d-icon-btn{flex:none;width:52px;height:52px;border-radius:16px;background:var(--s1);border:1px solid var(--hair);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .12s;}
.d-icon-btn:active{transform:scale(.9);}
.d-icon-btn svg{width:20px;height:20px;}
.d-status-links{display:flex;justify-content:center;gap:20px;margin-top:14px;}
.d-status-links button{background:none;border:none;font-size:13px;font-weight:500;color:var(--ink-2);
  cursor:pointer;font-family:var(--font);padding:4px;transition:opacity .12s;}
.d-status-links button.danger{color:#F87171;}
.d-status-links button:active{opacity:.55;}

/* cast — портретные карточки, полное фото без обрезки (родное соотношение
   кинопоисковских actor-фото ≈ 360×549) — не круг, не кроп. */
.d-cast{margin-top:30px;}
.d-cast-h{margin-bottom:14px;}
.d-cast-h h2{font-size:17px;font-weight:600;letter-spacing:-0.01em;}
.d-cast-rail{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:2px 20px;margin:0 -20px;}
.d-cast-rail::-webkit-scrollbar{display:none;}
.d-cast-item{flex:0 0 84px;}
.d-avatar{position:relative;width:84px;aspect-ratio:360/549;border-radius:14px;background:var(--s2);
  overflow:hidden;border:1px solid var(--hair);}
.d-avatar .fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:600;color:var(--ink-2);}
.d-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;z-index:1;}
.d-cast-item .n{font-size:12.5px;font-weight:500;margin-top:8px;line-height:1.25;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* hero transition ghost (catalogue poster → detail poster) */
.hero-ghost{position:fixed;z-index:100;border-radius:18px;overflow:hidden;pointer-events:none;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.85);top:0;left:0;}
.hero-ghost img{width:100%;height:100%;object-fit:cover;display:block;}

/* ── search screen ──────────────────────────── */
.search-bar{display:flex;align-items:center;gap:12px;padding:calc(var(--safe-top) + 14px) 20px 16px;}
.search-bar input{flex:1;height:48px;border-radius:14px;border:1px solid var(--hair);background:var(--s2);
  color:var(--ink);font-size:16px;font-family:var(--font);padding:0 16px;outline:none;letter-spacing:-0.01em;}
.search-bar input::placeholder{color:var(--ink-2);}
.search-bar input:focus{border-color:rgba(123,97,255,.5);}
.search-bar{position:relative;}
.search-loading{width:14px;height:14px;position:absolute;right:28px;top:calc(var(--safe-top) + 31px);border:2px solid rgba(255,255,255,.2);border-top-color:var(--accent);border-radius:50%;opacity:0;pointer-events:none;}
.search-bar.is-loading .search-loading{opacity:1;animation:search-spin .7s linear infinite;}
#sr.is-refreshing{opacity:.62;transition:opacity .16s;}
@keyframes search-spin{to{transform:rotate(360deg);}}
#sr{padding-top:2px;}

/* ── статистика ─────────────────────────────── */
.stats-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 20px 18px;padding:4px;border:1px solid var(--hair);border-radius:14px;background:var(--s2);}
.stats-switch-btn{border:0;border-radius:10px;padding:10px 12px;background:transparent;color:var(--ink-2);font:600 14px var(--font);cursor:pointer;transition:background .18s,color .18s;}
.stats-switch-btn.active{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(123,97,255,.25);}
.stats-context{font-size:13px;font-weight:650;color:var(--ink-2);letter-spacing:-.01em;margin:0 20px 10px;}
.stats-intro{margin:0 20px 16px;padding:14px 16px;border-left:3px solid var(--accent);border-radius:0 14px 14px 0;background:linear-gradient(90deg,rgba(123,97,255,.12),transparent);font-size:14px;line-height:1.45;color:var(--ink);}
.stats-intro .stats-context{margin:0 0 4px;color:var(--ink);}
.stats-hint{font-size:11.5px;line-height:1.4;color:var(--ink-2);margin:-4px 0 12px;}
.profile-card{display:flex;align-items:center;gap:12px;margin:0 20px 16px;padding:16px;border:1px solid var(--hair);border-radius:20px;background:linear-gradient(135deg,rgba(123,97,255,.18),var(--s1) 58%);box-shadow:0 14px 28px -24px rgba(123,97,255,.55);}
.profile-avatar{position:relative;display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;border-radius:50%;overflow:hidden;background:var(--accent);color:#fff;font-size:20px;font-weight:700;letter-spacing:-.04em;}
.profile-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.pair-profile{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--hair);}
.pair-avatar{position:relative;display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--accent);color:#fff;font-size:14px;font-weight:700;}
.pair-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.pair-name{font-size:14px;font-weight:700;}.pair-handle{font-size:11px;color:var(--ink-2);margin-top:2px;}
.pair-hero{margin:0 20px 14px;padding:18px;border:1px solid rgba(236,72,153,.22);border-radius:22px;background:radial-gradient(110% 140% at 100% 0,rgba(236,72,153,.12),transparent 48%),radial-gradient(120% 140% at 0 0,rgba(123,97,255,.15),transparent 52%),var(--s1);box-shadow:0 18px 36px -28px rgba(236,72,153,.48);}
.pair-heading{display:flex;align-items:center;gap:14px;min-width:0;}.pair-avatar-stack{position:relative;display:flex;align-items:center;flex:none;padding-right:10px;}.pair-avatar-stack .pair-avatar{border:2px solid var(--s1);}.pair-avatar-stack .pair-avatar + .pair-heart + .pair-avatar{margin-left:-12px;}.pair-avatar-me{background:var(--accent);}.pair-avatar-partner{background:#ec4899;}.pair-heart{position:absolute;z-index:2;left:31px;bottom:-3px;display:grid;place-items:center;width:22px;height:22px;border:2px solid var(--s1);border-radius:50%;background:#ec4899;color:#fff;font-size:11px;line-height:1;}
.pair-names{min-width:0;flex:1;}.pair-people{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;font-size:14px;}.pair-person{display:flex;flex-direction:column;min-width:0;}.pair-person b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.pair-names small{color:var(--ink-2);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.pair-names i{font-style:normal;color:var(--ink-2);font-size:18px;}.pair-names p{margin-top:5px;color:var(--ink-2);font-size:11px;}
.pair-compat {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid var(--hair);
}
.pair-compat-copy {
  min-width:0;
}
.pair-compat-copy>span {
  font-size:12px;
  color:#f5a6c9;
  font-weight:650;
}
.pair-compat-copy strong {
  display:block;
  margin-top:3px;
  color:#ec78b2;
  font-size:38px;
  line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.06em;
}
.pair-compat-copy p {
  max-width:240px;
  margin-top:8px;
  color:var(--ink-2);
  font-size:11px;
  line-height:1.42;
}
.pair-gauge {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  flex:0 0 76px;
}
.pair-gauge-track {
  position:relative;
  width:70px;
  height:36px;
  overflow:hidden;
  border:7px solid rgba(236,72,153,.16);
  border-bottom:0;
  border-radius:70px 70px 0 0;
}
.pair-gauge-track i {
  position:absolute;
  inset:-7px -7px 0;
  border:7px solid transparent;
  border-top-color:#ec4899;
  border-right-color:#ec4899;
  border-radius:70px 70px 0 0;
  transform:rotate(calc(-135deg + var(--pair-score) * 2.7deg));
  transform-origin:50% 100%;
}
.pair-gauge b {
  color:#f5a6c9;
  font-size:13px;
}
.pair-hero>.pair-fact {
  border-color:var(--hair);
}
.pair-hero .pair-settings {
  margin-top:12px;
}
.pair-highlight-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:0 20px 12px;
}
.pair-highlight-grid .chart-card {
  margin:0;
  min-width:0;
}
.pair-highlight h2 {
  font-size:15px;
  margin-bottom:5px;
}
.pair-highlight .stats-hint {
  margin-bottom:10px;
}
.pair-film {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  border-top:1px solid var(--hair);
  min-width:0;
}
.pair-film-poster,
.pair-difference .pair-film-poster {
  display:grid;
  place-items:center;
  flex:none;
  width:30px;
  height:42px;
  overflow:hidden;
  border-radius:5px;
  background:var(--s3);
}
.pair-film-poster img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.pair-poster-fallback {
  color:#f5a6c9;
  font-size:13px;
}
.pair-film>div:nth-child(2) {
  min-width:0;
  flex:1;
}
.pair-film b {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
}
.pair-film small {
  display:block;
  color:var(--ink-2);
  font-size:9px;
  margin-top:2px;
}
.pair-film>strong {
  flex:none;
  color:#f4b942;
  font-size:11px;
}
.pair-difference {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  border-top:1px solid var(--hair);
  min-width:0;
}
.pair-difference>b {
  min-width:0;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
}
.pair-difference>span {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  flex:none;
  color:var(--ink-2);
  font-size:10px;
}
.pair-difference em {
  font-style:normal;
  color:#fff;
  font-weight:700;
}
.pair-difference i {
  font-style:normal;
  font-size:8px;
}
.pair-difference small {
  color:#f5a6c9;
  font-size:9px;
  margin-top:2px;
}
.pair-film.is-clickable,.pair-difference.is-clickable{cursor:pointer;transition:background .16s,transform .16s;}.pair-film.is-clickable:active,.pair-difference.is-clickable:active{transform:scale(.985);background:rgba(255,255,255,.04);}
.pair-hero + .stats-grid .tile-val{color:#f5a6c9;}.pair-hero + .stats-grid .tile{border-color:rgba(236,72,153,.16);}
.profile-copy{min-width:0;}.profile-name{font-size:18px;font-weight:700;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.profile-handle{font-size:12px;color:var(--ink-2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.profile-meta{font-size:11px;color:var(--ink-2);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}.profile-mark{margin-left:auto;color:#8AB7FF;font-size:22px;opacity:.9;}
.profile-hero {
  margin:0 20px 14px;
  padding:0 0 12px;
  border-bottom:1px solid var(--hair);
}
.profile-main {
  display:flex;
  align-items:center;
  gap:14px;
}
.profile-main .profile-avatar {
  width:76px;
  height:76px;
  flex-basis:76px;
  font-size:26px;
}
.profile-main .profile-name {
  font-size:21px;
}
.profile-taste {
  margin-top:8px;
  color:var(--ink);
  font-size:13px;
  line-height:1.4;
  max-width:280px;
}
.profile-facts {
  display:flex;
  gap:8px;
  margin-top:16px;
  padding:9px 10px;
  border:1px solid var(--hair);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  overflow:hidden;
}
.profile-facts span {
  flex:1;
  min-width:0;
  color:var(--ink-2);
  font-size:11px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  text-align:center;
}
.profile-facts b {
  color:var(--ink);
  font-size:12px;
}
.chart-card {
  position:relative;
}
.chart-badge {
  position:absolute;
  right:14px;
  top:13px;
  padding:5px 8px;
  border:1px solid var(--hair-2);
  border-radius:10px;
  color:var(--ink-2);
  font-size:10px;
}
.chart-badge b {
  color:var(--accent);
  font-size:12px;
}
.chart-footer {
  margin-top:13px;
  color:var(--ink-2);
  font-size:12px;
}
.chart-footer b {
  color:var(--accent);
}
.section-action {
  position:absolute;
  right:14px;
  top:14px;
  color:var(--accent);
  font-size:11px;
}
.person-pill {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:7px 9px;
  border:1px solid var(--hair);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}
.person-avatar {
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:none;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--s3);
  color:var(--ink-2);
  font-size:10px;
  font-weight:700;
}
.person-avatar .fb {
  display:contents;
}
.person-avatar img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
.person-pill > span:last-child {
  display:flex;
  flex-direction:column;
  min-width:0;
}
.person-pill b {
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.person-pill small {
  margin-top:2px;
  color:var(--ink-2);
  font-size:9px;
}
.chart-card:has(.person-pill) .stats-hint {
  max-width:80%;
}
.chart-card:has(.person-pill) .person-pill {
  display:inline-flex;
  width:calc(33.333% - 7px);
  margin:3px 3px 0 0;
  vertical-align:top;
}
.stats-more{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:10px;padding:9px 12px;border:1px solid var(--hair);border-radius:11px;background:transparent;color:var(--accent);font:600 12px var(--font);cursor:pointer;}.stats-more span{font-size:14px;line-height:1;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 20px;margin-bottom:14px;}
.tile{background:var(--s2);border:1px solid var(--hair);border-radius:16px;padding:12px 6px;text-align:center;}
.tile-icon{font-size:17px;}
.tile-val{font-size:20px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;}
.tile-label{font-size:11px;color:var(--ink-2);margin-top:1px;}
.chart-card{background:var(--s1);border:1px solid var(--hair);border-radius:18px;padding:14px;margin:0 20px 12px;}
.chart-title{font-size:14px;font-weight:600;margin-bottom:12px;}
.hist{display:flex;align-items:flex-end;gap:4px;}
.hist-col{flex:1;display:flex;flex-direction:column;align-items:center;}
.hist-bar-area{height:96px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;}
.hist-val{font-size:10px;color:var(--ink-2);line-height:12px;}
.hist-bar{width:72%;border-radius:5px 5px 0 0;background:var(--accent);}
.hist-x{font-size:10px;color:var(--ink-2);margin-top:4px;}
.hbar-row{display:flex;align-items:center;gap:8px;margin:7px 0;font-size:13px;}
.hbar-label{flex:0 0 34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hbar-track{flex:1;height:8px;border-radius:6px;overflow:hidden;background:var(--s3);}
.hbar-fill{height:100%;border-radius:6px;background:var(--accent);}
.hbar-val{flex:0 0 auto;min-width:30px;text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums;}

/* ── жанри: кольорові маркери + зрозуміла вага кожного жанру ─────────────── */
.genre-stats-card{margin:0 20px 14px;padding:16px 14px 14px;border:1px solid var(--hair);border-radius:20px;background:radial-gradient(85% 120% at 0 0,rgba(45,74,118,.13),transparent 60%),var(--s1);box-shadow:0 16px 38px -32px rgba(0,0,0,.9);}
.genre-stats-head{margin-bottom:10px;}
.genre-stats-head h2{margin:0;color:var(--ink);font-size:17px;line-height:1.15;letter-spacing:-.02em;}.genre-stats-head p{margin:4px 0 0;color:var(--ink-2);font-size:11px;line-height:1.35;}
.genre-stat-list{margin-top:4px;}.genre-stat-row{display:grid;grid-template-columns:minmax(58px,.8fr) minmax(64px,1.55fr) 52px;align-items:center;gap:9px;padding:11px 0;border-top:1px solid rgba(255,255,255,.065);}.genre-stat-row:first-child{border-top:0;}
.genre-stat-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;letter-spacing:-.01em;}.genre-stat-track{height:11px;overflow:hidden;border-radius:999px;background:rgba(128,142,164,.13);box-shadow:inset 0 1px 1px rgba(0,0,0,.22);}.genre-stat-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(255,255,255,.18),var(--genre-color));box-shadow:0 0 14px var(--genre-glow);}.genre-stat-value{display:flex;flex-direction:column;align-items:flex-end;min-width:0;text-align:right;font-variant-numeric:tabular-nums;}.genre-stat-value b{color:var(--genre-color);font-size:17px;line-height:1.02;letter-spacing:-.035em;}.genre-stat-value small{margin-top:3px;color:var(--ink-2);font-size:9px;white-space:nowrap;}
.genre-stats-card .stats-more{margin-top:12px;min-height:40px;border-radius:13px;font-size:12px;}.genre-stats-card .stats-more span{font-size:17px;}
@media(max-width:390px){.genre-stats-card{margin-left:16px;margin-right:16px;padding:14px 12px 12px;}.genre-stats-head h2{font-size:16px;}.genre-stats-head p{font-size:10.5px;}.genre-stat-row{grid-template-columns:minmax(52px,.8fr) minmax(50px,1.25fr) 48px;gap:7px;padding:10px 0;}.genre-stat-name{font-size:12px;}.genre-stat-track{height:10px;}.genre-stat-value b{font-size:15px;}.genre-stat-value small{font-size:8.5px;}}

/* ── актёры и режиссёры: ранжированный, а не абстрактный список ─────────── */
.people-stats-section{margin:0 20px 14px;padding:16px 14px;border:1px solid var(--hair);border-radius:20px;background:var(--s1);}.people-stats-head{margin-bottom:14px;}.people-stats-head h2{margin:0;color:var(--ink);font-size:17px;line-height:1.18;letter-spacing:-.02em;}.people-stats-head p{margin:4px 0 0;color:var(--ink-2);font-size:11px;line-height:1.35;}.person-stat-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.people-stats-rail {
  display:flex;
  gap:10px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  margin:0 -14px;
  padding:0 14px 5px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.people-stats-rail::-webkit-scrollbar {
  display:none;
}
.person-stat-card {
  position:relative;
  display:grid;
  flex:0 0 min(270px,72vw);
  grid-template-columns:62px minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-height:104px;
  padding:12px;
  border:1px solid var(--hair);
  border-radius:16px;
  background:rgba(255,255,255,.018);
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  scroll-snap-align:start;
  transition:border-color .18s,background .18s,transform .18s;
}
.person-stat-card:active {
  transform:scale(.985);
  background:rgba(123,97,255,.06);
}
.person-stat-card:hover {
  border-color:var(--hair-2);
}
.person-stat-rank {
  position:absolute;
  top:9px;
  left:9px;
  display:grid;
  place-items:center;
  min-width:22px;
  height:22px;
  padding:0 5px;
  border-radius:7px;
  background:var(--s3);
  color:var(--ink-2);
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.person-stat-card:first-child .person-stat-rank {
  background:var(--accent);
  color:#fff;
}
.person-stat-avatar {
  position:relative;
  display:grid;
  place-items:center;
  align-self:center;
  width:62px;
  height:62px;
  overflow:hidden;
  border:1px solid var(--hair-2);
  border-radius:50%;
  background:var(--s2);
  color:var(--ink-2);
  font-size:14px;
  font-weight:700;
}
.person-stat-avatar .fb {
  display:contents;
}
.person-stat-avatar img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index:1;
}
.person-stat-copy {
  display:flex;
  flex-direction:column;
  min-width:0;
}
.person-stat-copy>b {
  display:-webkit-box;
  overflow:hidden;
  color:var(--ink);
  font-size:14px;
  font-weight:650;
  line-height:1.18;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.person-stat-copy>small {
  margin-top:4px;
  color:var(--ink-2);
  font-size:11px;
  white-space:nowrap;
}
.person-stat-favorite {
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  gap:4px;
  max-width:100%;
  margin-top:7px;
  padding:4px 6px;
  border-radius:7px;
  background:rgba(95,88,255,.13);
  color:#9a96ff;
  font-size:10px;
  font-weight:650;
  line-height:1;
  white-space:nowrap;
}
.person-stat-favorite svg {
  flex:none;
  width:11px;
  height:11px;
}
.people-stats-empty {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-height:70px;
  padding:14px;
  border:1px dashed var(--hair);
  border-radius:14px;
  color:var(--ink-2);
}
.people-stats-empty b {
  color:var(--ink);
  font-size:12px;
}
.people-stats-empty span {
  font-size:11px;
  line-height:1.4;
}
.person-films-intro {
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:2px 20px 15px;
  color:var(--ink-2);
  font-size:12px;
  line-height:1.35;
}
.person-films-intro b {
  color:var(--ink);
  font-size:16px;
  font-weight:650;
}
@media(max-width:560px){.people-stats-section{margin-left:16px;margin-right:16px;padding:15px 12px;}.people-stats-head{margin-bottom:12px;}.people-stats-head h2{font-size:16px;}.people-stats-head p{font-size:10.5px;}.people-stats-rail{margin:0 -12px;padding:0 12px 4px;}.person-stat-card{flex-basis:min(258px,78vw);}.person-stat-avatar{width:62px;height:62px;}.person-stat-rank{top:9px;left:9px;}.person-stat-copy>b{font-size:14px;}.person-stat-copy>small{font-size:11px;}.person-stat-favorite{font-size:10px;}}

/* Портрет может отсутствовать у источника. Это не пустое место: до успешной
   загрузки остаётся аккуратный, детерминированный аватар с инициалами. */
.person-stat-avatar{background:radial-gradient(circle at 35% 28%,rgba(96,165,250,.34),transparent 38%),var(--s2);isolation:isolate;}.person-stat-avatar::before{position:absolute;inset:8px;border:1px solid rgba(148,163,184,.2);border-radius:50%;content:"";}.person-stat-avatar .fb{position:relative;z-index:0;display:grid;place-items:center;width:100%;height:100%;letter-spacing:.04em;text-shadow:0 1px 12px rgba(96,165,250,.45);}.person-stat-avatar-directors{background:radial-gradient(circle at 35% 28%,rgba(167,139,250,.32),transparent 38%),var(--s2);}

/* ── Пара ───────────────────────────────────── */
.partner-sub{font-size:13px;color:var(--ink-2);line-height:1.5;margin-bottom:12px;}
.compat{display:flex;align-items:baseline;gap:10px;margin:2px 0 12px;}
.compat-num{font-size:34px;font-weight:750;letter-spacing:-0.03em;color:var(--accent);font-variant-numeric:tabular-nums;}
.compat-lbl{font-size:13px;color:var(--ink-2);}
.pair-hint{margin:-5px 0 14px;max-width:320px;}
.pair-fact{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:9px 0;border-top:1px solid var(--hair);font-size:13px;line-height:1.35;}
.pair-fact span{color:var(--ink-2);flex:0 0 42%;}.pair-fact b{text-align:right;font-weight:600;}.pair-fact small{color:var(--ink-2);font-weight:500;}
.pair-settings{margin-top:14px;border-top:1px solid var(--hair);}.pair-settings summary{padding-top:13px;color:var(--ink-2);font-size:13px;cursor:pointer;list-style:none;}.pair-settings summary::-webkit-details-marker{display:none;}.pair-settings summary::after{content:"›";float:right;font-size:18px;line-height:12px;}.pair-settings[open] summary::after{transform:rotate(90deg);}
@media(max-width:420px){.pair-highlight-grid{grid-template-columns:1fr;}.pair-hero{padding:16px;}.pair-compat{gap:8px;}.pair-gauge{flex-basis:68px;}.pair-names b{max-width:88px;}}
.pbtn{width:100%;border:1px solid var(--hair);border-radius:14px;padding:13px 16px;font-size:15px;font-weight:550;
  background:var(--s2);color:var(--ink);cursor:pointer;font-family:var(--font);margin-top:10px;transition:transform .15s;}
.pbtn:active{transform:scale(.98);}
.pbtn.primary{background:var(--accent);color:#fff;border-color:transparent;}
.pbtn.danger{background:transparent;color:#F87171;}
.code-hint{font-size:12px;color:var(--ink-2);margin:10px 0 6px;}
.code-box{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.04em;
  background:var(--s3);border:1px solid var(--hair);border-radius:12px;padding:11px 14px;color:var(--ink);
  text-align:center;cursor:pointer;user-select:all;-webkit-user-select:all;}
.code-input{width:100%;height:48px;border-radius:12px;border:1px solid var(--hair);background:var(--s3);
  color:var(--ink);font-size:16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;padding:0 14px;
  outline:none;margin:4px 0;letter-spacing:.03em;}
.code-input:focus{border-color:rgba(123,97,255,.5);}
.sec-label{font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:-0.01em;padding:6px 4px 12px;margin-top:6px;}
/* The invite is its own small flow, so it balances inside the usable Telegram
   viewport rather than inheriting a desktop-sized top margin. */
.accept-screen{display:grid;min-width:0;min-height:calc(100dvh - var(--safe-top));padding:calc(var(--safe-top) + 18px) 20px calc(112px + var(--safe-bottom));place-items:center;}
.accept{display:flex;flex-direction:column;align-items:center;width:100%;max-width:420px;min-width:0;min-height:min(610px,calc(100dvh - var(--safe-top) - 142px));padding:clamp(30px,7vh,56px) clamp(22px,6vw,42px) clamp(24px,5vh,40px);border:1px solid var(--hair-2);border-radius:26px;background:var(--s1);box-shadow:var(--shadow);text-align:center;}
.accept-illustration{display:grid;flex:none;width:clamp(132px,43vw,178px);height:clamp(100px,17vh,138px);place-items:center;}
.accept-illustration-img{display:block;width:100%;height:100%;object-fit:contain;}
.accept-illustration-img[hidden]{display:none;}
.accept-illustration-fallback{position:relative;width:74px;height:58px;border:1px solid rgba(139,92,246,.55);border-radius:36px 36px 26px 26px;transform:rotate(-15deg);opacity:.8;}
.accept-illustration-fallback::after{position:absolute;top:12px;left:32px;width:74px;height:58px;border:1px solid rgba(244,114,182,.65);border-radius:36px 36px 26px 26px;content:"";transform:rotate(30deg);}
.accept-title{width:100%;min-width:0;max-width:100%;margin-top:clamp(18px,4vh,34px);font-size:clamp(25px,7vw,34px);font-weight:680;letter-spacing:-.04em;line-height:1.12;overflow-wrap:anywhere;}
.accept-inviter-name{display:block;max-width:100%;margin:2px auto 0;overflow:hidden;color:var(--accent-2);text-overflow:ellipsis;white-space:nowrap;}
.accept-sub{max-width:330px;margin-top:18px;color:var(--ink-2);font-size:clamp(14px,4vw,16px);line-height:1.52;}
.accept-actions{display:flex;flex-direction:column;gap:11px;width:100%;margin-top:auto;padding-top:clamp(34px,8vh,76px);}
.accept-btn{min-height:52px;border:1px solid var(--hair-2);border-radius:15px;background:var(--s2);color:var(--ink);font:600 16px var(--font);cursor:pointer;transition:transform .15s,border-color .15s;}
.accept-btn:active{transform:scale(.985);}
.accept-btn-primary{border-color:transparent;background:var(--accent);}
@media(max-width:360px),(max-height:680px){.accept-screen{padding-left:16px;padding-right:16px;padding-bottom:104px;}.accept{min-height:0;padding:16px;border-radius:22px;}.accept-illustration{width:120px;height:78px;}.accept-title{margin-top:12px;font-size:24px;}.accept-sub{margin-top:12px;font-size:14px;}.accept-actions{padding-top:18px;}.accept-btn{min-height:46px;}}

/* Верхний скрим: при скролле контент уходит под системную зону/шапку Telegram —
   мягкий градиент сохраняет читабельность и не даёт постерам «упираться» в верх. */
#top-scrim{position:fixed;top:0;left:0;right:0;z-index:25;pointer-events:none;
  height:calc(var(--safe-top) + 26px);
  background:linear-gradient(180deg,var(--bg) 38%,transparent);
  opacity:0;transition:opacity .2s ease;}
#top-scrim.show{opacity:1;}

/* ── сортировка «Смотрел» (компактный bottom-sheet) ─────────────────────── */
.sort-sheet{position:fixed;inset:0;z-index:60;}
.sort-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .18s;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.sort-sheet.in .sort-backdrop{opacity:1;}
.sort-card{position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;
  background:var(--s1);border-top:1px solid var(--hair-2);border-radius:22px 22px 0 0;
  padding:10px 10px calc(14px + var(--safe-bottom));box-shadow:0 -18px 40px -20px rgba(0,0,0,.9);
  transform:translateY(100%);transition:transform .2s cubic-bezier(.2,.8,.2,1);}
.sort-sheet.in .sort-card{transform:none;}
.sort-item{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;cursor:pointer;
  padding:14px;border-radius:14px;color:var(--ink);font:550 15px var(--font);text-align:left;transition:background .14s;}
.sort-item:active{background:rgba(255,255,255,.05);}
.sort-item.on{color:var(--accent-2);}
.sort-ic{flex:none;display:grid;place-items:center;color:var(--ink-2);}
.sort-item.on .sort-ic{color:var(--accent-2);}
.sort-ic svg{width:20px;height:20px;display:block;}
.sort-lbl{flex:1;min-width:0;}
.sort-check{flex:none;width:20px;height:20px;color:var(--accent);}
.sort-check svg{width:20px;height:20px;display:block;}

/* ── floating tab bar ───────────────────────── */
#tabbar{position:fixed;left:0;right:0;bottom:calc(16px + var(--safe-bottom));z-index:60;
  margin:0 auto;width:min(400px,calc(100% - 32px));height:60px;border-radius:26px;
  background:rgba(18,20,24,.62);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid var(--hair);box-shadow:0 14px 34px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  display:flex;align-items:stretch;padding:0 6px;
  /* One delegated native click keeps every input method on the same navigation path. */
  isolation:isolate;touch-action:manipulation;-webkit-user-select:none;user-select:none;}
#tabbar .tab{flex:1;border:none;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--ink-2);cursor:pointer;transition:transform .18s;font-family:var(--font);
  position:relative;z-index:1;min-width:44px;min-height:56px;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;}
#tabbar .tab:active{transform:scale(.9);}
#tabbar .tab svg{width:22px;height:22px;display:block;}
#tabbar .tab span{font-size:10.5px;font-weight:500;}
#tabbar .tab.active{color:var(--accent);}

/* ── resilient poster and mobile navigation fallbacks ─────────────────────── */
.detail-preview .d-preview-lines{min-height:58px;padding-top:8px;}

/* ── скелетоны / пустое ─────────────────────── */
.sk{position:relative;overflow:hidden;background:var(--s2);border-radius:12px;}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shimmer 1.2s infinite;}
.art.sk{aspect-ratio:2/3;border-radius:18px;}
.sk-line{height:12px;margin:8px 2px 0;}
.sk-line.wide{height:22px;max-width:60%;margin:14px auto;}
.d-poster.sk{position:relative;}
@keyframes shimmer{100%{transform:translateX(100%);}}
.empty{text-align:center;padding:56px 24px;}
.empty-icon{font-size:44px;line-height:1;}
.empty-icon svg{display:block;width:40px;height:40px;margin:0 auto;color:var(--ink-2);}
.empty-text{font-size:16px;font-weight:600;margin-top:12px;}
.empty-sub{font-size:13px;color:var(--ink-2);margin-top:4px;}

/* Static first-paint shell: keeps the viewport composed while auth/data load. */
.startup-shell{display:grid;gap:22px;padding:calc(28px + var(--safe-top)) 16px 160px;opacity:.82;}
.startup-shell-head{display:grid;gap:10px;padding:4px 2px 0;}
.startup-shell-line,.startup-shell-search,.startup-shell-rail i{background:linear-gradient(90deg,#17191f,#20232b,#17191f);background-size:200% 100%;animation:startup-shimmer 1.35s ease-in-out infinite;border-radius:10px;}
.startup-shell-title{width:58%;height:28px}.startup-shell-subtitle{width:42%;height:14px;border-radius:7px}
.startup-shell-search{height:58px;border-radius:18px}.startup-shell-section{display:grid;gap:16px}.startup-shell-heading{width:34%;height:22px}
.startup-shell-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.startup-shell-rail i{display:block;height:222px;border-radius:18px;}
@keyframes startup-shimmer{0%,100%{background-position:100% 0}50%{background-position:0 0}}

/* ── motion ─────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.rise{animation:rise .24s cubic-bezier(.2,.8,.2,1) both;}
.d1{animation-delay:.01s;}.d2{animation-delay:.025s;}.d3{animation-delay:.05s;}.d4{animation-delay:.075s;}.d5{animation-delay:.10s;}
#tabbar{animation:rise .28s cubic-bezier(.2,.8,.2,1) .02s backwards;}
@media (prefers-reduced-motion:reduce){
  .rise,#tabbar{animation:none;}
  .startup-shell-line,.startup-shell-search,.startup-shell-rail i{animation:none;}
  .poster:active .art,.poster.is-activating .art,.genre:active,.chip:active,.back:active,.d-stars button:active,
  .d-cta:active,.d-icon-btn:active,#tabbar .tab:active{transform:none;}
  .sk::after{animation:none;}
  .d-backdrop img,.d-poster-wrap,.hero-ghost{transition:none!important;}
  .detail-v2 .d-backdrop-main,.detail-v2 .d-backdrop-ambient{transition:none!important;}
  .detail-hero-revealing .d-backdrop-main,
  .detail-hero-revealing .d-backdrop-ambient{opacity:1;}
}

/* Safari WebView can make several live backdrop-filter layers expensive on
   older phones. Motion-sensitive users get the same hierarchy without forcing
   the GPU to blur the whole page behind the fixed controls. */
@media (prefers-reduced-motion:reduce){
  #tabbar,.d-sticky.show,.d-ctrl{ -webkit-backdrop-filter:none;backdrop-filter:none; }
  #tabbar{background:rgba(18,20,24,.96);}
  .d-sticky.show{background:rgba(5,5,5,.96);}
}

/* ── Movie detail v2 ────────────────────────── */
/* The detail template uses d-* classes. Keep these styles with the template;
   without them the browser renders raw, unlaid-out HTML. */
.detail-v2{position:relative;}
.d-sticky{position:fixed;top:0;left:0;right:0;z-index:40;height:calc(52px + var(--safe-top));padding:var(--safe-top) 12px 0;display:flex;align-items:center;justify-content:space-between;background:rgba(5,5,5,0);opacity:0;pointer-events:none;transition:opacity .2s,background-color .2s;border-bottom:1px solid transparent;}
.d-sticky.show{opacity:1;pointer-events:auto;background:rgba(5,5,5,.82);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);border-bottom-color:var(--hair);}
.d-sticky .t{flex:1;text-align:center;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px;opacity:0;transition:opacity .2s;}.d-sticky.show .t{opacity:1;}
.d-ctrl{width:36px;height:36px;border:0;border-radius:50%;background:rgba(20,21,24,.55);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}.d-ctrl svg{width:19px;height:19px;}
.d-floatctrls{position:absolute;inset:0 0 auto;z-index:3;padding:calc(10px + var(--safe-top)) 14px 0;display:flex;justify-content:space-between;}

/* ── Detail hero geometry — единственный источник правды ──────────────────
   Высота героя и наплыв тела под него заданы ОДНОЙ парой переменных на корне
   карточки. Разделять их нельзя: увеличишь высоту — постер уедет вниз и
   оторвётся от кадра. Три состояния приходят с сервера через hero_type, а не
   угадываются по наличию backdrop_url. */
/* Инвариант теперь не «наплыв», а ЯКОРЬ ПОСТЕРА: место, где начинается
   вертикальный постер, одинаково во всех трёх состояниях и почти не менялось
   с прошлой версии. Высота героя растёт отдельно, а наплыв ВЫЧИСЛЯЕТСЯ как
   разница — поэтому кадр уходит дальше ВНИЗ, ЗА постер, вместо того чтобы
   толкать постер вниз. Задавать высоту и наплыв двумя независимыми числами
   больше нельзя: рассинхрон между ними и есть «постер оторвался от кадра». */
.detail-v2{
  --detail-hero-height:clamp(300px,80vw,340px);
  --detail-poster-anchor:clamp(172px,45vw,195px);
  --detail-hero-overlap:calc(var(--detail-hero-height) - var(--detail-poster-anchor));
}
/* Запасные состояния остаются заметно ниже: за размытым постером и за пустым
   градиентом продолжать нечего, и высокая плита там читалась бы как дыра. */
.detail-v2.detail-hero-poster{--detail-hero-height:clamp(240px,62vw,285px);}
/* Пока карточка грузится, про кадр ещё ничего не известно: списки и поиск
   hero_* не отдают. Держим ту же высоту, что у запасного постера, — якорь
   постера от высоты героя не зависит (см. --detail-poster-anchor), поэтому ни
   заголовок, ни постер потом никуда не прыгнут. */
.detail-v2.detail-hero-loading{--detail-hero-height:clamp(240px,62vw,285px);}
/* Проявление настоящего кадра: короткая прозрачность и ничего больше — ни
   сдвига, ни масштаба, ни анимации размытия. */
.detail-v2 .d-backdrop-main,.detail-v2 .d-backdrop-ambient{transition:opacity .18s ease;}
.detail-hero-revealing .d-backdrop-main,.detail-hero-revealing .d-backdrop-ambient{opacity:0;}
.detail-v2.detail-hero-none{--detail-hero-height:clamp(205px,52vw,240px);}
/* Подложка — цвет СТРАНИЦЫ, а не --s1. Светлая плита имела смысл, пока герой
   был всегда заполненной картинкой 16/11; теперь под полупрозрачными слоями
   она давала еле заметную ступеньку светлее фона по всей нижней части блока. */
.d-backdrop{position:relative;width:100%;height:var(--detail-hero-height);aspect-ratio:auto;
  overflow:hidden;isolation:isolate;background:var(--bg);}
.d-backdrop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform-origin:center top;}
/* Подсказку компоновщику держим ТОЛЬКО на тех узлах, которые wireDetailScroll
   действительно двигает каждый кадр. Раньше `will-change` стоял на всех
   картинках блока разом — включая те, что никогда не анимируются, — и каждая
   из них получала собственный слой на устройстве, где слоёв и так мало. */
#d-backdrop-img,.d-backdrop-ambient{will-change:transform;}
.d-backdrop.sk{height:var(--detail-hero-height);aspect-ratio:auto;}
.d-body{position:relative;z-index:3;margin-top:calc(-1 * var(--detail-hero-overlap));padding:0 20px 8px;}
/* Ниже сгиба — считаем и рисуем по мере надобности. Это не ленивая загрузка
   данных: разметка на месте и доступна поиску по странице, просто браузер не
   обязан раскладывать её в том же кадре, что и первый экран. */
/* `content-visibility:auto` подразумевает `contain:paint`, а это ОБРЕЗАЕТ
   всплывающее меню комментария по границе секции: визуально оно есть, но
   клик по нему приходит в body. Поэтому у ленты комментариев containment нет
   — выигрыш в первом кадре не стоит неработающей кнопки. */
.d-rating-block,.d-cast{content-visibility:auto;}
.d-cast{contain-intrinsic-size:auto 220px;}

/* Размытая копия ТОГО ЖЕ файла. Нужна ровно за одним: убрать чёрные поля,
   которые contain оставляет вокруг широкого кадра. Тихая и тёмная — это фон
   сцены, а не эффект. */
/* Запас по вертикали больше, чем радиус размытия. blur размывает и СОБСТВЕННЫЙ
   край элемента: если он совпадает с краем блока, внутрь кадра уезжает тёмная
   виньетка. Замер на белой картинке: при width:100% рамка тёмная со всех
   четырёх сторон, при запасе — ровная заливка. Поэтому запас нужен и сверху,
   и по бокам; убрать горизонтальный, оставив вертикальный, нельзя. */
.d-backdrop .d-backdrop-ambient{position:absolute;z-index:0;top:-40px;left:-28px;right:auto;
  width:calc(100% + 56px);height:calc(100% + 80px);
  object-fit:cover;object-position:var(--hero-focus-x,50%) var(--hero-focus-y,36%);
  filter:blur(24px) saturate(.82) brightness(.58);opacity:.62;transform:scale(1.06);
  pointer-events:none;}
.d-backdrop-stage{position:absolute;z-index:1;inset:0;overflow:hidden;}
/* Никакого background у резкого кадра: пустое поле contain обязано открывать
   размытый слой под собой, а не чёрный прямоугольник. */
.d-backdrop .d-backdrop-main{position:absolute;inset:0;display:block;
  width:100%;height:100%;background:transparent;}
/* contain — для кинематографических 2.39:1. Кадр прижат к верху, свободное
   место остаётся СНИЗУ, где оно и растворяется в странице. Маска снимает
   резкую нижнюю границу изображения. */
/* height:auto — принципиально. При object-fit:contain картинка занимает лишь
   часть блока, а маска считается по БЛОКУ: у кадра 2.39:1 весь мягкий участок
   градиента попадал на пустоту под изображением, и снизу оставался резкий край.
   Сделав высоту элемента равной высоте самой картинки, мы кладём маску ровно на
   неё. Кадр по политике всегда шире 1.45:1, поэтому он гарантированно ниже
   блока и переполнить его не может. */
/* Отступ сверху растёт вместе с шириной экрана: под кнопками Telegram кадр
   начинался почти вплотную, и сцена читалась как прижатая к чрому. Опускаем
   ТОЛЬКО резкий кадр — фоновый слой, высота блока и наплыв тела не меняются. */
.d-backdrop[data-hero-fit="contain"] .d-backdrop-main{
  top:clamp(17px,4.8vw,20px);
  bottom:auto;left:0;right:auto;width:100%;height:auto;max-height:100%;
  object-fit:contain;object-position:var(--hero-focus-x,50%) top;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 80%,rgba(0,0,0,.92) 87%,
    rgba(0,0,0,.55) 94%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 80%,rgba(0,0,0,.92) 87%,
    rgba(0,0,0,.55) 94%,transparent 100%);}
/* Чем шире кадр, тем меньше от него достаётся по высоте: 2.39:1 при ширине
   блока даёт всего ~163 px полезной сцены, и она вдобавок жмётся к верху, где
   её накрывают кнопки Telegram. Поэтому широкие кадры расширяем чуть за края
   блока и опускаем — не масштабом, а шириной и смещением.
   Масштаб трогать нельзя: transform на этом же элементе пишет wireDetailScroll,
   и статическая рамка подралась бы с эффектом прокрутки.
   Класс ставит JS по РЕАЛЬНЫМ naturalWidth/naturalHeight загруженного файла,
   а не по названию фильма и не по метаданным каталога. */
.d-backdrop[data-hero-fit="contain"].d-hero-wide .d-backdrop-main{
  top:clamp(22px,6vw,26px);left:-2.5%;width:105%;}
.d-backdrop[data-hero-fit="contain"].d-hero-ultrawide .d-backdrop-main{
  top:clamp(27px,7vw,31px);left:-6%;width:112%;}
/* cover уже заполняет блок целиком — ему хватает общего затемнения снизу. */
.d-backdrop[data-hero-fit="cover"] .d-backdrop-main{
  object-fit:cover;object-position:var(--hero-focus-x,50%) var(--hero-focus-y,36%);}

/* Верхняя зона — управляемая, а не «как вышло». Кнопки Telegram стояли прямо на
   деталях кадра (снег «Интерстеллара», белый бокс F1, розовое мыло «Бойцовского
   клуба»), и там же проходит жёсткая верхняя граница резкого contain-кадра:
   маска гасит только низ. Плотная, но многоступенчатая шторка убирает и то, и
   другое, оставаясь кинематографичной, а не чёрной полосой. */
.d-scrim-t{position:absolute;inset:0 0 auto;height:42%;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,5,5,.82) 0%,rgba(5,5,5,.74) 10%,
    rgba(5,5,5,.58) 20%,rgba(5,5,5,.36) 32%,rgba(5,5,5,.16) 46%,rgba(5,5,5,0) 60%);}
/* Многоступенчатый уход в фон страницы: последняя остановка — ровно var(--bg),
   поэтому видимой горизонтальной границы между героем и телом не остаётся. */
/* Последние 5% — уже сплошной var(--bg), а не «почти». Пока градиент добирал
   непрозрачность ровно к последнему пикселю, у cover-кадра снизу оставалась
   различимая ступенька: на 80% сквозь него ещё читались 18% яркой картинки, и
   весь остаток гасился на 40 пикселях. Замер: с этими стопами нижняя полоса
   героя совпадает с фоном страницы точно. */
.d-scrim-b{position:absolute;inset:auto 0 0;height:82%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,5,0) 0%,rgba(5,5,5,.04) 16%,
    rgba(5,5,5,.18) 34%,rgba(5,5,5,.46) 54%,rgba(5,5,5,.74) 70%,
    rgba(5,5,5,.93) 86%,var(--bg) 95%,var(--bg) 100%);}

/* Запасной режим: вертикальный постер работает атмосферой, а не «широким
   кадром». Резкий постер 2:3 ниже остаётся главным изображением. */
/* Атмосфера запасного постера. Ровно та же обработка нужна и заглушке на время
   загрузки: без неё вертикальный постер растягивался на весь горизонтальный
   блок РЕЗКИМ — то есть ровно тем, что запасной режим и придуман скрывать.
   Настоящие слои кадра под это правило не попадают: они не заглушка. */
.detail-hero-poster .d-backdrop img:not(.d-backdrop-main):not(.d-backdrop-ambient),
.d-backdrop-placeholder{object-fit:cover;object-position:center 28%;
  filter:blur(26px) saturate(.82) brightness(.48);transform:scale(1.18);opacity:.72;}
/* Заглушка лежит ПОД настоящими слоями и живёт до успешного проявления. */
.d-backdrop-placeholder{z-index:0;}
.detail-hero-poster .d-scrim-t{height:88px;
  background:linear-gradient(180deg,rgba(0,0,0,.42),transparent);}
/* Изображения нет вовсе — ничего не выдумываем, но и пустой плиты не оставляем:
   высота здесь не нулевая ради безопасной зоны Telegram и плавающих кнопок. */
.detail-hero-none .d-backdrop{
  background:radial-gradient(100% 130% at 50% 0%,#252932 0%,#111319 42%,var(--bg) 82%);}
.detail-hero-none .d-scrim-t{height:76px;
  background:linear-gradient(180deg,rgba(0,0,0,.38),transparent);}

.d-poster-wrap{position:relative;width:fit-content;margin-inline:auto;display:flex;justify-content:center;will-change:transform;transform-origin:center top;}.d-poster{position:relative;width:128px;aspect-ratio:2/3;overflow:hidden;border-radius:18px;background:linear-gradient(160deg,#15171b,#0a0b0d);box-shadow:0 20px 40px -16px rgba(0,0,0,.85);border:1px solid var(--hair);transition:opacity .1s;}.d-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}.d-poster .fb{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:12px;font-size:13px;font-weight:600;color:var(--ink-2);}
/* Канонический постер проявляется ПОВЕРХ превью, а не вместо него: замена «в
   лоб» показывала пустой кадр между двумя файлами. Только прозрачность — ни
   масштаба, ни сдвига. Правило стоит ЗДЕСЬ, после блока detail v2: объявление
   выше по файлу этот же селектор переопределяет. */
.d-poster img{transition:opacity .16s ease;}
.d-poster img.d-poster-incoming{opacity:0;z-index:2;}
.d-poster img.d-poster-incoming.is-visible{opacity:1;}
@media (prefers-reduced-motion:reduce){.d-poster img{transition:none;}}
.d-title{text-align:center;font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-top:16px;}.d-original,.d-meta,.d-genres,.d-director{text-align:center;color:var(--ink-2);margin-top:3px;}.d-original{font-size:15px;}.d-meta,.d-genres,.d-director{font-size:14px;}.d-meta{font-weight:500;margin-top:8px;}.d-director b{color:var(--ink);font-weight:500;}
.d-ratings{display:flex;justify-content:center;gap:10px;margin-top:22px;}.d-rpill{flex:0 0 92px;background:var(--s1);border:1px solid var(--hair);border-radius:16px;padding:11px 8px;text-align:center;}.d-rpill .v{font-size:18px;font-weight:700;}.d-rpill .l{font-size:11px;color:var(--ink-2);font-weight:600;margin-top:2px;text-transform:uppercase;}.d-rpill .c{font-size:10.5px;color:var(--ink-2);margin-top:1px;}.d-rpill.accent{background:var(--accent);border-color:transparent;}.d-rpill.accent .v,.d-rpill.accent .l{color:#fff;}.d-rpill.accent .c{color:rgba(255,255,255,.75);}
.d-overview{font-size:15px;line-height:1.55;color:#d7d9de;margin-top:22px;}.d-actions{display:flex;align-items:center;gap:10px;margin-top:26px;}.d-cta{flex:1;height:52px;border-radius:16px;font-size:15px;font-weight:600;background:var(--s1);color:var(--ink);border:1px solid var(--hair);cursor:pointer;font-family:var(--font);}.d-cta.primary{background:var(--accent);color:#fff;border-color:transparent;}.d-status-links{display:flex;justify-content:center;gap:20px;margin-top:14px;}.d-status-links button{background:none;border:0;font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer;font-family:var(--font);padding:4px;}.d-status-links button.danger{color:#f87171;}
.d-list-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin:20px 0 22px;}
.d-list-action{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:50px;padding:0 12px;border-radius:14px;background:#111217;font-family:var(--font);font-size:13.5px;font-weight:650;line-height:1.2;text-align:center;cursor:pointer;touch-action:manipulation;}
.d-list-action.want{border:1px solid rgba(139,96,255,.28);color:#a783ff;}
.d-list-action.remove{border:1px solid rgba(255,103,119,.25);color:#ff7785;}
.d-list-action:active{background:#17181e;}
.d-rating-block .d-stars{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;width:100%;min-width:0;}
.d-rating-block .d-rating-option{display:grid;place-items:center;width:100%;min-width:0;height:46px;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#17181e;color:#a7aab4;font-family:var(--font);font-size:14px;font-weight:680;font-variant-numeric:tabular-nums;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease,transform 120ms ease;}
.d-rating-block .d-rating-option.on{border-color:rgba(176,140,255,.62);background:linear-gradient(135deg,#704cff,#8d61ff);color:#fff;}
.d-rating-block .d-rating-option:active{transform:scale(.96);}
.d-rating-block .d-rating-option:focus-visible,.d-comment-save:focus-visible,.d-comment-menu-trigger:focus-visible,.d-comment-menu button:focus-visible{outline:2px solid rgba(157,113,255,.82);outline-offset:2px;}
.d-comment-input{display:block;width:100%;min-height:100px;max-height:138px;padding:14px 15px;resize:none;overflow-y:auto;border:1px solid rgba(255,255,255,.09);border-radius:17px;outline:0;background:#16171c;color:#f0f0f3;font:14.5px/1.5 var(--font);transition:border-color .14s ease,box-shadow .14s ease;}
.d-comment-input::placeholder{color:#777a85;}
.d-comment-input:focus{border-color:rgba(137,95,255,.72);box-shadow:0 0 0 3px rgba(126,81,255,.1);}
.d-comment-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;}
.d-rating-context{margin-top:14px;padding:14px 16px;border:1px solid var(--hair);border-radius:17px;background:var(--s1);}.d-rating-context h2{margin:0 0 10px;font-size:13px;color:var(--ink-2);font-weight:600;}.d-rating-context-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}.d-rating-context-grid>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:12px;background:var(--s2);}.d-rating-context-grid span{overflow:hidden;color:var(--ink-2);font-size:12px;text-overflow:ellipsis;white-space:nowrap;}.d-rating-context-grid strong{font-size:18px;font-variant-numeric:tabular-nums;}
.d-cast{margin-top:30px;}.d-cast-h{margin-bottom:14px;}.d-cast-h h2{font-size:17px;font-weight:600;}.d-cast-rail{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:2px 20px;margin:0 -20px;}.d-cast-rail::-webkit-scrollbar{display:none;}.d-cast-item{flex:0 0 84px;}.d-avatar{position:relative;width:84px;aspect-ratio:360/549;overflow:hidden;border-radius:14px;background:var(--s2);border:1px solid var(--hair);}.d-avatar .fb{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;font-weight:600;color:var(--ink-2);}.d-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;z-index:1;}.d-cast-item .n{font-size:12.5px;font-weight:500;margin-top:8px;line-height:1.25;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.d-comment-menu-wrap {
  position:relative;
  flex:0 0 auto;
  /* Меню всплывает НАД соседними строками. Без своего слоя следующий
     комментарий рисуется поверх него: в потоке он идёт позже, а прежняя
     раскладка держала меню в отдельном контексте карточки. */
  z-index:2;
}
.d-comment-menu-trigger {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#8f929d;
  cursor:pointer;
}
.d-comment-menu-trigger:active,
.d-comment-menu-trigger[aria-expanded=true] {
  background:rgba(255,255,255,.055);
  color:#e2e2e7;
}
.d-comment-menu-trigger svg {
  width:21px;
  height:21px;
}
.d-comment-menu.up {
  top:auto;
  bottom:42px;
}
.d-comment-menu {
  position:absolute;
  z-index:3;
  top:42px;
  right:0;
  width:max-content;
  min-width:190px;
  padding:6px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:#191a20;
  box-shadow:0 16px 42px rgba(0,0,0,.48);
}
.d-comment-menu[hidden] {
  display:none;
}
.d-comment-menu button {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:42px;
  padding:0 11px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#efeff3;
  font:610 12.5px var(--font);
  text-align:left;
}
.d-comment-menu button.danger {
  color:#ff7e8c;
}
.d-comment-menu button:active {
  background:rgba(255,255,255,.055);
}
.d-comment-menu button svg {
  width:18px;
  height:18px;
}
@media(max-width:360px){.d-rating-block .d-stars{gap:3px;}.d-rating-block .d-rating-option{height:44px;border-radius:9px;font-size:12.5px;}}
@media(max-width:340px){.d-list-actions{gap:7px;}.d-list-action{min-height:48px;padding:0 8px;font-size:12.5px;}}
@media(max-width:380px){.d-rating-context-grid{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){.d-rating-block .d-rating-option,.d-comment-input{transition:none;}}
.hero-ghost{position:fixed;z-index:100;border-radius:18px;overflow:hidden;pointer-events:none;box-shadow:0 20px 40px -16px rgba(0,0,0,.85);top:0;left:0;}.hero-ghost img{width:100%;height:100%;object-fit:cover;display:block;}.d-poster.sk{position:relative;}

/* A loaded Kinopoisk person image is first checked for the provider's gray
   "K" placeholder. The initials remain visible until a real portrait passes
   that check, so users never see the broken card flash on screen. */
.d-avatar img[data-person-photo],.person-avatar img[data-person-photo]{opacity:0;transition:opacity .16s ease;}
.d-avatar img[data-person-photo].ready,.person-avatar img[data-person-photo].ready{opacity:1;}
.detail-v2{overflow-anchor:none;}

/* Character names are context, not a second actor heading. */
.d-cast-item .n{min-height:31px;}
.d-cast-item .role{margin-top:3px;color:var(--ink-2);font-size:11px;font-weight:450;
  line-height:1.25;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;}

/* ── Together: films are the story, not a dashboard ─────────────────────── */
.pair-discovery{display:grid;gap:10px;margin:0 20px 14px;}.pair-showcase{min-width:0;margin:0;padding:17px 0 18px;border:1px solid var(--hair);border-radius:22px;background:var(--s1);overflow:hidden;}.pair-showcase-head{display:flex;align-items:center;gap:11px;padding:0 17px 16px;}.pair-showcase-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid var(--hair-2);border-radius:12px;background:var(--s2);font-size:23px;line-height:1;}.pair-showcase-icon-favorite{color:#f472a7;}.pair-showcase-icon-difference{color:#a78bfa;font-size:19px;font-weight:700;}.pair-showcase-head h2{margin:0;color:var(--ink);font-size:18px;line-height:1.1;letter-spacing:-.025em;}.pair-showcase-head p{margin:4px 0 0;color:var(--ink-2);font-size:11px;line-height:1.35;}
.pair-favorites-rail,.pair-differences-rail{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;padding:0 17px 4px;scroll-snap-type:x mandatory;scrollbar-width:none;}.pair-favorites-rail::-webkit-scrollbar,.pair-differences-rail::-webkit-scrollbar{display:none;}.pair-favorite-card,.pair-difference-card{border:1px solid var(--hair);background:var(--s2);color:var(--ink);font-family:var(--font);text-align:left;cursor:pointer;scroll-snap-align:start;transition:border-color .16s,transform .16s,background .16s;}.pair-favorite-card:active,.pair-difference-card:active{transform:scale(.985);background:var(--s3);}.pair-favorite-card:focus-visible,.pair-difference-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.pair-favorite-card {
  position:relative;
  display:flex;
  flex:0 0 144px;
  flex-direction:column;
  overflow:hidden;
  border-radius:16px;
}
.pair-favorite-rank {
  position:absolute;
  z-index:2;
  top:8px;
  left:8px;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:8px;
  background:rgba(13,15,20,.86);
  color:#fff;
  font-size:12px;
  font-weight:750;
  font-variant-numeric:tabular-nums;
}
.pair-favorite-poster {
  display:grid;
  place-items:center;
  aspect-ratio:2/3;
  overflow:hidden;
  background:var(--s3);
}
.pair-favorite-poster img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.pair-poster-fallback {
  color:var(--ink-2);
  font-size:17px;
}
.pair-favorite-copy {
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:10px 10px 11px;
}
.pair-favorite-copy b {
  overflow:hidden;
  font-size:13px;
  font-weight:700;
  line-height:1.22;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pair-favorite-copy small {
  overflow:hidden;
  margin-top:5px;
  color:#e879a9;
  font-size:9px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pair-favorite-copy strong {
  margin-top:7px;
  color:#f5c451;
  font-size:12px;
  font-weight:700;
}
.pair-difference-card {
  display:flex;
  flex:0 0 min(300px,78vw);
  flex-direction:column;
  gap:13px;
  padding:12px;
  border-radius:17px;
}
.pair-difference-heading {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.pair-difference-poster {
  display:grid;
  place-items:center;
  flex:none;
  width:51px;
  height:72px;
  overflow:hidden;
  border-radius:8px;
  background:var(--s3);
}
.pair-difference-poster img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.pair-difference-copy {
  display:flex;
  flex-direction:column;
  min-width:0;
}
.pair-difference-copy>b {
  overflow:hidden;
  font-size:14px;
  font-weight:700;
  line-height:1.22;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pair-difference-copy small {
  margin-top:6px;
  color:var(--ink-2);
  font-size:10px;
}
.pair-difference-copy small strong {
  margin-left:4px;
  color:#f472a7;
  font-size:12px;
}
.pair-rating-compare {
  display:grid;
  gap:8px;
}
.pair-rating-row {
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  align-items:center;
  gap:8px;
  font-size:10px;
}
.pair-rating-row>span {
  color:var(--ink-2);
  white-space:nowrap;
}
.pair-rating-row b {
  margin-left:2px;
  font-size:11px;
}
.pair-rating-me b {
  color:#7eb0ff;
}
.pair-rating-partner b {
  color:#f472a7;
}
.pair-rating-row i {
  height:7px;
  overflow:hidden;
  border-radius:99px;
  background:var(--s3);
}
.pair-rating-row em {
  display:block;
  height:100%;
  border-radius:inherit;
}
.pair-rating-me em {
  background:#4285f4;
}
.pair-rating-partner em {
  background:#ec5c95;
}
@media(max-width:420px){.pair-discovery{margin-left:16px;margin-right:16px;}.pair-showcase{border-radius:20px;}.pair-showcase-head{padding:0 14px 14px;}.pair-favorites-rail,.pair-differences-rail{gap:10px;padding-left:14px;padding-right:14px;}.pair-favorite-card{flex-basis:137px;}.pair-difference-card{flex-basis:min(288px,79vw);}.pair-showcase-head h2{font-size:17px;}}

/* ── People: compact, swipe-first native carousels ─────────────────────── */
.people-stats-section{margin:0 20px 14px;padding:17px 0 18px;overflow:hidden;border-radius:22px;background:var(--s1);}
.people-stats-head{grid-template-columns:42px minmax(0,1fr);gap:11px;margin:0 17px 15px;}
.people-stats-head h2{font-size:18px;line-height:1.1;}
.people-stats-head p{margin-top:4px;font-size:11px;line-height:1.35;}
.people-stats-rail{gap:11px;margin:0;padding:0 17px 4px;scroll-padding-left:17px;}
.people-stats-section .person-stat-card{display:flex;flex:0 0 150px;flex-direction:column;align-items:center;justify-content:flex-start;min-height:212px;padding:13px 10px 12px;gap:0;border-radius:18px;background:var(--s2);text-align:center;}
.people-stats-section .person-stat-card.is-favorite{flex-basis:188px;min-height:230px;border-color:#5a6ff0;}
.people-stats-section .person-stat-card:hover{border-color:var(--hair-2);}
.people-stats-section .person-stat-card.is-favorite:hover{border-color:#6a7cff;}
.people-stats-section .person-stat-rank{top:10px;left:10px;min-width:26px;height:26px;padding:0 6px;border-radius:8px;background:var(--s3);font-size:12px;}
.people-stats-section .person-stat-card.is-favorite .person-stat-rank{background:#5377f6;color:#fff;}
.people-stats-section .person-stat-avatar{flex:none;align-self:auto;width:76px;height:76px;margin:28px auto 0;border-color:var(--hair-2);background:var(--s3);font-size:14px;}
.people-stats-section .person-stat-avatar::before{display:none;}
.people-stats-section .person-stat-card.is-favorite .person-stat-avatar{width:94px;height:94px;margin-top:27px;border-color:rgba(90,111,240,.55);}
.people-stats-section .person-stat-avatar .fb{text-shadow:none;}
.people-stats-section .person-stat-copy{align-items:center;width:100%;margin-top:13px;}
.people-stats-section .person-stat-copy>b{display:block;width:100%;font-size:13px;font-weight:650;line-height:1.22;white-space:normal;-webkit-line-clamp:2;}
.people-stats-section .person-stat-card.is-favorite .person-stat-copy>b{font-size:15px;}
.people-stats-section .person-stat-copy>small{margin-top:5px;font-size:11px;}
.people-stats-section .person-stat-card.is-favorite .person-stat-copy>small{color:#999cff;}
.people-stats-section .person-stat-favorite{align-self:center;margin-top:9px;padding:5px 7px;border:1px solid rgba(116,105,255,.18);border-radius:8px;background:rgba(99,90,245,.12);color:#aaa5ff;font-size:10px;}
.people-stats-section .person-stat-favorite svg{width:11px;height:11px;}
@media(max-width:560px){.people-stats-section{margin-left:16px;margin-right:16px;padding:16px 0 17px;}.people-stats-head{margin:0 14px 14px;}.people-stats-rail{gap:10px;padding:0 14px 4px;scroll-padding-left:14px;}.people-stats-section .person-stat-card{flex-basis:148px;min-height:208px;}.people-stats-section .person-stat-card.is-favorite{flex-basis:184px;min-height:226px;}.people-stats-section .person-stat-avatar{width:74px;height:74px;}.people-stats-section .person-stat-card.is-favorite .person-stat-avatar{width:92px;height:92px;}}

/* People cards use the provider portrait as their visual anchor.  The text
   stays in a dedicated lower area so long names remain readable and tappable. */
.people-stats-section .person-stat-card{flex-basis:162px;min-height:258px;padding:0 10px 14px;overflow:hidden;border-radius:18px;}
.people-stats-section .person-stat-card.is-favorite{flex-basis:200px;min-height:278px;}
.people-stats-section .person-stat-avatar{position:absolute;inset:0 0 auto;width:100%;height:130px;margin:0;border:0;border-radius:17px 17px 0 0;background:var(--s3);}
.people-stats-section .person-stat-card.is-favorite .person-stat-avatar{width:100%;height:158px;margin:0;border-color:transparent;}
.people-stats-section .person-stat-avatar img{object-fit:cover;}
.people-stats-section .person-stat-avatar .fb{position:absolute;inset:0;display:grid;place-items:center;}
.people-stats-section .person-stat-copy{position:relative;margin-top:147px;}
.people-stats-section .person-stat-card.is-favorite .person-stat-copy{margin-top:174px;}
.people-stats-section .person-stat-rank{z-index:2;}
@media(max-width:560px){.people-stats-section .person-stat-card{flex-basis:158px;min-height:252px;}.people-stats-section .person-stat-card.is-favorite{flex-basis:196px;min-height:272px;}.people-stats-section .person-stat-avatar{width:100%;height:126px;}.people-stats-section .person-stat-card.is-favorite .person-stat-avatar{width:100%;height:154px;}.people-stats-section .person-stat-copy{margin-top:142px;}.people-stats-section .person-stat-card.is-favorite .person-stat-copy{margin-top:169px;}}

/* ── home redesign: «Смотреть все», bookmark, жанр-пилюли, CTA рекомендаций ── */
.head-actions{display:flex;align-items:center;gap:10px;flex:none;}
/* поиск = тап-зона (иконка+текст) + отдельная кнопка-фильтр */
.search-tap{flex:1;min-width:0;display:flex;align-items:center;gap:11px;cursor:pointer;}
.filter{flex:none;border:0;cursor:pointer;}
/* «Все жанры» — сетка крупных жанр-карточек */
.genre-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:0 20px;}
.genre-grid .genre{width:100%;}

/* «Смотреть все ›» — акцентная ссылка справа в заголовке секции */
.see-all{flex:none;display:inline-flex;align-items:center;gap:2px;background:none;border:0;cursor:pointer;
  color:var(--accent-2);font:600 13.5px var(--font);letter-spacing:-.01em;padding:2px 0 2px 8px;transition:opacity .15s;}
.see-all:active{opacity:.55;}
.see-all svg{width:15px;height:15px;}

/* bookmark на постере (верх-право). Заполнен = уже в списке «Хочу/Смотрел». */
.bm{position:absolute;top:8px;right:8px;z-index:3;width:30px;height:30px;border:0;border-radius:10px;cursor:pointer;
  display:grid;place-items:center;color:#fff;background:rgba(8,9,11,.55);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .14s,background .16s;}
.bm:active{transform:scale(.86);}
.bm svg{width:16px;height:16px;}
.bm.on{background:var(--accent);border-color:transparent;}

/* жанр-пилюли (горизонтальный ряд вместо крупных карточек) */
.gchips{display:flex;gap:9px;padding:2px 20px 4px;overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;}
.gchips::-webkit-scrollbar{display:none;}
.gchip{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  font:550 13.5px var(--font);background:var(--s2);color:#D7D9DE;border:1px solid var(--hair);cursor:pointer;transition:transform .15s,border-color .16s;}
.gchip:active{transform:scale(.94);}
.gchip .e{font-size:13.5px;line-height:1;}

/* CTA «Оценивай и получай рекомендации» */
.reco{position:relative;overflow:hidden;display:flex;align-items:center;gap:13px;margin:18px 20px 4px;padding:16px;
  border:1px solid var(--hair);border-radius:20px;
  background:radial-gradient(130% 130% at 0 0,rgba(var(--accent-rgb),.13),transparent 55%),var(--s1);box-shadow:0 12px 30px -24px rgba(0,0,0,.85);}
.reco-icon{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:var(--accent-2);
  background:rgba(var(--accent-rgb),.13);border:1px solid rgba(var(--accent-rgb),.24);}
.reco-icon svg{width:23px;height:23px;}
.reco-copy{flex:1;min-width:0;}
.reco-copy h3{font-size:15px;font-weight:650;letter-spacing:-.02em;line-height:1.22;}
.reco-copy p{margin-top:5px;font-size:12px;line-height:1.42;color:var(--ink-2);}
.reco-btn{margin-top:12px;height:36px;padding:0 18px;border:0;border-radius:11px;background:var(--accent);color:#fff;
  font:600 13px var(--font);cursor:pointer;transition:transform .12s,opacity .12s;}
.reco-btn:active{transform:scale(.95);opacity:.9;}
/* веер из настоящих постеров подборки «Популярное» (декор справа) */
.reco-arts{flex:none;position:relative;width:112px;height:92px;align-self:center;margin:-2px -2px -2px 0;}
.reco-art{position:absolute;top:6px;width:56px;aspect-ratio:2/3;border-radius:10px;overflow:hidden;
  border:1px solid var(--hair-2);box-shadow:0 12px 24px -12px rgba(0,0,0,.9);background:var(--s3);}
.reco-art img{width:100%;height:100%;object-fit:cover;display:block;}
.reco-art:nth-child(1){right:52px;transform:rotate(-9deg);}
.reco-art:nth-child(2){right:26px;top:0;z-index:2;}
.reco-art:nth-child(3){right:0;transform:rotate(9deg);}
@media(max-width:360px){.reco-arts{display:none;}}

/* ── Подбор: два спокойных сценария вместо «магической» рекомендации ─────── */
.picker-head{padding-bottom:12px;}.picker-head h1{font-size:25px;}.picker-landing,.picker-result,.picker-results{padding:2px 20px var(--nav-clearance);}
body.admin-indicator-on .picker-landing,
body.admin-indicator-on .picker-result,
body.admin-indicator-on .picker-results {
  padding-bottom:var(--nav-clearance-admin);
}
.picker-lead {
  max-width:390px;
  margin:4px 0 34px;
  color:var(--ink-2);
  font-size:15px;
  line-height:1.45;
}
.picker-mode-card {
  display:flex;
  align-items:center;
  gap:19px;
  width:100%;
  min-height:108px;
  margin:0 0 16px;
  padding:0 23px;
  border:1px solid var(--hair-2);
  border-radius:22px;
  background:var(--s1);
  color:var(--ink);
  font-family:var(--font);
  text-align:left;
  cursor:pointer;
  transition:transform .16s,border-color .16s,background .16s;
}
.picker-mode-card:active {
  transform:scale(.985);
  background:var(--s2);
}
.picker-mode-card>span:nth-child(2) {
  display:flex;
  flex:1;
  min-width:0;
  flex-direction:column;
  gap:6px;
}
.picker-mode-card b {
  font-size:20px;
  font-weight:650;
  letter-spacing:-.02em;
  color:var(--ink);
}
.picker-mode-card small {
  font-size:15px;
  line-height:1.4;
  color:var(--ink-2);
}
.picker-mode-card>i,
.picker-option>i {
  color:var(--ink-2);
  font-size:24px;
  font-style:normal;
  font-weight:300;
  line-height:1;
}
.picker-mode-icon {
  display:grid;
  place-items:center;
  flex:none;
  width:60px;
  color:var(--ink-2);
}
.picker-mode-icon svg {
  width:36px;
  height:36px;
}
.picker-loading {
  display:grid;
  min-height:210px;
  place-items:center;
  color:var(--ink-2);
  font-size:14px;
}
.picker-error {
  padding:14px;
  border:1px solid rgba(248,113,113,.3);
  border-radius:14px;
  background:rgba(248,113,113,.06);
  color:#fca5a5;
  font-size:13px;
  line-height:1.4;
}
.picker-empty-copy {
  margin-top:10px;
  color:var(--ink-2);
  font-size:13px;
  line-height:1.45;
}
.picker-result-label {
  margin:4px 0 12px;
  color:var(--accent-2);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.recommendation-film {
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  column-gap:14px;
  row-gap:14px;
  padding:14px;
  border:1px solid var(--hair);
  border-radius:20px;
  background:var(--s1);
  box-shadow:var(--shadow);
}
.recommendation-poster {
  position:relative;
  display:grid;
  place-items:center;
  align-self:start;
  width:118px;
  aspect-ratio:2/3;
  overflow:hidden;
  border:1px solid var(--hair-2);
  border-radius:13px;
  background:var(--s2);
  color:var(--ink-2);
  cursor:pointer;
}
.recommendation-poster img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.picker-poster-fallback {
  padding:12px;
  font-size:24px;
  font-weight:700;
}
.recommendation-film-copy {
  min-width:0;
  padding-top:1px;
}
.recommendation-film-copy h2 {
  font-size:18px;
  line-height:1.17;
  letter-spacing:-.025em;
}
.recommendation-original,
.recommendation-meta {
  margin-top:5px;
  overflow:hidden;
  color:var(--ink-2);
  font-size:11px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.recommendation-rating {
  display:inline-block;
  margin-top:9px;
  padding:4px 7px;
  border-radius:8px;
  background:rgba(244,183,64,.1);
  color:#f4b942;
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.recommendation-explanation {
  grid-column:1/-1;
  margin-top:-4px;
  color:var(--ink-2);
  font-size:12px;
  line-height:1.45;
}
.recommendation-actions {
  display:grid;
  grid-column:1/-1;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.picker-primary,
.picker-secondary,
.picker-restart {
  min-height:42px;
  border-radius:12px;
  font:600 13px var(--font);
  cursor:pointer;
}
.picker-primary {
  border:0;
  background:var(--accent);
  color:#fff;
}
.picker-secondary,
.picker-restart {
  border:1px solid var(--hair-2);
  background:transparent;
  color:var(--ink);
}
.picker-text {
  min-height:34px;
  border:0;
  background:transparent;
  color:var(--accent-2);
  font:600 12px var(--font);
  cursor:pointer;
}
.picker-text.danger {
  color:#f58b94;
}
.picker-primary:disabled,
.picker-secondary:disabled,
.picker-text:disabled {
  opacity:.55;
}
.picker-quiz {
  min-height:calc(100vh - var(--safe-top));
  padding:calc(var(--safe-top) + 16px) 20px calc(28px + env(safe-area-inset-bottom));
}
.picker-quiz-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.picker-quiz-head>span {
  color:var(--ink-2);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.picker-progress {
  height:3px;
  overflow:hidden;
  margin:18px 0 42px;
  border-radius:99px;
  background:var(--s2);
}
.picker-progress i {
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--accent);
  transition:width .25s ease;
}
.picker-question h1 {
  max-width:430px;
  font-size:28px;
  line-height:1.14;
  letter-spacing:-.04em;
}
.picker-options {
  display:grid;
  gap:10px;
  margin-top:32px;
}
.picker-option {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  min-height:58px;
  padding:13px 14px 13px 16px;
  border:1px solid var(--hair);
  border-radius:16px;
  background:var(--s1);
  color:var(--ink);
  font:550 15px/1.32 var(--font);
  text-align:left;
  cursor:pointer;
  transition:transform .15s,border-color .15s,background .15s;
}
.picker-option:active,
.picker-option.selected {
  border-color:rgba(var(--accent-rgb),.65);
  background:rgba(var(--accent-rgb),.1);
  transform:scale(.988);
}
.picker-option:disabled {
  cursor:default;
}
.picker-results {
  padding-top:2px;
}
.picker-role {
  margin:0 0 18px;
}
.picker-role>header {
  margin:0 0 9px;
  padding:0 2px;
}
.picker-role>header span {
  display:block;
  font-size:16px;
  font-weight:700;
  letter-spacing:-.02em;
}
.picker-role>header small {
  display:block;
  margin-top:4px;
  color:var(--ink-2);
  font-size:11px;
  line-height:1.35;
}
.picker-restart {
  display:block;
  width:100%;
  margin-top:2px;
}
body.picker-quiz-active #tabbar {
  display:none;
}
.picker-quiz-active {
  padding-bottom:0;
}
@media(max-width:360px) {
  .picker-landing,.picker-result,.picker-results {
    padding-left:16px;
    padding-right:16px;
  }
  .recommendation-film {
    grid-template-columns:102px minmax(0,1fr);
    gap:12px;
    padding:12px;
  }
  .recommendation-poster {
    width:102px;
  }
  .recommendation-film-copy h2 {
    font-size:16px;
  }
  .picker-question h1 {
    font-size:25px;
  }
  .picker-quiz {
    padding-left:16px;
    padding-right:16px;
  }
}

/* кнопка «+» в заголовке «Подборки» — в стиле системы (не квадрат .back) */
.icon-add{flex:none;width:32px;height:32px;border:1px solid var(--hair);border-radius:10px;background:var(--s2);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .15s;}
.icon-add:active{transform:scale(.9);}
.icon-add svg{width:18px;height:18px;}

/* Portraits keep their source ratio: the image is never stretched or cropped.
   The larger media area makes the rail feel full while the text stays compact. */
.people-stats-section .person-stat-card{--person-photo-height:170px;min-height:258px;}
.people-stats-section .person-stat-card.is-favorite{--person-photo-height:190px;min-height:278px;}
.people-stats-section .person-stat-avatar,.people-stats-section .person-stat-card.is-favorite .person-stat-avatar{width:100%;height:var(--person-photo-height);margin:0;border:0;border-radius:17px 17px 0 0;}
.people-stats-section .person-stat-avatar img{object-fit:contain;object-position:center center;background:var(--s3);}
.people-stats-section .person-stat-copy,.people-stats-section .person-stat-card.is-favorite .person-stat-copy{position:static;margin-top:calc(var(--person-photo-height) + 10px);}
.people-stats-section .person-stat-copy>b{font-size:12.5px;line-height:1.2;}
.people-stats-section .person-stat-card.is-favorite .person-stat-copy>b{font-size:14px;}
.people-stats-section .person-stat-copy>small{margin-top:4px;font-size:10.5px;}
.people-stats-section .person-stat-favorite{position:absolute;z-index:3;top:calc(var(--person-photo-height) - 31px);left:9px;align-self:auto;margin:0;padding:5px 7px;border-color:rgba(255,255,255,.18);border-radius:8px;background:rgba(13,15,20,.86);color:#d2ceff;}
.people-stats-section .person-stat-rank{z-index:4;}
@media(max-width:560px){.people-stats-section .person-stat-card{--person-photo-height:166px;min-height:252px;}.people-stats-section .person-stat-card.is-favorite{--person-photo-height:186px;min-height:272px;}.people-stats-section .person-stat-copy,.people-stats-section .person-stat-card.is-favorite .person-stat-copy{margin-top:calc(var(--person-photo-height) + 9px);}}

/* Keep the enlarged portraits, but make every card end right after its
   metadata. A fixed rail height prevents uneven baselines while swiping. */
.people-stats-section .person-stat-card,.people-stats-section .person-stat-card.is-favorite{height:248px;min-height:248px;}
.people-stats-section .person-stat-card.is-favorite{border-color:rgba(90,111,240,.44);}
.people-stats-section .person-stat-card.is-favorite:hover{border-color:rgba(106,124,255,.62);}
.people-stats-section .person-stat-copy>small,.people-stats-section .person-stat-card.is-favorite .person-stat-copy>small{color:var(--ink-2);}
@media(max-width:560px){.people-stats-section .person-stat-card,.people-stats-section .person-stat-card.is-favorite{height:244px;min-height:244px;}}

/* People rankings are deliberately not movie posters: every person gets the
   same compact 4:5 portrait card.  The partial third card is the only scroll
   affordance, so no dots or secondary controls are needed. */
.people-stats-section .people-stats-rail{align-items:stretch;}
.people-stats-section .person-stat-card,.people-stats-section .person-stat-card.is-favorite{--person-photo-height:195px;flex:0 0 156px;height:247px;min-height:247px;padding:0 9px 10px;border-radius:17px;}
.people-stats-section .person-stat-card.is-favorite{border-color:rgba(90,111,240,.33);}
.people-stats-section .person-stat-card.is-favorite:hover{border-color:rgba(106,124,255,.5);}
.people-stats-section .person-stat-avatar,.people-stats-section .person-stat-card.is-favorite .person-stat-avatar{width:100%;height:var(--person-photo-height);margin:0;border:0;border-radius:16px 16px 0 0;}
.people-stats-section .person-stat-avatar img{object-fit:cover;object-position:center 24%;background:var(--s3);}
.people-stats-section .person-stat-avatar img.person-photo-safe-fit{object-fit:contain;object-position:center center;}
.people-stats-section .person-stat-copy,.people-stats-section .person-stat-card.is-favorite .person-stat-copy{width:100%;margin-top:calc(var(--person-photo-height) + 7px);}
.people-stats-section .person-stat-copy>b,.people-stats-section .person-stat-card.is-favorite .person-stat-copy>b{display:-webkit-box;overflow:hidden;font-size:12px;font-weight:650;line-height:1.18;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.people-stats-section .person-stat-copy>small,.people-stats-section .person-stat-card.is-favorite .person-stat-copy>small{margin-top:3px;color:var(--ink-2);font-size:10px;}
.people-stats-section .person-stat-favorite{top:calc(var(--person-photo-height) - 27px);left:7px;margin:0;padding:4px 6px;border-color:rgba(255,255,255,.16);border-radius:7px;background:rgba(13,15,20,.84);font-size:9px;}
.people-stats-section .person-stat-rank{top:8px;left:8px;min-width:24px;height:24px;padding:0 5px;border-radius:7px;font-size:11px;}
@media(max-width:560px){.people-stats-section .people-stats-rail{gap:10px;}.people-stats-section .person-stat-card,.people-stats-section .person-stat-card.is-favorite{--person-photo-height:clamp(178px,45.625vw,197px);flex-basis:clamp(142px,36.5vw,158px);height:calc(var(--person-photo-height) + 64px);min-height:calc(var(--person-photo-height) + 64px);padding-bottom:9px;}.people-stats-section .person-stat-copy,.people-stats-section .person-stat-card.is-favorite .person-stat-copy{margin-top:calc(var(--person-photo-height) + 6px);}}

/* The people rail is content, not another dashboard card.  Let it breathe on
   the page background, retaining only a quiet rhythm between the two groups. */
.people-stats-section{margin:0;padding:0;overflow:visible;border:0;border-radius:0;background:transparent;}
.people-stats-head{margin:0 20px 14px;}
.people-stats-rail{margin:0;padding:0 20px 5px;scroll-padding-left:20px;}
.people-stats-empty{margin:0 20px;}
.people-stats-directors{margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.055);}
@media(max-width:560px){.people-stats-head{margin:0 16px 13px;}.people-stats-rail{padding-left:16px;padding-right:16px;scroll-padding-left:16px;}.people-stats-empty{margin-left:16px;margin-right:16px;}.people-stats-directors{margin-top:24px;padding-top:22px;}}

/* ── Profile settings ─────────────────────────────────────────────────────── */
.page-head-action{display:grid;place-items:center;padding:0;}
.page-head-action svg{width:20px;height:20px;}
.settings-page{padding:0 20px calc(132px + var(--safe-bottom));}
.settings-section{margin:0 0 25px;}
.settings-section h2{margin:0 0 10px;font-size:14px;font-weight:650;letter-spacing:-.01em;color:var(--ink-2);}
.settings-card{overflow:hidden;border:1px solid var(--hair);border-radius:18px;background:var(--s1);}
.settings-row{display:flex;align-items:center;gap:12px;min-width:0;padding:15px 15px;}
.settings-row + .settings-row{border-top:1px solid var(--hair);}
.settings-row-copy{display:flex;flex:1;flex-direction:column;min-width:0;gap:4px;}
.settings-row-copy b{font-size:15px;font-weight:620;line-height:1.25;}
.settings-row-copy small{color:var(--ink-2);font-size:12px;line-height:1.35;}
.settings-toggle{position:relative;flex:none;width:48px;height:30px;padding:0;border:0;border-radius:99px;background:#30333a;cursor:pointer;transition:background .18s;}
.settings-toggle::after{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;content:"";transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.settings-toggle[aria-checked="true"]{background:var(--accent);}
.settings-toggle[aria-checked="true"]::after{transform:translateX(18px);}
.settings-toggle:disabled{cursor:not-allowed;opacity:.5;}
.settings-fixed-status{flex:none;color:var(--ink-2);font-size:12px;font-weight:600;}
.settings-language-card{padding:14px;}
.settings-language-card>p{margin:0 0 12px;color:var(--ink-2);font-size:12px;line-height:1.35;}
.settings-language-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.settings-language-options button{min-height:42px;padding:0 10px;border:1px solid var(--hair);border-radius:12px;background:var(--s2);color:var(--ink-2);font:600 13px var(--font);cursor:pointer;transition:border-color .16s,background .16s,color .16s;}
.settings-language-options button.active{border-color:rgba(var(--accent-rgb),.52);background:rgba(var(--accent-rgb),.16);color:#fff;}
.settings-primary-action,.settings-retry,.settings-chevron-button,.settings-text-action{flex:none;border:0;background:none;color:var(--accent-2);font:600 13px var(--font);cursor:pointer;}
.settings-primary-action{min-height:34px;padding:0 11px;border-radius:10px;background:rgba(var(--accent-rgb),.16);}
.settings-chevron-button{display:grid;place-items:center;width:44px;height:44px;margin:-8px -8px -8px 0;padding:0;color:var(--ink-2);touch-action:manipulation;}
.settings-chevron-button svg{width:18px;height:18px;}
.settings-danger-action{width:100%;min-height:42px;border:1px solid rgba(242,92,103,.35);border-radius:12px;background:transparent;color:#f37e87;font:600 13px var(--font);cursor:pointer;}
.settings-pair-management{padding:12px 15px 15px;}
.settings-pair-management-head{display:flex;align-items:center;gap:9px;margin:0 0 14px;}
.settings-pair-management-head>span{display:flex;flex:1;flex-direction:column;min-width:0;gap:2px;}
.settings-pair-management-head b{font-size:15px;font-weight:620;}
.settings-pair-management-head small{overflow:hidden;color:var(--ink-2);font-size:12px;text-overflow:ellipsis;white-space:nowrap;}
.settings-pair-management-back{display:grid;place-items:center;flex:none;width:36px;height:36px;margin:0;padding:0;border:1px solid var(--hair);border-radius:10px;background:var(--s2);color:var(--ink);cursor:pointer;touch-action:manipulation;}
.settings-pair-management-back svg{width:17px;height:17px;}
.settings-invite{display:flex;flex-direction:column;gap:11px;padding:15px;}
.settings-invite>b{font-size:15px;font-weight:620;}
.settings-invite-code{padding:11px 12px;border:1px solid var(--hair);border-radius:11px;background:var(--s2);font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:.04em;cursor:pointer;}
.settings-primary-full{width:100%;min-height:43px;border:0;border-radius:12px;background:var(--accent);color:#fff;font:600 13px var(--font);cursor:pointer;}
.settings-text-action{min-height:30px;align-self:center;padding:0 6px;}
.settings-loading{padding:40px 0;color:var(--ink-2);font-size:14px;text-align:center;}
@media(max-width:560px){.settings-page{padding-left:16px;padding-right:16px;}.settings-section{margin-bottom:23px;}.settings-row{padding:14px;}}
@media(max-width:560px){.notifications-page{padding-left:16px;padding-right:16px;}.notification-head{padding-left:16px;padding-right:16px;}}
@media(max-width:360px){
  .notification-head{gap:8px;}.notification-mark-all{font-size:11.5px;}
  .notification-filters{gap:4px;}.notification-filter{min-width:66px;height:40px;padding:0 9px;font-size:12px;}
  .notification-card{grid-template-columns:46px minmax(0,1fr) 18px;gap:10px;padding:13px;border-radius:16px;}
  .notification-event-icon{width:46px;height:46px;border-radius:14px;}.notification-event-icon svg{width:24px;height:24px;}
  .notification-copy b{font-size:14px;}.notification-copy span{font-size:12.5px;}
}

/* ── Режим администратора ────────────────────────────────────────────────────
   Никаких «панелей разработчика»: те же карточки/радиусы/акцент, что и везде.
   Элементы редактирования видны только когда режим включён (рендерятся условно,
   не прячутся CSS-ом), а цели нажатия — не меньше 44px. */
.admin-indicator{position:fixed;left:50%;transform:translateX(-50%);z-index:35;
  bottom:calc(92px + var(--safe-bottom));display:flex;align-items:center;gap:8px;
  height:32px;padding:0 5px 0 12px;border:1px solid rgba(var(--accent-rgb),.38);
  border-radius:99px;background:rgba(10,10,12,.82);color:var(--accent-2);white-space:nowrap;
  font:600 11.5px var(--font);cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
.admin-indicator i{padding:5px 9px;border-radius:99px;background:rgba(var(--accent-rgb),.22);
  font-style:normal;font-size:11px;font-weight:650;}
.admin-panel{margin:0 20px 14px;padding:14px;border:1px solid var(--hair);border-radius:18px;background:var(--s1);}
.admin-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.admin-panel-head small{color:var(--ink-2);font-size:11px;}
.admin-badge{padding:5px 10px;border-radius:99px;font:650 11px var(--font);letter-spacing:.02em;}
.admin-badge-draft{background:rgba(255,255,255,.08);color:var(--ink-2);}
.admin-badge-published{background:rgba(var(--accent-rgb),.18);color:var(--accent-2);}
.admin-badge-archived{background:rgba(248,113,113,.14);color:#fca5a5;}
.admin-field{display:block;margin-bottom:12px;}
.admin-field>span{display:block;margin-bottom:6px;color:var(--ink-2);font-size:12px;}
.admin-textarea{width:100%;padding:11px 12px;border:1px solid var(--hair-2);border-radius:12px;
  background:var(--s2);color:var(--ink);font:400 14px/1.4 var(--font);resize:vertical;}
.admin-textarea:focus{outline:none;border-color:rgba(var(--accent-rgb),.55);}
.admin-actions{display:flex;flex-wrap:wrap;gap:8px;padding:14px 20px 4px;}
.admin-actions .pbtn{flex:1 1 46%;min-height:44px;}
.admin-hint{margin:8px 20px 0;color:var(--ink-2);font-size:11px;}
.admin-item-list{display:flex;flex-direction:column;gap:8px;padding:0 20px;}
.admin-item{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--hair);
  border-radius:14px;background:var(--s1);}
.admin-item-open{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:0;border:0;
  background:none;color:var(--ink);font-family:var(--font);text-align:left;cursor:pointer;}
.admin-item-art{display:block;flex:none;width:40px;height:60px;overflow:hidden;border-radius:8px;background:var(--s3);}
.admin-item-art img{width:100%;height:100%;object-fit:cover;display:block;}
.admin-item-copy{min-width:0;}
.admin-item-copy b{display:block;overflow:hidden;font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;}
.admin-item-copy small{display:block;margin-top:3px;color:var(--ink-2);font-size:11px;}
.admin-item-controls{display:flex;gap:2px;flex:none;}
.admin-icon-btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;
  background:transparent;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s;}
.admin-icon-btn:active{background:rgba(255,255,255,.06);}
.admin-icon-btn:disabled{opacity:.3;cursor:default;}
.admin-icon-btn.danger{color:#f58b94;}
.admin-icon-btn svg{width:20px;height:20px;display:block;}

/* ── Крупная редакционная подборка ───────────────────────────────────────────
   Кинематографичный ландшафтный блок: тот же тёмный язык, что и везде, без
   неона и «админского» вида. Соотношение задано заранее — картинка не двигает
   лейаут при загрузке. */
.featured-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(88vw,420px);gap:12px;
  padding:0 20px 2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
.featured-track::-webkit-scrollbar{display:none;}
.featured-slot{scroll-snap-align:start;min-width:0;}
.featured-card{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;isolation:isolate;
  border:1px solid var(--hair);border-radius:20px;background:var(--s2);cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.2,1);}
.featured-card:active{transform:scale(.985);}
.featured-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.featured-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.featured-card-scrim{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(0,0,0,.12) 18%,rgba(0,0,0,.34) 52%,rgba(0,0,0,.88) 100%);}
.featured-card-body{position:absolute;inset-inline:18px;bottom:15px;z-index:1;}
.featured-card-eyebrow{display:block;margin-bottom:6px;color:var(--accent-2);font-size:10.5px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;}
.featured-card-title{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  font-size:21px;font-weight:700;line-height:1.16;letter-spacing:-.025em;color:#fff;}
.featured-card-desc{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  margin-top:5px;color:rgba(255,255,255,.72);font-size:12.5px;line-height:1.35;}
.featured-card-meta{display:flex;align-items:center;justify-content:space-between;margin-top:10px;
  color:rgba(255,255,255,.82);font-size:12px;font-variant-numeric:tabular-nums;}
.featured-card-meta i{font-style:normal;font-size:20px;line-height:1;color:rgba(255,255,255,.6);}
.featured-admin{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;}
.featured-admin-controls{display:flex;gap:2px;}
@media(max-width:360px){.featured-track{grid-auto-columns:min(90vw,420px);padding-left:16px;padding-right:16px;}
  .featured-card-title{font-size:19px;}}

/* Селектор формата и выбор фона в редакторе */
.admin-segments{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.admin-segment{padding:11px 12px;border:1px solid var(--hair-2);border-radius:14px;background:var(--s2);
  color:var(--ink);font-family:var(--font);text-align:left;cursor:pointer;transition:border-color .16s,background .16s;}
.admin-segment b{display:block;font-size:14px;font-weight:650;}
.admin-segment small{display:block;margin-top:3px;color:var(--ink-2);font-size:10.5px;line-height:1.3;}
.admin-segment.on{border-color:rgba(var(--accent-rgb),.6);background:rgba(var(--accent-rgb),.12);}
.admin-segment.on b{color:var(--accent-2);}
.admin-backdrops{display:flex;gap:8px;overflow-x:auto;margin-bottom:10px;padding-bottom:2px;scrollbar-width:none;}
.admin-backdrops::-webkit-scrollbar{display:none;}
.admin-backdrop{flex:none;width:96px;height:60px;overflow:hidden;padding:0;border:2px solid transparent;
  border-radius:10px;background:var(--s3);cursor:pointer;}
.admin-backdrop img{width:100%;height:100%;object-fit:cover;display:block;}
.admin-backdrop.on{border-color:var(--accent);}
.admin-preview{margin-top:2px;}

/* ── Полноэкранный редактор подборки ─────────────────────────────────────────
   Пока он открыт, глобальные плавающие элементы убираются: они перекрывали
   поля и кнопки сохранения. Состояние показывает собственный заголовок. */
body.collection-editor-open{padding-bottom:0;}
body.collection-editor-open #tabbar,
body.collection-editor-open .admin-indicator{display:none;}
.editor-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:calc(var(--safe-top) + 10px) 20px 12px;background:linear-gradient(180deg,var(--bg) 76%,transparent);}
.editor-head h1{flex:1;min-width:0;overflow:hidden;font-size:19px;font-weight:700;
  letter-spacing:-.025em;text-overflow:ellipsis;white-space:nowrap;}
.collection-editor{padding:2px 20px calc(28px + var(--safe-bottom));}

/* Fullscreen picker content still respects the same Telegram/browser bottom inset. */
.picker-quiz{padding-bottom:calc(28px + var(--safe-bottom));}
.collection-editor .admin-field{margin-bottom:18px;}
/* Кнопки сохранения остаются в потоке документа: фиксированная панель на iOS
   уезжает под клавиатуру. */
.editor-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;}
.editor-actions.secondary{grid-template-columns:1fr 1fr;margin-top:10px;}
.editor-actions .pbtn{min-height:48px;}
.editor-link{min-height:44px;padding:0 4px;border:0;background:none;color:var(--accent-2);
  font:600 13px var(--font);cursor:pointer;}
.editor-films-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.editor-films-head>span{color:var(--ink-2);font-size:12px;}
.editor-error{display:block;margin-top:6px;color:#fca5a5;font-size:12px;font-style:normal;}
.collection-editor button,.collection-editor [role="button"]{min-height:44px;}
.collection-editor .admin-backdrop{min-height:60px;}
.collection-editor .admin-segment{min-height:64px;}
@media(max-width:360px){.editor-head,.collection-editor{padding-left:16px;padding-right:16px;}}

/* Парные секции — такой же открытый макет, как «Актёры»/«Режиссёры»: внешняя
   рамка-контейнер убрана, содержимое лежит на фоне страницы. Внутренние
   карточки (фильмы, сравнения оценок) свои границы и фон сохраняют. */
.pair-discovery{display:block;margin:0;}
.pair-showcase{margin:0;padding:0;overflow:visible;border:0;border-radius:0;background:transparent;}
.pair-showcase-head{padding:0;margin:0 20px 14px;}
.pair-favorites-rail,.pair-differences-rail{margin:0;padding:0 20px 5px;scroll-padding-left:20px;}
/* Тот же тихий разделитель между группами, что и у режиссёров. */
.pair-differences-showcase{margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.055);}
@media(max-width:560px){
  .pair-showcase-head{margin:0 16px 13px;}
  .pair-favorites-rail,.pair-differences-rail{padding-left:16px;padding-right:16px;scroll-padding-left:16px;}
  .pair-differences-showcase{margin-top:24px;padding-top:22px;}
}
/* Заголовок парной секции — ровно тот же паттерн, что у «Актёров»: без
   иконки-бокса, чтобы левый край и вес совпадали (третьего стиля не заводим). */
.pair-showcase-head h2{font-size:18px;line-height:1.1;letter-spacing:-.025em;}

/* Иконка метрики: нейтральный серый outline, вторичный по отношению к числу
   (в фиолетовый по умолчанию не красим — акцент остаётся у значений). */
.tile-icon{display:block;margin:0 auto 7px;width:24px;height:24px;color:var(--ink-2);opacity:.9;}
.tile-icon svg{display:block;width:100%;height:100%;}
/* Профиль больше не несёт дублирующую строку цифр — убираем её отступ. */
.profile-hero .profile-main{margin-bottom:0;}
/* Кнопка настроек: видимый размер прежний, но цель нажатия — не меньше 44px. */
.page-head-action{width:44px;height:44px;border-radius:14px;color:var(--ink-2);}
.page-head-action:active{color:var(--ink);background:var(--s3);transform:scale(.97);}

/* Значок обкатки нового движка. Виден только администратору и только по
   данным сервера; вторичен по весу и не должен ломать раскладку вопроса на
   узких экранах Telegram. */
.picker-quiz-head-meta,.picker-title-meta{display:flex;align-items:center;gap:8px;min-width:0;}
.picker-title-meta h1{margin:0;}
.picker-preview-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-height:20px;padding:3px 7px;border:1px solid rgba(166,132,255,.42);border-radius:999px;
  background:rgba(126,87,255,.12);color:rgba(220,207,255,.96);font-size:10px;font-weight:700;
  line-height:1;letter-spacing:.08em;white-space:nowrap;}
@media(max-width:360px){.picker-preview-badge{padding-inline:6px;font-size:9px;}}

/* ── Fullscreen single pick ─────────────────────────────────────────────── */
/* The result is one viewport-bound decision screen.  Its hero receives only
   the space left after the actions, so hiding overflow never hides controls. */
body.single-pick-open{
  height:100vh;height:100dvh;min-height:100dvh;overflow:hidden;padding-bottom:0;
  overscroll-behavior:none;
}
body.single-pick-open #tabbar,
body.single-pick-open #top-scrim,
body.single-pick-open .admin-indicator{display:none!important;}
body.single-pick-open #screen{
  width:100%;max-width:520px;height:100vh;height:100dvh;min-height:0;overflow:hidden;
}
.single-pick-screen{
  position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:9px;
  width:100%;height:100vh;height:100dvh;min-width:0;min-height:0;
  padding:calc(var(--safe-top) + 8px) 14px calc(var(--safe-bottom) + 10px);
  overflow:hidden;
}
/* A translate-in animation would briefly push the last action below the
   viewport.  Fullscreen mode fades without moving its fixed-height grid. */
body.single-pick-open .single-pick-screen.rise{
  animation:single-pick-fade .24s ease both;
}
@keyframes single-pick-fade{from{opacity:0;}to{opacity:1;}}
.single-pick-card{
  position:relative;min-width:0;min-height:0;overflow:hidden;
  border:1px solid rgba(255,255,255,.09);border-radius:24px;background:#08090c;
}
.single-pick-visual{
  position:relative;isolation:isolate;width:100%;height:100%;min-height:0;
  margin:0;overflow:hidden;
}
.single-pick-media{
  position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background:#08090c;
}
.single-pick-media-backdrop{min-height:0;max-height:none;aspect-ratio:auto;}
.single-pick-backdrop-ambient{
  position:absolute;inset:-34px;width:calc(100% + 68px);height:calc(100% + 68px);
  object-fit:cover;object-position:var(--hero-focus-x,50%) var(--hero-focus-y,36%);
  filter:blur(28px) saturate(.78);opacity:.46;transform:scale(1.06);
}
.single-pick-backdrop-stage{
  position:absolute;z-index:1;display:grid;place-items:center;overflow:hidden;
}
.single-pick-media-backdrop[data-hero-fit="contain"] .single-pick-backdrop-stage{
  inset:clamp(54px,7dvh,82px) 10px clamp(142px,21dvh,184px);
}
.single-pick-media-backdrop[data-hero-fit="contain"] .single-pick-backdrop{
  display:block;width:100%;height:100%;object-fit:contain;object-position:center;
  border-radius:12px;filter:drop-shadow(0 12px 28px rgba(0,0,0,.34));
}
.single-pick-media-backdrop[data-hero-fit="cover"] .single-pick-backdrop-stage{inset:0;}
.single-pick-media-backdrop[data-hero-fit="cover"] .single-pick-backdrop{
  display:block;width:100%;height:100%;object-fit:cover;
  object-position:var(--hero-focus-x,50%) var(--hero-focus-y,36%);
}
.single-pick-media-shade{
  position:absolute;z-index:2;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,5,8,.20) 0%,rgba(4,5,8,.04) 28%,
      rgba(5,6,9,.28) 54%,rgba(5,6,9,.94) 82%,#08090c 100%),
    linear-gradient(90deg,rgba(0,0,0,.22),transparent 58%);
}
.single-pick-media-poster{
  display:grid;place-items:center;min-height:0;padding:18px 18px 138px;
}
.single-pick-poster-blur{
  position:absolute;inset:-42px;width:calc(100% + 84px);height:calc(100% + 84px);
  object-fit:cover;filter:blur(30px) saturate(.72);opacity:.42;transform:scale(1.08);
}
.single-pick-poster-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,6,9,.18),rgba(5,6,9,.26) 45%,
    rgba(5,6,9,.92) 82%,#08090c 100%);
}
.single-pick-poster{
  position:relative;z-index:1;display:block;width:auto;
  height:clamp(170px,34dvh,280px);max-width:54%;max-height:56%;aspect-ratio:2/3;
  object-fit:cover;border:1px solid rgba(255,255,255,.14);border-radius:16px;
  box-shadow:0 16px 38px rgba(0,0,0,.46);transform:translateY(-10%);
}
.single-pick-media-empty{
  display:grid;place-items:center;min-height:0;color:var(--ink-2);font-size:13px;
}
.single-pick-media-empty>span{position:relative;z-index:1;}
.single-pick-art-open{
  position:absolute;z-index:7;top:12px;right:12px;min-height:36px;padding:7px 12px;
  border:1px solid rgba(255,255,255,.13);border-radius:12px;
  background:rgba(8,9,12,.72);color:#fff;font:650 12px/1 var(--font);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.single-pick-art-panel{
  position:absolute;z-index:8;right:10px;bottom:10px;left:10px;display:grid;gap:10px;
  padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:17px;
  background:rgba(14,15,21,.96);color:#fff;text-align:left;
  box-shadow:0 18px 42px rgba(0,0,0,.52);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
}
.single-pick-art-panel[hidden]{display:none;}
.single-pick-art-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.single-pick-art-head b{font-size:13px;}
.single-pick-art-head button{
  width:30px;height:30px;border:0;background:transparent;color:var(--ink-2);font-size:22px;
}
.single-pick-art-segments{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.single-pick-art-segments button,.single-pick-art-actions button,
.single-pick-art-poster-panel>button{
  min-height:38px;padding:7px 9px;border:1px solid rgba(255,255,255,.11);
  border-radius:11px;background:rgba(255,255,255,.04);color:#fff;
  font:620 11.5px/1.2 var(--font);
}
.single-pick-art-segments button[aria-pressed="true"]{
  border-color:rgba(139,102,255,.65);background:rgba(126,87,255,.18);color:#c9b8ff;
}
.single-pick-art-panel label{display:grid;gap:4px;color:var(--ink-2);font-size:10.5px;}
.single-pick-art-panel input[type="range"]{width:100%;accent-color:var(--accent);}
.single-pick-art-panel input:disabled{opacity:.38;}
.single-pick-art-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.single-pick-art-poster-panel>button:first-of-type{color:#ff8aa0;}
.single-pick-back-slot{position:absolute;z-index:5;top:12px;left:12px;}
.single-pick-back-slot .back{
  width:42px;height:42px;margin:0;border:1px solid rgba(255,255,255,.11);
  border-radius:13px;background:rgba(8,9,12,.68);color:#fff;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.single-pick-hero-content{
  position:absolute;z-index:3;right:0;bottom:0;left:0;min-width:0;
  margin:0;padding:22px 20px 19px;
}
.single-pick-label{
  margin:0 0 6px;overflow:hidden;color:var(--accent-2);font-size:10.5px;
  font-weight:720;line-height:1.2;letter-spacing:.12em;text-overflow:ellipsis;
  text-transform:uppercase;white-space:nowrap;
}
.single-pick-title{
  display:-webkit-box;overflow:hidden;margin:0;color:#fff;
  font-size:clamp(26px,7.4vw,36px);font-weight:740;line-height:1.02;
  letter-spacing:-.038em;-webkit-box-orient:vertical;-webkit-line-clamp:2;
}
.single-pick-original{
  overflow:hidden;margin:5px 0 0;color:rgba(221,222,231,.68);
  font-size:13px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap;
}
.single-pick-chips{
  display:flex;flex-wrap:nowrap;gap:6px;min-width:0;margin-top:9px;overflow:hidden;
}
.single-pick-chip{
  display:inline-flex;align-items:center;flex:0 0 auto;min-height:25px;padding:4px 9px;
  border:1px solid rgba(255,255,255,.09);border-radius:999px;
  background:rgba(255,255,255,.055);color:rgba(244,244,248,.88);
  font-size:12px;line-height:1;white-space:nowrap;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.single-pick-rating{color:#b794ff;font-variant-numeric:tabular-nums;}
.single-pick-genres{
  overflow:hidden;margin:9px 0 0;color:rgba(218,219,228,.70);
  font-size:12.5px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap;
}
.single-pick-reason{
  display:-webkit-box;overflow:hidden;margin:7px 0 0;color:rgba(240,240,245,.84);
  font-size:12.5px;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2;
}
.single-pick-actions{display:grid;gap:8px;min-width:0;margin:0;padding:0 1px;}
.single-pick-primary,.single-pick-secondary,.single-pick-alternate,.single-pick-danger{
  width:100%;min-width:0;margin:0;border-radius:14px;
  font-family:var(--font);font-size:13.5px;font-weight:650;cursor:pointer;
}
.single-pick-primary{
  min-height:50px;border:0;background:linear-gradient(135deg,#7050ff,#8d63ff);
  color:#fff;box-shadow:0 8px 22px rgba(113,76,255,.18);
}
.single-pick-action-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
.single-pick-secondary,.single-pick-alternate{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:46px;padding:8px 10px;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.032);color:rgba(249,249,252,.94);
}
.single-pick-secondary svg,.single-pick-alternate svg{
  flex:0 0 auto;width:19px;height:19px;
}
.single-pick-alternate{min-height:43px;color:var(--accent-2);}
.single-pick-danger{
  min-height:38px;border:0;background:transparent;color:#ff7f91;font-size:12.5px;
}
.single-pick-primary:disabled,.single-pick-secondary:disabled,
.single-pick-alternate:disabled,.single-pick-danger:disabled{opacity:.52;}
.single-pick-state-screen{
  display:grid;grid-template-rows:1fr;place-items:center;
}
.single-pick-state-wrap{display:grid;justify-items:center;gap:18px;width:min(100%,320px);}
.single-pick-state-copy{color:var(--ink-2);font-size:14px;text-align:center;}
.single-pick-state-copy.is-error{max-width:300px;color:#fca5a5;line-height:1.45;}
.single-pick-recovery-copy{display:grid;gap:8px;text-align:center;}
.single-pick-recovery-copy h1{margin:0;color:var(--ink);font-size:22px;line-height:1.18;}
.single-pick-recovery-copy p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.45;}
.single-pick-recovery{display:grid;gap:9px;width:min(100%,260px);}
.single-pick-recovery button{width:100%;}
.single-pick-card.is-refreshing{cursor:progress;}
.picker-empty-actions{display:grid;gap:9px;margin-top:18px;}
.single-pick-flow-controls{display:grid;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--hair);}
.single-pick-flow-controls>b{font-size:12px;color:var(--ink-2);}
@media(max-width:360px){
  .single-pick-screen{gap:7px;padding-right:10px;padding-left:10px;}
  .single-pick-card{border-radius:20px;}
  .single-pick-hero-content{padding:18px 15px 15px;}
  .single-pick-title{font-size:25px;}
  .single-pick-primary,.single-pick-secondary,.single-pick-alternate{font-size:12.5px;}
}
@media(max-height:700px){
  .single-pick-screen{
    gap:6px;padding-top:calc(var(--safe-top) + 5px);
    padding-bottom:calc(var(--safe-bottom) + 6px);
  }
  .single-pick-hero-content{padding:16px 16px 13px;}
  .single-pick-original{display:none;}
  .single-pick-reason{-webkit-line-clamp:1;}
  .single-pick-primary{min-height:45px;}
  .single-pick-secondary{min-height:42px;}
  .single-pick-alternate{min-height:40px;}
  .single-pick-danger{min-height:32px;}
}
@media(max-height:620px){
  .single-pick-media-backdrop[data-hero-fit="contain"] .single-pick-backdrop-stage{
    inset:44px 8px 118px;
  }
  .single-pick-reason{display:none;}
  .single-pick-genres{margin-top:6px;}
  .single-pick-chips{margin-top:7px;}
  .single-pick-label{margin-bottom:4px;}
  .single-pick-title{font-size:23px;}
}
.settings-attribution{margin:0 4px;color:var(--ink-2);opacity:.5;}
.settings-attribution-link{display:flex;align-items:center;gap:8px;min-height:44px;color:inherit;font-size:10.5px;line-height:1.25;text-decoration:none;}
.settings-attribution-link img{display:block;flex:none;width:50px;height:auto;}
.settings-attribution-link span{min-width:0;}
.settings-blocked-card .settings-row{padding-top:12px;padding-bottom:12px;}
.settings-empty-row{padding:17px 15px;color:var(--ink-2);font-size:13px;}
.settings-account-section .settings-row{align-items:flex-start;flex-direction:column;}
.settings-account-section .settings-row-copy{width:100%;}
.settings-delete-account{width:100%;}
.account-deleted-screen{display:grid;min-height:calc(100vh - 80px);place-items:center;padding:24px;}
.account-deleted-screen .empty{max-width:320px;text-align:center;}
.account-deleted-screen .empty-icon{display:grid;width:52px;height:52px;margin:0 auto 14px;place-items:center;border-radius:50%;background:rgba(var(--accent-rgb),.15);color:var(--accent-2);font-size:28px;}

/* ── Предиктивные подсказки поиска ─────────────────────────────────────────
   ОДНА спокойная поверхность, а не четыре плавающие карточки: во время набора
   между шапкой Telegram и клавиатурой места мало, и стопка отдельных карточек
   читалась как вторая страница результатов. */
/* Рамку, фон и скругление держит ВНЕШНЯЯ поверхность: сам listbox содержит
   только option-строки, а кнопка «показать все» лежит рядом с ним, не внутри.
   Для глаза это по-прежнему одна карточка. */
.sg-surface{border:1px solid var(--hair-2);border-radius:16px;background:var(--s1);
  overflow:hidden;}
.sg-list{border:0;background:transparent;}
.sg-row{display:flex;align-items:center;gap:12px;min-height:68px;padding:10px 12px;
  cursor:pointer;border-bottom:1px solid var(--hair);}
.sg-row:last-of-type{border-bottom:0;}
.sg-row:active{background:var(--s2);}
/* Акцент — только на выбранной с клавиатуры строке, без свечения. */
.sg-row[aria-selected="true"]{background:var(--s2);box-shadow:inset 2px 0 0 var(--accent);}
.sg-art{flex:0 0 auto;width:42px;aspect-ratio:2/3;border-radius:6px;overflow:hidden;
  background:var(--s2);}
.sg-art img{width:100%;height:100%;object-fit:cover;display:block;}
/* min-width:0 обязателен: без него длинное название распирает строку вместо
   того, чтобы обрезаться. */
.sg-text{flex:1 1 auto;min-width:0;}
.sg-title{font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
/* Набранный кусок подсвечиваем весом и цветом, без заливки-маркера. */
.sg-hit{color:var(--ink);background:rgba(var(--accent-rgb),.24);border-radius:3px;padding:0 2px;font-weight:650;}
.sg-meta{margin-top:2px;font-size:12px;color:var(--ink-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.sg-rate{flex:0 0 auto;font-size:12px;color:var(--ink-2);display:inline-flex;
  align-items:center;gap:3px;}
.sg-rate .s{color:#f5c451;}
.sg-aside{display:flex;flex:0 0 auto;align-items:flex-end;flex-direction:column;gap:4px;max-width:112px;}
.sg-status{max-width:112px;padding:3px 7px;border:1px solid var(--hair-2);border-radius:999px;color:var(--ink-2);font-size:10px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sg-all{display:block;width:100%;min-height:48px;border:0;border-top:1px solid var(--hair-2);
  background:transparent;color:var(--accent-2);font:600 14px var(--font);cursor:pointer;}
.sg-all:active{background:var(--s2);}

/* ── Полные результаты списком ────────────────────────────────────────────── */
.sr-list{border:1px solid var(--hair-2);border-radius:16px;background:var(--s1);
  overflow:hidden;}
.sr-row{display:flex;align-items:center;gap:12px;min-height:76px;padding:10px 12px;
  cursor:pointer;border-bottom:1px solid var(--hair);}
.sr-row:last-child{border-bottom:0;}
.sr-row:active{background:var(--s2);}
.sr-row .sg-art{width:42px;}
.sr-row .sg-title{font-size:16px;}
.sr-row .sg-meta{font-size:13px;}
.search-recent{margin:20px 4px 0;}
.search-recent-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:var(--ink-2);font-size:13px;font-weight:650;}
.search-recent-clear{padding:4px 0;border:0;background:none;color:var(--accent-2);font:inherit;cursor:pointer;}
.search-recent-list{display:flex;flex-direction:column;gap:2px;}
.search-recent-row{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:14px var(--font);text-align:left;cursor:pointer;}
.search-recent-row:active{background:var(--s2);}
.search-recent-icon{color:var(--ink-2);font-size:16px;}
.search-loading-list{opacity:.72;}
.search-loading-row{cursor:default;}
.search-loading-poster{width:42px;aspect-ratio:2/3;border-radius:6px;background:var(--s2);}
.search-loading-lines{display:flex;flex:1;flex-direction:column;gap:8px;}
.search-loading-lines i{display:block;width:72%;height:10px;border-radius:6px;background:var(--s2);}
.search-loading-lines i:last-child{width:42%;height:8px;}

/* Во время набора панель вкладок только мешает: сверху шапка Telegram, снизу
   клавиатура. Вместе с ней убираем и отступ под неё, иначе останется дыра.
   Прятать её через transform/opacity здесь НЕЛЬЗЯ: #tabbar проигрывает
   анимацию `rise` с fill-mode:both, и её конечный кадр (opacity:1;
   transform:none) перебивает любые обычные объявления каскада — панель
   оставалась на экране, хотя класс на body стоял. Поэтому display, как в
   остальных полноэкранных состояниях. */
/* Набор комментария — тот же случай, и решается тем же правилом. На iOS
   фиксированная панель не остаётся под клавиатурой, а всплывает НАД ней и
   съедает те самые полсотни пикселей, где человек и пишет. Навигация во время
   набора не нужна: первичное действие — поле ввода. */
body.search-typing #tabbar,
body.comment-typing #tabbar{display:none;}
body.search-typing,
body.comment-typing{--nav-clearance:16px;}
/* Значок режима администратора висит на bottom:92px — в той же зоне, что и
   панель, и всплывает над клавиатурой ровно так же. */
body.comment-typing .admin-indicator{display:none;}
@media (prefers-reduced-motion:reduce){
  .sg-row,.sr-row{transition:none;}
}

/* ── Переход навигации в карточку фильма и обратно ───────────────────────────
   Здесь только МОТОРИКА: ни размеров, ни цветов, ни раскладки.

   Сцена приложения и постоянные элементы интерфейса получают собственные имена
   намеренно. Без них браузер кроссфейдит документ целиком — и панель вкладок,
   которая никуда не девается, мигала бы на каждом открытии карточки. С именем
   она становится собственной группой; анимацию у неё снимаем, и она просто
   стоит на месте.

   Общий постер имя получает временно, из JS, и только у того фильма, по
   которому человек нажал. */
#screen{view-transition-name:app-scene;}
#tabbar{view-transition-name:app-chrome;}
#top-scrim{view-transition-name:app-scrim;}

::view-transition-group(app-chrome),::view-transition-group(app-scrim){animation:none;}
::view-transition-old(app-chrome),::view-transition-new(app-chrome),
::view-transition-old(app-scrim),::view-transition-new(app-scrim){animation:none;mix-blend-mode:normal;}

/* Сцена: короткая смена с крошечным сдвигом. Не зум, не размытие, не пружина —
   ощущение перехода даёт общий постер, а сцена лишь не мешает ему. */
@keyframes vt-scene-forward-out{to{opacity:0;transform:translateY(-2px);}}
@keyframes vt-scene-forward-in{from{opacity:0;transform:translateY(4px);}}
@keyframes vt-scene-backward-out{to{opacity:0;transform:translateY(4px);}}
@keyframes vt-scene-backward-in{from{opacity:0;transform:translateY(-2px);}}
::view-transition-old(app-scene),::view-transition-new(app-scene){animation:none;}
html[data-nav-direction="forward"]::view-transition-old(app-scene){animation:vt-scene-forward-out .12s ease-in both;}
html[data-nav-direction="forward"]::view-transition-new(app-scene){animation:vt-scene-forward-in .18s cubic-bezier(.2,.8,.2,1) both;}
html[data-nav-direction="backward"]::view-transition-old(app-scene){animation:vt-scene-backward-out .14s ease-in both;}
html[data-nav-direction="backward"]::view-transition-new(app-scene){animation:vt-scene-backward-in .18s cubic-bezier(.2,.8,.2,1) both;}
/* Обложка летит одна поверх обеих сцен. */
::view-transition-group(movie-poster){z-index:5;animation-duration:.25s;
  animation-timing-function:cubic-bezier(.22,.8,.2,1);}
::view-transition-image-pair(movie-poster){isolation:auto;}
::view-transition-old(movie-poster),::view-transition-new(movie-poster){
  animation:none;mix-blend-mode:normal;height:100%;object-fit:cover;}

@media (prefers-reduced-motion:reduce){
  /* Движение отключено — переход не запускается вовсе (см. runNavTransition),
     но если браузер начнёт его по своей инициативе, анимации быть не должно. */
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;}
}

/* ── Комментарии ──────────────────────────────────────────────────────────
   Плоско и компактно, как в привычных лентах: ни карточки вокруг каждой
   реплики, ни оценки внутри неё, ни постоянных кнопок «Пожаловаться». Всё
   вторичное живёт в меню `⋯`. Только существующие токены темы. */
.d-comments{margin-top:30px;}
.d-comments-head{margin-bottom:14px;}
.d-comments-head h2{font-size:17px;font-weight:600;}
.d-comments-count{color:var(--ink-2);font-weight:500;font-variant-numeric:tabular-nums;}

.d-comment-form{display:flex;align-items:flex-end;gap:10px;margin-bottom:18px;}
.d-comment-input-wrap{position:relative;flex:1 1 auto;min-width:0;}
.d-comment-input{
  width:100%;box-sizing:border-box;resize:none;
  min-height:44px;max-height:108px;padding:11px 14px;
  border:1px solid var(--hair);border-radius:22px;background:var(--s1);
  color:var(--ink);font:inherit;font-size:15px;line-height:1.35;
}
.d-comment-input::placeholder{color:var(--ink-2);}
.d-comment-input:focus{outline:none;border-color:var(--accent);}
.d-comment-limit{
  position:absolute;right:14px;bottom:-16px;
  font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.d-comment-send{
  flex:0 0 auto;display:grid;place-items:center;
  width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:var(--accent);color:#fff;cursor:pointer;
}
.d-comment-send svg{width:20px;height:20px;}
.d-comment-send:disabled{opacity:.38;cursor:default;}
.d-comment-error{margin:-8px 0 14px 54px;font-size:13px;color:#ff6b6b;}

.d-comments-list{display:flex;flex-direction:column;gap:18px;}
.d-comments-state{padding:18px 0;color:var(--ink-2);font-size:14px;}
.d-comments-state.error{color:#ff6b6b;}
.d-comments-more{
  align-self:flex-start;margin-top:2px;padding:10px 16px;min-height:44px;
  border:1px solid var(--hair);border-radius:14px;background:var(--s1);
  color:var(--ink);font:inherit;font-size:14px;cursor:pointer;
}

.d-comment-row{display:flex;align-items:flex-start;gap:10px;}
.d-comment-avatar{
  position:relative;flex:0 0 auto;width:36px;height:36px;overflow:hidden;
  border-radius:50%;background:var(--s2);display:grid;place-items:center;
  color:var(--ink-2);font-size:14px;font-weight:600;
}
.d-comment-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.d-comment-body{flex:1 1 auto;min-width:0;}
.d-comment-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:3px;}
.d-comment-author{
  font-size:13.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%;
}
.d-comment-time{flex:0 0 auto;font-size:12px;color:var(--ink-2);}
/* Длинное слово без пробелов не имеет права растянуть карточку. */
.d-comment-text{
  font-size:14.5px;line-height:1.45;
  white-space:pre-wrap;overflow-wrap:anywhere;
}

/* ── Страница персоны ───────────────────────────────────────────────────────
   Компактная шапка и сетка постеров. Никакой новой палитры: те же токены, что
   и у карточки фильма. Портрет НЕ растягивается в фон — у провайдера это
   маленькое изображение, и полноэкранная подложка из него выглядела бы
   размытым пятном. */
/* Верх страницы начинается ПОД системной областью и панелью Telegram. Экран
   просто не пользовался общим договором приложения: `--safe-top` уже собирает
   вырез устройства и высоту хромки Telegram (см. js/telegram.js), и все
   остальные экраны считают отступ от неё. Константы под конкретный iPhone
   здесь не нужны и были бы неверны на следующей модели. */
.person-v1{padding:calc(var(--safe-top) + 12px) 20px var(--nav-clearance);}
.p-hero{display:flex;gap:16px;align-items:flex-start;}
.p-portrait{position:relative;flex:0 0 132px;width:132px;aspect-ratio:360/549;
  overflow:hidden;border-radius:18px;background:var(--s2);border:1px solid var(--hair);}
.p-portrait .fb{position:absolute;inset:0;display:grid;place-items:center;
  font-size:30px;font-weight:600;color:var(--ink-2);}
.p-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;}
.p-ident{min-width:0;flex:1;padding-top:2px;}
.p-ident h1{font-size:22px;font-weight:650;line-height:1.2;overflow-wrap:anywhere;}
.p-original{margin-top:4px;font-size:13.5px;color:var(--ink-2);overflow-wrap:anywhere;}
.p-desc{margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.p-facts{margin-top:10px;display:flex;flex-direction:column;gap:3px;}
.p-fact{font-size:12.5px;color:var(--ink-2);overflow-wrap:anywhere;}

.p-progress{margin-top:18px;}
.p-progress-label{font-size:13px;color:var(--ink-2);margin-bottom:7px;}
.p-progress-bar{height:4px;border-radius:99px;background:var(--s2);overflow:hidden;}
.p-progress-bar i{display:block;height:100%;border-radius:99px;background:var(--accent);}
.p-progress-note{margin-top:7px;font-size:12px;color:var(--ink-2);}

.p-films{margin-top:26px;}
.p-films-h h2{font-size:17px;font-weight:600;}
.p-films-h h2 span{color:var(--ink-2);font-weight:500;}
/* Ряд чипов прокручивается горизонтально: на 320px четыре подписи в строку не
   помещаются ни при каком размере шрифта, а перенос ломает ритм. */
.p-chips{display:flex;gap:8px;margin-top:14px;overflow-x:auto;scrollbar-width:none;
  padding:2px 20px;margin-left:-20px;margin-right:-20px;}
.p-chips::-webkit-scrollbar{display:none;}
.p-chip{flex:0 0 auto;min-height:34px;padding:0 14px;border-radius:99px;
  border:1px solid var(--hair);background:var(--s1);color:var(--ink-2);
  font:500 13px var(--font);cursor:pointer;white-space:nowrap;}
.p-chip.is-on{background:var(--accent);border-color:transparent;color:#fff;}
.p-menus{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.p-select{display:inline-flex;min-width:0;}
.p-select select{max-width:100%;min-height:34px;padding:0 26px 0 12px;border-radius:10px;
  border:1px solid var(--hair);background:var(--s1);color:var(--ink);
  font:500 13px var(--font);appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) 15px,calc(100% - 9px) 15px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;}

.p-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;margin-top:16px;}
.p-card{display:block;min-width:0;padding:0;border:0;background:none;
  color:inherit;font:inherit;text-align:left;cursor:pointer;}
.p-card:active{transform:scale(.97);}
.p-poster{position:relative;width:100%;aspect-ratio:2/3;border-radius:12px;
  overflow:hidden;background:var(--s2);border:1px solid var(--hair);}
.p-poster img{width:100%;height:100%;object-fit:cover;display:block;}
.p-rating{position:absolute;left:6px;bottom:6px;padding:2px 6px;border-radius:6px;
  background:rgba(10,10,12,.78);color:var(--ink);font:600 11px var(--font);}
.p-mark{position:absolute;right:6px;top:6px;width:20px;height:20px;border-radius:99px;
  display:grid;place-items:center;font-size:11px;line-height:1;
  background:rgba(10,10,12,.78);color:var(--ink);}
.p-mark.is-watched{color:var(--accent);}
/* «Хочу» было белым и читалось как случайный значок. Тот же акцент, что и у
   просмотренного, только приглушённый: это отметка, а не предупреждение. */
.p-mark.is-want{color:var(--accent-2);opacity:.92;}
.p-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px;}
.p-chip:focus-visible,.p-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.p-title{margin-top:7px;font-size:12.5px;line-height:1.25;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}
.p-year{margin-top:2px;font-size:11.5px;color:var(--ink-2);}
.p-card.is-skeleton{pointer-events:none;}
.p-card.is-skeleton .p-poster{opacity:.5;}
.p-empty{grid-column:1/-1;padding:26px 0;text-align:center;font-size:13.5px;color:var(--ink-2);}
.p-more-wrap{display:flex;justify-content:center;margin-top:18px;}
.p-more{min-height:44px;padding:0 22px;border-radius:12px;border:1px solid var(--hair);
  background:var(--s1);color:var(--ink);font:500 14px var(--font);cursor:pointer;}

/* Карточка актёра стала кнопкой — сбрасываем родное оформление, чтобы рельс
   выглядел ровно так же, как раньше. */
/* `min-width:0` здесь обязателен. У flex-элемента `min-width` по умолчанию
   `auto`, то есть «не уже своего содержимого». У <div> внутренний
   `overflow:hidden` обнулял этот вклад, а <button> — независимый контекст
   форматирования и считает свой минимум сам: карточка переставала быть ровно
   84px и разъезжалась на доли пикселя. */
.d-cast-item.is-linked{padding:0;border:0;background:none;color:inherit;
  font:inherit;text-align:inherit;cursor:pointer;min-width:0;}
.d-cast-item.is-linked:active{transform:scale(.96);}
@media (prefers-reduced-motion:reduce){
  .p-card:active,.d-cast-item.is-linked:active{transform:none;}
}
@media(max-width:360px){
  .p-portrait{flex-basis:110px;width:110px;}
  .p-ident h1{font-size:20px;}
  .p-grid{gap:12px 8px;}
}

/* Метка развёртывания. Присутствует только на небоевых средах: её задача —
   чтобы снимок экрана нельзя было спутать с боевым (DEV-предпросмотр и staging
   ходят через один и тот же бот и внешне неотличимы). Не перехватывает
   касания: диагностика не имеет права мешать пользоваться приложением. */
#env-badge {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 4px);
  left: 6px;
  z-index: 9999;
  padding: 2px 7px;
  border-radius: 6px;
  font: 600 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(196, 38, 38, .92);
  pointer-events: none;
  user-select: none;
}