/* ==========================================================================
   Velveflix child — Accounts / Auth / Watchlist-♥ (Фаза 3) 2026
   Перенос 1:1 из _vf-preview/assets/vf-account.css. Аддитивный слой поверх
   токенов 2026 (assets/css/vf-tokens.css) + vf-components.css (.vf-card/.vf-grid).
   Глобально подключается vf-hydrate (♥ на карточках + login-модалка); на /account/*
   — полный набор (.vf-auth/.vf-acc/.vf-svc/.vf-set). Имена классов = дизайн-контракт.
   ========================================================================== */

/* ---------- ♥ Watchlist-кнопка на .vf-card (карточки каталога/листингов) ----- */
/* prod vf-components.css не содержит .vf-card__wl. Чтобы <button> не лежал внутри
   <a> (невалидно по W3C), карточка с ♥ = .vf-card--wl (<div>) + stretched-link
   .vf-card__link::after, перекрывающий всю карточку. ♥-кнопка — над ссылкой (z-index). */
.vf-scope .vf-card--wl{position:relative}
.vf-scope .vf-card__link{position:static;display:block;text-decoration:none;color:inherit}
.vf-scope .vf-card--wl .vf-card__link::after{content:"";position:absolute;inset:0;z-index:1}
.vf-scope .vf-card__poster{position:relative}
.vf-scope .vf-card__wl{position:absolute;top:6px;right:6px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--vf-elev-overlay,rgba(8,9,12,.7));color:var(--vf-text-2);
  border:0;cursor:pointer;opacity:0;transition:opacity var(--vf-dur-fast),color var(--vf-dur-fast);
  z-index:2;padding:0}
.vf-scope .vf-card__wl svg{width:18px;height:18px}
.vf-scope .vf-card--wl:hover .vf-card__wl,.vf-scope .vf-card__wl:focus-visible{opacity:1}
.vf-scope .vf-card__wl:focus-visible{outline:3px solid var(--vf-focus-ring);outline-offset:2px}
.vf-scope .vf-card__wl.is-on{color:var(--vf-accent);opacity:1}
.vf-scope .vf-card__wl.is-on svg path{fill:currentColor}
@media(hover:none){.vf-scope .vf-card__wl{opacity:1}}

/* ---------- Auth: shared form shell (modal + page reuse it) ---------- */
.vf-auth{max-width:420px}
.vf-auth__brand{display:flex;align-items:center;gap:10px;margin-bottom:var(--vf-space-5)}
.vf-auth__brand .vf-logo__mark{width:34px;height:34px;font-size:1.1rem}
.vf-auth__title{font-size:var(--vf-fs-h2);font-weight:var(--vf-fw-extrabold);letter-spacing:var(--vf-ls-tight)}
.vf-auth__sub{margin-top:var(--vf-space-2);color:var(--vf-text-2);font-size:var(--vf-fs-sm)}

.vf-field{margin-top:var(--vf-space-4)}
.vf-field label{display:block;font-size:var(--vf-fs-xs);font-weight:var(--vf-fw-semibold);
  text-transform:uppercase;letter-spacing:var(--vf-ls-caps);color:var(--vf-text-muted);margin-bottom:var(--vf-space-2)}
.vf-input{width:100%;height:48px;padding:0 16px;border-radius:var(--vf-radius-md);
  background:var(--vf-surface-2);border:1px solid var(--vf-line);color:var(--vf-text);font:inherit;font-size:var(--vf-fs-body)}
.vf-input::placeholder{color:var(--vf-text-muted)}
.vf-input:focus-visible{outline:3px solid var(--vf-focus-ring);outline-offset:2px;border-color:var(--vf-line-strong)}
.vf-input--invalid{border-color:var(--vf-danger)}
.vf-field__err{display:none;margin-top:6px;color:var(--vf-danger);font-size:var(--vf-fs-xs)}
.vf-field__err.is-shown{display:block}

.vf-btn--block{width:100%}
.vf-btn--lg{min-height:48px;font-size:var(--vf-fs-body)}

