/* Vivid Cinema Liquid Glass v3 + premium + audit + header breathe. Load LAST. */
:root{--lg-blur:40px;--lg-blur-strong:56px;--lg-stroke:rgba(255,255,255,.34);--lg-stroke-strong:rgba(255,255,255,.5);--lg-panel:rgba(255,255,255,.07);--lg-radius:24px;--lg-radius-pill:999px}
body.vivid-atmosphere{isolation:isolate}
body.vivid-atmosphere::after{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 40% at 20% 30%,rgba(120,170,255,.22),transparent 55%),radial-gradient(ellipse 45% 35% at 80% 20%,rgba(200,120,255,.16),transparent 50%),radial-gradient(ellipse 55% 40% at 60% 80%,rgba(80,220,200,.14),transparent 55%),radial-gradient(ellipse 40% 30% at 30% 70%,rgba(255,140,100,.1),transparent 50%);filter:blur(60px) saturate(140%);animation:lgLiquidDrift 18s ease-in-out infinite alternate;opacity:.9}
@keyframes lgLiquidDrift{0%{transform:translate(0,0) scale(1)}33%{transform:translate(3%,-2%) scale(1.06)}66%{transform:translate(-2%,3%) scale(.97)}100%{transform:translate(2%,1%) scale(1.04)}}
@keyframes lgSheen{0%{background-position:-120% 0}100%{background-position:220% 0}}
@keyframes lgGlowPulse{0%,100%{box-shadow:0 0 0 0 transparent,inset 0 1px 0 rgba(255,255,255,.2)}50%{box-shadow:0 0 24px rgba(160,190,255,.18),inset 0 1px 0 rgba(255,255,255,.35)}}
@keyframes lgTabSlide{from{transform:scale(.92);opacity:.6}to{transform:scale(1);opacity:1}}

body.vivid-atmosphere .vivid-filter-panel,body.vivid-atmosphere .vivid-collection-toolbar,body.vivid-atmosphere .vivid-library-tabs,body.vivid-atmosphere .account-card,body.vivid-atmosphere .auth-container,body.vivid-atmosphere .vivid-search-panel,body.vivid-atmosphere .vivid-release-popover,body.vivid-atmosphere .vivid-collection-card{position:relative;overflow:hidden;background:var(--lg-panel)!important;border:1px solid var(--lg-stroke)!important;border-radius:var(--lg-radius)!important;backdrop-filter:blur(var(--lg-blur)) saturate(200%) brightness(1.05)!important;-webkit-backdrop-filter:blur(var(--lg-blur)) saturate(200%) brightness(1.05)!important;box-shadow:0 16px 48px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.28)!important}
body.vivid-atmosphere .vivid-filter-panel::after,body.vivid-atmosphere .vivid-search-panel::after,body.vivid-atmosphere .vivid-release-popover::after,body.vivid-atmosphere .auth-container::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.14) 48%,transparent 62%);background-size:220% 100%;animation:lgSheen 7s ease-in-out infinite;pointer-events:none!important;z-index:0;mix-blend-mode:soft-light}
body.vivid-atmosphere .vivid-filter-panel>*,body.vivid-atmosphere .vivid-search-panel>*,body.vivid-atmosphere .vivid-release-popover>*,body.vivid-atmosphere .auth-container>*{position:relative;z-index:1}

body.vivid-atmosphere .vivid-topbar,body.vivid-atmosphere .vivid-discovery-nav,body.vivid-atmosphere .vivid-title-nav,body.vivid-atmosphere .vivid-library-nav,body.vivid-atmosphere .vivid-watch-nav{background:rgba(255,255,255,.06)!important;backdrop-filter:blur(var(--lg-blur-strong)) saturate(210%) brightness(1.08)!important;-webkit-backdrop-filter:blur(var(--lg-blur-strong)) saturate(210%) brightness(1.08)!important;border-bottom:1px solid var(--lg-stroke)!important;box-shadow:0 12px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.22)!important;z-index:1000!important;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease!important}
body.vivid-atmosphere .vivid-topbar.is-scrolled,body.vivid-atmosphere .vivid-discovery-nav.is-scrolled,body.vivid-atmosphere .vivid-title-nav.is-scrolled,body.vivid-atmosphere .vivid-library-nav.is-scrolled,body.vivid-atmosphere .vivid-watch-nav.is-scrolled{background:rgba(255,255,255,.11)!important;border-bottom-color:rgba(255,255,255,.42)!important;backdrop-filter:blur(60px) saturate(220%) brightness(1.1)!important;-webkit-backdrop-filter:blur(60px) saturate(220%) brightness(1.1)!important}

/* Header: standard float layout, room to breathe */
body.vivid-atmosphere .vivid-discovery-nav,body.vivid-atmosphere .vivid-library-nav,body.vivid-atmosphere .vivid-title-nav,body.vivid-atmosphere .vivid-watch-nav{display:flex!important;align-items:center!important;gap:20px!important;min-width:0!important;width:100%;justify-content:flex-start!important}
body.vivid-atmosphere .vivid-brand{flex:0 1 auto;min-width:0}
body.vivid-atmosphere .vivid-navlinks{display:flex!important;flex:1 1 auto;min-width:0;gap:6px!important;margin-right:auto!important;align-items:center}
body.vivid-atmosphere .vivid-navlinks a,body.vivid-atmosphere .vivid-discovery-nav nav a{border-radius:12px!important;padding:9px 14px!important;background:transparent!important;border:0!important;box-shadow:none!important;transition:background .2s ease,color .2s ease!important}
body.vivid-atmosphere .vivid-navlinks a:hover,body.vivid-atmosphere .vivid-navlinks a[aria-current=true],body.vivid-atmosphere .vivid-discovery-nav nav a.is-active,body.vivid-atmosphere .vivid-discovery-nav nav a:hover{background:rgba(255,255,255,.08)!important;color:#fff!important;box-shadow:none!important;transform:none!important}
body.vivid-atmosphere .vivid-navlinks a[aria-current=true],body.vivid-atmosphere .vivid-discovery-nav nav a.is-active{background:rgba(255,255,255,.12)!important}

body.vivid-atmosphere .vivid-nav-search{flex:0 0 auto!important;margin-left:auto!important;margin-right:4px!important}
body.vivid-atmosphere .vivid-notification-button,body.vivid-atmosphere .vivid-language,body.vivid-atmosphere a.vivid-nav-action{flex:0 0 auto!important;margin-left:8px!important;background:transparent!important;border:0!important;box-shadow:none!important}
body.vivid-atmosphere .vivid-notification-button:hover,body.vivid-atmosphere a.vivid-nav-action:hover{background:rgba(255,255,255,.08)!important;box-shadow:none!important}
body.vivid-atmosphere .vivid-language select{background:transparent!important;border:0!important;box-shadow:none!important;padding-inline:8px!important}

body.vivid-atmosphere .vivid-nav-search input,body.vivid-atmosphere .vivid-discovery-search input{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:var(--lg-radius-pill)!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;box-shadow:none!important}
body.vivid-atmosphere .vivid-nav-search input:focus,body.vivid-atmosphere .vivid-discovery-search input:focus{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.28)!important;box-shadow:0 0 0 3px rgba(160,190,255,.12)!important}

@media (min-width:901px){body.vivid-atmosphere .vivid-nav-search{width:min(280px,26vw)!important;max-width:280px!important;min-width:180px!important;margin-left:auto!important}body.vivid-atmosphere .vivid-nav-search input{height:40px!important;width:100%!important;font-size:.9rem!important;padding:0 16px 0 40px!important}body.vivid-atmosphere .vivid-notification-button,body.vivid-atmosphere a.vivid-nav-action{width:auto!important;min-width:40px!important;height:40px!important;max-width:none!important;padding:0 12px!important}}

