/* DEV preview experience: two independent views, one contained modal.
   The Nuvio mock remains intentionally dark in every UltraMAX theme. */
body.s2-preview-open .um-build-bottom-nav,
body.s2-preview-open #umAppearanceToggle,
body.s2-preview-open .um-appearance-popover,
body.s2-preview-open #themeToggle{display:none!important}
#s2Modal.s2-preview-modal{
 position:fixed!important;inset:0!important;z-index:2000000!important;
 width:100vw!important;height:100dvh!important;max-width:100vw!important;
 background:#0b1018!important;isolation:isolate!important;
 overflow:hidden!important;color:#f3f5fa!important;
}
#s2Modal>.s2-modal-sheet{
 position:absolute!important;inset:0!important;
 box-sizing:border-box!important;width:100%!important;height:100%!important;
 max-height:none!important;margin:0!important;
 padding:var(--s2-ux-toolbar-clearance,124px) 0 0!important;overflow-x:hidden!important;overflow-y:auto!important;
 overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;
 background:#0b1018!important;scrollbar-gutter:stable;
}
#s2Modal .s2-modal-toolbar{
 position:fixed!important;top:0!important;left:0!important;right:0!important;
 width:100%!important;min-height:0!important;height:auto!important;
 box-sizing:border-box!important;z-index:2000001!important;
 display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
 grid-template-areas:"title close" "views devices"!important;
 align-items:center!important;justify-content:stretch!important;
 gap:8px!important;padding:calc(11px + env(safe-area-inset-top)) 12px 11px!important;
 background:#1c2430!important;background-image:none!important;
 border-bottom:1px solid #384355!important;box-shadow:0 6px 22px rgba(0,0,0,.28)!important;
 pointer-events:auto!important;backdrop-filter:none!important;
}
#s2Modal .s2-ux-toolbar-title{
 grid-area:title;display:flex;flex-direction:column;gap:2px;min-width:0;
 line-height:1.24;text-align:left;
}
#s2Modal .s2-ux-toolbar-title strong{color:#f4f7fc!important;font-size:15px!important;font-weight:800!important}
#s2Modal .s2-ux-toolbar-title small{color:#b4bfce!important;font-size:10px!important}
#s2Modal .s2-ux-view-switch,#s2Modal .s2-preview-device-switch{
 display:flex!important;position:static!important;align-items:center!important;justify-content:center!important;
 gap:3px!important;padding:3px!important;margin:0!important;
 border:1px solid #495367!important;border-radius:11px!important;
 background:#121922!important;box-shadow:none!important;min-width:0!important;
 pointer-events:auto!important;backdrop-filter:none!important;
}
#s2Modal .s2-ux-view-switch{grid-area:views;justify-self:start}
#s2Modal .s2-preview-device-switch{grid-area:devices;justify-self:end}
#s2Modal .s2-ux-view-btn,#s2Modal .s2-preview-device-btn{
 position:relative!important;display:inline-flex!important;justify-content:center!important;align-items:center!important;
 min-height:33px!important;height:33px!important;min-width:58px!important;
 padding:0 11px!important;margin:0!important;font-size:11px!important;font-weight:750!important;
 border:1px solid transparent!important;border-radius:8px!important;
 color:#bdcad8!important;background:transparent!important;box-shadow:none!important;
 text-shadow:none!important;-webkit-text-fill-color:currentColor!important;
 line-height:1.2!important;cursor:pointer!important;white-space:nowrap!important;
}
#s2Modal .s2-ux-view-btn.active,#s2Modal .s2-preview-device-btn.active{
 color:#fff!important;background:#3b5d7e!important;
 border-color:#5e83a3!important;box-shadow:none!important;
}
#s2Modal .s2-modal-close{
 grid-area:close!important;position:static!important;justify-self:end!important;
 width:36px!important;height:36px!important;min-height:36px!important;
 border:1px solid #495367!important;border-radius:9px!important;
 background:#2b3443!important;color:#fff!important;
 font-size:20px!important;box-shadow:none!important;pointer-events:auto!important;
}
#s2Modal :is(.s2-ux-view-btn,.s2-preview-device-btn,.s2-modal-close):focus-visible{
 outline:2px solid #a4c5ff!important;outline-offset:2px!important;
}
#s2Modal .s2nm-shell,#s2Modal .s2-nuvio,#s2Modal .s2-nuvio-rows{
 min-height:0!important;max-width:100%!important;background:#0b1018!important;overflow-x:hidden!important;
}
#s2Modal[data-s2-ux-view="preview"] .s2nm-layout-summary{display:none!important}
#s2Modal[data-s2-ux-view="rows"] :is(.s2nm-hero,.s2nm-shelves,.s2nm-empty){display:none!important}
#s2Modal[data-s2-ux-view="rows"] .s2nm-layout-summary{
 display:grid!important;box-sizing:border-box!important;
 width:min(calc(100% - 24px),780px)!important;margin:14px auto 24px!important;
 padding:14px!important;gap:10px!important;border:1px solid #364459!important;
 border-radius:15px!important;background:#1c2633!important;background-image:none!important;
 box-shadow:none!important;color:#edf3fc!important;
}
#s2Modal[data-s2-ux-view="rows"] .s2nm-layout-kicker{color:#9bb8cf!important;font-size:10px!important}
#s2Modal[data-s2-ux-view="rows"] .s2nm-layout-title{color:#f3f6fa!important;font-size:15px!important}
#s2Modal[data-s2-ux-view="rows"] .s2nm-layout-stats{gap:6px!important}
#s2Modal[data-s2-ux-view="rows"] .s2nm-layout-stats span{
 min-height:27px!important;padding:4px 9px!important;font-size:11px!important;
 color:#cbd6e4!important;background:#283444!important;border:1px solid #465365!important;
}
#s2Modal[data-s2-ux-view="rows"] .s2nm-layout-stats strong{font-size:12px!important;color:#fff!important}
#s2Modal[data-s2-ux-view="rows"] .s2nm-layout-order{gap:6px!important}
#s2Modal[data-s2-ux-view="rows"] .s2nm-layout-row{
 min-height:39px!important;padding:7px 9px!important;gap:9px!important;
 border-radius:9px!important;border:1px solid #38465b!important;background:#253142!important;
}
#s2Modal[data-s2-ux-view="rows"] .s2nm-layout-row:nth-child(n+7){display:none!important}
#s2Modal[data-s2-ux-view="rows"] .s2nm-layout-rank{
 width:24px!important;height:24px!important;font-size:11px!important;
 color:#d4e2f8!important;background:#394b64!important;
}
#s2Modal[data-s2-ux-view="rows"] .s2nm-layout-name{
 font-size:12px!important;color:#edf3fd!important;white-space:normal!important;overflow-wrap:anywhere!important;
}
#s2Modal[data-s2-ux-view="rows"] .s2nm-layout-more{
 font-size:11px!important;color:#bfcbda!important;line-height:1.5!important;
}
#s2Modal[data-s2-ux-view="rows"] .s2nm-layout-badge{
 font-size:9px!important;color:#c5d9f3!important;min-height:21px!important;
}
#s2Modal[data-s2-ux-view="rows"] .s2nm-layout-note{
 font-size:11px!important;color:#c0cedd!important;overflow-wrap:anywhere!important;
}
#s2Modal[data-s2-ux-view="rows"] .s2nm-layout-note strong{color:#fff!important}
#s2Modal .s2nm-hero{height:min(44dvh,390px)!important;min-height:260px!important;max-height:390px!important}
#s2Modal.s2-preview-mode-desktop .s2nm-hero{
 height:min(54dvh,520px)!important;min-height:310px!important;max-height:520px!important;
}
#s2Modal .s2nm-shelves{padding:18px 0 32px!important}
#s2Modal .s2nm-shelf{margin-bottom:20px!important}
#s2Modal .s2nm-shelf-title{font-size:15px!important}
#s2Modal .s2nm-card{width:104px!important;flex-basis:104px!important}
#s2Modal .s2nm-poster{width:104px!important;border-radius:9px!important}
#s2Modal .s2nm-more{color:#bac8d9!important;padding:8px 16px 18px!important;font-size:12px!important}
#s2Modal .s2nm-hero-content{bottom:18px!important}
/* Static mock content must not look like working playback/details controls. */
#s2Modal :is(.s2nm-details,.s2nm-indicators,.s2nm-view-all){display:none!important}
#s2Modal .s2nm-title{font-size:clamp(22px,5vw,35px)!important}
#s2Modal .s2nm-details{min-height:36px!important;margin-top:10px!important;padding:0 20px!important;font-size:11px!important}
#s2Modal .s2-ux-disclaimer{
 padding:11px 16px 24px;color:#aebecf;font-size:11px;line-height:1.5;text-align:center;
 background:#0b1018;
}
html.um-refined[data-um-appearance="refined-light"] #s2Modal .s2-modal-toolbar{
 background:#f5f7fa!important;border-bottom-color:#d0dae5!important;
}
html.um-refined[data-um-appearance="refined-light"] #s2Modal .s2-ux-toolbar-title strong{color:#263348!important}
html.um-refined[data-um-appearance="refined-light"] #s2Modal .s2-ux-toolbar-title small{color:#53677e!important}
html.um-refined[data-um-appearance="refined-light"] #s2Modal :is(.s2-ux-view-switch,.s2-preview-device-switch){
 background:#fff!important;border-color:#cbd5e2!important;
}
html.um-refined[data-um-appearance="refined-light"] #s2Modal :is(.s2-ux-view-btn,.s2-preview-device-btn){color:#35475e!important}
html.um-refined[data-um-appearance="refined-light"] #s2Modal :is(.s2-ux-view-btn.active,.s2-preview-device-btn.active){
 background:#47749b!important;border-color:#47749b!important;color:#fff!important;
}
html.um-refined[data-um-appearance="refined-light"] #s2Modal .s2-modal-close{
 background:#e5ebf3!important;border-color:#bdcad8!important;color:#263348!important;
}
@media(min-width:700px){
 #s2Modal>.s2-modal-sheet{padding-top:var(--s2-ux-toolbar-clearance,85px)!important}
 #s2Modal .s2-modal-toolbar{
  grid-template-columns:minmax(150px,1fr) auto auto 42px!important;
  grid-template-areas:"title views devices close"!important;
  gap:10px!important;padding:12px 20px!important;
 }
 #s2Modal .s2nm-hero{height:min(54dvh,520px)!important;max-height:520px!important}
 #s2Modal.s2-preview-mode-mobile>.s2-modal-sheet{max-width:540px!important;width:100%!important;margin:auto!important}
}
/* A phone choosing Desktop should see a widescreen-style sample,
   not the mobile hero stretched to an even taller screen. */