/* social buttons */
.vf-auth__social{display:flex;flex-direction:column;gap:var(--vf-space-3)}
.vf-btn--social{background:var(--vf-surface-2);color:var(--vf-text);border-color:var(--vf-line);min-height:48px;font-weight:var(--vf-fw-semibold)}
.vf-btn--social:hover{background:var(--vf-surface-3);border-color:var(--vf-line-strong)}
.vf-btn--social svg{flex:0 0 auto}

/* divider "or" */
.vf-auth__or{display:flex;align-items:center;gap:var(--vf-space-3);margin:var(--vf-space-5) 0;color:var(--vf-text-muted);font-size:var(--vf-fs-xs);text-transform:uppercase;letter-spacing:var(--vf-ls-caps)}
.vf-auth__or::before,.vf-auth__or::after{content:"";flex:1;height:1px;background:var(--vf-line)}

/* password fallback disclosure */
.vf-auth__fallback{margin-top:var(--vf-space-4);text-align:center}
.vf-link-btn{background:transparent;border:0;color:var(--vf-text-2);font-size:var(--vf-fs-sm);font-weight:var(--vf-fw-medium);text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0 8px;cursor:pointer}
.vf-link-btn:hover{color:var(--vf-text)}
.vf-disclosure[hidden]{display:none}
.vf-disclosure{margin-top:var(--vf-space-3)}

/* consent text (variant A) */
.vf-consent{margin-top:var(--vf-space-5);color:var(--vf-text-muted);font-size:var(--vf-fs-xs);line-height:var(--vf-lh-normal)}
.vf-consent a{color:var(--vf-text-2);text-decoration:underline;text-underline-offset:2px}
.vf-consent a:hover{color:var(--vf-accent)}

/* magic-link "check your inbox" success state */
.vf-auth__sent{text-align:center;padding:var(--vf-space-4) 0}
.vf-auth__sent .vf-sent-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto var(--vf-space-4);background:var(--vf-accent-soft);color:var(--vf-accent)}
.vf-auth__sent h2{font-size:var(--vf-fs-h3);font-weight:var(--vf-fw-bold)}
.vf-auth__sent p{color:var(--vf-text-2);font-size:var(--vf-fs-sm);margin-top:var(--vf-space-2)}
.vf-auth__sent b{color:var(--vf-text)}

/* feature-flag OFF: точки входа в логин скрыты */
.vf-auth[data-login-off] [data-auth-form],
.vf-auth[data-login-off] .vf-auth__or,
.vf-auth[data-login-off] .vf-auth__social,
.vf-auth[data-login-off] .vf-auth__fallback{display:none}
.vf-soon{background:var(--vf-surface-1);border:1px solid var(--vf-line);border-radius:var(--vf-radius-lg);
  padding:var(--vf-space-5);text-align:center;color:var(--vf-text-2);font-size:var(--vf-fs-sm);margin-top:var(--vf-space-4)}
.vf-soon b{display:block;color:var(--vf-text);font-size:var(--vf-fs-body);margin-bottom:6px}

/* ---------- Modal (focus-trap, Esc) ---------- */
.vf-modal{position:fixed;inset:0;z-index:var(--vf-z-modal);display:none;align-items:center;justify-content:center;padding:var(--vf-space-4)}
.vf-modal.is-open{display:flex}
.vf-modal__scrim{position:absolute;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(2px)}
.vf-modal__panel{position:relative;width:100%;max-width:460px;max-height:92vh;overflow:auto;
  background:var(--vf-surface-1);border:1px solid var(--vf-line);border-radius:var(--vf-radius-lg);
  box-shadow:var(--vf-shadow-3);padding:var(--vf-space-6);
  transform:translateY(8px) scale(.98);opacity:0;transition:transform var(--vf-dur-base) var(--vf-ease-out),opacity var(--vf-dur-base)}
.vf-modal.is-open .vf-modal__panel{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.vf-modal__panel{transition:none;transform:none}}
.vf-modal__close{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;
  background:transparent;color:var(--vf-text-2);display:grid;place-items:center;cursor:pointer}
.vf-modal__close:hover{background:var(--vf-surface-3);color:var(--vf-text)}
.vf-auth__hint{display:flex;align-items:center;gap:10px;margin-bottom:var(--vf-space-4);padding:10px 12px;
  border-radius:var(--vf-radius-md);background:var(--vf-accent-soft);border:1px solid var(--vf-accent);
  color:var(--vf-text);font-size:var(--vf-fs-sm)}