@media (min-width:641px){body.vivid-atmosphere .vivid-mobile-nav,.vivid-mobile-nav{display:none!important;visibility:hidden!important;pointer-events:none!important;height:0!important;overflow:hidden!important}body.vivid-atmosphere .vivid-footer{padding-bottom:40px!important}body.vivid-atmosphere .vivid-home main,body.vivid-atmosphere .vivid-discovery-main,body.vivid-atmosphere .vivid-library-main{padding-bottom:40px!important}}

@media (max-width:640px){body.vivid-atmosphere .vivid-mobile-nav{position:fixed!important;display:flex!important;left:12px!important;right:12px!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;height:64px!important;z-index:1100!important;padding:5px 6px!important;border-radius:24px!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.38)!important;backdrop-filter:blur(56px) saturate(220%) brightness(1.1)!important;-webkit-backdrop-filter:blur(56px) saturate(220%) brightness(1.1)!important;box-shadow:0 16px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35)!important;overflow:hidden;animation:lgGlowPulse 4s ease-in-out infinite}body.vivid-atmosphere .vivid-mobile-nav::before{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at 30% 20%,rgba(140,180,255,.25),transparent 40%),radial-gradient(circle at 70% 80%,rgba(200,130,255,.18),transparent 40%);filter:blur(20px);animation:lgLiquidDrift 12s ease-in-out infinite alternate;pointer-events:none!important;z-index:0}body.vivid-atmosphere .vivid-mobile-nav::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);background-size:200% 100%;animation:lgSheen 5s ease-in-out infinite;pointer-events:none!important;z-index:0;mix-blend-mode:soft-light}body.vivid-atmosphere .vivid-mobile-nav a{position:relative;z-index:1;flex:1 1 0;min-width:0;border-radius:16px;font-size:.58rem!important;padding:6px 2px!important}body.vivid-atmosphere .vivid-mobile-nav a i{font-size:1.2rem!important}body.vivid-atmosphere .vivid-mobile-nav a.is-active{background:rgba(255,255,255,.2)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);animation:lgTabSlide .35s cubic-bezier(.34,1.4,.64,1)}body.vivid-atmosphere .vivid-mobile-nav a.is-active i{transform:scale(1.12)}body.vivid-atmosphere .vivid-section-wrap,body.vivid-atmosphere .vivid-home main,body.vivid-atmosphere .vivid-discovery-main,body.vivid-atmosphere .vivid-library-main,body.vivid-atmosphere .vivid-title-section,body.vivid-atmosphere .vivid-watch-shell{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}body.vivid-atmosphere .vivid-footer{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))!important}body.vivid-atmosphere .vivid-release-popover{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;top:auto!important}body.vivid-atmosphere .vivid-card:hover,body.vivid-atmosphere .vivid-feature-card:hover{transform:none!important}}

