/* Vivid Cinema — final cross-viewport audit fixes.
   Loaded last so visibility, geometry and interaction rules are deterministic. */

/* Native hidden state must always win over layout rules. */
.vivid-release-popover[hidden],
.vivid-search-dialog[hidden],
.vivid-mobile-nav[hidden]{display:none!important}

/* Release center: anchored to the header, never allowed to run below the viewport. */
.vivid-release-popover{
  position:fixed!important;
  top:calc(64px + var(--vivid-safe-top,0px))!important;
  right:max(16px,env(safe-area-inset-right,0px))!important;
  left:auto!important;
  bottom:auto!important;
  width:min(420px,calc(100vw - 32px))!important;
  max-height:calc(100dvh - 80px)!important;
  display:flex;
  flex-direction:column;
  overflow:hidden!important;
  z-index:1200!important;
  box-sizing:border-box!important;
}
.vivid-release-popover-head,
.vivid-release-toolbar,
.vivid-release-settings,
.vivid-release-footnote{flex:0 0 auto}
.vivid-release-alert-list{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.vivid-release-popover-head{min-width:0}
.vivid-release-head-copy{min-width:0}
.vivid-release-head-copy small{display:block;max-width:32ch;white-space:normal}
.vivid-release-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vivid-release-toolbar>div{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.vivid-release-toolbar button{white-space:nowrap}
.vivid-release-alert{min-width:0}
.vivid-release-alert>a{min-width:0}
.vivid-release-alert span{overflow:hidden}
.vivid-release-alert strong,.vivid-release-alert small{overflow:hidden;text-overflow:ellipsis}
.vivid-release-empty{padding:32px 20px!important;text-align:center}
@media(max-width:640px){
  .vivid-release-popover{
    top:calc(58px + var(--vivid-safe-top,0px))!important;
    right:12px!important;
    left:12px!important;
    width:auto!important;
    max-height:calc(100dvh - 74px - var(--vivid-safe-top,0px))!important;
    border-radius:18px!important;
  }
  .vivid-release-popover-head{padding:14px!important}
  .vivid-release-toolbar{padding:8px 10px!important}
  .vivid-release-alert-list{min-height:120px!important}
}

/* The search workspace is a true modal surface and must sit above every shell layer. */
.vivid-search-dialog{z-index:10050!important}
.vivid-search-window{min-height:100dvh!important}
.vivid-search-content{min-height:0!important}
.vivid-search-field input{
  -webkit-appearance:none!important;
  appearance:none!important;
  min-width:0!important;
  opacity:1!important;
  visibility:visible!important;
  caret-color:currentColor!important;
}
@media(max-width:640px){
  .vivid-search-top{position:sticky;top:0;z-index:5}
  .vivid-search-window{width:100%!important}
}

/* Header: prevent desktop navigation from pushing controls outside the viewport. */
.vivid-nav{min-width:0!important}
.vivid-navlinks{min-width:0!important;overflow:hidden}
.vivid-navlinks a{flex:0 0 auto}
.vivid-search-trigger{flex:0 0 auto!important;white-space:nowrap}
.vivid-notification-button,.vivid-nav-action,.vivid-theme-toggle{flex:0 0 auto!important}
@media(min-width:901px) and (max-width:1180px){
  .vivid-nav{gap:6px!important}
  .vivid-navlinks{gap:0!important}
  .vivid-navlinks a{padding-inline:7px!important;font-size:.78rem!important}
  .vivid-navlinks a span{display:none}
  .vivid-search-trigger{padding-inline:9px!important}
}
@media(max-width:900px){
  .vivid-navlinks{display:none!important}
  .vivid-nav{gap:6px!important}
  .vivid-search-trigger{width:40px!important;min-width:40px!important;height:40px!important;padding:0!important;border-radius:50%!important}
  .vivid-search-trigger span,.vivid-search-trigger kbd{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  .vivid-release-popover,.vivid-search-window{scroll-behavior:auto!important}
}


/* GLOBAL TYPE WEIGHT PASS — Vivid uses confident, Apple-TV-inspired typography site-wide.
   Keep the hierarchy restrained: semibold UI, bold headings, regular/medium long-form copy. */
:root{
  --vivid-type-ui:600;
  --vivid-type-strong:700;
  --vivid-type-display:700;
  --vivid-type-body:500;
}
body{
  font-weight:var(--vivid-type-body);
}
button,
input,
select,
textarea{
  font-weight:var(--vivid-type-ui);
}
h1, h2, h3, h4, h5, h6, .landing-hero h1, .landing-section h2, .landing-cta h2{
  font-weight:var(--vivid-type-display);
}
.vivid-brand,
.landing-brand,
.vivid-card-title,
.vivid-feature-card strong,
.vivid-rail-head h2,
.vivid-discovery-intro h1,
.vivid-discovery-section h2,
.account-title,
.account-profile-name,
.account-stat strong{
  font-weight:var(--vivid-type-strong);
}
.vivid-navlinks a,
.vivid-nav-action,
.vivid-search-trigger,
.vivid-notification-button,
.vivid-rail-load,
.vivid-rail-see-all,
.vivid-provider-name,
.vivid-filter-reset,
.landing-signin,
.landing-submit,
.landing-browse,
.landing-section-link,
.landing-eyebrow,
.landing-kicker,
.landing-proof span{
  font-weight:var(--vivid-type-ui);
}
.vivid-card-sub,
.vivid-rail-head p,
.vivid-discovery-intro p,
.landing-copy,
.landing-reason p,
.landing-faq-a p,
.account-copy,
.account-meta,
.account-stat-label{
  font-weight:500;
}


/* ========================================================================== */
/* VIVID LIGHT MODE — PREMIUM SYSTEM PASS                                    */
/* Light is a designed appearance, not a white version of Dark Mode.         */
/* ========================================================================== */
html[data-vivid-theme="light"]{
  color-scheme:light;
  --vivid-bg:#f5f5f7;
  --vivid-bg-elevated:#ffffff;
  --vivid-surface-solid:#ffffff;
  --vivid-surface:rgba(255,255,255,.88);
  --vivid-surface-soft:rgba(20,24,32,.045);
  --vivid-surface-strong:rgba(20,24,32,.075);
  --vivid-text:#111216;
  --vivid-text-muted:#626873;
  --vivid-text-subtle:#8a9099;
  --vivid-accent:#111216;
  --vivid-border:rgba(17,18,22,.105);
  --vivid-border-strong:rgba(17,18,22,.17);
  --vivid-highlight:rgba(255,255,255,.92);
  --vivid-focus:#4b63a8;
  --vivid-glow:rgba(78,101,160,.08);
  --vivid-shadow-sm:0 4px 18px rgba(17,18,22,.055);
  --vivid-shadow-md:0 12px 34px rgba(17,18,22,.075);
  --vivid-shadow-lg:0 24px 70px rgba(17,18,22,.11);
}

html[data-vivid-theme="light"] body{
  background:
    radial-gradient(900px 520px at 8% -8%,rgba(211,218,232,.38),transparent 62%),
    radial-gradient(780px 500px at 94% 0%,rgba(226,229,236,.34),transparent 60%),
    var(--vivid-bg);
  color:var(--vivid-text);
}

/* The page background stays quiet; hierarchy comes from surfaces and spacing. */
html[data-vivid-theme="light"] body.vivid-atmosphere,
html[data-vivid-theme="light"] body.vivid-cinema-home{
  background:var(--vivid-bg)!important;
}
html[data-vivid-theme="light"] body.vivid-atmosphere:not(.vivid-cinema-home){
  background:
    radial-gradient(900px 520px at 8% -8%,rgba(211,218,232,.38),transparent 62%),
    radial-gradient(780px 500px at 94% 0%,rgba(226,229,236,.34),transparent 60%),
    var(--vivid-bg)!important;
}

/* Shared chrome: restrained, solid enough to feel intentional. */
html[data-vivid-theme="light"] :is(
  .vivid-topbar,
  .vivid-discovery-nav,
  .vivid-library-nav,
  .vivid-title-nav,
  .vivid-watch-nav
){
  background:rgba(255,255,255,.82)!important;
  border-color:var(--vivid-border)!important;
  box-shadow:0 1px 0 rgba(17,18,22,.035),0 8px 28px rgba(17,18,22,.045)!important;
  color:var(--vivid-text)!important;
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
}
html[data-vivid-theme="light"] :is(
  .vivid-navlinks a,
  .vivid-discovery-nav nav a,
  .vivid-library-nav nav a,
  .vivid-watch-nav nav a
){
  color:#626873!important;
}
html[data-vivid-theme="light"] :is(
  .vivid-navlinks a:hover,
  .vivid-navlinks a[aria-current="true"],
  .vivid-discovery-nav nav a:hover,
  .vivid-discovery-nav nav a.is-active,
  .vivid-library-nav nav a:hover,
  .vivid-library-nav nav a[aria-current="page"],
  .vivid-watch-nav nav a:hover,
  .vivid-watch-nav nav a[aria-current="page"]
){
  color:#111216!important;
  background:rgba(17,18,22,.055)!important;
}

/* Buttons and controls share one light-material language. */
html[data-vivid-theme="light"] :is(
  .vivid-button,
  .vivid-icon-button,
  .vivid-theme-toggle,
  .vivid-search-trigger,
  .vivid-notification-button,
  .vivid-nav-action,
  .vivid-page-back,
  .vivid-mode-chip,
  .vivid-provider-chip,
  .vivid-filter-reset,
  .vivid-rail-load,
  .vivid-rail-see-all
){
  color:#202228!important;
  background:rgba(255,255,255,.76)!important;
  border-color:var(--vivid-border)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 8px rgba(17,18,22,.035)!important;
}
html[data-vivid-theme="light"] :is(
  .vivid-button:hover,
  .vivid-icon-button:hover,
  .vivid-theme-toggle:hover,
  .vivid-search-trigger:hover,
  .vivid-notification-button:hover,
  .vivid-nav-action:hover,
  .vivid-page-back:hover,
  .vivid-mode-chip:hover,
  .vivid-provider-chip:hover,
  .vivid-filter-reset:hover,
  .vivid-rail-load:hover,
  .vivid-rail-see-all:hover
){
  background:#fff!important;
  border-color:var(--vivid-border-strong)!important;
  box-shadow:0 6px 16px rgba(17,18,22,.07)!important;
}
html[data-vivid-theme="light"] .vivid-button--primary,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-button--primary{
  background:#111216!important;
  color:#fff!important;
  border-color:#111216!important;
  box-shadow:0 7px 18px rgba(17,18,22,.16)!important;
}
html[data-vivid-theme="light"] .vivid-button--primary:hover{
  background:#24262c!important;
  color:#fff!important;
}

/* Inputs: crisp, white, quiet — never translucent gray boxes. */
html[data-vivid-theme="light"] :is(
  .vivid-input,
  .vivid-select,
  .vivid-search-field input,
  .vivid-discovery-search input,
  .vivid-filter-row select,
  .vivid-collection-toolbar select,
  .vivid-collection-toolbar>button,
  .account-field input,
  .account-field select,
  .auth-container input
){
  background:#fff!important;
  color:#111216!important;
  border-color:rgba(17,18,22,.13)!important;
  box-shadow:inset 0 1px 2px rgba(17,18,22,.025)!important;
}
html[data-vivid-theme="light"] :is(
  .vivid-input::placeholder,
  .vivid-search-field input::placeholder,
  .vivid-discovery-search input::placeholder,
  .account-field input::placeholder
){
  color:#8a9099!important;
}

/* Cards: white surfaces with subtle separation, not floating gray slabs. */
html[data-vivid-theme="light"] :is(
  .vivid-card,
  .vivid-discovery-card,
  .vivid-feature-card,
  .vivid-collection-card,
  .vivid-library-card,
  .vivid-watch-rec-card,
  .account-card,
  .auth-container,
  .vivid-provider-group,
  .vivid-filter-panel,
  .vivid-collection-toolbar,
  .vivid-library-tabs,
  .vivid-search-panel
){
  background:#fff!important;
  color:#111216!important;
  border-color:rgba(17,18,22,.09)!important;
  box-shadow:0 8px 28px rgba(17,18,22,.055),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
html[data-vivid-theme="light"] :is(
  .vivid-card:hover,
  .vivid-discovery-card:hover,
  .vivid-feature-card:hover,
  .vivid-collection-card:hover,
  .vivid-library-card:hover
){
  border-color:rgba(17,18,22,.14)!important;
  box-shadow:0 14px 34px rgba(17,18,22,.09),inset 0 1px 0 #fff!important;
}

/* Typography hierarchy. Secondary copy should be readable{
  color:#111216!important;
}
html[data-vivid-theme="light"] :is(
  p,
  .vivid-card-sub,
  .vivid-rail-head p,
  .vivid-discovery-intro p,
  .vivid-discovery-copy small,
  .vivid-library-card small,
  .vivid-watch-head p,
  .account-header p,
  .account-copy,
  .account-meta,
  .account-stat-label,
  .auth-container>p,
  .auth-switch,
  .auth-divider
){
  color:#626873!important;
}

/* Home rails: preserve the cinematic catalogue feel in daylight. */


/* Discovery/provider chips should read like a designed filter system. */
html[data-vivid-theme="light"] :is(
  .vivid-provider-chip,
  .vivid-mode-chip
){
  color:#4f555f!important;
}
html[data-vivid-theme="light"] :is(
  .vivid-provider-chip.is-active,
  .vivid-mode-chip.is-active,
  .vivid-mode-chip[aria-selected="true"]
){
  background:#111216!important;
  color:#fff!important;
  border-color:#111216!important;
}

/* Search, notification and release surfaces. */
html[data-vivid-theme="light"] :is(
  .vivid-search-window,
  .vivid-search-dialog,
  .vivid-release-popover,
  .vivid-release-alert,
  .vivid-notification-popover
){
  background:rgba(255,255,255,.96)!important;
  color:#111216!important;
  border-color:rgba(17,18,22,.10)!important;
  box-shadow:0 24px 70px rgba(17,18,22,.16)!important;
}
html[data-vivid-theme="light"] :is(
  .vivid-search-window h1,
  .vivid-search-window h2,
  .vivid-release-popover h1,
  .vivid-release-popover h2,
  .vivid-release-alert strong
){
  color:#111216!important;
}
html[data-vivid-theme="light"] :is(
  .vivid-search-window p,
  .vivid-release-popover small,
  .vivid-release-alert small
){
  color:#626873!important;
}

/* Dialog scrims need to be neutral in Light Mode. */
html[data-vivid-theme="light"] :is(
  .vivid-search-dialog,
  .vivid-onboarding-modal,
  .vivid-watch-player-dialog
){
  background:rgba(17,18,22,.34)!important;
}
html[data-vivid-theme="light"] .vivid-onboarding-dialog{
  background:#fff!important;
  color:#111216!important;
  border-color:rgba(17,18,22,.10)!important;
  box-shadow:0 28px 90px rgba(17,18,22,.20)!important;
}
html[data-vivid-theme="light"] .vivid-onboarding-card{
  background:#f5f5f7!important;
  color:#111216!important;
  border-color:rgba(17,18,22,.10)!important;
}
html[data-vivid-theme="light"] .vivid-onboarding-card.is-selected{
  border-color:#111216!important;
  box-shadow:0 0 0 2px rgba(17,18,22,.12)!important;
}
html[data-vivid-theme="light"] .vivid-onboarding-card.is-selected:after{
  background:#111216!important;
  color:#fff!important;
}

/* Account/auth/library page surfaces. */
html[data-vivid-theme="light"] :is(
  .account-profile-hero,
  .account-security,
  .account-preferences,
  .account-library,
  .account-stats
){
  color:#111216!important;
}
html[data-vivid-theme="light"] :is(
  .account-meta-row,
  .account-stat
){
  background:#fff!important;
  border-color:rgba(17,18,22,.09)!important;
}
html[data-vivid-theme="light"] .auth-container .google-auth{
  background:#fff!important;
  color:#111216!important;
  border-color:rgba(17,18,22,.11)!important;
}

/* Legal and footer areas keep the same hierarchy as the main application. */
html[data-vivid-theme="light"] :is(
  .vivid-footer,
  .vivid-legal,
  footer
){
  color:#626873;
}
html[data-vivid-theme="light"] footer :is(a,p,small,span){
  color:#737983;
}
html[data-vivid-theme="light"] footer a:hover{
  color:#111216!important;
}

/* Selection/focus states remain unmistakable in daylight. */
html[data-vivid-theme="light"] ::selection{
  background:#111216;
  color:#fff;
}
html[data-vivid-theme="light"] :where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid #4b63a8!important;
  outline-offset:3px;
}

/* Avoid accidental dark-theme decorative overlays leaking into daylight. */
html[data-vivid-theme="light"] :is(
  .vivid-skeleton,
  .vivid-skeleton-card
){
  background:linear-gradient(90deg,#e8eaee,#f3f4f6,#e8eaee)!important;
  background-size:200% 100%;
}
@media(prefers-reduced-motion:reduce){
  html[data-vivid-theme="light"] :is(.vivid-skeleton,.vivid-skeleton-card){animation:none!important}
}

/* Light mode should remain polished at narrow widths too. */
@media(max-width:640px){
  html[data-vivid-theme="light"] body{
    background:var(--vivid-bg);
  }
  html[data-vivid-theme="light"] :is(
    .vivid-topbar,
    .vivid-discovery-nav,
    .vivid-library-nav,
    .vivid-title-nav,
    .vivid-watch-nav
  ){
    box-shadow:0 1px 0 rgba(17,18,22,.04),0 5px 20px rgba(17,18,22,.045)!important;
  }
}


/* Landing page Light Mode — editorial, not inverted. */
html[data-vivid-theme="light"] body.vivid-landing,
html[data-vivid-theme="light"] .vivid-landing-shell{
  background:#f5f5f7!important;
  color:#111216!important;
}
html[data-vivid-theme="light"] .landing-hero{
  background:#e8eaf0!important;
}
html[data-vivid-theme="light"] .landing-header{
  background:linear-gradient(180deg,rgba(245,245,247,.96),rgba(245,245,247,0))!important;
}
html[data-vivid-theme="light"] .landing-brand{
  color:#111216!important;
}
html[data-vivid-theme="light"] .landing-brand span{
  color:#707681!important;
}
html[data-vivid-theme="light"] .landing-signin,
html[data-vivid-theme="light"] .landing-submit{
  background:#111216!important;
  color:#fff!important;
}
html[data-vivid-theme="light"] .landing-signin:hover,
html[data-vivid-theme="light"] .landing-submit:hover{
  background:#292b31!important;
}
html[data-vivid-theme="light"] .landing-hero-shade{
  background:
    linear-gradient(90deg,rgba(245,245,247,.96) 0%,rgba(245,245,247,.86) 34%,rgba(245,245,247,.38) 72%,rgba(245,245,247,.52) 100%),
    linear-gradient(0deg,#f5f5f7 0%,rgba(245,245,247,.06) 48%,rgba(245,245,247,.76) 100%)!important;
}
html[data-vivid-theme="light"] .landing-kicker,
html[data-vivid-theme="light"] .landing-eyebrow{
  color:#747a84!important;
}
html[data-vivid-theme="light"] .landing-hero h1,
html[data-vivid-theme="light"] .landing-section h2,
html[data-vivid-theme="light"] .landing-cta h2{
  color:#111216!important;
}
html[data-vivid-theme="light"] .landing-hero h1 em,
html[data-vivid-theme="light"] .landing-cta h2 em{
  color:#737983!important;
}
html[data-vivid-theme="light"] .landing-copy,
html[data-vivid-theme="light"] .landing-browse{
  color:#626873!important;
}
html[data-vivid-theme="light"] .landing-browse:hover{
  color:#111216!important;
}
html[data-vivid-theme="light"] .landing-email{
  background:rgba(255,255,255,.92)!important;
  color:#111216!important;
  border-color:rgba(17,18,22,.14)!important;
  box-shadow:0 5px 18px rgba(17,18,22,.06)!important;
}
html[data-vivid-theme="light"] .landing-email::placeholder{
  color:#8a9099!important;
}
html[data-vivid-theme="light"] .landing-email:focus{
  border-color:#4b63a8!important;
  box-shadow:0 0 0 3px rgba(75,99,168,.12)!important;
}
html[data-vivid-theme="light"] .landing-scroll-cue{
  color:#737983!important;
}
html[data-vivid-theme="light"] .landing-scroll-cue i{
  background:linear-gradient(#737983,transparent)!important;
}
html[data-vivid-theme="light"] .landing-section-link{
  color:#626873!important;
}
html[data-vivid-theme="light"] .landing-section-link:hover{
  color:#111216!important;
}
html[data-vivid-theme="light"] .landing-poster{
  background:#e4e6eb!important;
  border-color:rgba(17,18,22,.09)!important;
  box-shadow:0 8px 24px rgba(17,18,22,.07)!important;
}
html[data-vivid-theme="light"] .landing-poster:hover{
  border-color:rgba(17,18,22,.16)!important;
  box-shadow:0 15px 34px rgba(17,18,22,.11)!important;
}
html[data-vivid-theme="light"] .landing-poster::after{
  background:linear-gradient(0deg,rgba(0,0,0,.68),transparent 45%)!important;
}
html[data-vivid-theme="light"] .landing-reasons-section,
html[data-vivid-theme="light"] .landing-faq,
html[data-vivid-theme="light"] .landing-faq-item,
html[data-vivid-theme="light"] .landing-cta{
  border-color:rgba(17,18,22,.10)!important;
}
html[data-vivid-theme="light"] .landing-reason{
  background:#fff!important;
  border-color:rgba(17,18,22,.09)!important;
  box-shadow:0 8px 26px rgba(17,18,22,.05)!important;
}
html[data-vivid-theme="light"] .landing-reason:hover{
  border-color:rgba(17,18,22,.15)!important;
  box-shadow:0 14px 34px rgba(17,18,22,.08)!important;
}
html[data-vivid-theme="light"] .landing-reason-icon{
  background:#f0f1f4!important;
  color:#111216!important;
}
html[data-vivid-theme="light"] .landing-reason h3,
html[data-vivid-theme="light"] .landing-faq-q{
  color:#111216!important;
}
html[data-vivid-theme="light"] .landing-reason p,
html[data-vivid-theme="light"] .landing-faq-a p{
  color:#626873!important;
}
html[data-vivid-theme="light"] .landing-faq-q span:last-child{
  color:#737983!important;
}
html[data-vivid-theme="light"] .landing-footer{
  color:#737983!important;
}
html[data-vivid-theme="light"] .landing-footer p,
html[data-vivid-theme="light"] .landing-footer a:not(.landing-brand){
  color:#7b818b!important;
}
html[data-vivid-theme="light"] .landing-footer a:hover{
  color:#111216!important;
}


/* VIVID LAUNCH MOMENT — one calm branded beat before the page takes over.
   Uses the existing Vivid icon asset so the intro stays perfectly in sync with the site brand. */
body.vivid-landing::before,
body.vivid-landing::after{
  position:fixed;
  left:0;
  width:100%;
  pointer-events:none;
  z-index:2147483000;
  opacity:1;
  animation:vivid-launch-out .72s cubic-bezier(.22,.8,.24,1) .34s forwards;
}
body.vivid-landing::before{
  content:"";
  top:0;
  height:100%;
  background:
    radial-gradient(circle at 50% 46%,rgba(255,255,255,.055),transparent 24%),
    #050608;
}
body.vivid-landing::after{
  content:"Vivid Cinema";
  top:50%;
  height:118px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:2px;
  box-sizing:border-box;
  background-image:url("../icons/vivid-icon.svg");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:68px 68px;
  color:#fff;
  font-size:1rem;
  font-weight:700;
  letter-spacing:-.025em;
  transform:translateY(-50%) scale(.92);
  filter:drop-shadow(0 14px 36px rgba(0,0,0,.42));
  animation:vivid-launch-logo .72s cubic-bezier(.2,.85,.2,1) forwards,
             vivid-launch-out .72s cubic-bezier(.22,.8,.24,1) .34s forwards;
}
@keyframes vivid-launch-logo{
  0%{opacity:0;transform:translateY(-50%) scale(.82);filter:blur(10px) drop-shadow(0 14px 36px rgba(0,0,0,.42))}
  55%{opacity:1;transform:translateY(-50%) scale(1.03);filter:blur(0) drop-shadow(0 18px 42px rgba(0,0,0,.42))}
  100%{opacity:1;transform:translateY(-50%) scale(1);filter:blur(0) drop-shadow(0 18px 42px rgba(0,0,0,.42))}
}
@keyframes vivid-launch-out{
  0%{opacity:1}
  100%{opacity:0;visibility:hidden}
}
@media(prefers-reduced-motion:reduce){
  body.vivid-landing::before,
body.vivid-landing::after{animation:none!important;opacity:0!important;visibility:hidden!important}
}


/* POLISH PASS — less dashboard, more cinema.
   Shared restraint inspired by minimal streaming interfaces: fewer containers,
   quieter chrome, stronger artwork, consistent spacing. */
:root{
  --vivid-polish-max:1380px;
  --vivid-polish-gutter:clamp(16px,3vw,44px);
  --vivid-polish-line:rgba(255,255,255,.075);
}
.vivid-section-wrap,
.vivid-discovery-main,
.vivid-collection-main,
.vivid-library-main,
.vivid-title-page,
.account-main,
.vivid-anime-main{
  max-width:var(--vivid-polish-max);
}
.vivid-topbar,
.vivid-unified-header,
.vivid-discovery-nav,
.vivid-library-nav,
.vivid-title-nav,
.vivid-watch-nav{
  min-height:58px!important;
  padding-top:8px!important;
  padding-bottom:8px!important;
}
.vivid-brand{
  letter-spacing:-.045em!important;
}
.vivid-brand-icon{
  width:28px!important;
  height:28px!important;
  flex-basis:28px!important;
}
.vivid-navlinks{
  gap:1px!important;
}
.vivid-navlinks a{
  padding:8px 9px!important;
  border-radius:9px!important;
  font-size:.78rem!important;
}
.vivid-navlinks a i{
  opacity:.72;
}
.vivid-navlinks a[aria-current="true"],
.vivid-navlinks a[aria-current="page"],
.vivid-navlinks a.is-active{
  background:rgba(255,255,255,.055)!important;
}
.vivid-search-trigger{
  min-height:38px!important;
  height:38px!important;
  border-radius:11px!important;
}
.vivid-notification-button,
.vivid-theme-toggle{
  width:38px!important;
  height:38px!important;
  min-height:38px!important;
  border-radius:11px!important;
}
.vivid-nav-action{
  min-height:38px!important;
  padding:8px 12px!important;
  border-radius:10px!important;
  font-size:.78rem!important;
}
.vivid-section-wrap{
  padding-inline:var(--vivid-polish-gutter);
}
.vivid-rails{
  border-top:0!important;
}
.vivid-rail-head h2{
  letter-spacing:-.045em!important;
}
.vivid-rail-head p{
  opacity:.72;
}
.vivid-rail-footer{
  opacity:.86;
}
.vivid-card-media{
  box-shadow:0 10px 28px rgba(0,0,0,.18)!important;
}
.vivid-card:hover .vivid-card-media{
  box-shadow:0 18px 42px rgba(0,0,0,.3)!important;
}
.vivid-discovery-main,
.vivid-collection-main,
.vivid-library-main,
.account-main{
  padding-top:clamp(86px,9vw,112px);
}
.vivid-discovery-intro,
.vivid-collection-header,
.vivid-library-header,
.account-header{
  max-width:760px;
}
.vivid-discovery-intro h1,
.vivid-collection-main h1,
.vivid-library-main h1,
.account-title{
  font-size:clamp(2.25rem,5vw,4.4rem)!important;
  letter-spacing:-.055em!important;
}
.vivid-filter-panel,
.vivid-collection-toolbar,
.vivid-library-tabs,
.account-card,
.auth-container{
  box-shadow:none!important;
}
.vivid-filter-panel,
.vivid-collection-toolbar,
.vivid-library-tabs{
  border-color:var(--vivid-border)!important;
}
.vivid-page-back{
  border:0!important;
  background:transparent!important;
  padding-left:0!important;
}
.vivid-footer{
  margin-top:clamp(42px,7vw,90px)!important;
  background:transparent!important;
}
@media(max-width:640px){
  .vivid-section-wrap{padding-inline:12px}
  .vivid-discovery-main,
  .vivid-collection-main,
  .vivid-library-main,
  .account-main{padding-top:78px}
  .vivid-discovery-intro h1,
  .vivid-collection-main h1,
  .vivid-library-main h1,
  .account-title{font-size:clamp(2rem,11vw,3rem)!important}
}

/* Landing page: let the artwork and typography carry the experience. */
body.vivid-landing .landing-header{
  padding:18px max(20px,var(--vivid-polish-gutter))!important;
}
body.vivid-landing .landing-site-brand img{
  width:30px!important;
  height:30px!important;
}
body.vivid-landing .landing-hero-inner{
  max-width:var(--vivid-polish-max)!important;
}
body.vivid-landing .landing-hero-copy{
  max-width:680px!important;
}
body.vivid-landing .landing-kicker{
  letter-spacing:.22em!important;
  opacity:.68;
}
body.vivid-landing .landing-hero h1{
  font-size:clamp(3.2rem,7vw,6.8rem)!important;
  letter-spacing:-.065em!important;
  line-height:.92!important;
}
body.vivid-landing .landing-copy{
  max-width:560px!important;
  color:rgba(255,255,255,.66)!important;
}
body.vivid-landing .landing-section{
  max-width:var(--vivid-polish-max)!important;
}
body.vivid-landing .landing-section-head{
  margin-bottom:20px!important;
}
body.vivid-landing .landing-section h2{
  letter-spacing:-.055em!important;
}
body.vivid-landing .landing-reason,
body.vivid-landing .landing-faq-item{
  box-shadow:none!important;
}
@media(max-width:640px){
  body.vivid-landing .landing-hero h1{
    font-size:clamp(2.8rem,14vw,4.2rem)!important;
  }
  body.vivid-landing .landing-header{padding:14px 16px!important}
}

/* Reduced-motion users still get the branded launch moment; only the scale/blur motion is removed. */
@media(prefers-reduced-motion:reduce){
  body.vivid-landing::before,
body.vivid-landing::after{
    display:block!important;
    animation:vivid-launch-out 1s linear .15s forwards!important;
  }
  body.vivid-landing::after{
    transform:translateY(-50%)!important;
    filter:none!important;
  }
}


/* ==========================================================================
   Header refinement — lighter, softer, floating navigation
   ========================================================================== */
body.vivid-atmosphere :is(
  .vivid-topbar,
  .vivid-discovery-nav,
  .vivid-title-nav,
  .vivid-library-nav,
  .vivid-watch-nav,
  .vivid-unified-header
){
  background:rgba(12,14,18,.44)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:20px!important;
  box-shadow:
    0 12px 34px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12)!important;
  backdrop-filter:blur(20px) saturate(145%) contrast(1.01)!important;
  -webkit-backdrop-filter:blur(20px) saturate(145%) contrast(1.01)!important;
  overflow:visible!important;
}

body.vivid-atmosphere :is(
  .vivid-topbar,
  .vivid-discovery-nav,
  .vivid-title-nav,
  .vivid-library-nav,
  .vivid-watch-nav,
  .vivid-unified-header
)::before{
  border-radius:inherit!important;
  background:linear-gradient(180deg,rgba(255,255,255,.065),transparent 48%)!important;
  opacity:.58!important;
}

body.vivid-atmosphere .vivid-navlinks{
  gap:2px!important;
}

body.vivid-atmosphere .vivid-navlinks a{
  font-weight:550!important;
  color:rgba(235,238,243,.72)!important;
  border-radius:12px!important;
  padding:7px 9px!important;
}

body.vivid-atmosphere .vivid-navlinks a:hover,
body.vivid-atmosphere .vivid-navlinks a[aria-current="true"],
body.vivid-atmosphere .vivid-navlinks a[aria-current="page"],
body.vivid-atmosphere .vivid-navlinks a.is-active{
  color:rgba(255,255,255,.94)!important;
  background:rgba(255,255,255,.065)!important;
}

body.vivid-atmosphere .vivid-nav-action{
  font-weight:550!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}

body.vivid-atmosphere .vivid-notification-button,
body.vivid-atmosphere .vivid-theme-toggle{
  border-radius:13px!important;
  opacity:.82;
}

html[data-vivid-theme="light"] body.vivid-atmosphere :is(
  .vivid-topbar,
  .vivid-discovery-nav,
  .vivid-title-nav,
  .vivid-library-nav,
  .vivid-watch-nav,
  .vivid-unified-header
){
  background:rgba(255,255,255,.58)!important;
  border-color:rgba(17,18,22,.09)!important;
  box-shadow:
    0 12px 34px rgba(17,18,22,.07),
    inset 0 1px 0 rgba(255,255,255,.82)!important;
  backdrop-filter:blur(20px) saturate(135%) contrast(1.01)!important;
  -webkit-backdrop-filter:blur(20px) saturate(135%) contrast(1.01)!important;
}

html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-navlinks a{
  color:rgba(17,18,22,.66)!important;
}

@media(max-width:700px){
  body.vivid-atmosphere :is(
    .vivid-topbar,
    .vivid-discovery-nav,
    .vivid-title-nav,
    .vivid-library-nav,
    .vivid-watch-nav,
    .vivid-unified-header
  ){
    border-radius:17px!important;
  }
}


/* SAFE AREA — keep the Vivid navigation below iPhone/iPad sensor housing. */
body.vivid-atmosphere :is(
  .vivid-topbar,
  .vivid-discovery-nav,
  .vivid-title-nav,
  .vivid-library-nav,
  .vivid-watch-nav,
  .vivid-unified-header
){
  margin-top:max(8px, env(safe-area-inset-top));
}
@media(max-width:700px){
  body.vivid-atmosphere :is(
    .vivid-topbar,
    .vivid-discovery-nav,
    .vivid-title-nav,
    .vivid-library-nav,
    .vivid-watch-nav,
    .vivid-unified-header
  ){
    margin-top:max(10px, env(safe-area-inset-top));
  }
}
/* ========================================================================== */
/* Header spacing — give navigation tabs room to breathe without drifting.    */
/* ========================================================================== */
body.vivid-atmosphere :is(.vivid-nav,.vivid-unified-nav){
  gap:clamp(10px,1.15vw,18px)!important;
}
body.vivid-atmosphere .vivid-navlinks{
  gap:clamp(6px,.7vw,10px)!important;
  padding-inline:2px!important;
}
body.vivid-atmosphere .vivid-navlinks a{
  padding:8px 11px!important;
  min-height:36px;
}
body.vivid-atmosphere .vivid-navlinks a + a{
  margin-left:0!important;
}
body.vivid-atmosphere .vivid-brand{
  margin-right:clamp(4px,.5vw,8px)!important;
}
@media(max-width:1180px) and (min-width:901px){
  body.vivid-atmosphere .vivid-navlinks{
    gap:5px!important;
  }
  body.vivid-atmosphere .vivid-navlinks a{
    padding-inline:8px!important;
  }
}
@media(max-width:700px){
  body.vivid-atmosphere :is(.vivid-nav,.vivid-unified-nav){
    gap:8px!important;
  }
  body.vivid-atmosphere .vivid-navlinks{
    gap:8px!important;
    padding-inline:0!important;
  }
}


/* Apple TV precision pass — preserve Vivid IA while tightening the mobile presentation. */
:root{
  --vivid-bg:#071426;
  --vivid-page-gutter:16px;
  --vivid-apple-secondary:#8e8e93;
  --vivid-apple-blue:#0a84ff;
}
html:not([data-vivid-theme="light"]),
html:not([data-vivid-theme="light"]) body{
  background-color:#071426!important;
}
html:not([data-vivid-theme="light"]) body.vivid-atmosphere{
  background-color:#071426!important;
}
/* Only page-sized canvases change; cards, media, dialogs and player surfaces retain their own colors. */
html:not([data-vivid-theme="light"]) body.vivid-cinema-home .vivid-home,
html:not([data-vivid-theme="light"]) body.vivid-discovery-page .vivid-discovery-app,
html:not([data-vivid-theme="light"]) body.vivid-library-page .vivid-library-app,
html:not([data-vivid-theme="light"]) body.vivid-title-page .vivid-title-app,
html:not([data-vivid-theme="light"]) body.vivid-watch-page .vivid-watch-app,
html:not([data-vivid-theme="light"]) body.vivid-person-page .vivid-person-app,
html:not([data-vivid-theme="light"]) body.vivid-search-page .vivid-search-main{
  background-color:#071426!important;
}

.vivid-library-continue-rail,
.vivid-library-shelf{touch-action:pan-x;}
@media(max-width:640px){
  .vivid-v2-mobile-nav{background:rgba(20,20,23,.94)!important;border-top-color:#2c2c2e!important;backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%);}
  .vivid-v2-mobile-nav a[aria-current="page"],.vivid-v2-mobile-nav a.is-active{color:#0a84ff!important;}
}
@media(prefers-reduced-motion:reduce){
  .vivid-library-continue-rail,
  .vivid-library-shelf{scroll-behavior:auto;}
}

/* ========================================================================== */
/* CINEMATIC DEFERENCE + GUIDED DECISION PASS                                */
/* ========================================================================== */

/* Dark mode owns the cinema canvas. Light mode remains an intentional theme. */
html:not([data-vivid-theme="light"]),
html:not([data-vivid-theme="light"]) body,
html:not([data-vivid-theme="light"]) body.vivid-atmosphere{
  background:#000;
}
html[data-vivid-theme="light"] body,
html[data-vivid-theme="light"] body.vivid-atmosphere{
  background:var(--vivid-bg)!important;
}

/* Apple-style hierarchy: regular body copy, bold headings, quiet metadata. */
body{font-weight:400;}
.vivid-card-sub,
.vivid-rail-head p,
.vivid-library-section-note,
.vivid-library-shelf-head p,
.vivid-library-shelf-note{font-weight:400;}

/* Library tabs should sit on the canvas rather than look like a control panel. */
.vivid-library-page .vivid-library-tabs{
  border:0;
  border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:0;
  background:rgba(0,0,0,.78);
  box-shadow:none;
  padding:6px 0 9px;
}
.vivid-library-page .vivid-library-tabs button{
  border-radius:9px;
}
.vivid-library-page .vivid-library-tabs button.is-active{
  background:#fff;
  box-shadow:none;
}
.vivid-library-page .vivid-library-card{
  border:0;
  background:transparent;
  box-shadow:none;
}
.vivid-library-page .vivid-library-card a{
  border:0;
  background:transparent;
  box-shadow:none;
}
.vivid-library-page .vivid-library-card-copy{
  padding-left:0;
  padding-right:0;
}
.vivid-library-page .vivid-library-card:active{
  transform:scale(.985);
  opacity:.9;
}
@media(max-width:700px){
  .vivid-library-page .vivid-library-tabs{
    padding-inline:0;
    background:rgba(0,0,0,.88);
  }
}

/* Touch feedback is immediate; motion stays restrained on touch devices. */


/* ========================================================================== */
/* BEAST MODE — FOCUS, PHYSICALITY, AND INTERRUPTIBLE WEB MOTION              */
/* ========================================================================== */

/* Focus is a real visual state for keyboard, gamepad, and TV-style navigation. */



/* Touch gets the same physical feedback without turning every tap into a long animation. */
@media (hover:none),(pointer:coarse){
  .vivid-library-page .vivid-library-card:active,
  .vivid-title-page .vivid-cast:active,
  .vivid-title-page .vivid-similar-card:active,
  .vivid-title-page .vivid-video-card:active,
  .vivid-watch-page .vivid-watch-rec-card:active{
    transform:scale(.985);
    opacity:.9;
  }
}

/* Title pages: primary playback action leads; secondary actions recede. */
.vivid-title-page .vivid-title-actions .vivid-button--primary{
  min-width:142px;
  min-height:44px;
  padding-inline:17px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
}
.vivid-title-page .vivid-title-actions .vivid-button--secondary{
  min-height:44px;
  border-radius:10px;
}
.vivid-title-page .vivid-title-library-actions{
  opacity:.82;
  margin-top:10px!important;
}
.vivid-title-page .vivid-title-library-actions .vivid-button{
  min-height:36px;
}
.vivid-title-page .vivid-title-actions + .vivid-title-library-actions{
  border-top:0;
}

/* Detail-page shelves follow the same two-axis, content-first rhythm. */
.vivid-title-page .vivid-similar,
.vivid-title-page .vivid-video-grid,
.vivid-title-page .vivid-cast-grid{
  scroll-snap-type:x mandatory;
  scroll-padding-inline:2px;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.vivid-title-page .vivid-similar-card,
.vivid-title-page .vivid-video-card,
.vivid-title-page .vivid-cast{
  scroll-snap-align:start;
}

/* Adaptive atmosphere: the backdrop remains the source of color, never a hard panel. */
.vivid-title-page .vivid-title-backdrop-overlay{
  background:
    linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.68) 34%,rgba(0,0,0,.16) 70%,rgba(0,0,0,.3) 100%),
    linear-gradient(0deg,#000 0%,rgba(0,0,0,.12) 44%,rgba(0,0,0,.2) 100%);
}
.vivid-title-page .vivid-title-info{
  margin-top:clamp(-145px,-11vw,-70px);
}

/* Watch page: the picture gets priority over the surrounding application chrome. */
.vivid-watch-page{
  background:#000!important;
}
.vivid-watch-page .vivid-watch-backdrop{
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.98),rgba(0,0,0,.64) 50%,rgba(0,0,0,.9)),
    linear-gradient(0deg,#000 0%,transparent 72%),
    var(--watch-backdrop);
}
.vivid-watch-page .vivid-player-frame{
  border:0;
  border-radius:12px;
  box-shadow:0 24px 80px rgba(0,0,0,.48);
}
.vivid-watch-page .vivid-player-bar{
  border-top:1px solid rgba(255,255,255,.06);
}
.vivid-watch-page .vivid-watch-rec-rail{
  scroll-snap-type:x mandatory;
  scroll-padding-inline:2px;
}
.vivid-watch-page .vivid-watch-rec-card{
  scroll-snap-align:start;
}
.vivid-watch-page .vivid-watch-rec-card img{
  border:0;
  border-radius:12px;
}

/* Avoid fake linear "motion physics" under reduced motion. */
@media(prefers-reduced-motion:reduce){
  .vivid-library-page .vivid-library-card,
  .vivid-library-page .vivid-library-tabs button,
  .vivid-title-page .vivid-cast,
  .vivid-title-page .vivid-similar-card,
  .vivid-title-page .vivid-video-card,
  .vivid-title-page .vivid-button,
  .vivid-watch-page .vivid-watch-rec-card,
  .vivid-watch-page .vivid-player-switch{
    transition:none!important;
  }
  .vivid-library-page .vivid-library-card:focus-visible,
  .vivid-title-page .vivid-cast:focus-visible,
  .vivid-title-page .vivid-similar-card:focus-visible,
  .vivid-title-page .vivid-video-card:focus-visible,
  .vivid-title-page .vivid-button:focus-visible,
  .vivid-watch-page .vivid-watch-rec-card:focus-visible{
    transform:none;
  }
}

/* Final Apple-TV-style viewport lock: this file loads last, so it owns the final rail behavior. */
html,
body{
  min-width:320px!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  overscroll-behavior-x:none!important;
}
.vivid-rail,
.vivid-feature-track{
  max-width:100%!important;
  box-sizing:border-box!important;
  scroll-padding-inline:0!important;
  overscroll-behavior-x:none!important;
  touch-action:pan-x!important;
}
.vivid-rail{
  padding-right:0!important;
}
.vivid-feature-track{
  padding-right:0!important;
}
@media(pointer:coarse){
  .vivid-rail,
  .vivid-feature-track{
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:0!important;
    overscroll-behavior-x:none!important;
    touch-action:pan-x!important;
  }
}


/* ==========================================================================
   VIVID LIQUID GLASS NAV — shared across every content page
   ========================================================================== */
.vivid-topbar{
  position:sticky!important;
  top:0;
  isolation:isolate;
  background:rgba(6,7,10,.58)!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  backdrop-filter:blur(28px) saturate(165%) contrast(108%);
  -webkit-backdrop-filter:blur(28px) saturate(165%) contrast(108%);
}
.vivid-topbar .vivid-nav{
  position:relative;
  min-height:58px;
  display:grid!important;
  grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr);
  align-items:center;
  gap:18px;
}
.vivid-topbar .vivid-brand{
  justify-self:start;
  z-index:3;
  margin:0!important;
}
.vivid-topbar .vivid-navlinks{
  justify-self:center;
  position:relative;
  display:flex!important;
  align-items:center;
  gap:3px;
  padding:4px;
  overflow:visible!important;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.035)),
    rgba(255,255,255,.035);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 10px 35px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.025);
  backdrop-filter:blur(32px) saturate(180%);
  -webkit-backdrop-filter:blur(32px) saturate(180%);
}
.vivid-topbar .vivid-navlinks:before{
  content:"";
  position:absolute;
  inset:1px 18% auto 8%;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  opacity:.65;
}
.vivid-topbar .vivid-navlinks a{
  position:relative;
  min-height:38px!important;
  padding:9px 13px!important;
  border:1px solid transparent!important;
  border-radius:13px!important;
  color:rgba(235,239,245,.66)!important;
  background:transparent!important;
  box-shadow:none!important;
  text-shadow:0 1px 8px rgba(0,0,0,.25);
  transition:color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.vivid-topbar .vivid-navlinks a:before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:11px;
  background:linear-gradient(135deg,rgba(255,255,255,.13),transparent 55%);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.vivid-topbar .vivid-navlinks a:hover{
  color:#fff!important;
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.105)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 5px 18px rgba(0,0,0,.13);
  transform:translateY(-1px);
}
.vivid-topbar .vivid-navlinks a:hover:before,
.vivid-topbar .vivid-navlinks a[aria-current="page"]:before{opacity:1}
.vivid-topbar .vivid-navlinks a[aria-current="page"]{
  color:#fff!important;
  background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.075))!important;
  border-color:rgba(255,255,255,.17)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 7px 20px rgba(0,0,0,.18);
}
.vivid-nav-account{
  justify-self:end;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:42px;
  min-height:42px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  color:rgba(240,243,248,.78)!important;
  text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 25px rgba(0,0,0,.18);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.vivid-nav-account:hover{
  color:#fff!important;
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.2);
  transform:translateY(-1px);
}
.vivid-nav-account i{font-size:1rem}
.vivid-nav-account span{font-size:.72rem;font-weight:700}
.vivid-nav-language-slot{grid-column:3;grid-row:1;justify-self:end;min-width:58px;display:flex;justify-content:flex-end}
.vivid-nav-language-slot .vivid-language{margin:0!important}
.vivid-nav-language-slot .vivid-language select{
  height:42px!important;
  min-width:58px!important;
  border-radius:14px!important;
  border-color:rgba(255,255,255,.13)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 25px rgba(0,0,0,.18);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
}
@media(max-width:900px){
  .vivid-topbar .vivid-nav{
    grid-template-columns:1fr auto;
    gap:10px;
  }
  .vivid-topbar .vivid-navlinks{display:none!important}
  .vivid-nav-account{grid-column:2;grid-row:1;justify-self:end}
  .vivid-nav-language-slot{display:flex;grid-column:3;grid-row:1}
}
@media(max-width:640px){
  .vivid-topbar{
    position:sticky!important;
    padding:calc(6px + var(--vivid-safe-top)) 14px 6px!important;
  }
  .vivid-topbar .vivid-nav{min-height:50px}
  .vivid-nav-account{grid-column:2;min-width:40px;width:40px;padding:0;border-radius:13px}
  .vivid-nav-account span{display:none}.vivid-nav-language-slot{display:flex!important;grid-column:3;grid-row:1}.vivid-nav-language-slot .vivid-language select{height:40px!important;min-width:52px!important}
}
html[data-vivid-theme="light"] .vivid-topbar{
  background:rgba(255,255,255,.62)!important;
  border-bottom-color:rgba(17,18,22,.09)!important;
}
html[data-vivid-theme="light"] .vivid-topbar .vivid-navlinks,
html[data-vivid-theme="light"] .vivid-nav-account,
html[data-vivid-theme="light"] .vivid-nav-language-slot .vivid-language select{
  border-color:rgba(17,18,22,.1)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.56))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 25px rgba(17,18,22,.08);
}
html[data-vivid-theme="light"] .vivid-topbar .vivid-navlinks a{
  color:#626873!important;
  text-shadow:none;
}
html[data-vivid-theme="light"] .vivid-topbar .vivid-navlinks a[aria-current="page"]{
  color:#111216!important;
  background:rgba(255,255,255,.78)!important;
  border-color:rgba(17,18,22,.09)!important;
}

