/* STS v5.6.219 - Fresh full-site polish
   Goal: cleaner, more modern pages without changing routes or backend logic. */
:root{
  --sts-bg:#05060b;
  --sts-bg-2:#080a12;
  --sts-card:rgba(17,18,31,.86);
  --sts-card-2:rgba(25,22,42,.78);
  --sts-line:rgba(170,100,255,.22);
  --sts-line-soft:rgba(255,255,255,.08);
  --sts-purple:#a846ff;
  --sts-purple-2:#7c3cff;
  --sts-green:#39ff14;
  --sts-green-soft:rgba(57,255,20,.16);
  --sts-text:#f7f5ff;
  --sts-muted:#aaa4bd;
  --sts-danger:#ff3860;
  --sts-radius:22px;
  --sts-radius-sm:14px;
  --sts-shadow:0 24px 70px rgba(0,0,0,.38);
}

html{scroll-behavior:smooth;}
body.streamx-v5,
body.twitch-v53,
body{
  background:
    radial-gradient(circle at 12% 0%, rgba(57,255,20,.075), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(168,70,255,.13), transparent 36%),
    linear-gradient(180deg,#05060b 0%,#070912 48%,#05060b 100%) !important;
  color:var(--sts-text);
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 65%);
}

/* universal page spacing */
main,.page,.content,.container,.dash-page,.admin-page,.settings-page,.browse-page,
section.page-head,.page-head,.admin-hero-tabs{
  max-width:1480px;
  margin-left:auto;
  margin-right:auto;
}
main,.page,.content,.container,.dash-page,.admin-page,.settings-page,.browse-page{
  padding-left:clamp(14px,2vw,34px);
  padding-right:clamp(14px,2vw,34px);
}

/* modern page headers */
.page-head,.admin-hero-tabs,.hero,.dashboard-hero,.settings-hero,.auth-card,.error-card{
  background:linear-gradient(135deg,rgba(25,20,42,.92),rgba(8,16,18,.86)) !important;
  border:1px solid var(--sts-line) !important;
  border-radius:28px !important;
  box-shadow:var(--sts-shadow) !important;
}
.page-head,.admin-hero-tabs,.dashboard-hero,.settings-hero{
  padding:clamp(22px,3vw,42px) !important;
  margin-top:clamp(18px,2.4vw,38px) !important;
  margin-bottom:22px !important;
}
.page-head h1,.admin-hero-tabs h1,.dashboard-hero h1,.settings-hero h1{
  letter-spacing:-.035em;
  line-height:.96;
  text-shadow:0 0 22px rgba(168,70,255,.25);
}
.eyebrow,.section-eyebrow,.kicker{
  color:var(--sts-green) !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  font-weight:900;
}
.muted,small,.subtle,.help-text{color:var(--sts-muted)!important;}

/* cards, panels, rows */
.panel,.card,.sts-card,.dash-card,.stat-card,.creator-card,.category-card,.clip-card,
.vod-card,.settings-card,.admin-card,.drop-card,.report-card-admin,.list-row,.auth-card,
.admin-quick-grid a,.vod-list a,.discovery-card,.stream-card{
  background:linear-gradient(180deg,rgba(22,23,36,.92),rgba(11,13,22,.92)) !important;
  border:1px solid var(--sts-line-soft) !important;
  border-radius:var(--sts-radius) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.26) !important;
}
.panel:hover,.card:hover,.dash-card:hover,.creator-card:hover,.category-card:hover,.clip-card:hover,
.vod-card:hover,.admin-quick-grid a:hover,.vod-list a:hover,.stream-card:hover{
  border-color:rgba(168,70,255,.42)!important;
  transform:translateY(-1px);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
  box-shadow:0 22px 60px rgba(0,0,0,.36),0 0 0 1px rgba(168,70,255,.08)!important;
}
.full,.panel.full{width:100%;}
.dash-grid,.admin-quick-grid,.grid,.cards-grid{
  gap:18px!important;
}