body.vivid-atmosphere .vivid-button--secondary, body.vivid-atmosphere .vivid-button--ghost, body.vivid-atmosphere .vivid-icon-button, body.vivid-atmosphere .vivid-rail-controls button, body.vivid-atmosphere .vivid-rail-see-all, body.vivid-atmosphere .vivid-rail-load, body.vivid-atmosphere .vivid-page-back, body.vivid-atmosphere .vivid-mode-chip, body.vivid-atmosphere .vivid-type-row button, body.vivid-atmosphere .vivid-provider-chip, body.vivid-atmosphere .vivid-catalogue-chips a, body.vivid-atmosphere .vivid-pill{background:rgba(255,255,255,.09)!important;border:1px solid var(--lg-stroke)!important;backdrop-filter:blur(20px) saturate(180%)!important;-webkit-backdrop-filter:blur(20px) saturate(180%)!important;box-shadow:0 4px 18px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.22)!important}
body.vivid-atmosphere .vivid-button--secondary:hover,body.vivid-atmosphere .vivid-button--ghost:hover,body.vivid-atmosphere .vivid-mode-chip:hover,body.vivid-atmosphere .vivid-mode-chip.is-active,body.vivid-atmosphere .vivid-type-row button.is-active,body.vivid-atmosphere .vivid-provider-chip.is-active,body.vivid-atmosphere .vivid-catalogue-chips a:hover,body.vivid-atmosphere .vivid-rail-see-all:hover,body.vivid-atmosphere .vivid-rail-load:hover{background:rgba(255,255,255,.18)!important;border-color:var(--lg-stroke-strong)!important;color:#fff!important}
body.vivid-atmosphere .vivid-button--secondary:active,body.vivid-atmosphere .vivid-button--ghost:active,body.vivid-atmosphere .vivid-mode-chip:active,body.vivid-atmosphere .vivid-type-row button:active,body.vivid-atmosphere .vivid-provider-chip:active,body.vivid-atmosphere .vivid-catalogue-chips a:active,body.vivid-atmosphere .vivid-mobile-nav a:active,body.vivid-atmosphere .vivid-rail-see-all:active{transform:scale(.96)!important;transition-duration:.08s!important}

body.vivid-atmosphere .vivid-card,body.vivid-atmosphere .vivid-feature-card,body.vivid-atmosphere .vivid-discovery-poster{border:1px solid rgba(255,255,255,.2)!important;box-shadow:0 14px 36px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.14)!important}
body.vivid-atmosphere .vivid-rating,body.vivid-atmosphere .vivid-card-signal,body.vivid-atmosphere .vivid-discovery-rating{background:rgba(255,255,255,.1)!important;border:1px solid var(--lg-stroke)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
body.vivid-atmosphere .vivid-filter-row select{background:rgba(255,255,255,.08)!important;border:1px solid var(--lg-stroke)!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;color:#fff!important}
body.vivid-atmosphere .vivid-library-tabs button{background:transparent!important;border-radius:14px!important}
body.vivid-atmosphere .vivid-library-tabs button.is-active{background:rgba(255,255,255,.14)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)!important}

body.vivid-atmosphere .vivid-type-row{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);position:relative;z-index:1;width:fit-content;max-width:100%}
body.vivid-atmosphere .vivid-type-row button{border:0!important;background:transparent!important;box-shadow:none!important}
body.vivid-atmosphere .vivid-type-row button.is-active{background:rgba(255,255,255,.2)!important;color:#fff!important}

body.vivid-atmosphere .vivid-filter-panel{position:relative!important;top:auto!important;z-index:1!important}
body.vivid-atmosphere .vivid-search-panel,body.vivid-atmosphere .vivid-release-popover{z-index:1200!important;max-width:min(420px,calc(100vw - 24px))!important}
body.vivid-atmosphere .vivid-ambient-art{z-index:0!important}

html,body{max-width:100%!important;overflow-x:clip!important;overscroll-behavior-x:none}
body.vivid-atmosphere,.vivid-home,.vivid-discovery-app,.vivid-library-app,.vivid-title-app,.vivid-watch-app{max-width:100%!important;overflow-x:clip!important}
body.vivid-atmosphere .vivid-rail,body.vivid-atmosphere .vivid-feature-track,body.vivid-atmosphere .vivid-provider-strip{max-width:100%;overscroll-behavior-x:contain}

body.vivid-atmosphere a:focus,body.vivid-atmosphere button:focus,body.vivid-atmosphere input:focus,body.vivid-atmosphere select:focus{outline:none}
body.vivid-atmosphere a:focus-visible,body.vivid-atmosphere button:focus-visible,body.vivid-atmosphere input:focus-visible,body.vivid-atmosphere select:focus-visible{outline:none!important;box-shadow:0 0 0 2px rgba(12,14,20,.65),0 0 0 4px rgba(200,215,255,.45)!important}

body.vivid-atmosphere .vivid-discovery-empty,body.vivid-atmosphere .vivid-discovery-error,body.vivid-atmosphere #collection-empty{max-width:420px;margin-left:auto;margin-right:auto;padding:48px 28px!important;border-radius:24px!important;background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.22)!important;backdrop-filter:blur(32px) saturate(180%)!important;-webkit-backdrop-filter:blur(32px) saturate(180%)!important}

body.vivid-atmosphere .vivid-filter-panel::before,body.vivid-atmosphere .vivid-filter-panel::after,body.vivid-atmosphere .vivid-search-panel::before,body.vivid-atmosphere .vivid-search-panel::after,body.vivid-atmosphere .vivid-mobile-nav::before,body.vivid-atmosphere .vivid-mobile-nav::after{pointer-events:none!important}

@media (max-width:900px){body.vivid-atmosphere .vivid-navlinks{display:none!important}body.vivid-atmosphere .vivid-nav{gap:12px!important}body.vivid-atmosphere .vivid-nav-search{width:40px!important;min-width:40px!important;max-width:40px!important;margin-left:auto!important;margin-right:0!important}body.vivid-atmosphere .vivid-nav-search input{width:40px!important;height:40px!important;padding:0!important;font-size:0!important}body.vivid-atmosphere .vivid-nav-search i{left:50%!important;top:50%!important;transform:translate(-50%,-50%)}body.vivid-atmosphere .vivid-nav-search:focus-within{position:absolute!important;left:10px!important;right:10px!important;top:calc(100% + 8px)!important;width:auto!important;max-width:none!important;height:46px;z-index:5}body.vivid-atmosphere .vivid-nav-search:focus-within input{width:100%!important;height:46px!important;padding:0 14px 0 42px!important;font-size:16px!important}body.vivid-atmosphere .vivid-nav-search:focus-within i{left:14px!important;transform:translateY(-50%)}body.vivid-atmosphere .vivid-notification-button,body.vivid-atmosphere a.vivid-nav-action{width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;display:inline-grid!important;place-items:center!important;border-radius:999px!important;margin-left:6px!important;background:transparent!important;border:0!important}body.vivid-atmosphere .vivid-search-panel,body.vivid-atmosphere .vivid-release-popover{left:12px!important;right:12px!important;width:auto!important;max-width:none!important}}

@media (prefers-reduced-motion:reduce){body.vivid-atmosphere::after,body.vivid-atmosphere .vivid-mobile-nav,body.vivid-atmosphere .vivid-mobile-nav::before,body.vivid-atmosphere .vivid-mobile-nav::after,body.vivid-atmosphere .vivid-filter-panel::after{animation:none!important}}
@media (prefers-reduced-transparency:reduce){body.vivid-atmosphere::after{display:none!important}body.vivid-atmosphere .vivid-topbar,body.vivid-atmosphere .vivid-discovery-nav,body.vivid-atmosphere .vivid-mobile-nav,body.vivid-atmosphere .vivid-filter-panel{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(16,18,24,.94)!important}}


/* Unified Vivid material layer — theme-aware and intentionally restrained. */
body.vivid-atmosphere{
  background:var(--vivid-bg)!important;
  color:var(--vivid-text)!important;
}
body.vivid-atmosphere::after{
  opacity:.72;
  filter:blur(70px) saturate(125%);
}
body.vivid-atmosphere .vivid-topbar,
body.vivid-atmosphere .vivid-discovery-nav,
body.vivid-atmosphere .vivid-title-nav,
body.vivid-atmosphere .vivid-library-nav,
body.vivid-atmosphere .vivid-watch-nav{
  background:var(--vivid-material)!important;
  border-bottom-color:var(--vivid-border)!important;
  box-shadow:0 10px 36px rgba(0,0,0,.18),inset 0 1px 0 var(--vivid-highlight)!important;
}
body.vivid-atmosphere .vivid-card,
body.vivid-atmosphere .vivid-feature-card,
body.vivid-atmosphere .vivid-discovery-poster{
  border-color:var(--vivid-border)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.22),inset 0 1px 0 var(--vivid-highlight)!important;
  transition:border-color var(--vivid-duration-ui) ease,box-shadow var(--vivid-duration-ui) ease,transform var(--vivid-duration-ui) var(--vivid-motion);
}
body.vivid-atmosphere .vivid-card:hover,
body.vivid-atmosphere .vivid-feature-card:hover{
  border-color:var(--vivid-border-strong)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.28),inset 0 1px 0 var(--vivid-highlight)!important;
}
html[data-vivid-theme="light"] body.vivid-atmosphere::after{
  opacity:.45;
  filter:blur(80px) saturate(105%);
}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-discovery-nav nav a,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-navlinks a{
  color:var(--vivid-text-muted)!important;
}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-discovery-nav nav a.is-active,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-discovery-nav nav a:hover,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-navlinks a[aria-current="true"],
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-navlinks a:hover{
  color:var(--vivid-text)!important;
  background:rgba(20,28,40,.08)!important;
}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-filter-panel,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-collection-toolbar,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-search-panel,
html[data-vivid-theme="light"] body.vivid-atmosphere .account-card,
html[data-vivid-theme="light"] body.vivid-atmosphere .auth-container{
  background:rgba(255,255,255,.68)!important;
  border-color:rgba(20,28,40,.13)!important;
  box-shadow:0 18px 50px rgba(20,28,40,.10),inset 0 1px 0 rgba(255,255,255,.8)!important;
}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-filter-row select,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-discovery-search input,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-nav-search input{
  color:var(--vivid-text)!important;
  background:rgba(255,255,255,.74)!important;
  border-color:var(--vivid-border)!important;
}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-rating,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-card-signal,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-discovery-rating{
  color:var(--vivid-text)!important;
  background:rgba(255,255,255,.72)!important;
  border-color:var(--vivid-border)!important;
}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-mobile-nav{
  background:rgba(255,255,255,.68)!important;
  border-color:rgba(20,28,40,.16)!important;
  box-shadow:0 16px 50px rgba(20,28,40,.18),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-mobile-nav a.is-active{
  color:var(--vivid-text)!important;
  background:rgba(20,28,40,.09)!important;
  box-shadow:inset 0 0 0 1px rgba(20,28,40,.14)!important;
}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-mobile-nav::before,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-mobile-nav::after{
  opacity:.3;
}


/* Search readability + light-theme contrast safety. Keep the search field above all glass effects. */
.vivid-nav-search,.vivid-discovery-search{position:relative;z-index:20!important}
.vivid-nav-search input,.vivid-discovery-search input{position:relative;z-index:21!important;color:var(--vivid-text)!important;-webkit-text-fill-color:var(--vivid-text)!important;caret-color:var(--vivid-text)!important;text-shadow:none!important;opacity:1!important;filter:none!important;}
.vivid-nav-search input::placeholder,.vivid-discovery-search input::placeholder{color:var(--vivid-text-subtle)!important;-webkit-text-fill-color:var(--vivid-text-subtle)!important;opacity:1!important}
body.vivid-atmosphere .vivid-nav-search input,body.vivid-atmosphere .vivid-discovery-search input{background:rgba(255,255,255,.11)!important;color:var(--vivid-text)!important;-webkit-text-fill-color:var(--vivid-text)!important}
body.vivid-atmosphere .vivid-search-panel{z-index:30!important}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-topbar,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-discovery-nav,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-title-nav,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-library-nav,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-watch-nav{background:rgba(255,255,255,.78)!important;border-bottom-color:rgba(20,28,40,.14)!important;box-shadow:0 12px 40px rgba(20,28,40,.10),inset 0 1px 0 rgba(255,255,255,.9)!important}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-navlinks a:hover,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-navlinks a[aria-current=true],
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-discovery-nav nav a.is-active,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-discovery-nav nav a:hover{color:#10131a!important;background:rgba(20,28,40,.08)!important}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-nav-search input,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-discovery-search input{background:rgba(255,255,255,.94)!important;border-color:rgba(20,28,40,.18)!important;color:#10131a!important;-webkit-text-fill-color:#10131a!important;box-shadow:0 4px 18px rgba(20,28,40,.08)!important}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-nav-search input::placeholder,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-discovery-search input::placeholder{color:#626a76!important;-webkit-text-fill-color:#626a76!important}


/* Final header/search interaction pass — keep the brand clear and make the
   search surface appear immediately on focus/tap, before any typing. */
body.vivid-atmosphere .vivid-topbar{
  position:relative;
}
body.vivid-atmosphere .vivid-nav{
  min-height:56px;
  align-items:center;
  gap:clamp(10px,1.4vw,18px);
}
body.vivid-atmosphere .vivid-site-brand,
body.vivid-atmosphere .vivid-brand{
  flex:0 0 auto;
  min-width:max-content;
}
body.vivid-atmosphere .vivid-nav-search{
  box-sizing:border-box;
}
@media (min-width:901px){
  body.vivid-atmosphere .vivid-nav{
    padding-inline:clamp(12px,1.8vw,28px);
  }
  body.vivid-atmosphere .vivid-nav-search{
    margin-left:auto;
  }
}
@media (max-width:900px){
  body.vivid-atmosphere .vivid-topbar:has(.vivid-nav-search:focus-within){
    padding-bottom:70px!important;
  }
  body.vivid-atmosphere .vivid-topbar .vivid-nav{
    position:relative;
  }
  body.vivid-atmosphere .vivid-topbar .vivid-nav-search:focus-within{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:calc(100% + 10px)!important;
    bottom:auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:48px!important;
    margin:0!important;
    z-index:120!important;
  }
  body.vivid-atmosphere .vivid-topbar .vivid-nav-search:focus-within input{
    display:block!important;
    width:100%!important;
    height:48px!important;
    min-height:48px!important;
    padding:0 16px 0 44px!important;
    font-size:16px!important;
    line-height:48px!important;
    visibility:visible!important;
  }
  body.vivid-atmosphere .vivid-topbar .vivid-nav-search:focus-within i{
    left:16px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    z-index:2!important;
  }
  body.vivid-atmosphere .vivid-topbar .vivid-search-panel{
    position:absolute!important;
    top:58px!important;
    left:0!important;
    right:0!important;
    width:auto!important;
    z-index:121!important;
  }
}
@media (max-width:640px){
  body.vivid-atmosphere .vivid-topbar:has(.vivid-nav-search:focus-within){
    padding-bottom:68px!important;
  }
}


/* Vivid UI audit — final theme contrast + floating chrome pass.
   Keep the header visually weightless: no glass slab, blur, shadow or separator.
   Light mode is a real theme, not a white background behind dark-mode text. */
body.vivid-atmosphere .vivid-topbar,
body.vivid-atmosphere .vivid-discovery-nav,
body.vivid-atmosphere .vivid-title-nav,
body.vivid-atmosphere .vivid-library-nav,
body.vivid-atmosphere .vivid-watch-nav{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
}
body.vivid-atmosphere .vivid-nav,
body.vivid-atmosphere .vivid-discovery-nav,
body.vivid-atmosphere .vivid-title-nav,
body.vivid-atmosphere .vivid-library-nav,
body.vivid-atmosphere .vivid-watch-nav{gap:clamp(8px,1vw,14px)!important}
body.vivid-atmosphere .vivid-brand,
body.vivid-atmosphere .vivid-site-brand{flex:0 0 auto!important;min-width:max-content!important;margin:0!important;text-shadow:none!important}
body.vivid-atmosphere .vivid-navlinks{flex:0 1 auto!important;margin:0!important;gap:2px!important}
body.vivid-atmosphere .vivid-navlinks a,
body.vivid-atmosphere .vivid-discovery-nav nav a{padding:8px 10px!important}
body.vivid-atmosphere .vivid-nav-search{flex:0 0 clamp(170px,20vw,260px)!important;width:clamp(170px,20vw,260px)!important;min-width:0!important;margin-left:auto!important;margin-right:0!important}
body.vivid-atmosphere .vivid-nav-search input,
body.vivid-atmosphere .vivid-discovery-search input{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
body.vivid-atmosphere .vivid-notification-button,
body.vivid-atmosphere .vivid-language,
body.vivid-atmosphere a.vivid-nav-action,
body.vivid-atmosphere .vivid-theme-toggle{margin-left:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.vivid-atmosphere .vivid-notification-button:hover,
body.vivid-atmosphere a.vivid-nav-action:hover,
body.vivid-atmosphere .vivid-theme-toggle:hover{box-shadow:none!important}
@media (min-width:901px){
  body.vivid-atmosphere .vivid-nav{min-height:52px!important;padding-inline:clamp(8px,1.2vw,18px)!important}
  body.vivid-atmosphere .vivid-navlinks{max-width:max-content!important}
  body.vivid-atmosphere .vivid-nav-search{margin-left:auto!important}
}
@media (max-width:900px){
  body.vivid-atmosphere .vivid-nav{gap:8px!important}
  body.vivid-atmosphere .vivid-nav-search{flex:0 0 40px!important;width:40px!important;min-width:40px!important}
}

/* Theme-safe page surfaces. */
html[data-vivid-theme="light"] body.vivid-atmosphere,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-home,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-discovery-app,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-collection-app,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-library-app,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-title-app,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-watch-app{background:var(--vivid-bg)!important;color:var(--vivid-text)!important}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-feature-strip,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-footer{background:var(--vivid-bg)!important;color:var(--vivid-text-muted)!important;border-color:var(--vivid-border)!important}

/* Common dark-mode text literals that previously survived the theme switch. */
html[data-vivid-theme="light"] body.vivid-atmosphere :is(
  .vivid-rail-head h2,.vivid-card-title,.vivid-discovery-copy strong,.vivid-collection-heading h2,
  .vivid-library-header h1,.vivid-library-card strong,.vivid-library-empty h2,.vivid-results-head h2,
  .vivid-title-copy h1,.vivid-section-heading h2,.vivid-watch-head h1,.vivid-watch-recommendations h2,
  .account-header h1,.account-card h2,.auth-container h1
){color:var(--vivid-text)!important}
html[data-vivid-theme="light"] body.vivid-atmosphere :is(
  .vivid-rail-head p,.vivid-card-sub,.vivid-discovery-copy small,.vivid-discovery-empty,.vivid-discovery-error,
  .vivid-collection-intro p,.vivid-collection-heading p,.vivid-library-header p,.vivid-library-empty,
  .vivid-title-copy p,.vivid-watch-head p,.vivid-watch-note,.vivid-watch-error p,.account-header p,
  .account-field label,.account-status,.account-toggle small,.auth-container>p,.auth-switch,.auth-help-row
){color:var(--vivid-text-muted)!important}

/* Light controls: readable text, real borders, no dark-mode white-on-white. */
html[data-vivid-theme="light"] body.vivid-atmosphere :is(
  .vivid-filter-panel,.vivid-collection-toolbar,.vivid-library-tabs,.vivid-search-panel,.vivid-release-popover,
  .account-card,.auth-container,.vivid-collection-card,.vivid-discovery-empty,.vivid-discovery-error
){
  color:var(--vivid-text)!important;background:rgba(255,255,255,.92)!important;border-color:var(--vivid-border)!important;
  box-shadow:0 12px 34px rgba(20,28,40,.08)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
html[data-vivid-theme="light"] body.vivid-atmosphere :is(
  .vivid-input,.vivid-select,.vivid-filter-row select,.vivid-collection-toolbar select,.vivid-collection-toolbar>button,
  .account-field input,.account-field select,.auth-container input,.vivid-season-select-wrap select
){
  color:var(--vivid-text)!important;background:#fff!important;border-color:var(--vivid-border)!important;
  -webkit-text-fill-color:var(--vivid-text)!important;box-shadow:none!important
}
html[data-vivid-theme="light"] body.vivid-atmosphere :is(
  .vivid-input::placeholder,.vivid-nav-search input::placeholder,.vivid-discovery-search input::placeholder
){color:var(--vivid-text-subtle)!important;-webkit-text-fill-color:var(--vivid-text-subtle)!important;opacity:1!important}
html[data-vivid-theme="light"] body.vivid-atmosphere :is(
  .vivid-button--secondary,.vivid-button--ghost,.vivid-icon-button,.vivid-rail-controls button,.vivid-rail-see-all,
  .vivid-rail-load,.vivid-page-back,.vivid-mode-chip,.vivid-provider-chip,.vivid-catalogue-chips a,.vivid-pill,.vivid-type-row
){
  color:var(--vivid-text)!important;background:rgba(20,28,40,.045)!important;border-color:var(--vivid-border)!important;
  box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
html[data-vivid-theme="light"] body.vivid-atmosphere :is(
  .vivid-button--secondary:hover,.vivid-button--ghost:hover,.vivid-mode-chip:hover,.vivid-mode-chip.is-active,
  .vivid-provider-chip:hover,.vivid-provider-chip.is-active,.vivid-catalogue-chips a:hover,.vivid-rail-see-all:hover,.vivid-rail-load:hover
){color:var(--vivid-text)!important;background:rgba(20,28,40,.09)!important;border-color:var(--vivid-border-strong)!important}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-search-result,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-search-recent{color:var(--vivid-text)!important}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-search-result:hover,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-search-recent:hover{background:rgba(20,28,40,.06)!important}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-search-result small{color:var(--vivid-text-muted)!important}

/* Light-mode cards keep artwork strong while making surrounding copy legible. */
html[data-vivid-theme="light"] body.vivid-atmosphere :is(
  .vivid-card,.vivid-feature-card,.vivid-discovery-poster,.vivid-library-card,.vivid-video-card,.vivid-similar-card
){border-color:var(--vivid-border)!important;background:#fff!important;box-shadow:0 10px 28px rgba(20,28,40,.08)!important}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-library-card>a{background:#fff!important;border-color:var(--vivid-border)!important;box-shadow:none!important}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-rating,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-card-signal,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-discovery-rating{
  color:var(--vivid-text)!important;background:rgba(255,255,255,.94)!important;border-color:var(--vivid-border)!important;
  box-shadow:0 4px 14px rgba(20,28,40,.08)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-kicker, html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-meta{color:#f5f7fa!important}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-footer-links a{color:var(--vivid-text-muted)!important}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-footer-links a:hover{color:var(--vivid-text)!important}

/* Floating header items: brand, search, bell, account and theme control sit directly on the page. */
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-brand,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-site-brand{color:var(--vivid-text)!important}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-brand span,
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-site-brand .vivid-brand-wordmark>span{color:var(--vivid-text-muted)!important}
html[data-vivid-theme="light"] body.vivid-atmosphere :is(.vivid-notification-button,a.vivid-nav-action,.vivid-theme-toggle){
  color:var(--vivid-text)!important;background:transparent!important;border-color:transparent!important
}
html[data-vivid-theme="light"] body.vivid-atmosphere :is(.vivid-notification-button:hover,a.vivid-nav-action:hover,.vivid-theme-toggle:hover){
  color:var(--vivid-text)!important;background:rgba(20,28,40,.06)!important
}
html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-nav-search input{
  color:var(--vivid-text)!important;background:rgba(255,255,255,.82)!important;border-color:rgba(20,28,40,.14)!important;
  -webkit-text-fill-color:var(--vivid-text)!important;box-shadow:none!important
}
@media(max-width:900px){html[data-vivid-theme="light"] body.vivid-atmosphere .vivid-nav-search input{background:transparent!important;border-color:transparent!important}}
html[data-vivid-theme="light"] body.vivid-atmosphere select option{background:#fff!important;color:#10131a!important}
@media(prefers-reduced-transparency:reduce){
  body.vivid-atmosphere .vivid-topbar,body.vivid-atmosphere .vivid-discovery-nav,body.vivid-atmosphere .vivid-title-nav,
  body.vivid-atmosphere .vivid-library-nav,body.vivid-atmosphere .vivid-watch-nav{
    background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important
  }
}


/* Keep the embedded watch surface isolated from browser/PWA restoration layers.
   The player owns its own controls; the page chrome must never paint above the iframe. */
.vivid-player-frame{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  contain:paint!important;
}
.vivid-player-frame iframe{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  opacity:1!important;
  visibility:visible!important;
}
.vivid-player-status{
  position:absolute!important;
  z-index:2!important;
  pointer-events:none!important;
}

/* iOS Home Screen/PWA search input hardening.
   Safari and installed standalone WebKit can paint native search controls differently
   from the browser tab. Keep the editable text on a plain composited layer so typed
   characters, caret and placeholder remain visible in standalone mode. */
@media (display-mode: standalone){
  .vivid-nav-search input[type="search"],
  .vivid-discovery-search input[type="search"],
  .vivid-nav-search input,
  .vivid-discovery-search input{
    -webkit-appearance:none!important;
    appearance:none!important;
    box-sizing:border-box!important;
    display:block!important;
    position:relative!important;
    z-index:50!important;
    visibility:visible!important;
    opacity:1!important;
    background:#fff!important;
    background-image:none!important;
    color:#10131a!important;
    -webkit-text-fill-color:#10131a!important;
    caret-color:#10131a!important;
    text-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    filter:none!important;
    mix-blend-mode:normal!important;
    font-size:16px!important;
    line-height:1.25!important;
  }

  .vivid-nav-search input[type="search"]::-webkit-search-decoration,
  .vivid-nav-search input[type="search"]::-webkit-search-cancel-button,
  .vivid-nav-search input[type="search"]::-webkit-search-results-button,
  .vivid-nav-search input[type="search"]::-webkit-search-results-decoration,
  .vivid-discovery-search input[type="search"]::-webkit-search-decoration,
  .vivid-discovery-search input[type="search"]::-webkit-search-cancel-button,
  .vivid-discovery-search input[type="search"]::-webkit-search-results-button,
  .vivid-discovery-search input[type="search"]::-webkit-search-results-decoration{
    -webkit-appearance:none!important;
    appearance:none!important;
  }

  .vivid-nav-search input::placeholder,
  .vivid-discovery-search input::placeholder{
    color:#626a76!important;
    -webkit-text-fill-color:#626a76!important;
    opacity:1!important;
  }
}

@media (display-mode: standalone) and (max-width:900px){
  body.vivid-atmosphere .vivid-nav-search input,
  body.vivid-atmosphere .vivid-discovery-search input{
    min-height:48px!important;
    -webkit-appearance:none!important;
    appearance:none!important;
  }
}

/* iOS exposes standalone PWAs through navigator.standalone rather than always
   matching display-mode consistently, so this class is applied by pwa.js as well. */
html.vivid-ios-standalone .vivid-nav-search input,
html.vivid-ios-standalone .vivid-discovery-search input{
  -webkit-appearance:none!important;
  appearance:none!important;
  opacity:1!important;
  visibility:visible!important;
  color:#10131a!important;
  -webkit-text-fill-color:#10131a!important;
  caret-color:#10131a!important;
  text-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  font-size:16px!important;
}


/* ========================================================================== */
/* VIVID MATERIAL SYSTEM v4 — hierarchy-first glass                          */
/* Glass belongs to the floating control layer. Content stays calm/solid.    */
/* ========================================================================== */
:root{
  --vivid-glass-regular:rgba(18,20,25,.58);
  --vivid-glass-regular-light:rgba(255,255,255,.70);
  --vivid-glass-border:rgba(255,255,255,.24);
  --vivid-glass-border-light:rgba(17,18,22,.11);
  --vivid-glass-highlight:rgba(255,255,255,.30);
  --vivid-glass-shadow:0 18px 60px rgba(0,0,0,.28);
  --vivid-glass-shadow-light:0 18px 55px rgba(17,18,22,.11);
}

/* Content layer: deliberately quiet. No glass-on-glass card stacks. */
body.vivid-atmosphere :is(
  .vivid-card,
  .vivid-feature-card,
  .vivid-discovery-card,
  .vivid-discovery-poster,
  .vivid-collection-card,
  .vivid-library-card,
  .vivid-watch-rec-card,
  .vivid-provider-group,
  .vivid-filter-panel,
  .vivid-collection-toolbar,
  .vivid-library-tabs,
  .account-card,
  .auth-container,
  .vivid-search-panel,
  .vivid-discovery-empty,
  .vivid-discovery-error,
  #collection-empty
){
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  animation:none!important;
}

/* Flat content surfaces — depth comes from spacing, not fake transparency. */
body.vivid-atmosphere :is(
  .vivid-card,
  .vivid-feature-card,
  .vivid-discovery-card,
  .vivid-collection-card,
  .vivid-library-card,
  .vivid-watch-rec-card,
  .account-card,
  .auth-container,
  .vivid-filter-panel,
  .vivid-collection-toolbar,
  .vivid-library-tabs
){
  background:var(--vivid-surface-solid)!important;
  border-color:var(--vivid-border)!important;
  box-shadow:var(--vivid-shadow-sm)!important;
}

/* REAL GLASS: navigation is the floating functional layer. */
body.vivid-atmosphere :is(
  .vivid-topbar,
  .vivid-discovery-nav,
  .vivid-title-nav,
  .vivid-library-nav,
  .vivid-watch-nav,
  .vivid-unified-header
){
  background:var(--vivid-glass-regular)!important;
  border:1px solid var(--vivid-glass-border)!important;
  border-top-color:rgba(255,255,255,.16)!important;
  box-shadow:
    0 18px 60px rgba(0,0,0,.22),
    inset 0 1px 0 var(--vivid-glass-highlight)!important;
  backdrop-filter:blur(34px) saturate(180%) contrast(1.04)!important;
  -webkit-backdrop-filter:blur(34px) saturate(180%) contrast(1.04)!important;
}

/* A restrained inner highlight makes the material read as glass, not gray plastic. */
body.vivid-atmosphere :is(
  .vivid-topbar,
  .vivid-discovery-nav,
  .vivid-title-nav,
  .vivid-library-nav,
  .vivid-watch-nav,
  .vivid-unified-header
)::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),transparent 38%),
    radial-gradient(120% 180% at 50% -90%,rgba(255,255,255,.16),transparent 58%);
  opacity:.72;
}

/* Search / notifications are transient floating glass — not content cards. */
body.vivid-atmosphere :is(
  .vivid-search-window,
  .vivid-search-dialog,
  .vivid-release-popover,
  .vivid-notification-popover
){
  background:rgba(18,20,25,.74)!important;
  border:1px solid rgba(255,255,255,.26)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.25)!important;
  backdrop-filter:blur(42px) saturate(180%) contrast(1.05)!important;
  -webkit-backdrop-filter:blur(42px) saturate(180%) contrast(1.05)!important;
}

/* Selection is a fill, not another glass layer. */
body.vivid-atmosphere :is(
  .vivid-navlinks a[aria-current="true"],
  .vivid-navlinks a[aria-current="page"],
  .vivid-discovery-nav nav a.is-active,
  .vivid-library-tabs button.is-active,
  .vivid-mode-chip.is-active,
  .vivid-provider-chip.is-active
){
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:rgba(255,255,255,.15)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20)!important;
}

/* Light mode: same material rules, different optical balance. */
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:var(--vivid-glass-regular-light)!important;
  border-color:var(--vivid-glass-border-light)!important;
  border-top-color:rgba(255,255,255,.96)!important;
  box-shadow:var(--vivid-glass-shadow-light),inset 0 1px 0 rgba(255,255,255,.96)!important;
  backdrop-filter:blur(34px) saturate(155%) contrast(1.02)!important;
  -webkit-backdrop-filter:blur(34px) saturate(155%) contrast(1.02)!important;
}
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
)::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),transparent 42%),
    radial-gradient(120% 180% at 50% -90%,rgba(255,255,255,.82),transparent 58%);
  opacity:.72;
}
html[data-vivid-theme="light"] body.vivid-atmosphere :is(
  .vivid-search-window,
  .vivid-search-dialog,
  .vivid-release-popover,
  .vivid-notification-popover
){
  background:rgba(255,255,255,.82)!important;
  border-color:rgba(17,18,22,.12)!important;
  box-shadow:0 28px 90px rgba(17,18,22,.16),inset 0 1px 0 rgba(255,255,255,.98)!important;
  backdrop-filter:blur(42px) saturate(145%) contrast(1.02)!important;
  -webkit-backdrop-filter:blur(42px) saturate(145%) contrast(1.02)!important;
}
html[data-vivid-theme="light"] body.vivid-atmosphere :is(
  .vivid-navlinks a[aria-current="true"],
  .vivid-navlinks a[aria-current="page"],
  .vivid-discovery-nav nav a.is-active,
  .vivid-library-tabs button.is-active,
  .vivid-mode-chip.is-active,
  .vivid-provider-chip.is-active
){
  background:#111216!important;
  color:#fff!important;
  border-color:#111216!important;
  box-shadow:none!important;
}
/* =========================================================
   Vivid Cinema — True Liquid Glass NAV ONLY
   Matches Apple TV floating glass. Does not touch other UI.
   ========================================================= */

