/* STS v5.7.6 — black + purple compact platform theme */
:root{
  --sts-bg:#030507;
  --sts-panel:#070a0f;
  --sts-panel-2:#0a0e15;
  --sts-line:#171c25;
  --sts-line-soft:#10141b;
  --sts-text:#f7f7fb;
  --sts-muted:#8d93a1;
  --sts-purple:#7c2cff;
  --sts-purple-2:#a546ff;
  --sts-purple-soft:rgba(124,44,255,.16);
  --sts-green:#55ff37;
}
html,body.streamx-v5.twitch-v53{background:#030507!important;color:var(--sts-text)!important}
body.streamx-v5.twitch-v53{background-image:radial-gradient(circle at 18% -18%,rgba(124,44,255,.08),transparent 31%),linear-gradient(180deg,#020304,#05070a 55%,#020304)!important}

/* Compact header matching the supplied reference. */
html body.streamx-v5.twitch-v53 .sts-mockup-header{
  position:sticky!important;top:0!important;z-index:1000!important;
  width:100%!important;min-height:58px!important;height:58px!important;
  padding:0 28px!important;gap:22px!important;
  background:rgba(1,2,4,.98)!important;
  border:0!important;border-bottom:1px solid #141820!important;
  box-shadow:0 1px 0 rgba(255,255,255,.015),0 10px 30px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(18px)!important;
}
html body.streamx-v5.twitch-v53 .sts-mock-left{height:100%!important;display:flex!important;align-items:center!important;min-width:0!important;flex:1 1 auto!important}
html body.streamx-v5.twitch-v53 .sts-mock-brand{
  width:196px!important;height:48px!important;display:flex!important;align-items:center!important;flex:0 0 196px!important;
  overflow:hidden!important;padding:0!important;margin:0!important
}
html body.streamx-v5.twitch-v53 .sts-mock-brand img{
  width:178px!important;height:auto!important;max-height:46px!important;object-fit:contain!important;object-position:left center!important;
  filter:drop-shadow(0 0 10px rgba(124,44,255,.12))!important
}
html body.streamx-v5.twitch-v53 .sts-mock-nav{
  margin-left:24px!important;height:100%!important;display:flex!important;align-items:stretch!important;gap:28px!important;min-width:0!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;justify-content:center!important;
  height:100%!important;padding:0!important;border:0!important;background:none!important;
  color:#f0f0f4!important;font-size:12px!important;font-weight:800!important;letter-spacing:-.01em!important;text-transform:none!important
}
html body.streamx-v5.twitch-v53 .sts-mock-nav>a:hover,
html body.streamx-v5.twitch-v53 .sts-mock-more-btn:hover{color:#b66cff!important}
html body.streamx-v5.twitch-v53 .sts-mock-nav>a.is-active{color:#8b36ff!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:0!important;height:2px!important;
  background:linear-gradient(90deg,#7528ff,#b947ff)!important;box-shadow:0 0 12px rgba(139,54,255,.75)!important
}
html body.streamx-v5.twitch-v53 .sts-mock-more-wrap{height:100%!important;display:flex!important;align-items:center!important}
html body.streamx-v5.twitch-v53 .sts-mock-more-btn{font-size:16px!important;letter-spacing:2px!important;color:#ececf2!important}
html body.streamx-v5.twitch-v53 .sts-mock-more-menu,
html body.streamx-v5.twitch-v53 .sts-account-dropdown,
html body.streamx-v5.twitch-v53 .sts-live-bell-dropdown,
html body.streamx-v5.twitch-v53 .sts-search-results{
  background:#090c12!important;border:1px solid #202634!important;border-radius:10px!important;box-shadow:0 18px 55px rgba(0,0,0,.62)!important
}

html body.streamx-v5.twitch-v53 .sts-mock-search{
  width:min(350px,24vw)!important;min-width:240px!important;height:38px!important;margin-left:auto!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;
  background:#080b11!important;border:1px solid #121722!important;border-radius:6px!important;overflow:visible!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important
}
html body.streamx-v5.twitch-v53 .sts-mock-search:focus-within{border-color:#252b38!important;box-shadow:0 0 0 1px rgba(124,44,255,.18)!important}
html body.streamx-v5.twitch-v53 .sts-mock-search input{
  width:100%!important;height:100%!important;padding:0 13px!important;border:0!important;outline:0!important;background:transparent!important;
  color:#eef0f5!important;font-size:11px!important;font-weight:600!important
}
html body.streamx-v5.twitch-v53 .sts-mock-search input::placeholder{color:#747b89!important;opacity:1!important}
html body.streamx-v5.twitch-v53 .sts-mock-search button{
  width:42px!important;height:100%!important;border:0!important;border-left:1px solid #111620!important;background:transparent!important;
  color:#a8afbd!important;font-size:17px!important
}
html body.streamx-v5.twitch-v53 .sts-mock-search button:hover{color:#b966ff!important;background:#0c1017!important}

html body.streamx-v5.twitch-v53 .sts-mock-actions{display:flex!important;align-items:center!important;gap:10px!important;flex:0 0 auto!important}
html body.streamx-v5.twitch-v53 .sts-mock-actions .tw-btn{
  min-width:72px!important;height:38px!important;padding:0 16px!important;border-radius:5px!important;
  border:1px solid #343946!important;background:#05070a!important;color:#f8f8fb!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  font-size:11px!important;font-weight:850!important;box-shadow:none!important
}
html body.streamx-v5.twitch-v53 .sts-mock-actions .tw-btn:hover{border-color:#6e2ee6!important;background:#0b0d12!important;transform:translateY(-1px)!important}
html body.streamx-v5.twitch-v53 .sts-mock-actions .tw-btn.primary{
  min-width:78px!important;border-color:#7b2bff!important;
  background:linear-gradient(135deg,#6f22ed,#8e31ff)!important;color:#fff!important;
  box-shadow:0 6px 18px rgba(112,33,239,.25)!important
}
html body.streamx-v5.twitch-v53 .sts-mock-actions .tw-btn.primary:hover{background:linear-gradient(135deg,#7c2cff,#9f43ff)!important;box-shadow:0 8px 26px rgba(124,44,255,.34)!important}

/* Carry the same black/purple language through the platform. */
html body.streamx-v5.twitch-v53 main.page,
html body.streamx-v5.twitch-v53 .v5-page{background:transparent!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-sidebar,
html body.streamx-v5.twitch-v53 .sts402-sidebar{background:#070a0f!important;border-color:#151a23!important}
html body.streamx-v5.twitch-v53 .sts403-fullscreen .sts402-side-nav>a.active,
html body.streamx-v5.twitch-v53 .sts402-side-nav>a.active{
  background:linear-gradient(90deg,rgba(124,44,255,.26),rgba(124,44,255,.11))!important;
  box-shadow:inset 0 0 0 1px rgba(152,76,255,.10)!important
}
html body.streamx-v5.twitch-v53 .sts402-hero,
html body.streamx-v5.twitch-v53 .sts402-live-grid,
html body.streamx-v5.twitch-v53 .sts402-benefits,
html body.streamx-v5.twitch-v53 .card,
html body.streamx-v5.twitch-v53 .panel{
  border-color:#171c25!important;background-color:#070a0f!important
}
html body.streamx-v5.twitch-v53 .sts402-heading h2{color:#f5f5f8!important}
html body.streamx-v5.twitch-v53 .sts402-heading a{color:#a94cff!important}
html body.streamx-v5.twitch-v53 .sts402-live-card:hover .sts402-live-thumb,
html body.streamx-v5.twitch-v53 .sts402-cat-grid>a:hover,
html body.streamx-v5.twitch-v53 .sts402-clips-grid>a:hover>span{border-color:#7c2cff!important;box-shadow:0 0 0 1px rgba(124,44,255,.32),0 12px 28px rgba(0,0,0,.42)!important}
html body.streamx-v5.twitch-v53 ::selection{background:#7c2cff!important;color:#fff!important}

@media(max-width:1450px){
  html body.streamx-v5.twitch-v53 .sts-mock-nav{gap:18px!important;margin-left:16px!important}
  html body.streamx-v5.twitch-v53 .sts-mock-brand{width:172px!important;flex-basis:172px!important}
  html body.streamx-v5.twitch-v53 .sts-mock-brand img{width:160px!important}
  html body.streamx-v5.twitch-v53 .sts-mock-search{width:270px!important;min-width:220px!important}
}
@media(max-width:1150px){
  html body.streamx-v5.twitch-v53 .sts-mock-nav>a:nth-of-type(6),
  html body.streamx-v5.twitch-v53 .sts-mock-nav>a:nth-of-type(7){display:none!important}
  html body.streamx-v5.twitch-v53 .sts-mock-search{width:230px!important;min-width:190px!important}
}
@media(max-width:900px){
  html body.streamx-v5.twitch-v53 .sts-mockup-header{padding:0 12px!important;gap:10px!important}
  html body.streamx-v5.twitch-v53 .sts-mock-nav{display:none!important}
  html body.streamx-v5.twitch-v53 .sts-mock-brand{width:164px!important;flex-basis:164px!important}
  html body.streamx-v5.twitch-v53 .sts-mock-search{width:auto!important;min-width:0!important;flex:1 1 auto!important}
}
@media(max-width:620px){
  html body.streamx-v5.twitch-v53 .sts-mockup-header{height:56px!important;min-height:56px!important}
  html body.streamx-v5.twitch-v53 .sts-mock-brand{width:54px!important;flex-basis:54px!important}
  html body.streamx-v5.twitch-v53 .sts-mock-brand img{width:138px!important;max-width:none!important;transform:translateX(-2px)!important}
  html body.streamx-v5.twitch-v53 .sts-mock-search{display:none!important}
  html body.streamx-v5.twitch-v53 .sts-mock-actions{margin-left:auto!important}
  html body.streamx-v5.twitch-v53 .sts-mock-actions .tw-btn{min-width:62px!important;height:36px!important;padding:0 11px!important}
}