@media(max-width:699px){
 #s2Modal.s2-preview-mode-desktop .s2nm-hero{
  height:clamp(185px,53vw,245px)!important;min-height:0!important;max-height:245px!important;
  border-radius:0!important;
 }
 #s2Modal.s2-preview-mode-desktop .s2nm-hero-content{
  align-items:flex-start!important;text-align:left!important;
  left:14px!important;right:14px!important;bottom:10px!important;
 }
 #s2Modal.s2-preview-mode-desktop .s2nm-title{font-size:18px!important;text-align:left!important}
 #s2Modal.s2-preview-mode-desktop .s2nm-meta{
  justify-content:flex-start!important;margin-top:5px!important;font-size:10px!important;gap:5px!important;
 }
 #s2Modal.s2-preview-mode-desktop .s2nm-shelves{padding-top:12px!important}
 #s2Modal.s2-preview-mode-desktop .s2nm-shelf-title{font-size:13px!important}
 #s2Modal.s2-preview-mode-desktop .s2nm-card{
  width:86px!important;flex-basis:86px!important;
 }
 #s2Modal.s2-preview-mode-desktop .s2nm-poster{width:86px!important}
 #s2Modal.s2-preview-mode-desktop .s2nm-rail{gap:7px!important;padding:8px 12px 4px!important}
 #s2Modal.s2-preview-mode-desktop .s2nm-shelf-header{padding-inline:12px!important}
}
/* Follow Device needs the same legible toolbar when the device uses light mode. */
@media(prefers-color-scheme:light){
 html.um-refined[data-um-appearance="system"] #s2Modal .s2-modal-toolbar{
  background:#f5f7fa!important;border-bottom-color:#d0dae5!important;
 }
 html.um-refined[data-um-appearance="system"] #s2Modal .s2-ux-toolbar-title strong{color:#263348!important}
 html.um-refined[data-um-appearance="system"] #s2Modal .s2-ux-toolbar-title small{color:#53677e!important}
 html.um-refined[data-um-appearance="system"] #s2Modal :is(.s2-ux-view-switch,.s2-preview-device-switch){
  background:#fff!important;border-color:#cbd5e2!important;
 }
 html.um-refined[data-um-appearance="system"] #s2Modal :is(.s2-ux-view-btn,.s2-preview-device-btn){color:#35475e!important}
 html.um-refined[data-um-appearance="system"] #s2Modal :is(.s2-ux-view-btn.active,.s2-preview-device-btn.active){
  background:#47749b!important;border-color:#47749b!important;color:#fff!important;
 }
 html.um-refined[data-um-appearance="system"] #s2Modal .s2-modal-close{
  background:#e5ebf3!important;border-color:#bdcad8!important;color:#263348!important;
 }
}
@media(max-width:365px){
 #s2Modal .s2-modal-toolbar{padding-inline:8px!important;gap:5px!important}
 #s2Modal .s2-ux-view-btn,#s2Modal .s2-preview-device-btn{min-width:50px!important;padding:0 8px!important}
 #s2Modal[data-s2-ux-view="rows"] .s2nm-layout-summary{width:calc(100% - 16px)!important;padding:11px!important}
}
@media(prefers-reduced-motion:reduce){#s2Modal *{scroll-behavior:auto!important}}