/*
 * Lurox V4.0.1 — isolated application layout.
 * This file intentionally loads after all V3/V4 visual layers and owns the
 * application shell. It neutralizes legacy layout/density selectors without
 * deleting them, so older components can keep their visual styling.
 */

html{overflow-x:hidden;background:#061019}
body.lurox-v4-ui{
  --lv4-sidebar:214px;
  --lv4-topbar:74px;
  --lv4-content-max:1660px;
  --lv4-right-rail:330px;
  --lv4-layout-gap:18px;
  overflow-x:hidden!important;
  min-width:0!important;
}

/* Hard layout reset: beats retained body.lv3-density-* and lv3-layout-* rules. */
body.lurox-v4-ui .lv3-page-shell.lv4-shell{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:100vh!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  display:block!important;
}
body.lurox-v4-ui .lv3-rail.lv4-sidebar{
  position:fixed!important;
  inset:0 auto 0 0!important;
  width:var(--lv4-sidebar)!important;
  height:100dvh!important;
  min-height:0!important;
  z-index:100!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#07131d 0%,#07111a 100%)!important;
  border:0!important;
  border-right:1px solid var(--lv4-line)!important;
  box-shadow:none!important;
}
body.lurox-v4-ui .lv3-site.lv4-site{
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  margin:0 0 0 var(--lv4-sidebar)!important;
  background:transparent!important;
}
body.lurox-v4-ui .lv3-content.lv4-content{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:calc(100vh - var(--lv4-topbar))!important;
  margin:0!important;
  padding:18px 22px 46px!important;
  overflow:visible!important;
}

/* Sidebar: one visual scrollbar for the page. Menu remains scrollable on short displays, scrollbar is hidden. */
body.lurox-v4-ui .lv4-side-brand{
  flex:0 0 var(--lv4-topbar)!important;
  width:100%!important;
  height:var(--lv4-topbar)!important;
  padding:0 22px!important;
  margin:0!important;
}
body.lurox-v4-ui .lv4-side-scroll{
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
  margin:0!important;
  padding:16px 14px 76px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:none!important;
  overscroll-behavior:contain;
}
body.lurox-v4-ui .lv4-side-scroll::-webkit-scrollbar{display:none!important}
body.lurox-v4-ui .lv3-rail-menu.lv4-side-menu{
  position:static!important;
  top:auto!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}
body.lurox-v4-ui .lv3-rail-menu.lv4-side-menu li{width:100%!important;margin:3px 0!important}
body.lurox-v4-ui .lv3-rail-menu.lv4-side-menu a{
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 13px!important;
  flex-direction:row!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:12px!important;
  white-space:nowrap!important;
  font-size:12px!important;
  border:0!important;
  border-radius:10px!important;
}
body.lurox-v4-ui .lv3-rail-menu.lv4-side-menu a span{
  display:flex!important;
  min-width:0!important;
  align-items:center!important;
  flex:1 1 auto!important;
}
body.lurox-v4-ui .lv4-modules-link{
  left:14px!important;
  right:14px!important;
  bottom:14px!important;
  width:auto!important;
  height:44px!important;
  padding:0 13px!important;
}
body.lurox-v4-ui .lv4-modules-link span{display:inline!important}

/* Topbar owns its own proportions, independent from V3 density settings. */
body.lurox-v4-ui .lv3-header.lv4-header{
  position:sticky!important;
  top:0!important;
  z-index:90!important;
  width:100%!important;
  height:var(--lv4-topbar)!important;
  margin:0!important;
  border:0!important;
  border-bottom:1px solid var(--lv4-line)!important;
  background:rgba(5,13,21,.93)!important;
}
body.lurox-v4-ui .lv3-topbar.lv4-topbar{
  width:100%!important;
  max-width:var(--lv4-content-max)!important;
  height:var(--lv4-topbar)!important;
  margin:0 auto!important;
  padding:0 22px!important;
  gap:12px!important;
  align-items:center!important;
  border:0!important;
  background:transparent!important;
}
body.lurox-v4-ui .lv3-main-nav.lv4-topnav{height:auto!important;margin:0!important;min-width:0!important}
body.lurox-v4-ui .lv4-search-wrap{margin-left:auto!important;flex:0 1 360px!important;width:auto!important;min-width:220px!important}
body.lurox-v4-ui .lv4-account-trigger{white-space:nowrap!important}

/* Desktop canvas. */
body.lurox-v4-ui .lv4-home-dashboard{
  width:100%!important;
  max-width:var(--lv4-content-max)!important;
  min-width:0!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) var(--lv4-right-rail)!important;
  gap:var(--lv4-layout-gap)!important;
  align-items:start!important;
}
body.lurox-v4-ui .lv4-home-main{min-width:0!important;width:100%!important}
body.lurox-v4-ui .lv4-home-side{
  min-width:0!important;
  width:100%!important;
  position:sticky!important;
  top:calc(var(--lv4-topbar) + 18px)!important;
  align-self:start!important;
  max-height:calc(100vh - var(--lv4-topbar) - 36px)!important;
  overflow:auto!important;
  scrollbar-width:none!important;
}
body.lurox-v4-ui .lv4-home-side::-webkit-scrollbar{display:none!important}