/* Mobile bottom nav — floating liquid glass capsule */
@media (max-width: 640px) {
  body.vivid-atmosphere .vivid-mobile-nav,
  .vivid-mobile-nav {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    height: 62px !important;
    z-index: 1100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: 2px !important;
    padding: 4px 6px !important;
    margin: 0 !important;

    /* True liquid glass */
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    border-radius: 22px !important;
    backdrop-filter: blur(48px) saturate(200%) brightness(1.12) !important;
    -webkit-backdrop-filter: blur(48px) saturate(200%) brightness(1.12) !important;
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.38),
      0 2px 8px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
    overflow: hidden !important;
  }

  /* Soft internal sheen (Apple-style) */
  body.vivid-atmosphere .vivid-mobile-nav::before,
  .vivid-mobile-nav::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.04) 40%,
      transparent 70%
    ) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  body.vivid-atmosphere .vivid-mobile-nav::after,
  .vivid-mobile-nav::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(
      105deg,
      transparent 25%,
      rgba(255, 255, 255, 0.16) 48%,
      transparent 72%
    ) !important;
    background-size: 220% 100% !important;
    animation: lgSheen 6.5s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
    mix-blend-mode: soft-light !important;
  }

  /* Tabs */
  body.vivid-atmosphere .vivid-mobile-nav a,
  .vivid-mobile-nav a {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 48px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 4px 2px !important;
    border-radius: 16px !important;
    color: rgba(255, 255, 255, 0.62) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 0.58rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease !important;
  }

  body.vivid-atmosphere .vivid-mobile-nav a i,
  .vivid-mobile-nav a i {
    font-size: 1.22rem !important;
    line-height: 1 !important;
  }

  /* Active tab — liquid highlight */
  body.vivid-atmosphere .vivid-mobile-nav a[aria-current="page"],
  body.vivid-atmosphere .vivid-mobile-nav a.is-active,
  .vivid-mobile-nav a[aria-current="page"],
  .vivid-mobile-nav a.is-active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.32),
      0 2px 8px rgba(0, 0, 0, 0.12) !important;
  }

  body.vivid-atmosphere .vivid-mobile-nav a[aria-current="page"] i,
  body.vivid-atmosphere .vivid-mobile-nav a.is-active i,
  .vivid-mobile-nav a[aria-current="page"] i,
  .vivid-mobile-nav a.is-active i {
    transform: scale(1.08);
  }

  /* Safe bottom padding so content never hides under the floating nav */
  body.vivid-atmosphere .vivid-section-wrap,
  body.vivid-atmosphere .vivid-home main,
  body.vivid-atmosphere .vivid-discovery-main,
  body.vivid-atmosphere .vivid-library-main,
  body.vivid-atmosphere .vivid-title-section,
  body.vivid-atmosphere .vivid-watch-shell,
  body.vivid-atmosphere main {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.vivid-atmosphere .vivid-footer {
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Desktop top nav — subtle liquid glass bar (keeps existing layout) */
@media (min-width: 641px) {
  body.vivid-atmosphere .vivid-topbar,
  body.vivid-atmosphere .vivid-discovery-nav,
  body.vivid-atmosphere .vivid-library-nav,
  body.vivid-atmosphere .vivid-title-nav,
  body.vivid-atmosphere .vivid-watch-nav {
    background: rgba(255, 255, 255, 0.07) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28) !important;
    backdrop-filter: blur(40px) saturate(190%) brightness(1.06) !important;
    -webkit-backdrop-filter: blur(40px) saturate(190%) brightness(1.06) !important;
    box-shadow:
      0 8px 28px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  }

  body.vivid-atmosphere .vivid-navlinks a[aria-current="page"] {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
  }
}

/* Reduced transparency / motion respect */
@media (prefers-reduced-transparency: reduce) {
  body.vivid-atmosphere .vivid-mobile-nav,
  .vivid-mobile-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(18, 20, 26, 0.94) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.vivid-atmosphere .vivid-mobile-nav::after,
  .vivid-mobile-nav::after {
    animation: none !important;
  }
}

/* v4 system-wide polish: restrained highlights, consistent controls, and resilient accessibility. */
:root{
 --lg-glass-surface:rgba(20,22,27,.66);
 --lg-glass-surface-solid:rgba(17,19,24,.94);
 --lg-glass-edge:rgba(255,255,255,.14);
 --lg-glass-edge-hot:rgba(255,255,255,.27);
 --lg-glass-shadow:0 16px 48px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .vivid-topbar,.vivid-unified-header,.vivid-nav,.vivid-mobile-nav,.vivid-search-dialog,.vivid-release-popover,.vivid-search-panel,.vivid-filter-panel{
  -webkit-backdrop-filter:saturate(155%) blur(var(--lg-blur,22px));
  backdrop-filter:saturate(155%) blur(var(--lg-blur,22px));
 }
 .vivid-topbar,.vivid-unified-header,.vivid-nav{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.018)),var(--lg-glass-surface)!important;
  border-color:var(--lg-glass-edge)!important;
 }
 .vivid-mobile-nav,.vivid-search-dialog,.vivid-release-popover,.vivid-search-panel,.vivid-filter-panel{
  background:linear-gradient(145deg,rgba(255,255,255,.085),transparent 56%),var(--lg-glass-surface)!important;
  border:1px solid var(--lg-glass-edge);
  box-shadow:var(--lg-glass-shadow);
 }
}
.vivid-button,.vivid-icon-button,.vivid-nav-action,.vivid-notification-button,.vivid-mode-chip,.vivid-provider-chip,.vivid-pill{
 transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease,transform .2s ease;
}
.vivid-icon-button,.vivid-nav-action,.vivid-notification-button,.vivid-button--secondary,.vivid-button--ghost{
 border-color:var(--lg-glass-edge,rgba(255,255,255,.14));
}
.vivid-icon-button,.vivid-nav-action,.vivid-notification-button,.vivid-button--secondary,.vivid-button--ghost,.vivid-mode-chip,.vivid-provider-chip{
 background-image:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.012));
}
.vivid-icon-button:hover,.vivid-nav-action:hover,.vivid-notification-button:hover,.vivid-button--secondary:hover,.vivid-button--ghost:hover{
 border-color:var(--lg-glass-edge-hot,rgba(255,255,255,.27));
 box-shadow:0 5px 20px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08);
}
.vivid-search-input:focus-within,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{
 outline-color:rgba(235,240,255,.92);
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .vivid-card,.vivid-feature-card,.vivid-discovery-card,.vivid-collection-card,.vivid-library-card,.vivid-watch-rec-card{
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
 }
 .vivid-card:hover,.vivid-feature-card:hover,.vivid-discovery-card:hover,.vivid-collection-card:hover,.vivid-library-card:hover,.vivid-watch-rec-card:hover{
  border-color:rgba(255,255,255,.17);box-shadow:0 12px 34px rgba(0,0,0,.2);
 }
}
@media(max-width:700px){:root{--lg-blur:18px;--lg-blur-strong:26px}}
@media(prefers-reduced-transparency:reduce){
 :root{--lg-panel:rgba(20,22,27,.97);--lg-glass-surface:rgba(18,20,25,.98)}
 .vivid-topbar,.vivid-unified-header,.vivid-nav,.vivid-mobile-nav,.vivid-search-dialog,.vivid-release-popover,.vivid-search-panel,.vivid-filter-panel{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--lg-glass-surface)!important;
 }
}
@media(prefers-reduced-motion:reduce){
 .vivid-button,.vivid-icon-button,.vivid-nav-action,.vivid-notification-button,.vivid-mode-chip,.vivid-provider-chip,.vivid-pill,.vivid-card,.vivid-feature-card,.vivid-discovery-card,.vivid-collection-card,.vivid-library-card,.vivid-watch-rec-card{transition:none!important;animation:none!important}
}