/* Header geometry finalization: logo left, account centered, EN at far right. */
@media(min-width:901px){
  .vivid-topbar .vivid-nav{
    grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr)!important;
    grid-template-rows:58px 52px!important;
    gap:0 18px!important;
  }
  .vivid-topbar .vivid-brand{grid-column:1!important;grid-row:1!important}
  .vivid-nav-account{grid-column:2!important;grid-row:1!important;justify-self:center!important}
  .vivid-nav-language-slot{grid-column:3!important;grid-row:1!important}
  .vivid-topbar .vivid-navlinks{grid-column:1 / -1!important;grid-row:2!important}
}
@media(max-width:900px){
  .vivid-topbar .vivid-nav{
    grid-template-columns:1fr auto auto!important;
    grid-template-rows:50px!important;
    gap:8px!important;
  }
  .vivid-topbar .vivid-brand{grid-column:1!important;grid-row:1!important}
  .vivid-nav-account{grid-column:2!important;grid-row:1!important;justify-self:center!important}
  .vivid-nav-language-slot{grid-column:3!important;grid-row:1!important;justify-self:end!important}
  .vivid-topbar .vivid-navlinks{display:none!important}
}

/* Mobile primary tabs use the same liquid-glass material, not a flat bottom bar. */
.vivid-mobile-nav{
  background:rgba(8,9,12,.58)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-bottom:0!important;
  border-radius:20px 20px 0 0!important;
  box-shadow:0 -10px 35px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.12)!important;
  backdrop-filter:blur(30px) saturate(175%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(175%)!important;
}
.vivid-mobile-nav a{
  position:relative;
  margin:4px 2px!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
  color:rgba(235,239,245,.62)!important;
  background:transparent!important;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.vivid-mobile-nav a:hover,
.vivid-mobile-nav a[aria-current="page"],
.vivid-mobile-nav a.is-active{
  color:#fff!important;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.055))!important;
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 5px 18px rgba(0,0,0,.15)!important;
}
html[data-vivid-theme="light"] .vivid-mobile-nav{
  background:rgba(255,255,255,.7)!important;
  border-color:rgba(17,18,22,.1)!important;
  box-shadow:0 -8px 28px rgba(17,18,22,.08),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
html[data-vivid-theme="light"] .vivid-mobile-nav a{color:#626873!important}
html[data-vivid-theme="light"] .vivid-mobile-nav a:hover,
html[data-vivid-theme="light"] .vivid-mobile-nav a[aria-current="page"],
html[data-vivid-theme="light"] .vivid-mobile-nav a.is-active{
  color:#111216!important;
  background:rgba(255,255,255,.78)!important;
  border-color:rgba(17,18,22,.09)!important;
}

/* ==========================================================================
   FINAL LIQUID GLASS SYSTEM — canonical override
   Keep this block last so legacy shell rules cannot flatten the material.
   ========================================================================== */
.vivid-topbar{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  width:100%!important;
  box-sizing:border-box!important;
  padding:0 var(--vivid-page-gutter)!important;
  background:rgba(8,9,12,.58)!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.16)!important;
  isolation:isolate;
  backdrop-filter:blur(24px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(150%)!important;
}
.vivid-topbar .vivid-nav{
  width:min(100%,1440px)!important;
  min-height:110px!important;
  margin-inline:auto!important;
  display:grid!important;
  grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr)!important;
  grid-template-rows:58px 52px!important;
  align-items:center!important;
  gap:0 18px!important;
}
.vivid-topbar .vivid-brand{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  margin:0!important;
  z-index:2;
}
.vivid-topbar .vivid-navlinks{
  grid-column:1 / -1!important;
  grid-row:2!important;
  justify-self:center!important;
  display:flex!important;
  align-items:center!important;
  gap:2px!important;
  min-width:0!important;
  padding:4px!important;
  overflow:visible!important;
  border:1px solid rgba(255,255,255,.105)!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.045)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 8px 30px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(28px) saturate(155%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(155%)!important;
}
.vivid-topbar .vivid-navlinks a,
.vivid-topbar .vivid-nav-action{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-height:38px!important;
  padding:8px 13px!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  background:transparent!important;
  color:rgba(235,239,245,.68)!important;
  box-shadow:none!important;
  text-shadow:none!important;
  font:600 .78rem/1 var(--vivid-font-sans)!important;
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.vivid-topbar .vivid-navlinks a:hover,
.vivid-topbar .vivid-navlinks a[aria-current="page"],
.vivid-topbar .vivid-nav-action:hover{
  color:#fff!important;
  background:rgba(255,255,255,.085)!important;
  border-color:rgba(255,255,255,.105)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11)!important;
  transform:none!important;
}
.vivid-topbar .vivid-navlinks a[aria-current="page"]{
  background:rgba(255,255,255,.13)!important;
  border-color:rgba(255,255,255,.145)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 3px 12px rgba(0,0,0,.1)!important;
}
.vivid-nav-account{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:center!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-width:42px!important;
  min-height:42px!important;
  padding:0 12px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.055)!important;
  color:rgba(240,243,248,.82)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 7px 24px rgba(0,0,0,.14)!important;
  backdrop-filter:blur(22px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(150%)!important;
}
.vivid-nav-account:hover{
  color:#fff!important;
  background:rgba(255,255,255,.1)!important;
  border-color:rgba(255,255,255,.17)!important;
  transform:none!important;
}
.vivid-nav-language-slot{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:end!important;
  min-width:58px!important;
  display:flex!important;
  justify-content:flex-end!important;
}
.vivid-nav-language-slot .vivid-language{margin:0!important}
.vivid-nav-language-slot .vivid-language select{
  height:42px!important;
  min-width:58px!important;
  padding:0 27px 0 10px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.055)!important;
  color:#f5f7fa!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 7px 24px rgba(0,0,0,.14)!important;
  backdrop-filter:blur(22px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(150%)!important;
}
.vivid-nav-language-slot .vivid-language:after{right:9px!important}
.vivid-mobile-nav{
  background:rgba(8,9,12,.62)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-bottom:0!important;
  box-shadow:0 -8px 30px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.11)!important;
  backdrop-filter:blur(24px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(150%)!important;
}
.vivid-mobile-nav a{
  border:1px solid transparent!important;
  border-radius:13px!important;
  background:transparent!important;
}
.vivid-mobile-nav a:hover,
.vivid-mobile-nav a.is-active,
.vivid-mobile-nav a[aria-current="page"]{
  background:rgba(255,255,255,.095)!important;
  border-color:rgba(255,255,255,.11)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;
}
@media(max-width:900px){
  .vivid-topbar .vivid-nav{
    min-height:58px!important;
    grid-template-columns:1fr auto auto!important;
    grid-template-rows:58px!important;
    gap:8px!important;
  }
  .vivid-topbar .vivid-brand{grid-column:1!important;grid-row:1!important}
  .vivid-nav-account{grid-column:2!important;grid-row:1!important}
  .vivid-nav-language-slot{grid-column:3!important;grid-row:1!important}
  .vivid-topbar .vivid-navlinks{display:none!important}
}
@media(max-width:640px){
  .vivid-topbar{
    padding:calc(4px + var(--vivid-safe-top)) 12px 4px!important;
  }
  .vivid-topbar .vivid-nav{min-height:50px!important}
  .vivid-nav-account{min-width:40px!important;width:40px!important;padding:0!important;border-radius:12px!important}
  .vivid-nav-account span{display:none!important}
  .vivid-nav-language-slot .vivid-language select{height:40px!important;min-width:52px!important;border-radius:12px!important}
}
html[data-vivid-theme="light"] .vivid-topbar{
  background:rgba(255,255,255,.62)!important;
  border-bottom-color:rgba(17,18,22,.08)!important;
  box-shadow:0 10px 30px rgba(17,18,22,.06)!important;
}
html[data-vivid-theme="light"] .vivid-topbar .vivid-navlinks,
html[data-vivid-theme="light"] .vivid-nav-account,
html[data-vivid-theme="light"] .vivid-nav-language-slot .vivid-language select{
  background:rgba(255,255,255,.58)!important;
  border-color:rgba(17,18,22,.09)!important;
  color:#22252b!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 7px 24px rgba(17,18,22,.07)!important;
}
html[data-vivid-theme="light"] .vivid-topbar .vivid-navlinks a,
html[data-vivid-theme="light"] .vivid-topbar .vivid-nav-action{
  color:#626873!important;
}
html[data-vivid-theme="light"] .vivid-topbar .vivid-navlinks a:hover,
html[data-vivid-theme="light"] .vivid-topbar .vivid-navlinks a[aria-current="page"],
html[data-vivid-theme="light"] .vivid-topbar .vivid-nav-action:hover{
  color:#111216!important;
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(17,18,22,.08)!important;
}
html[data-vivid-theme="light"] .vivid-mobile-nav{
  background:rgba(255,255,255,.68)!important;
  border-color:rgba(17,18,22,.08)!important;
}
html[data-vivid-theme="light"] .vivid-mobile-nav a.is-active,
html[data-vivid-theme="light"] .vivid-mobile-nav a[aria-current="page"]{
  color:#111216!important;
  background:rgba(255,255,255,.74)!important;
  border-color:rgba(17,18,22,.08)!important;
}

/* Extend the shared canvas to the remaining full-page dark surfaces.
   This deliberately does not recolor hero art, cards, controls, dialogs, or video players. */
html:not([data-vivid-theme="light"]) body.vivid-anime-page,
html:not([data-vivid-theme="light"]) body.vivid-collection-page,
html:not([data-vivid-theme="light"]) body.vivid-live-page,
html:not([data-vivid-theme="light"]) body.vivid-landing{
  background-color:#071426!important;
}
html:not([data-vivid-theme="light"]) body.vivid-collection-page .vivid-collection-app,
html:not([data-vivid-theme="light"]) body.vivid-landing .vivid-landing-shell,
html:not([data-vivid-theme="light"]) body.account-page,
html:not([data-vivid-theme="light"]) .account-page{
  background-color:#071426!important;
}


/* Vivid Editorial System — shared across desktop, mobile web and installed PWA.
   Keep this foundational: page-specific layouts and product colors remain intact. */
:root{
  --vivid-editorial-accent:#c7ff55;
  --vivid-editorial-bg:#080a0e;
  --vivid-editorial-surface:#111318;
  --vivid-editorial-raised:#191b21;
  --vivid-editorial-ink:#f4f2ed;
  --vivid-editorial-muted:#b7b6bc;
  --vivid-editorial-dim:#92939a;
  --vivid-editorial-serif:Georgia,"Times New Roman",serif;
  --vivid-editorial-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html{color-scheme:dark}
body{
  color:var(--vivid-editorial-ink);
  font-family:var(--vivid-editorial-sans);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
:where(h1,h2,h3,.vivid-page-title,.vivid-section-title){
  text-wrap:balance;
}
:where(button,input,select,textarea){font-family:inherit}
:where(input,select,textarea){
  color:var(--vivid-editorial-ink);
}
:where(a,button){
  -webkit-tap-highlight-color:rgba(199,255,85,.12);
}
:where(a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible){
  outline:2px solid var(--vivid-editorial-accent);
  outline-offset:3px;
}
:where(.vivid-button,.vivid-nav-action,.vivid-search-submit){
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
@media(hover:hover){
  :where(.vivid-button,.vivid-nav-action):hover{border-color:rgba(199,255,85,.38)}
}
@media(prefers-reduced-motion:reduce){
  :where(*, *::before, *::after){scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}