.vf-auth__hint svg{flex:0 0 auto;color:var(--vf-accent)}

/* ---------- Toast ---------- */
.vf-toast-host{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:var(--vf-z-toast);
  display:flex;flex-direction:column;gap:var(--vf-space-2);width:max-content;max-width:calc(100vw - 32px);pointer-events:none}
.vf-toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--vf-radius-pill);
  background:var(--vf-surface-3);border:1px solid var(--vf-line-strong);color:var(--vf-text);
  font-size:var(--vf-fs-sm);font-weight:var(--vf-fw-medium);box-shadow:var(--vf-shadow-3);pointer-events:auto;
  opacity:0;transform:translateY(8px);transition:opacity var(--vf-dur-base),transform var(--vf-dur-base)}
.vf-toast.is-in{opacity:1;transform:none}
.vf-toast__ico{flex:0 0 auto;color:var(--vf-success)}
.vf-toast a{color:var(--vf-accent);font-weight:var(--vf-fw-semibold);text-decoration:underline;text-underline-offset:2px}
@media(prefers-reduced-motion:reduce){.vf-toast{transition:none}}

/* ---------- Onboarding ---------- */
.vf-onb{max-width:760px;margin:var(--vf-space-8) auto}
.vf-onb__steps{display:flex;align-items:center;gap:var(--vf-space-2);margin-bottom:var(--vf-space-5);
  color:var(--vf-text-muted);font-size:var(--vf-fs-xs);font-weight:var(--vf-fw-semibold);text-transform:uppercase;letter-spacing:var(--vf-ls-caps)}
.vf-onb__dot{width:8px;height:8px;border-radius:50%;background:var(--vf-surface-4)}
.vf-onb__dot.is-on{background:var(--vf-accent)}
.vf-onb h1{font-size:var(--vf-fs-display);font-weight:var(--vf-fw-extrabold);letter-spacing:var(--vf-ls-tight)}
.vf-onb__lead{color:var(--vf-text-2);margin-top:var(--vf-space-2);max-width:60ch}

/* ---------- Services picker (JustWatch-style) — onboarding + settings ---------- */
.vf-svc-bar{display:flex;align-items:center;gap:var(--vf-space-3);flex-wrap:wrap;margin:var(--vf-space-5) 0 var(--vf-space-4)}
.vf-svc-bar .vf-svc-search{position:relative;flex:1 1 240px;max-width:340px}
.vf-svc-bar .vf-svc-search input{width:100%;height:44px;padding:0 14px 0 40px;border-radius:var(--vf-radius-pill);
  background:var(--vf-surface-2);border:1px solid var(--vf-line);color:var(--vf-text);font:inherit;font-size:var(--vf-fs-sm)}
.vf-svc-bar .vf-svc-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--vf-text-muted)}
.vf-svc-count{color:var(--vf-text-muted);font-size:var(--vf-fs-sm)}
.vf-svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--vf-space-3)}
@media(min-width:560px){.vf-svc-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:780px){.vf-svc-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.vf-svc-grid{grid-template-columns:repeat(5,1fr)}}
.vf-svc{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:44px;
  padding:var(--vf-space-4) var(--vf-space-3);border-radius:var(--vf-radius-md);
  background:var(--vf-surface-1);border:1px solid var(--vf-line);color:var(--vf-text-2);
  font-size:var(--vf-fs-xs);font-weight:var(--vf-fw-medium);text-align:center;cursor:pointer;
  transition:border-color var(--vf-dur-fast),background var(--vf-dur-fast),transform var(--vf-dur-fast)}