/* v4.1 accessibility hardening: make keyboard focus visible even when a component has no prior outline. */
:where(a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{
 outline:2px solid rgba(205,224,255,.98);
 outline-offset:3px;
 box-shadow:0 0 0 4px rgba(110,155,255,.2);
}
@media(prefers-reduced-transparency:reduce){
 :where(a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{
  box-shadow:none;
 }
}


/* Preserve functional Home controls inside the navigation rail. */
.vivid-topbar .vivid-navlinks .vivid-nav-search-modal,
.vivid-topbar .vivid-navlinks .vivid-notification-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  flex:0 0 auto!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;
  font:600 .78rem/1 var(--vivid-font-sans)!important;
  white-space:nowrap!important;
  cursor:pointer;
}
.vivid-topbar .vivid-navlinks .vivid-nav-search-modal:hover,
.vivid-topbar .vivid-navlinks .vivid-notification-button:hover{
  color:#fff!important;
  background:rgba(255,255,255,.085)!important;
  border-color:rgba(255,255,255,.105)!important;
}
.vivid-topbar .vivid-navlinks .vivid-notification-button #release-alert-count:not([hidden]){
  display:inline-grid!important;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:999px;
  background:#e6e8ec;
  color:#111216;
  font-size:.65rem;
  font-weight:700;
}


