/* STS v5.6.220 — Full Site Fresh Clean UI
   Final site-wide polish layer. Loaded last so all older patch CSS keeps working but looks unified. */
:root{
  --sts-bg:#07060b;
  --sts-bg-2:#0d0a15;
  --sts-panel:rgba(18,14,28,.86);
  --sts-panel-2:rgba(25,20,38,.88);
  --sts-card:rgba(20,16,32,.82);
  --sts-card-hover:rgba(34,27,52,.92);
  --sts-border:rgba(255,255,255,.08);
  --sts-border-strong:rgba(169,92,255,.26);
  --sts-purple:#8f4dff;
  --sts-purple-2:#b47cff;
  --sts-green:#52ff9a;
  --sts-green-soft:rgba(82,255,154,.12);
  --sts-text:#f7f3ff;
  --sts-muted:#a9a1b8;
  --sts-muted-2:#7d748f;
  --sts-danger:#ff5c7a;
  --sts-warning:#ffc857;
  --sts-radius:18px;
  --sts-radius-sm:12px;
  --sts-shadow:0 18px 55px rgba(0,0,0,.35);
  --sts-shadow-soft:0 10px 30px rgba(0,0,0,.28);
  --sts-blur:blur(18px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--sts-bg)}
body.streamx-v5,
body.twitch-v53,
body{
  background:
    radial-gradient(circle at 15% 0%, rgba(143,77,255,.16), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(82,255,154,.06), transparent 30%),
    linear-gradient(180deg,#08060d 0%,#06050a 55%,#090611 100%) !important;
  color:var(--sts-text) !important;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing:.01em;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 70%);
  z-index:-1;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Layout containers */
main,
.page,
.page-wrap,
.content,
.dashboard-wrap,
.admin-wrap,
.settings-wrap,
.profile-wrap,
.sts-tv-main,
.v53-watch-main{
  color:var(--sts-text);
}
.container,
.page-container,
.sts-page,
.sts-admin-page,
.dashboard-page,
.settings-page,
.generic-page,
.v53-stream-info,
.v586-channel-info-row,
.admin-card,
.dashboard-card,
.card,
.panel,
.box,
.mod-card,
.settings-card,
.profile-card,
.creator-card,
.clip-card,
.category-card,
.shop-card,
.drop-card,
.achievement-card,
.sts-live-showcase,
.side-group,
.sts-left-brand-card{
  border-color:var(--sts-border) !important;
  box-shadow:var(--sts-shadow-soft) !important;
}

/* Header/navigation cleanup */
.tw-topbar.sts-glass-nav,
.sts-mockup-header,
.tw-topbar{
  background:rgba(8,7,13,.82) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  backdrop-filter:var(--sts-blur);
  box-shadow:0 12px 40px rgba(0,0,0,.34) !important;
}
.sts-mock-brand img{filter:drop-shadow(0 8px 20px rgba(143,77,255,.20))}
.sts-mock-tabs a,
.sts-mock-more-btn,
.tw-nav a{
  border-radius:999px !important;
  color:var(--sts-muted) !important;
  transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;
}
.sts-mock-tabs a:hover,
.sts-mock-more-btn:hover,
.tw-nav a:hover{
  color:#fff !important;
  background:rgba(143,77,255,.13) !important;
  border-color:rgba(143,77,255,.28) !important;
  transform:translateY(-1px);
}
.sts-nav-search,
.tw-search{
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:999px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.sts-nav-search input,
.tw-search input{
  color:#fff !important;
  background:transparent !important;
}
.sts-nav-search input::placeholder,
.tw-search input::placeholder{color:rgba(255,255,255,.45) !important}
.sts-nav-search button,
.tw-search button{
  background:linear-gradient(135deg,var(--sts-purple),#6535d8) !important;
  border:0 !important;
  color:#fff !important;
  box-shadow:0 8px 22px rgba(143,77,255,.24) !important;
}
.sts-account-menu-button,
.sts-account-dropdown{
  background:rgba(18,14,28,.92) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  box-shadow:var(--sts-shadow) !important;
}
.sts-account-dropdown a:hover{background:rgba(143,77,255,.12) !important}

/* Unified cards */
.card,
.panel,
.box,
.admin-card,
.dashboard-card,
.settings-card,
.profile-card,
.creator-card,
.clip-card,
.category-card,
.shop-card,
.drop-card,
.achievement-card,
.mod-card,
.sts-card,
.side-group,
.v53-stream-info,
.v586-channel-info-row,
.sts-page-section,
.sts-admin-section,
.table-card,
.form-card,
.drops-card,
.v53-chat,
.chat-panel{
  background:linear-gradient(180deg,rgba(23,18,36,.88),rgba(13,10,22,.88)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:var(--sts-radius) !important;
  backdrop-filter:blur(14px);
}
.card:hover,
.creator-card:hover,
.category-card:hover,
.clip-card:hover,
.shop-card:hover,
.drop-card:hover,
.achievement-card:hover{
  background:linear-gradient(180deg,rgba(31,24,48,.94),rgba(16,12,26,.92)) !important;
  border-color:rgba(143,77,255,.26) !important;
  transform:translateY(-2px);
  transition:.18s ease;
}

/* Typography */
h1,h2,h3,h4,.page-title,.section-title,.dashboard-title,.admin-title{
  color:#fff !important;
  letter-spacing:-.03em;
}
p,small,.muted,.subtitle,.page-subtitle,.section-subtitle,.help-text,.hint{
  color:var(--sts-muted) !important;
}
.page-title,h1{
  font-size:clamp(28px,4vw,48px) !important;
  line-height:1.02 !important;
  margin-bottom:10px !important;
}
.section-title,h2{font-size:clamp(22px,2.4vw,34px) !important}

/* Buttons */
button,
.btn,
.button,
.admin-btn,
.dashboard-btn,
.save-btn,
.submit-btn,
.primary-btn,
.sts-btn,
input[type="submit"]{
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.1) !important;
  font-weight:800 !important;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
}
button:hover,
.btn:hover,
.button:hover,
.admin-btn:hover,
.dashboard-btn:hover,
.save-btn:hover,
.submit-btn:hover,
.primary-btn:hover,
.sts-btn:hover,
input[type="submit"]:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 32px rgba(143,77,255,.22) !important;
}
.btn-primary,
.primary-btn,
.save-btn,
.submit-btn,
button[type="submit"],
input[type="submit"]{
  background:linear-gradient(135deg,var(--sts-purple),#6f3df0) !important;
  color:#fff !important;
  border-color:rgba(180,124,255,.28) !important;
}
.btn-success,
.claim-btn,
.live-btn{
  background:linear-gradient(135deg,var(--sts-green),#25c66f) !important;
  color:#04120a !important;
  border-color:rgba(82,255,154,.35) !important;
}
.btn-danger,.delete-btn,.danger-btn{
  background:linear-gradient(135deg,#ff5c7a,#d82752) !important;
  color:#fff !important;
}

/* Forms */
input,
textarea,
select,
.form-control,
.form-input,
.dashboard-input{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  color:#fff !important;
  border-radius:12px !important;
  outline:none !important;
}
input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-input:focus,
.dashboard-input:focus{
  border-color:rgba(143,77,255,.58) !important;
  box-shadow:0 0 0 4px rgba(143,77,255,.12) !important;
}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.38) !important}
label{color:#efe9ff !important;font-weight:700 !important}

/* Tables */
table{
  width:100%;
  border-collapse:separate !important;
  border-spacing:0 8px !important;
}
thead th{
  color:#d9d0ea !important;
  background:rgba(255,255,255,.055) !important;
  border:0 !important;
  padding:12px 14px !important;
  font-size:12px !important;
  text-transform:uppercase;
  letter-spacing:.08em;
}
tbody tr{
  background:rgba(255,255,255,.035) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
}
tbody td{
  border:0 !important;
  padding:14px !important;
  color:#f5efff !important;
}
tbody tr:hover{background:rgba(143,77,255,.08) !important}

/* Homepage refresh */
.sts-tv-home{
  gap:18px !important;
  padding:18px !important;
}
.sts-tv-sidebar{
  background:rgba(8,7,13,.55) !important;
  border-right:1px solid rgba(255,255,255,.07) !important;
}
.side-channel{
  border-radius:14px !important;
  padding:9px !important;
  transition:background .16s ease,transform .16s ease,border-color .16s ease;
}
.side-channel:hover{
  background:rgba(143,77,255,.10) !important;
  transform:translateX(2px);
}
.side-channel img{
  border-radius:50% !important;
  border:2px solid rgba(143,77,255,.28) !important;
}
.side-status-live{
  color:var(--sts-green) !important;
  background:transparent !important;
  text-shadow:none !important;
  font-weight:900 !important;
}
.side-status-offline{color:#858092 !important;background:transparent !important}
.sts-live-showcase{
  overflow:hidden;
  border-radius:24px !important;
  background:linear-gradient(145deg,rgba(25,19,41,.92),rgba(8,7,13,.94)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
.sts-showcase-video,
.sts-showcase-main,
.sts-live-preview,
.v53-player{
  border-radius:20px !important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 22px 70px rgba(0,0,0,.42) !important;
}

/* Watch page / player / chat */
.v53-watch{
  gap:16px !important;
}
.v53-player{
  background:#050508 !important;
}
.v53-player-badges span,
.v53-live,
.live-pill,
.status-live{
  border-radius:999px !important;
  font-weight:900 !important;
}
.v53-live,
.live-pill{
  background:var(--sts-green-soft) !important;
  color:var(--sts-green) !important;
  border:1px solid rgba(82,255,154,.28) !important;
  box-shadow:none !important;
}
.v53-chat,
.chat-shell,
.chat-panel{
  border-radius:20px !important;
  overflow:hidden !important;
}
.chat-message,
.message-row,
.v53-chat-message{
  border-radius:12px !important;
  padding:8px 10px !important;
}
.chat-message:hover,
.message-row:hover,
.v53-chat-message:hover{
  background:rgba(255,255,255,.045) !important;
}
.chat-footer,
.v53-chat-form,
.chat-input-row{
  background:rgba(7,6,12,.82) !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}
.global-emote-rail,
.sts-global-emote-rail{
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:14px !important;
}

/* Drops / unlocked emotes */
.sts-drop-widget,
.drop-progress-card,
.unlocked-emote-picker,
.sts-unlocked-emote-picker{
  background:linear-gradient(180deg,rgba(25,20,38,.96),rgba(10,8,16,.96)) !important;
  border:1px solid rgba(143,77,255,.22) !important;
  border-radius:18px !important;
  box-shadow:0 22px 60px rgba(0,0,0,.45) !important;
}
.sts-drop-progress,
.drop-progress,
.progress-bar{
  background:rgba(255,255,255,.08) !important;
  border-radius:999px !important;
  overflow:hidden;
}
.sts-drop-progress > *,
.drop-progress > *,
.progress-bar > *{
  background:linear-gradient(90deg,var(--sts-purple),var(--sts-green)) !important;
  border-radius:999px !important;
}
.unlocked-emote-avatar,
.sts-unlocked-avatar{
  width:38px !important;
  height:38px !important;
  flex:0 0 38px !important;
  border-radius:50% !important;
  border:2px solid rgba(255,255,255,.1) !important;
}
.unlocked-emote-avatar.active,
.sts-unlocked-avatar.active{
  border-color:var(--sts-purple) !important;
  box-shadow:0 0 0 3px rgba(143,77,255,.14) !important;
}

/* Admin / dashboard */
.admin-layout,
.dashboard-layout,
.settings-layout{
  gap:18px !important;
}
.admin-sidebar,
.dashboard-sidebar,
.settings-sidebar,
.sidebar-nav{
  background:rgba(13,10,22,.76) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:20px !important;
  box-shadow:var(--sts-shadow-soft) !important;
}
.admin-sidebar a,
.dashboard-sidebar a,
.settings-sidebar a,
.sidebar-nav a{
  border-radius:12px !important;
  color:var(--sts-muted) !important;
}
.admin-sidebar a:hover,
.dashboard-sidebar a:hover,
.settings-sidebar a:hover,
.sidebar-nav a:hover,
.admin-sidebar a.active,
.dashboard-sidebar a.active,
.settings-sidebar a.active,
.sidebar-nav a.active{
  background:rgba(143,77,255,.13) !important;
  color:#fff !important;
}
.admin-stat,
.dashboard-stat,
.stat-card{
  background:linear-gradient(180deg,rgba(143,77,255,.12),rgba(255,255,255,.035)) !important;
  border:1px solid rgba(143,77,255,.18) !important;
  border-radius:18px !important;
}

/* Browse/category grids */
.grid,
.cards-grid,
.creator-grid,
.category-grid,
.clips-grid,
.shop-grid,
.drops-grid{
  gap:16px !important;
}
.category-card img,
.clip-card img,
.creator-card img,
.stream-card img{
  border-radius:14px !important;
}

/* Empty/error pages */
.empty-state,
.not-found,
.error-page,
.side-empty{
  background:rgba(255,255,255,.035) !important;
  border:1px dashed rgba(255,255,255,.12) !important;
  border-radius:18px !important;
  color:var(--sts-muted) !important;
}

/* Scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
*::-webkit-scrollbar-thumb{background:rgba(143,77,255,.35);border-radius:999px;border:2px solid rgba(0,0,0,.18)}
*::-webkit-scrollbar-thumb:hover{background:rgba(143,77,255,.55)}

/* Responsive cleanup */
@media (max-width: 980px){
  .sts-tv-home,.v53-watch{padding:10px !important;gap:10px !important}
  .sts-tv-sidebar{display:none !important}
  .tw-topbar.sts-glass-nav{position:sticky;top:0;z-index:80}
  .sts-mock-tabs{overflow-x:auto;white-space:nowrap;max-width:100%}
  .sts-nav-search{order:3;width:100%;margin-top:8px}
  .card,.panel,.box,.admin-card,.dashboard-card,.settings-card,.profile-card{border-radius:14px !important}
  .page-title,h1{font-size:30px !important}
}
@media (max-width: 620px){
  body{font-size:14px}
  .tw-topbar{padding:8px !important}
  .sts-account-name{display:none !important}
  .v53-player,.sts-live-showcase{border-radius:14px !important}
  button,.btn,.button{min-height:38px}
}