.vf-svc:hover{border-color:var(--vf-line-strong);background:var(--vf-surface-2)}
.vf-svc:focus-visible{outline:3px solid var(--vf-focus-ring);outline-offset:2px}
.vf-svc img{width:48px;height:48px;border-radius:10px;background:var(--vf-wtw-logo-bg);object-fit:contain;padding:3px}
.vf-svc__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:var(--vf-lh-snug)}
.vf-svc.is-on{border-color:var(--vf-accent);background:var(--vf-accent-soft);color:var(--vf-text)}
.vf-svc__check{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;display:none;
  place-items:center;background:var(--vf-accent);color:#fff}
.vf-svc.is-on .vf-svc__check{display:grid}

.vf-onb__foot{display:flex;align-items:center;gap:var(--vf-space-3);margin-top:var(--vf-space-6);flex-wrap:wrap}
.vf-onb__foot .vf-link-btn{margin-left:auto}

/* ---------- Account shell (sidebar desktop / bottom-nav mobile) ---------- */
.vf-acc{display:block;margin-top:var(--vf-space-6)}
@media(min-width:900px){.vf-acc{display:grid;grid-template-columns:236px 1fr;gap:var(--vf-space-8);align-items:start}}

.vf-acc__side{position:sticky;top:76px}
.vf-acc__id{display:flex;align-items:center;gap:12px;margin-bottom:var(--vf-space-5);padding-bottom:var(--vf-space-4);border-bottom:1px solid var(--vf-line)}
.vf-acc__avatar{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--vf-accent);color:#fff;font-weight:var(--vf-fw-bold);font-size:1.1rem}
.vf-acc__email{font-size:var(--vf-fs-sm);font-weight:var(--vf-fw-semibold);overflow:hidden;text-overflow:ellipsis}
.vf-acc__plan{font-size:var(--vf-fs-xs);color:var(--vf-text-muted)}
.vf-acc__nav{display:flex;flex-direction:column;gap:2px}
.vf-acc__nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 14px;border-radius:var(--vf-radius-md);
  color:var(--vf-text-2);font-size:var(--vf-fs-sm);font-weight:var(--vf-fw-medium);text-decoration:none}
.vf-acc__nav a svg{flex:0 0 auto;color:var(--vf-text-muted)}
.vf-acc__nav a:hover{background:var(--vf-surface-2);color:var(--vf-text)}
.vf-acc__nav a.is-active{background:var(--vf-accent-soft);color:var(--vf-text)}
.vf-acc__nav a.is-active svg{color:var(--vf-accent)}
.vf-acc__nav a .vf-acc__n{margin-left:auto;font-size:var(--vf-fs-xs);color:var(--vf-text-muted);background:var(--vf-surface-3);border-radius:var(--vf-radius-pill);padding:1px 8px}
.vf-acc__logout{margin-top:var(--vf-space-4);padding-top:var(--vf-space-4);border-top:1px solid var(--vf-line)}

.vf-acc__main{min-width:0}
.vf-acc__panel{display:none}
.vf-acc__panel.is-active{display:block}
.vf-acc__h{font-size:var(--vf-fs-h2);font-weight:var(--vf-fw-extrabold);letter-spacing:var(--vf-ls-tight);margin-bottom:var(--vf-space-2)}
.vf-acc__phint{color:var(--vf-text-muted);font-size:var(--vf-fs-sm);margin-bottom:var(--vf-space-5)}

/* mobile bottom nav for account */
.vf-acc__bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--vf-z-sticky);
  background:rgba(14,15,19,.94);backdrop-filter:blur(12px);border-top:1px solid var(--vf-line);
  padding:6px 4px env(safe-area-inset-bottom,6px)}
.vf-acc__bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:52px;justify-content:center;
  color:var(--vf-text-muted);font-size:10px;font-weight:var(--vf-fw-semibold);text-decoration:none}
.vf-acc__bnav a.is-active{color:var(--vf-accent)}
.vf-acc__bnav a svg{width:22px;height:22px}
@media(min-width:900px){.vf-acc__bnav{display:none}}
@media(max-width:899px){body.vf-has-bnav{padding-bottom:64px}.vf-acc__side .vf-acc__nav,.vf-acc__side .vf-acc__logout{display:none}.vf-acc__side{position:static}}

/* settings rows */
.vf-set{background:var(--vf-surface-1);border:1px solid var(--vf-line);border-radius:var(--vf-radius-lg);overflow:hidden}
.vf-set__row{display:flex;align-items:center;gap:var(--vf-space-4);padding:var(--vf-space-4) var(--vf-space-5);border-bottom:1px solid var(--vf-line)}
.vf-set__row:last-child{border-bottom:0}
.vf-set__row>div{min-width:0}
.vf-set__k{font-size:var(--vf-fs-sm);font-weight:var(--vf-fw-semibold)}
.vf-set__d{font-size:var(--vf-fs-xs);color:var(--vf-text-muted);margin-top:2px}
.vf-set__row>.vf-set__ctrl{margin-left:auto;flex:0 0 auto}
.vf-set__row select,.vf-set__ctrl select{height:44px;background:var(--vf-surface-2);color:var(--vf-text);border:1px solid var(--vf-line);border-radius:var(--vf-radius-pill);padding:0 14px;font:inherit;font-size:var(--vf-fs-sm)}