/* Hero: cinematic but controlled. Long titles must never dominate the page. */
body.lurox-v4-ui .lv4-hero{
  width:100%!important;
  height:402px!important;
  min-height:402px!important;
  max-height:402px!important;
}
body.lurox-v4-ui .lv4-hero-content{
  left:44px!important;
  right:auto!important;
  bottom:38px!important;
  width:min(520px,54%)!important;
  max-width:54%!important;
}
body.lurox-v4-ui .lv4-hero h1{
  margin:0 0 11px!important;
  font-size:clamp(31px,2.55vw,46px)!important;
  line-height:1.02!important;
  letter-spacing:-1.35px!important;
  font-weight:850!important;
  text-wrap:balance!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
  overflow:hidden!important;
}
body.lurox-v4-ui .lv4-hero p{
  max-width:500px!important;
  font-size:12px!important;
  line-height:1.6!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
  overflow:hidden!important;
}
body.lurox-v4-ui .lv4-hero-nav>button{top:-190px!important}

/* Home modules: no football-field whitespace when there is little content. */
body.lurox-v4-ui .lv4-home-section{min-width:0!important;margin-bottom:22px!important}
body.lurox-v4-ui .lv4-continue-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:start!important;
}
body.lurox-v4-ui .lv4-continue-grid.is-single{grid-template-columns:minmax(280px,420px)!important}
body.lurox-v4-ui .lv4-continue-grid.is-two{grid-template-columns:repeat(2,minmax(280px,420px))!important}
body.lurox-v4-ui .lv4-media-strip{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  grid-auto-columns:minmax(145px,1fr)!important;
  min-width:0!important;
}
body.lurox-v4-ui .lv4-side-card{min-width:0!important}
body.lurox-v4-ui .lv4-side-card-head h3{line-height:1.25!important}