/* Unified floating glass header: match the compact bottom navigation. */
body.vivid-atmosphere .vivid-topbar,
body.vivid-atmosphere .vivid-unified-header,
body.vivid-atmosphere .vivid-discovery-nav,
body.vivid-atmosphere .vivid-title-nav,
body.vivid-atmosphere .vivid-library-nav,
body.vivid-atmosphere .vivid-watch-nav {
  box-sizing: border-box !important;
  width: calc(100% - 24px) !important;
  max-width: 1480px !important;
  margin: 10px auto 0 !important;
  border: 1px solid var(--lg-glass-edge, rgba(255,255,255,.18)) !important;
  border-bottom: 1px solid var(--lg-glass-edge, rgba(255,255,255,.18)) !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.018) 56%), var(--lg-glass-surface, rgba(20,22,27,.66)) !important;
  box-shadow: var(--lg-glass-shadow, 0 16px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.07)) !important;
  overflow: visible !important;
}
body.vivid-atmosphere .vivid-nav,
body.vivid-atmosphere .vivid-unified-nav,
body.vivid-atmosphere .vivid-discovery-nav,
body.vivid-atmosphere .vivid-title-nav,
body.vivid-atmosphere .vivid-library-nav,
body.vivid-atmosphere .vivid-watch-nav {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(6px, 1vw, 14px) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 8px clamp(10px, 1.5vw, 18px) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.vivid-atmosphere .vivid-brand {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
body.vivid-atmosphere .vivid-navlinks {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: clamp(2px, .45vw, 7px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
}
body.vivid-atmosphere .vivid-navlinks::-webkit-scrollbar { display: none !important; }
body.vivid-atmosphere .vivid-navlinks a,
body.vivid-atmosphere .vivid-navlinks button,
body.vivid-atmosphere .vivid-nav-account,
body.vivid-atmosphere .vivid-nav-action,
body.vivid-atmosphere .vivid-search-trigger,
body.vivid-atmosphere .vivid-notification-button {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 14px !important;
  white-space: nowrap !important;
}
body.vivid-atmosphere .vivid-navlinks a,
body.vivid-atmosphere .vivid-navlinks button {
  padding: 8px clamp(7px, .8vw, 12px) !important;
}
body.vivid-atmosphere .vivid-nav-account,
body.vivid-atmosphere .vivid-nav-action {
  margin: 0 !important;
  padding: 8px 11px !important;
}
@media (max-width: 900px) {
  body.vivid-atmosphere .vivid-topbar,
  body.vivid-atmosphere .vivid-unified-header,
  body.vivid-atmosphere .vivid-discovery-nav,
  body.vivid-atmosphere .vivid-title-nav,
  body.vivid-atmosphere .vivid-library-nav,
  body.vivid-atmosphere .vivid-watch-nav {
    width: calc(100% - 20px) !important;
    margin-top: 8px !important;
    border-radius: 22px !important;
  }
  body.vivid-atmosphere .vivid-nav,
  body.vivid-atmosphere .vivid-unified-nav,
  body.vivid-atmosphere .vivid-discovery-nav,
  body.vivid-atmosphere .vivid-title-nav,
  body.vivid-atmosphere .vivid-library-nav,
  body.vivid-atmosphere .vivid-watch-nav {
    gap: 6px !important;
    padding: 7px 9px !important;
  }
  body.vivid-atmosphere .vivid-navlinks {
    display: flex !important;
    flex: 0 1 auto !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  body.vivid-atmosphere .vivid-navlinks > a:not([href="search.html"]),
  body.vivid-atmosphere .vivid-navlinks > a:not([href="search.html"]) span,
  body.vivid-atmosphere .vivid-navlinks > button span:not(#release-alert-count) {
    display: none !important;
  }
  body.vivid-atmosphere .vivid-navlinks > a[href="search.html"],
  body.vivid-atmosphere .vivid-navlinks > button.vivid-nav-search-modal,
  body.vivid-atmosphere .vivid-navlinks > .vivid-notification-button {
    display: inline-grid !important;
    place-items: center !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.vivid-atmosphere .vivid-navlinks > a[href="search.html"] span,
  body.vivid-atmosphere .vivid-navlinks > button.vivid-nav-search-modal span {
    display: none !important;
  }
  body.vivid-atmosphere .vivid-navlinks > a[href="search.html"] i,
  body.vivid-atmosphere .vivid-navlinks > button.vivid-nav-search-modal i,
  body.vivid-atmosphere .vivid-navlinks > .vivid-notification-button i {
    margin: 0 !important;
    font-size: 1.05rem !important;
  }
  body.vivid-atmosphere .vivid-nav-account,
  body.vivid-atmosphere .vivid-nav-action {
    display: inline-grid !important;
    place-items: center !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  body.vivid-atmosphere .vivid-nav-account span,
  body.vivid-atmosphere .vivid-nav-action span { display: none !important; }
  body.vivid-atmosphere .vivid-nav-account::before,
  body.vivid-atmosphere .vivid-nav-action::before { content: none !important; }
  body.vivid-atmosphere .vivid-navlinks > a[href="search.html"] i,
  body.vivid-atmosphere .vivid-nav-account i { display: inline-block !important; }
}
@media (max-width: 380px) {
  body.vivid-atmosphere .vivid-brand-wordmark { font-size: .88rem !important; }
  body.vivid-atmosphere .vivid-nav,
  body.vivid-atmosphere .vivid-unified-nav { padding-inline: 7px !important; }
  body.vivid-atmosphere .vivid-navlinks > a[href="search.html"],
  body.vivid-atmosphere .vivid-navlinks > button.vivid-nav-search-modal,
  body.vivid-atmosphere .vivid-navlinks > .vivid-notification-button,
  body.vivid-atmosphere .vivid-nav-account,
  body.vivid-atmosphere .vivid-nav-action { width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; }
}


/* Search already lives in the bottom navigation; remove duplicate top-header search controls. */
body.vivid-atmosphere .vivid-topbar .vivid-search-trigger,
body.vivid-atmosphere .vivid-topbar .vivid-nav-search,
body.vivid-atmosphere .vivid-topbar .vivid-navlinks > a[href="search.html"],
body.vivid-atmosphere .vivid-unified-header .vivid-search-trigger,
body.vivid-atmosphere .vivid-unified-header .vivid-nav-search,
body.vivid-atmosphere .vivid-unified-header .vivid-navlinks > a[href="search.html"] {
  display: none !important;
}


/* ==========================================================================
   SITE-WIDE BREATHING ROOM — compact shared shell and calmer page density.
   Preserve the existing page layouts, routes, player, and mobile touch targets.
   ========================================================================== */
:root {
  --vivid-content-width: 1360px;
  --vivid-page-gutter: clamp(14px, 2.35vw, 36px);
  --vivid-section-gap: clamp(2rem, 4.2vw, 3.75rem);
  --vivid-grid-gap: clamp(.65rem, 1vw, 1rem);
}

/* The oversized two-row glass header was making every desktop page feel zoomed in. */
@media (min-width: 901px) {
  .vivid-topbar {
    padding-block: 3px !important;
  }
  .vivid-topbar .vivid-nav {
    min-height: 56px !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    grid-template-rows: 56px !important;
    gap: 0 14px !important;
  }
  .vivid-topbar .vivid-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
  }
  .vivid-topbar .vivid-navlinks {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: max-content !important;
    max-width: 100% !important;
    gap: 2px !important;
    padding: 3px !important;
    border-radius: 999px !important;
  }
  .vivid-topbar .vivid-navlinks a {
    min-height: 36px !important;
    padding: 8px 11px !important;
    border-radius: 999px !important;
    font-size: .76rem !important;
  }
  .vivid-topbar .vivid-nav-account {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    min-height: 38px !important;
    height: 38px !important;
  }
  .vivid-topbar .vivid-nav-language-slot {
    grid-column: 4 !important;
    grid-row: 1 !important;
    align-self: center !important;
  }
}

/* Keep all common content edges aligned and avoid oversized reading surfaces. */
.vivid-shell,
.vivid-section-wrap,
.vivid-discovery-main,
.vivid-collection-main {
  box-sizing: border-box;
}
.vivid-rail-head {
  gap: 12px;
}
.vivid-rail-head h2,
.vivid-section-heading h2 {
  text-wrap: balance;
}
.vivid-rail-head p {
  line-height: 1.5;
}
.vivid-button,
.vivid-icon-button,
.vivid-page-back {
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 900px) {
  :root {
    --vivid-page-gutter: 16px;
    --vivid-section-gap: 2.25rem;
    --vivid-grid-gap: .75rem;
  }
}
@media (max-width: 640px) {
  :root {
    --vivid-page-gutter: 14px;
    --vivid-section-gap: 1.9rem;
    --vivid-grid-gap: .65rem;
  }
  .vivid-topbar {
    padding-inline: max(12px, var(--vivid-safe-left, 0px)) !important;
    padding-right: max(12px, var(--vivid-safe-right, 0px)) !important;
  }
  .vivid-topbar .vivid-nav {
    min-height: 50px !important;
  }
  .vivid-mobile-nav {
    max-width: calc(100vw - 20px - var(--vivid-safe-left, 0px) - var(--vivid-safe-right, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .vivid-topbar *,
  .vivid-mobile-nav * {
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
  }
}