/* =====================================================================
   STS v5.7.5 — REFERENCE THEME MATCH
   Loaded last. Recreates the approved compact neon streaming homepage.
===================================================================== */
:root{
  --sts-bg:#03060a;
  --sts-panel:#080c12;
  --sts-panel-2:#0b1018;
  --sts-line:rgba(255,255,255,.075);
  --sts-line-purple:rgba(145,57,255,.42);
  --sts-purple:#8b2cff;
  --sts-purple-2:#b148ff;
  --sts-green:#45f018;
  --sts-red:#ff2447;
  --sts-text:#f7f7fb;
  --sts-muted:#8f96a3;
}

html body.streamx-v5.twitch-v53{
  background:
    radial-gradient(circle at 54% 0,rgba(116,31,218,.08),transparent 30%),
    linear-gradient(180deg,#030508,#05080d 55%,#03060a)!important;
  color:var(--sts-text)!important;
}

/* Header: compact, black, crisp like the reference. */
html body.streamx-v5.twitch-v53 .sts-mockup-header{
  min-height:72px!important;
  height:72px!important;
  padding:0 22px!important;
  border-bottom:1px solid rgba(139,44,255,.28)!important;
  background:rgba(2,4,8,.97)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.38)!important;
  backdrop-filter:blur(18px)!important;
}
html body.streamx-v5.twitch-v53 .sts-mock-brand{width:245px!important;min-width:245px!important}
html body.streamx-v5.twitch-v53 .sts-mock-brand img{width:100%!important;max-height:54px!important;object-fit:contain!important;object-position:left center!important}
html body.streamx-v5.twitch-v53 .sts-mock-nav{gap:28px!important;margin-left:54px!important}
html body.streamx-v5.twitch-v53 .sts-mock-nav>a,
html body.streamx-v5.twitch-v53 .sts-mock-more-btn{
  min-height:72px!important;
  padding:0!important;
  border-radius:0!important;
  color:#f2f2f6!important;
  font-size:13px!important;
  font-weight:850!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
}
html body.streamx-v5.twitch-v53 .sts-mock-nav>a:hover,
html body.streamx-v5.twitch-v53 .sts-mock-nav>a.is-active{color:var(--sts-green)!important;background:transparent!important}
html body.streamx-v5.twitch-v53 .sts-mock-nav>a.is-active:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--sts-green),var(--sts-purple));box-shadow:0 0 12px var(--sts-purple)
}
html body.streamx-v5.twitch-v53 .sts-mock-search{width:min(330px,24vw)!important;height:40px!important;border:1px solid rgba(69,240,24,.48)!important;border-radius:8px!important;background:#080c12!important;box-shadow:none!important}
html body.streamx-v5.twitch-v53 .sts-mock-search input{font-size:12px!important;color:#fff!important}
html body.streamx-v5.twitch-v53 .sts-mock-search button{width:44px!important;color:#fff!important;border-left:1px solid rgba(69,240,24,.28)!important}
html body.streamx-v5.twitch-v53 .sts-mock-actions .btn,
html body.streamx-v5.twitch-v53 .sts-mock-actions>a{
  min-height:40px!important;padding:0 18px!important;border-radius:7px!important;font-size:12px!important;font-weight:850!important
}
html body.streamx-v5.twitch-v53 .sts-mock-actions .btn-primary,
html body.streamx-v5.twitch-v53 .sts-mock-actions>a:last-child{background:linear-gradient(135deg,#7220f4,#9b31ff)!important;border-color:#8d2bff!important;box-shadow:0 7px 22px rgba(118,28,244,.25)!important}

/* Crypto strip. */
html body.streamx-v5.twitch-v53 .crypto-ticker,
html body.streamx-v5.twitch-v53 .sts-crypto-ticker{height:30px!important;min-height:30px!important;background:#020604!important;border-bottom:1px solid rgba(69,240,24,.22)!important;font-size:11px!important}

/* True compact page layout. */
html body.streamx-v5.twitch-v53 main.page.v5-page > div.sts402-shell.sts403-fullscreen{
  grid-template-columns:214px minmax(0,1fr)!important;
  min-height:calc(100vh - 102px)!important;
  background:transparent!important;
}
html body.streamx-v5.twitch-v53 .sts403-fullscreen > .sts402-sidebar{
  position:sticky!important;top:102px!important;height:calc(100vh - 102px)!important;
  padding:16px 14px!important;background:linear-gradient(180deg,#0a1017,#070b11)!important;
  border-right:1px solid var(--sts-line)!important;
}
html body.streamx-v5.twitch-v53 .sts403-fullscreen > .sts402-content{
  padding:14px 16px 28px!important;background:transparent!important;
}

/* Sidebar */
.sts403-fullscreen .sts402-side-nav{gap:5px!important;padding-bottom:15px!important}
.sts403-fullscreen .sts402-side-nav>a{
  min-height:42px!important;padding:0 12px!important;border-radius:7px!important;
  color:#edf0f5!important;font-size:12px!important;font-weight:780!important
}
.sts403-fullscreen .sts402-side-nav>a span{width:20px!important;font-size:18px!important;color:#c9cfda!important}
.sts403-fullscreen .sts402-side-nav>a.active{background:linear-gradient(90deg,rgba(116,37,214,.42),rgba(92,23,172,.20))!important;box-shadow:inset 0 0 0 1px rgba(165,91,255,.08)!important}
.sts403-fullscreen .sts402-side-nav>a.active span{color:#d2a4ff!important}
.sts403-fullscreen .sts402-side-title{margin:17px 3px 9px!important;font-size:9px!important;letter-spacing:.11em!important}
.sts403-fullscreen .sts402-followed{gap:3px!important}
.sts403-fullscreen .sts402-followed>a{grid-template-columns:32px minmax(0,1fr) auto!important;padding:6px 4px!important}
.sts403-fullscreen .sts402-followed img{width:32px!important;height:32px!important}
.sts403-fullscreen .sts402-followed b{font-size:10px!important}.sts403-fullscreen .sts402-followed small{font-size:9px!important}.sts403-fullscreen .sts402-followed em{font-size:9px!important}
.sts403-fullscreen .sts402-show-more{margin-top:11px!important;padding:9px!important;border:1px solid var(--sts-line)!important;background:#10151d!important;font-size:10px!important}

/* Hero: wide, lower profile, premium. */
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero{
  min-height:320px!important;height:clamp(320px,23vw,410px)!important;
  border:1px solid rgba(255,255,255,.10)!important;border-radius:13px!important;
  background-size:cover!important;background-position:center 45%!important;
  box-shadow:0 18px 48px rgba(0,0,0,.34),inset 0 0 80px rgba(0,0,0,.18)!important;
}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero:after{
  content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(2,4,8,.96),rgba(2,4,8,.64) 31%,transparent 61%,rgba(2,4,8,.17));
}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero-copy{
  min-height:320px!important;height:100%!important;width:min(620px,48%)!important;
  padding:38px 54px!important;justify-content:center!important
}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero h1{
  margin:12px 0 8px!important;font-size:clamp(34px,3vw,56px)!important;line-height:.96!important;letter-spacing:-.045em!important;text-shadow:0 6px 25px rgba(0,0,0,.55)!important
}
.sts403-fullscreen .sts402-live-badge{padding:5px 9px!important;border-radius:5px!important;background:var(--sts-red)!important;font-size:10px!important}
.sts403-fullscreen .sts402-hero-meta{font-size:12px!important}.sts403-fullscreen .sts402-hero-copy>p{max-width:430px!important;margin:12px 0 17px!important;font-size:13px!important;color:#e5e7eb!important}
.sts403-fullscreen .sts402-hero-actions a{min-height:42px!important;padding:0 17px!important;border-radius:6px!important;font-size:12px!important}
.sts403-fullscreen .sts402-hero-actions a.primary{background:linear-gradient(135deg,#7620f1,#9b31ff)!important;box-shadow:0 10px 28px rgba(129,34,255,.28)!important}
.sts403-fullscreen .sts402-arrow{width:36px!important;height:36px!important;border:1px solid rgba(255,255,255,.08)!important;background:rgba(12,16,24,.88)!important;box-shadow:0 8px 22px rgba(0,0,0,.36)!important}
.sts403-fullscreen .sts402-dots{bottom:11px!important}.sts403-fullscreen .sts402-dots i{width:8px!important;height:8px!important}.sts403-fullscreen .sts402-dots i.active{width:22px!important;background:var(--sts-purple)!important}

/* Sections */
.sts403-fullscreen .sts402-section{margin-top:12px!important}
.sts403-fullscreen .sts402-heading{margin-bottom:8px!important}
.sts403-fullscreen .sts402-heading h2{font-size:18px!important;font-weight:900!important;letter-spacing:-.025em!important}
.sts403-fullscreen .sts402-heading a{font-size:10px!important;color:#c06cff!important;text-transform:none!important}

/* Smaller six-across stream cards matching the reference. */
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-grid{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:12px!important;
  padding:0!important;border:0!important;border-radius:0!important;background:transparent!important
}
.sts403-fullscreen .sts402-live-thumb{aspect-ratio:16/8.7!important;border-radius:7px!important;border:1px solid rgba(255,255,255,.08)!important}
.sts403-fullscreen .sts402-live-card:first-child .sts402-live-thumb{border-color:#8f2dff!important;box-shadow:0 0 0 1px rgba(143,45,255,.45)!important}
.sts403-fullscreen .sts402-live-thumb>i{left:7px!important;top:7px!important;padding:3px 6px!important;font-size:9px!important}
.sts403-fullscreen .sts402-live-thumb>em{right:6px!important;bottom:6px!important;padding:3px 5px!important;font-size:9px!important}
.sts403-fullscreen .sts402-card-info{grid-template-columns:31px minmax(0,1fr)!important;gap:7px!important;padding:7px 2px 0!important}
.sts403-fullscreen .sts402-card-info>img{width:31px!important;height:31px!important}
.sts403-fullscreen .sts402-card-info b{font-size:10px!important}.sts403-fullscreen .sts402-card-info small{font-size:9px!important}.sts403-fullscreen .sts402-card-info label{margin-top:4px!important;padding:2px 5px!important;font-size:8px!important}
.sts403-fullscreen .sts402-live-card:hover{transform:translateY(-2px)!important}.sts403-fullscreen .sts402-live-card:hover .sts402-live-thumb{box-shadow:0 0 0 1px #9435ff,0 10px 24px rgba(0,0,0,.38)!important}

/* Categories + clips sit on one compact row. */
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-discovery-grid{
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important;gap:24px!important;margin-top:4px!important
}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-cat-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:9px!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-cat-grid>a{height:132px!important;border-radius:7px!important;background:#090d13!important}
.sts403-fullscreen .sts402-cat-grid b{bottom:25px!important;left:8px!important;font-size:10px!important}.sts403-fullscreen .sts402-cat-grid small{bottom:9px!important;left:8px!important;font-size:8px!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-clips-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:9px!important}
.sts403-fullscreen .sts402-clips-grid>a>span{aspect-ratio:16/8.4!important;border-radius:7px!important;border:1px solid rgba(255,255,255,.07)!important}
.sts403-fullscreen .sts402-clips-grid span i,.sts403-fullscreen .sts402-clips-grid span b,.sts403-fullscreen .sts402-clips-grid span em{font-size:8px!important}
.sts403-fullscreen .sts402-clips-grid strong{margin-top:6px!important;font-size:9px!important}.sts403-fullscreen .sts402-clips-grid small{font-size:8px!important}

/* Bottom benefits */
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-benefits{
  margin-top:18px!important;padding:12px 8px!important;border:1px solid var(--sts-line)!important;border-radius:10px!important;background:linear-gradient(90deg,#0b1017,#080c12)!important
}
.sts403-fullscreen .sts402-benefits>a{gap:10px!important;padding:3px 18px!important}.sts403-fullscreen .sts402-benefits>a>span{font-size:27px!important;color:#9d35ff!important}.sts403-fullscreen .sts402-benefits b{font-size:10px!important}.sts403-fullscreen .sts402-benefits small{font-size:8px!important}

/* Responsive */
@media(max-width:1700px){
  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-clips-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .sts403-fullscreen .sts402-clips-grid>a:nth-child(5){display:none!important}
}
@media(max-width:1360px){
  html body.streamx-v5.twitch-v53 .sts-mock-nav{gap:17px!important;margin-left:25px!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-discovery-grid{grid-template-columns:1fr!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-clips-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:1100px){
  html body.streamx-v5.twitch-v53 main.page.v5-page > div.sts402-shell.sts403-fullscreen{grid-template-columns:72px minmax(0,1fr)!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-hero-copy{width:66%!important;padding:34px 44px!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:760px){
  html body.streamx-v5.twitch-v53 .sts-mockup-header{height:auto!important;min-height:64px!important;padding:0 12px!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero{height:390px!important;min-height:390px!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-hero-copy{min-height:390px!important;width:100%!important;padding:26px 22px 45px!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-clips-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:520px){
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-live-grid{grid-template-columns:1fr!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-clips-grid{grid-template-columns:1fr!important}
}