/* STS v5.7.7 — Image 2 compact homepage match
   Final override loaded last. Keeps existing EJS/backend behaviour intact. */
:root{
  --sts-bg:#030509;
  --sts-panel:#080b11;
  --sts-panel-2:#0b0f16;
  --sts-border:#171c25;
  --sts-border-soft:rgba(255,255,255,.075);
  --sts-purple:#8b2cff;
  --sts-purple-2:#a74cff;
  --sts-green:#63ff26;
  --sts-text:#f7f7fa;
  --sts-muted:#9299a6;
}

html,body{background:#030509!important}
body.streamx-v5.twitch-v53,
body.streamx-v5.twitch-v53 button,
body.streamx-v5.twitch-v53 input,
body.streamx-v5.twitch-v53 a,
body.streamx-v5.twitch-v53 label{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  letter-spacing:normal!important;
}

/* HEADER — compact like reference image 2 */
html body.streamx-v5.twitch-v53 header.sts-mockup-header{
  position:sticky!important;top:0!important;z-index:5000!important;
  display:grid!important;grid-template-columns:minmax(610px,1fr) minmax(250px,355px) auto!important;
  align-items:center!important;gap:20px!important;
  width:100%!important;height:76px!important;min-height:76px!important;
  padding:0 28px!important;margin:0!important;
  background:#020306!important;border:0!important;border-bottom:1px solid #171a21!important;
  box-shadow:none!important;backdrop-filter:none!important;
}
html body.streamx-v5.twitch-v53 .sts-mock-left{display:flex!important;align-items:center!important;min-width:0!important;height:100%!important}
html body.streamx-v5.twitch-v53 .sts-mock-brand{
  flex:0 0 205px!important;width:205px!important;height:48px!important;
  display:flex!important;align-items:center!important;overflow:visible!important
}
html body.streamx-v5.twitch-v53 .sts-mock-brand img{
  display:block!important;width:205px!important;height:48px!important;max-width:none!important;
  object-fit:contain!important;object-position:left center!important;filter:none!important
}
html body.streamx-v5.twitch-v53 .sts-mock-nav{
  display:flex!important;align-items:stretch!important;gap:29px!important;height:100%!important;
  margin:0 0 0 46px!important;white-space:nowrap!important
}
html body.streamx-v5.twitch-v53 .sts-mock-nav>a,
html body.streamx-v5.twitch-v53 .sts-mock-more-btn{
  position:relative!important;display:flex!important;align-items:center!important;
  height:100%!important;padding:0!important;margin:0!important;
  color:#f4f4f7!important;background:none!important;border:0!important;
  font-size:12px!important;font-weight:700!important;line-height:1!important;text-transform:none!important
}
html body.streamx-v5.twitch-v53 .sts-mock-nav>a:hover{color:#b963ff!important}
html body.streamx-v5.twitch-v53 .sts-mock-nav>a.is-active{color:#a23dff!important}
html body.streamx-v5.twitch-v53 .sts-mock-nav>a.is-active:after{
  content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:14px!important;
  height:2px!important;background:#8f2eff!important;border-radius:999px!important;box-shadow:0 0 10px rgba(143,46,255,.55)!important
}
html body.streamx-v5.twitch-v53 .sts-mock-more-btn{font-size:17px!important;letter-spacing:2px!important}
html body.streamx-v5.twitch-v53 .sts-mock-search{
  position:relative!important;display:flex!important;width:100%!important;height:40px!important;
  margin:0!important;border:1px solid #141923!important;border-radius:6px!important;background:#090d14!important;overflow:visible!important
}
html body.streamx-v5.twitch-v53 .sts-mock-search input{
  flex:1!important;height:100%!important;padding:0 42px 0 15px!important;border:0!important;outline:0!important;
  background:transparent!important;color:#fff!important;font-size:11px!important
}
html body.streamx-v5.twitch-v53 .sts-mock-search input::placeholder{color:#737b88!important}
html body.streamx-v5.twitch-v53 .sts-mock-search button{
  position:absolute!important;right:0!important;top:0!important;width:40px!important;height:38px!important;
  border:0!important;background:transparent!important;color:#bec4ce!important;font-size:18px!important
}
html body.streamx-v5.twitch-v53 .sts-mock-actions{display:flex!important;align-items:center!important;gap:12px!important;justify-content:flex-end!important}
html body.streamx-v5.twitch-v53 .sts-mock-actions .tw-btn{
  min-width:72px!important;height:40px!important;padding:0 17px!important;border-radius:5px!important;
  border:1px solid #353b47!important;background:#05070b!important;color:#fff!important;
  font-size:11px!important;font-weight:750!important;box-shadow:none!important
}
html body.streamx-v5.twitch-v53 .sts-mock-actions .tw-btn.primary{
  min-width:82px!important;border-color:#8021f0!important;background:linear-gradient(135deg,#711df0,#9c31ff)!important;
  box-shadow:0 8px 24px rgba(123,31,246,.22)!important
}

/* ticker */
html body.streamx-v5.twitch-v53 .crypto-ticker,
html body.streamx-v5.twitch-v53 .sts-crypto-ticker{
  min-height:28px!important;height:28px!important;background:#030609!important;border-top:0!important;border-bottom:1px solid #151922!important
}

/* PAGE + SIDEBAR */
html body.streamx-v5.twitch-v53 main.page.v5-page{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:#030509!important}
html body.streamx-v5.twitch-v53 main.page.v5-page>.sts402-shell.sts403-fullscreen{
  display:grid!important;grid-template-columns:228px minmax(0,1fr)!important;gap:0!important;
  width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:#030509!important
}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-sidebar{
  position:sticky!important;top:104px!important;height:calc(100vh - 104px)!important;
  width:228px!important;min-width:228px!important;padding:19px 17px 20px!important;
  background:linear-gradient(180deg,#090d14 0%,#070a10 100%)!important;
  border:0!important;border-right:1px solid #171c25!important;border-radius:0!important;box-shadow:none!important;overflow-y:auto!important
}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-side-nav{display:flex!important;flex-direction:column!important;gap:5px!important;padding:0 0 17px!important;border-bottom:1px solid #1a1f28!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-side-nav>a{
  min-height:41px!important;height:41px!important;padding:0 12px!important;border-radius:5px!important;
  color:#f0f1f5!important;font-size:11px!important;font-weight:650!important
}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-side-nav>a span{width:22px!important;margin-right:8px!important;color:#c8ccd4!important;font-size:17px!important;text-align:center!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-side-nav>a.active{background:linear-gradient(90deg,#2c1250,#25103f)!important;color:#fff!important;box-shadow:none!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-side-title{margin:16px 2px 9px!important;color:#8e95a0!important;font-size:9px!important;font-weight:650!important;letter-spacing:.08em!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-followed{display:flex!important;flex-direction:column!important;gap:3px!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-followed>a{display:grid!important;grid-template-columns:30px minmax(0,1fr) auto!important;gap:8px!important;align-items:center!important;padding:6px 1px!important;border-radius:5px!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-followed img{width:30px!important;height:30px!important;border-radius:50%!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-followed b{font-size:10px!important;font-weight:700!important}.sts403-fullscreen .sts402-followed small{font-size:9px!important;color:#8f96a1!important}.sts403-fullscreen .sts402-followed em{font-size:9px!important;color:#d9dde4!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-show-more{display:flex!important;justify-content:center!important;align-items:center!important;height:36px!important;margin-top:12px!important;padding:0!important;border:1px solid #282e39!important;border-radius:5px!important;background:#0b1017!important;color:#fff!important;font-size:10px!important;font-weight:700!important}

/* CONTENT */
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-content{
  min-width:0!important;width:100%!important;max-width:none!important;padding:16px 18px 28px!important;margin:0!important;background:#030509!important
}

/* HERO exact compact proportion */
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero{
  position:relative!important;width:100%!important;min-height:310px!important;height:310px!important;
  border:1px solid #1b2029!important;border-radius:8px!important;overflow:hidden!important;
  background-size:cover!important;background-position:center center!important;box-shadow:none!important
}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero:after{
  background:linear-gradient(90deg,rgba(2,4,8,.96) 0%,rgba(2,4,8,.86) 22%,rgba(2,4,8,.42) 42%,rgba(2,4,8,.04) 69%,rgba(2,4,8,.20) 100%)!important
}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero-copy{
  position:relative!important;z-index:2!important;display:flex!important;flex-direction:column!important;justify-content:center!important;
  width:430px!important;height:100%!important;min-height:0!important;padding:30px 50px!important
}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-badge{align-self:flex-start!important;padding:4px 7px!important;border-radius:4px!important;font-size:9px!important;font-weight:800!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero h1{margin:11px 0 8px!important;font-size:27px!important;line-height:1.06!important;font-weight:850!important;letter-spacing:-.035em!important;text-transform:uppercase!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero-meta{display:flex!important;gap:8px!important;align-items:center!important;font-size:11px!important;color:#d9dce2!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero-copy>p{margin:11px 0 17px!important;max-width:330px!important;font-size:11px!important;line-height:1.4!important;color:#f1f2f4!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero-actions{display:flex!important;gap:9px!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero-actions a{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:39px!important;height:39px!important;padding:0 16px!important;border:1px solid #4d3b64!important;border-radius:5px!important;background:rgba(5,7,11,.74)!important;color:#fff!important;font-size:10px!important;font-weight:750!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero-actions a.primary{border-color:#8626ff!important;background:linear-gradient(135deg,#781ff2,#982cff)!important;box-shadow:0 8px 24px rgba(133,35,255,.22)!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-arrow{z-index:3!important;width:31px!important;height:31px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.08)!important;background:rgba(9,12,18,.85)!important;color:#fff!important;font-size:20px!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-arrow.left{left:10px!important}.sts403-fullscreen .sts402-arrow.right{right:10px!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-dots{z-index:3!important;bottom:7px!important;gap:5px!important}.sts403-fullscreen .sts402-dots i{width:7px!important;height:7px!important}.sts403-fullscreen .sts402-dots i.active{width:17px!important}

/* SECTION SCALE */
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-section{margin:12px 0 0!important;padding:0!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;margin:0 0 8px!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-heading h2{margin:0!important;font-size:15px!important;line-height:1.2!important;font-weight:800!important;letter-spacing:-.015em!important;color:#f6f6f8!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-heading a{font-size:9px!important;font-weight:650!important;color:#bb5cff!important}

/* LIVE CHANNELS — 6 across at the screenshot width */
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-grid{
  display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:11px!important;
  width:100%!important;padding:0!important;margin:0!important;border:0!important;background:none!important;overflow:visible!important
}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-card{display:block!important;min-width:0!important;width:auto!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-thumb{display:block!important;width:100%!important;aspect-ratio:16/8.65!important;min-height:0!important;height:auto!important;border:1px solid #1b2028!important;border-radius:6px!important;background-size:cover!important;background-position:center!important;overflow:hidden!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-card:first-child .sts402-live-thumb{border-color:#8e2eff!important;box-shadow:0 0 0 1px rgba(142,46,255,.48)!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-thumb>i{top:6px!important;left:6px!important;padding:3px 5px!important;border-radius:3px!important;font-size:8px!important;font-weight:850!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-thumb>em{right:5px!important;bottom:5px!important;padding:3px 5px!important;border-radius:3px!important;background:rgba(0,0,0,.82)!important;font-size:8px!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-card-info{display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;gap:7px!important;align-items:start!important;padding:7px 1px 0!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-card-info>img{width:28px!important;height:28px!important;border-radius:50%!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-card-info b{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:9px!important;line-height:1.2!important;font-weight:750!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-card-info small{display:block!important;margin-top:2px!important;font-size:8px!important;line-height:1.2!important;color:#9299a5!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-card-info label{display:inline-flex!important;margin-top:4px!important;padding:2px 5px!important;border-radius:3px!important;background:#10141b!important;color:#e4e6ea!important;font-size:7px!important;line-height:1!important}

/* CATEGORIES + CLIPS */
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-discovery-grid{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr)!important;gap:20px!important;margin:8px 0 0!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-cat-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-cat-grid>a{position:relative!important;height:118px!important;min-width:0!important;border:1px solid #181d25!important;border-radius:6px!important;background:#090d13!important;overflow:hidden!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-cat-grid>a>span{position:absolute!important;inset:0!important;background-size:cover!important;background-position:center!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-cat-grid b{left:7px!important;bottom:23px!important;font-size:8px!important;font-weight:750!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-cat-grid small{left:7px!important;bottom:8px!important;font-size:7px!important;color:#c5cad1!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-clips-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:9px!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-clips-grid>a{min-width:0!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-clips-grid>a>span{display:block!important;width:100%!important;aspect-ratio:16/8.2!important;border:1px solid #191e26!important;border-radius:6px!important;background-size:cover!important;background-position:center!important;overflow:hidden!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-clips-grid span i,
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-clips-grid span b,
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-clips-grid span em{padding:3px 4px!important;border-radius:3px!important;background:rgba(0,0,0,.78)!important;font-size:7px!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-clips-grid strong{display:block!important;margin-top:5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:8px!important;font-weight:700!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-clips-grid small{display:block!important;margin-top:2px!important;font-size:7px!important;color:#8e96a2!important}

/* benefits strip */
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-benefits{display:grid!important;grid-template-columns:repeat(4,1fr)!important;margin:18px 0 0!important;padding:10px 0!important;border:1px solid #171c24!important;border-radius:7px!important;background:#080c12!important;box-shadow:none!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-benefits>a{display:flex!important;align-items:center!important;gap:10px!important;min-height:42px!important;padding:0 22px!important;border-right:1px solid #1b2028!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-benefits>a:last-child{border-right:0!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-benefits>a>span{font-size:23px!important;color:#9635ff!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-benefits b{font-size:9px!important;color:#bb61ff!important}.sts403-fullscreen .sts402-benefits small{margin-top:3px!important;font-size:8px!important;color:#9aa1ac!important}

@media(max-width:1500px){
  html body.streamx-v5.twitch-v53 .sts-mock-nav{gap:20px!important;margin-left:28px!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-card:nth-child(n+6){display:none!important}
}
@media(max-width:1250px){
  html body.streamx-v5.twitch-v53 header.sts-mockup-header{grid-template-columns:1fr 270px auto!important;padding:0 18px!important}
  html body.streamx-v5.twitch-v53 .sts-mock-nav{gap:15px!important;margin-left:20px!important}
  html body.streamx-v5.twitch-v53 main.page.v5-page>.sts402-shell.sts403-fullscreen{grid-template-columns:190px minmax(0,1fr)!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-sidebar{width:190px!important;min-width:190px!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-card:nth-child(n+5){display:none!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-discovery-grid{grid-template-columns:1fr!important}
}
@media(max-width:980px){
  html body.streamx-v5.twitch-v53 .sts-mock-nav a:nth-of-type(n+5){display:none!important}
  html body.streamx-v5.twitch-v53 main.page.v5-page>.sts402-shell.sts403-fullscreen{grid-template-columns:72px minmax(0,1fr)!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-sidebar{width:72px!important;min-width:72px!important;padding:14px 8px!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-side-nav>a{justify-content:center!important;padding:0!important;font-size:0!important}.sts403-fullscreen .sts402-side-nav>a span{margin:0!important}.sts403-fullscreen .sts402-side-title,.sts403-fullscreen .sts402-followed,.sts403-fullscreen .sts402-show-more{display:none!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-card:nth-child(n+4){display:none!important}
}
@media(max-width:760px){
  html body.streamx-v5.twitch-v53 header.sts-mockup-header{display:flex!important;height:62px!important;min-height:62px!important;padding:0 12px!important}
  html body.streamx-v5.twitch-v53 .sts-mock-brand{flex-basis:165px!important;width:165px!important}.sts-mock-brand img{width:165px!important;height:40px!important}.sts-mock-nav,.sts-mock-search{display:none!important}
  html body.streamx-v5.twitch-v53 main.page.v5-page>.sts402-shell.sts403-fullscreen{display:block!important}.sts403-fullscreen .sts402-sidebar{display:none!important}.sts403-fullscreen .sts402-content{padding:10px!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero{height:300px!important;min-height:300px!important}.sts403-fullscreen .sts402-hero-copy{width:100%!important;padding:24px 35px!important}.sts403-fullscreen .sts402-hero h1{font-size:24px!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sts403-fullscreen .sts402-live-card:nth-child(n+3){display:none!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.sts403-fullscreen .sts402-clips-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sts403-fullscreen .sts402-benefits{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:480px){
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-grid{grid-template-columns:1fr!important}.sts403-fullscreen .sts402-live-card:nth-child(n+2){display:none!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sts403-fullscreen .sts402-clips-grid{grid-template-columns:1fr!important}
}