/* Shared pages get the same controlled content width as the app shell. */
body.lurox-v4-ui .lv3-listing-page,
body.lurox-v4-ui .lv3-network-page,
body.lurox-v4-ui .lv3-calendar-page,
body.lurox-v4-ui .lv3-library-page,
body.lurox-v4-ui .lv3-account-page,
body.lurox-v4-ui .lv3-watch-page,
body.lurox-v4-ui .lv3-watch-room-page,
body.lurox-v4-ui .lv3-detail,
body.lurox-v4-ui .lv3-footer{
  width:100%!important;
  max-width:var(--lv4-content-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.lurox-v4-ui .lv3-footer{padding-left:2px!important;padding-right:2px!important}

/* Wide desktop tuning. */
@media (min-width:1600px){
  body.lurox-v4-ui{--lv4-right-rail:340px;--lv4-content-max:1660px}
  body.lurox-v4-ui .lv4-media-strip{grid-template-columns:repeat(6,minmax(0,1fr))!important}
}

/* Laptop: keep full sidebar until it actually stops fitting. */
@media (max-width:1360px){
  body.lurox-v4-ui{--lv4-sidebar:196px;--lv4-right-rail:292px}
  body.lurox-v4-ui .lv4-side-brand{padding:0 18px!important}
  body.lurox-v4-ui .lv3-rail-menu.lv4-side-menu a{font-size:11px!important;padding:0 11px!important}
  body.lurox-v4-ui .lv4-topnav .lv3-top-menu a{padding:0 9px!important}
  body.lurox-v4-ui .lv4-search-wrap{flex-basis:290px!important}
  body.lurox-v4-ui .lv4-media-strip{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  body.lurox-v4-ui .lv4-continue-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Compact desktop/tablet: icon rail only here, not on normal desktop. */
@media (max-width:1120px) and (min-width:901px){
  body.lurox-v4-ui{--lv4-sidebar:78px;--lv4-right-rail:0px}
  body.lurox-v4-ui .lv4-side-brand{justify-content:center!important;padding:0!important}
  body.lurox-v4-ui .lv4-side-brand .lv3-logo-first,
  body.lurox-v4-ui .lv4-side-brand .lv3-logo-rest{display:none!important}
  body.lurox-v4-ui .lv4-side-scroll{padding:14px 9px 70px!important}
  body.lurox-v4-ui .lv3-rail-menu.lv4-side-menu a{justify-content:center!important;padding:0!important}
  body.lurox-v4-ui .lv3-rail-menu.lv4-side-menu a span{display:none!important}
  body.lurox-v4-ui .lv4-modules-link{left:9px!important;right:9px!important;justify-content:center!important;padding:0!important}
  body.lurox-v4-ui .lv4-modules-link span{display:none!important}
  body.lurox-v4-ui .lv4-home-dashboard{grid-template-columns:1fr!important}
  body.lurox-v4-ui .lv4-home-side{position:static!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;max-height:none!important}
  body.lurox-v4-ui .lv4-social-highlights{grid-column:1/-1!important}
  body.lurox-v4-ui .lv4-topnav .lv3-top-menu a span{display:none!important}
  body.lurox-v4-ui .lv4-topnav .lv3-top-menu a{width:40px!important;padding:0!important}
}

/* Mobile. */
@media (max-width:900px){
  body.lurox-v4-ui{--lv4-sidebar:0px;--lv4-topbar:64px;--lv4-right-rail:0px}
  body.lurox-v4-ui .lv3-rail.lv4-sidebar{display:none!important}
  body.lurox-v4-ui .lv3-site.lv4-site{margin-left:0!important;width:100%!important}
  body.lurox-v4-ui .lv3-topbar.lv4-topbar{padding:0 14px!important;max-width:none!important}
  body.lurox-v4-ui .lv3-content.lv4-content{padding:14px 14px 86px!important}
  body.lurox-v4-ui .lv4-home-dashboard{grid-template-columns:1fr!important;max-width:none!important}
  body.lurox-v4-ui .lv4-home-side{position:static!important;max-height:none!important;grid-template-columns:1fr 1fr!important}
  body.lurox-v4-ui .lv4-social-highlights{grid-column:1/-1!important}
  body.lurox-v4-ui .lv4-hero{height:360px!important;min-height:360px!important;max-height:360px!important}
  body.lurox-v4-ui .lv4-hero-content{left:28px!important;bottom:30px!important;width:72%!important;max-width:72%!important}
  body.lurox-v4-ui .lv4-hero h1{font-size:clamp(30px,6vw,40px)!important;-webkit-line-clamp:3!important}
  body.lurox-v4-ui .lv4-media-strip{grid-template-columns:none!important;grid-auto-columns:168px!important}
}

@media (max-width:640px){
  body.lurox-v4-ui .lv3-content.lv4-content{padding:10px 10px 78px!important}
  body.lurox-v4-ui .lv4-home-side{grid-template-columns:1fr!important}
  body.lurox-v4-ui .lv4-social-highlights{grid-column:auto!important}
  body.lurox-v4-ui .lv4-hero{height:420px!important;min-height:420px!important;max-height:420px!important}
  body.lurox-v4-ui .lv4-hero-content{left:20px!important;right:20px!important;bottom:30px!important;width:auto!important;max-width:none!important}
  body.lurox-v4-ui .lv4-hero h1{font-size:34px!important;letter-spacing:-1px!important}
  body.lurox-v4-ui .lv4-hero p{font-size:11px!important;-webkit-line-clamp:3!important}
  body.lurox-v4-ui .lv4-continue-grid,
  body.lurox-v4-ui .lv4-continue-grid.is-single,
  body.lurox-v4-ui .lv4-continue-grid.is-two{grid-template-columns:1fr!important}
}