/* forms */
input,textarea,select,.input,.form-control{
  background:rgba(6,9,15,.94)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:var(--sts-text)!important;
  border-radius:14px!important;
  outline:none!important;
  box-shadow:none!important;
}
input:focus,textarea:focus,select:focus,.input:focus,.form-control:focus{
  border-color:var(--sts-purple)!important;
  box-shadow:0 0 0 3px rgba(168,70,255,.18)!important;
}
label{color:#ded8ee;}
.form,.compact-form{gap:14px!important;}

/* buttons */
button,.btn,.tw-btn,.primary,.send-btn,.admin-save-btn,.claim-drop-btn,
a.btn{
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  font-weight:900!important;
  letter-spacing:.015em;
}
.btn,.tw-btn.primary,.primary,.send-btn,.admin-save-btn,.claim-drop-btn,
button[type="submit"]:not(.danger-btn):not(.admin-remove-btn){
  background:linear-gradient(135deg,var(--sts-purple),#b932ee)!important;
  color:white!important;
  box-shadow:0 12px 28px rgba(168,70,255,.24)!important;
}
.btn:hover,.tw-btn.primary:hover,.primary:hover,.send-btn:hover,.admin-save-btn:hover,.claim-drop-btn:hover,
button[type="submit"]:hover:not(.danger-btn):not(.admin-remove-btn){
  filter:brightness(1.08);
  transform:translateY(-1px);
}
.danger-btn,.admin-remove-btn{background:rgba(255,56,96,.14)!important;color:#ff8fa5!important;border-color:rgba(255,56,96,.28)!important;}

/* tables */
table,.admin-users-table{
  border-collapse:separate!important;
  border-spacing:0 10px!important;
  width:100%;
}
thead th{
  color:var(--sts-muted)!important;
  text-transform:uppercase;
  font-size:12px!important;
  letter-spacing:.1em;
  border:0!important;
}
tbody tr{
  background:rgba(15,17,28,.72)!important;
  border-radius:18px!important;
}
tbody td{
  border-top:1px solid rgba(255,255,255,.06)!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  padding:14px!important;
}
tbody td:first-child{border-left:1px solid rgba(255,255,255,.06)!important;border-radius:16px 0 0 16px!important;}
tbody td:last-child{border-right:1px solid rgba(255,255,255,.06)!important;border-radius:0 16px 16px 0!important;}

/* pills/status */
.status-pill,.role-pill,.badge,.pill,.tag,.live-pill,.offline-pill{
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.06)!important;
  padding:.35rem .7rem!important;
  font-weight:900!important;
}
.status-pill.live,.live,.is-live{
  color:var(--sts-green)!important;
  background:var(--sts-green-soft)!important;
  border-color:rgba(57,255,20,.28)!important;
}
.status-pill.offline,.offline{color:#aaa!important;background:rgba(255,255,255,.055)!important;}

/* header polish */
.tw-topbar.sts-glass-nav,.sts-mockup-header{
  backdrop-filter:blur(18px)!important;
  background:rgba(8,8,15,.76)!important;
  border-bottom:1px solid rgba(168,70,255,.35)!important;
  box-shadow:0 10px 35px rgba(0,0,0,.35)!important;
}
.sts-mock-nav a,.sts-mock-more-btn{
  border-radius:12px!important;
}
.sts-mock-nav a:hover,.sts-mock-more-btn:hover,.sts-mock-nav a.is-active,.sts-mock-nav a.active{
  background:rgba(168,70,255,.13)!important;
  color:#fff!important;
}
.sts-nav-search input,.tw-search input{
  border-color:rgba(168,70,255,.35)!important;
}
.sts-account-dropdown,.sts-mock-more-menu,.sts-search-results{
  background:rgba(10,11,19,.96)!important;
  border:1px solid rgba(168,70,255,.25)!important;
  border-radius:18px!important;
  box-shadow:0 24px 80px rgba(0,0,0,.45)!important;
}

/* admin cleanup */
.admin-tab-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px!important;
  margin-top:18px!important;
}
.admin-tab-nav a{
  color:var(--sts-muted)!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:999px!important;
  padding:10px 14px!important;
  text-decoration:none!important;
  font-weight:900!important;
}
.admin-tab-nav a.active,.admin-tab-nav a:hover{
  color:white!important;
  border-color:rgba(168,70,255,.35)!important;
  background:rgba(168,70,255,.16)!important;
}
.admin-quick-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;
  margin-bottom:22px!important;
}
.admin-quick-grid a{
  padding:18px!important;
  text-decoration:none!important;
  color:var(--sts-text)!important;
}
.admin-quick-grid strong{font-size:28px;display:block;margin-bottom:4px;color:var(--sts-green);}
.admin-quick-grid span{color:var(--sts-muted);font-size:13px;}
.admin-users-wrap{overflow:auto;border-radius:22px;}
.admin-user-actions{min-width:260px;}
.admin-badge-checks{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;}
.admin-badge-checks label{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:7px 9px;}

/* streamer/watch polish */
.watch-layout,.stream-layout,.home-showcase,.sts-showcase-wrap{
  gap:18px!important;
}
.video-card,.player-card,.stream-player,.stream-info-panel,.chat-panel{
  border-radius:24px!important;
  border-color:rgba(168,70,255,.22)!important;
}
.chat-panel,.stream-chat,.chat-box{
  background:rgba(7,9,15,.94)!important;
}
.chat-message,.message-row{
  border-radius:14px!important;
}
.chat-input-row,.chat-footer{
  gap:10px!important;
}

/* drops/emotes polish */
.sts-drop-widget,.drop-widget,.active-drop-card{
  background:linear-gradient(135deg,rgba(18,14,32,.94),rgba(8,14,18,.9))!important;
  border-top:1px solid rgba(168,70,255,.25)!important;
}
.progress,.progress-bar,.drop-progress{
  border-radius:999px!important;
  overflow:hidden!important;
}
.unlocked-emote-picker,.streamer-emote-popup,.emote-picker{
  background:rgba(12,13,21,.98)!important;
  border:1px solid rgba(168,70,255,.28)!important;
  border-radius:18px!important;
  box-shadow:0 26px 75px rgba(0,0,0,.55)!important;
}
.unlocked-avatar-tab,.streamer-avatar-tab{
  flex:0 0 38px!important;
  width:38px!important;height:38px!important;
  border-radius:12px!important;
}

/* clean image cards */
img{max-width:100%;}
.creator-card img,.category-card img,.stream-card img,.avatar img,.sts-account-avatar img{
  object-fit:cover;
}

/* footer */
footer,.footer{
  border-top:1px solid rgba(168,70,255,.16)!important;
  background:rgba(4,5,10,.6)!important;
}

/* responsive */
@media (max-width:900px){
  .page-head,.admin-hero-tabs,.dashboard-hero,.settings-hero{border-radius:20px!important;padding:22px!important;}
  .dash-grid,.admin-quick-grid,.grid,.cards-grid{grid-template-columns:1fr!important;}
  .admin-tab-nav{overflow:auto;flex-wrap:nowrap;padding-bottom:6px;}
  .admin-tab-nav a{white-space:nowrap;}
  tbody td{padding:10px!important;}
}
@media (max-width:640px){
  main,.page,.content,.container,.dash-page,.admin-page,.settings-page,.browse-page{padding-left:10px;padding-right:10px;}
  .page-head h1,.admin-hero-tabs h1{font-size:clamp(34px,11vw,54px)!important;}
  .panel,.card,.dash-card,.auth-card{border-radius:18px!important;}
}