/* toggle switch */
.vf-switch{position:relative;display:inline-block;width:48px;height:28px}
.vf-switch input{position:absolute;opacity:0;width:48px;height:28px;margin:0;cursor:pointer}
.vf-switch__t{position:absolute;inset:0;border-radius:99px;background:var(--vf-surface-4);transition:background var(--vf-dur-fast)}
.vf-switch__t::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform var(--vf-dur-fast)}
.vf-switch input:checked + .vf-switch__t{background:var(--vf-accent)}
.vf-switch input:checked + .vf-switch__t::after{transform:translateX(20px)}
.vf-switch input:focus-visible + .vf-switch__t{outline:3px solid var(--vf-focus-ring);outline-offset:2px}

/* danger zone */
.vf-danger-zone{margin-top:var(--vf-space-6);border:1px solid var(--vf-line);border-radius:var(--vf-radius-lg);padding:var(--vf-space-5)}
.vf-danger-zone h3{font-size:var(--vf-fs-sm);font-weight:var(--vf-fw-bold);text-transform:uppercase;letter-spacing:var(--vf-ls-caps);color:var(--vf-text-muted);margin-bottom:var(--vf-space-3)}
.vf-danger-zone .vf-row-actions{display:flex;gap:var(--vf-space-3);flex-wrap:wrap}
.vf-btn--danger{background:transparent;border-color:var(--vf-danger);color:var(--vf-danger)}
.vf-btn--danger:hover{background:rgba(255,107,107,.08)}

/* watchlist/ratings remove + rating stamp on card meta */
.vf-acc__rate{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:var(--vf-fs-xs);color:var(--vf-rating);font-weight:var(--vf-fw-semibold)}
.vf-watched-pill{display:inline-flex;align-items:center;gap:4px;font-size:var(--vf-fs-xs);color:var(--vf-success);font-weight:var(--vf-fw-semibold)}

/* empty state */
.vf-empty{text-align:center;padding:var(--vf-space-8) var(--vf-space-4);color:var(--vf-text-2);font-size:var(--vf-fs-sm)}
.vf-empty b{display:block;color:var(--vf-text);font-size:var(--vf-fs-h3);font-weight:var(--vf-fw-bold);margin-bottom:var(--vf-space-2)}

/* guest banner inside account-style watchlist (soft sign-in prompt) */
.vf-guest-cta{display:flex;align-items:center;gap:var(--vf-space-4);flex-wrap:wrap;
  background:var(--vf-surface-1);border:1px solid var(--vf-line);border-radius:var(--vf-radius-lg);
  padding:var(--vf-space-4) var(--vf-space-5);margin-bottom:var(--vf-space-5)}
.vf-guest-cta p{font-size:var(--vf-fs-sm);color:var(--vf-text-2);margin:0}
.vf-guest-cta b{color:var(--vf-text)}
.vf-guest-cta .vf-btn{margin-left:auto}

/* segmented filter (ratings: all/rated/watched) */
.vf-seg{display:inline-flex;gap:4px;background:var(--vf-surface-1);border:1px solid var(--vf-line);border-radius:var(--vf-radius-pill);padding:4px}
.vf-seg button{min-height:36px;padding:0 16px;border:0;border-radius:var(--vf-radius-pill);background:transparent;color:var(--vf-text-2);font:inherit;font-size:var(--vf-fs-sm);font-weight:var(--vf-fw-medium);cursor:pointer}
.vf-seg button.is-on{background:var(--vf-accent);color:#fff}

/* account page container (SSR) */
.vf-account-page{padding:var(--vf-space-6) 0 var(--vf-space-8)}
.vf-account-page .vf-container{max-width:1200px;margin:0 auto;padding:0 var(--vf-space-4)}

/* ===================== §X lite-youtube фасад трейлера (S3) ===================== */
/* Click-to-load: постер + play, iframe вставляется JS только по клику.
 * LCP/INP-safe (нет YouTube до клика). CLS-safe: aspect-ratio 16/9. */
.vf-scope .vf-trailer-section{ margin: var(--vf-space-6) 0; }
.vf-scope .vf-trailer-section > h2{
  font-size:var(--vf-fs-h2); font-weight:var(--vf-fw-bold);
  line-height:var(--vf-lh-snug); color:var(--vf-text); margin:0 0 var(--vf-space-4);
}
.vf-scope .vf-trailer{
  position:relative; aspect-ratio:16/9; border-radius:var(--vf-radius-lg);
  overflow:hidden; background:#000; cursor:pointer; width:100%;
}
.vf-scope .vf-trailer img{
  width:100%; height:100%; object-fit:cover; opacity:.86; display:block;
  transition:opacity var(--vf-dur-base) var(--vf-ease-standard);
}
.vf-scope .vf-trailer:hover img{ opacity:1; }
.vf-scope .vf-trailer__play{ position:absolute; inset:0; display:grid; place-items:center; }
.vf-scope .vf-trailer__play button{
  width:72px; height:72px; border-radius:50%; border:0; cursor:pointer;
  background:var(--vf-accent); color:#fff; display:grid; place-items:center;
  box-shadow:0 6px 24px rgba(0,0,0,.4);
  /* motion_spec §3: transform (scale) + background (state). Только GPU-свойства. */
  transition:transform var(--vf-dur-base) var(--vf-ease-standard),
             background var(--vf-dur-base) var(--vf-ease-standard);
}
@media (hover:hover) and (pointer:fine){
  /* §3: hover scale 1.06 + акцент-hover (было 1.08 без смены фона). */
  .vf-scope .vf-trailer:hover .vf-trailer__play button{
    transform:scale(1.06); background:var(--vf-accent-hover);
  }
}
/* §3: press-фидбек ДО загрузки iframe — мгновенный отклик (INP-выигрыш), тач+мышь. */
.vf-scope .vf-trailer:active .vf-trailer__play button,
.vf-scope .vf-trailer__play button:active{ transform:scale(.94); }
.vf-scope .vf-trailer__play button:focus-visible{ outline:3px solid var(--vf-focus-ring); outline-offset:3px; }
.vf-scope .vf-trailer__label{
  position:absolute; left:16px; bottom:14px;
  background:var(--vf-elev-overlay); color:var(--vf-text);
  padding:6px 12px; border-radius:var(--vf-radius-pill);
  font-size:var(--vf-fs-xs); font-weight:var(--vf-fw-semibold);
  display:inline-flex; align-items:center; gap:6px;
}
.vf-scope .vf-trailer iframe{ width:100%; height:100%; border:0; display:block; }
@media (prefers-reduced-motion:reduce){
  .vf-scope .vf-trailer img,
  .vf-scope .vf-trailer__play button{ transition:none; }
}

/* ===================== §X ♥ Watchlist на странице тайтла (S3) ===================== */
/* Инлайн-кнопка в hero CTA-row. Гидрируется vf-hydrate.js (data-vf-wl). */
.vf-wl-inline{ display:inline-flex; }
.vf-scope.vf-wl-inline .vf-btn-wl,
.vf-btn-wl{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  color:var(--vf-text); font-weight:600; font-size:14px;
  padding:11px 18px; border-radius:8px; line-height:1;
  transition:background .18s, border-color .18s, color .18s;
}
.vf-btn-wl:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); color:#fff; }
.vf-btn-wl:focus-visible{ outline:2px solid var(--vf-focus-ring); outline-offset:2px; }
.vf-btn-wl svg{ flex:0 0 auto; }
.vf-btn-wl.is-on{
  color:var(--vf-accent); border-color:color-mix(in srgb, var(--vf-accent) 55%, transparent);
  background:color-mix(in srgb, var(--vf-accent) 14%, transparent);
}
.vf-btn-wl.is-on svg path{ fill:currentColor; stroke:currentColor; }
@media (prefers-reduced-motion:reduce){ .vf-btn-wl{ transition:none; } }