/* STS v5.6.217 — Balanced Brand Colours
   Keeps the STS purple/neon-green identity, but makes purple the main UI colour
   and uses green mostly for live/success/drop states. */
:root{
  --sts-bg:#05070d;
  --sts-panel:#11101c;
  --sts-panel-2:#171329;
  --sts-purple:#9b35ff;
  --sts-purple-2:#bf3cff;
  --sts-purple-soft:rgba(155,53,255,.28);
  --sts-green:#39ff14;
  --sts-green-soft:rgba(57,255,20,.16);
  --sts-border:rgba(155,53,255,.46);
  --sts-border-soft:rgba(155,53,255,.24);
  --sts-text:#f7f4ff;
  --sts-muted:#b7abc9;
}

body,
.streamx-v5,
.twitch-v53{
  background:
    radial-gradient(circle at 12% 8%, rgba(57,255,20,.08), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(155,53,255,.13), transparent 34%),
    linear-gradient(180deg,#05070d 0%,#080512 100%) !important;
  color:var(--sts-text) !important;
}

/* Panels/cards: purple glass first, green no longer floods the whole page */
.sts-live-showcase,
.sts-showcase,
.sts-panel,
.sts-card,
.sts-side-card,
.sts-sidebar-card,
.sts-chat,
.chat-panel,
.stream-chat,
.dashboard-card,
.creator-card,
.tw-card,
.sts-featured-card,
.sts-home-card,
.sts-mock-panel,
.sts-drops-card,
.sts-drop-widget{
  background:
    linear-gradient(145deg, rgba(17,16,28,.96), rgba(12,10,22,.97)) !important;
  border:1px solid var(--sts-border-soft) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.42), 0 0 22px rgba(155,53,255,.12) !important;
}

/* Main preview/right info panels: keep a faint green edge only */
.sts-live-showcase,
.sts-showcase-shell,
.sts-hero-showcase,
.sts-featured-stream{
  border-color:rgba(155,53,255,.42) !important;
  box-shadow:0 20px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(57,255,20,.10), 0 0 26px rgba(155,53,255,.16) !important;
}

/* Purple as the main button/action style */
button,
.btn,
.sts-btn,
.chat-send,
.send-btn,
#sendBtn,
.sts-primary-btn,
.sts-action-btn,
.sts-mock-more-btn{
  border-color:rgba(155,53,255,.42) !important;
  box-shadow:0 10px 28px rgba(155,53,255,.20) !important;
}

.btn-primary,
.sts-btn-primary,
.chat-send,
.send-btn,
#sendBtn,
button[type="submit"]:not(.sts-nav-search button),
.sts-action-btn.primary{
  background:linear-gradient(135deg, var(--sts-purple), var(--sts-purple-2)) !important;
  color:#fff !important;
}

/* Green is now reserved for live/online/success/drops */
.live,
.live-badge,
.sts-live-badge,
.status-live,
.online-dot,
.is-live,
.live-dot,
.viewer-live,
.claim-ready,
.success,
.sts-success,
.drop-ready,
.drops-progress-fill,
.sts-drop-progress-fill,
.progress-fill{
  color:var(--sts-green) !important;
}

.live-badge,
.sts-live-badge,
.status-live,
.is-live,
.sts-live-pill,
.sts-claim-ready,
.claim-reward-btn,
.sts-claim-btn{
  background:linear-gradient(135deg, rgba(57,255,20,.95), rgba(122,255,92,.78)) !important;
  color:#061006 !important;
  box-shadow:0 0 18px rgba(57,255,20,.22) !important;
}

/* Reduce heavy green glows on avatars/cards; keep small readable rings */
.avatar,
.user-avatar,
.streamer-avatar,
.chat-avatar,
.sts-avatar,
.sts-account-avatar,
.sts-profile-avatar,
.channel-avatar{
  box-shadow:0 0 0 2px rgba(155,53,255,.45), 0 0 12px rgba(155,53,255,.18) !important;
}
.avatar.is-live,
.user-avatar.is-live,
.streamer-avatar.is-live,
.channel-avatar.is-live,
.sts-avatar.live,
.live .avatar{
  box-shadow:0 0 0 2px rgba(57,255,20,.82), 0 0 14px rgba(57,255,20,.20) !important;
}

/* Header/nav: purple underline, green only for active text glow */
.sts-glass-nav,
.sts-mock-header,
.tw-topbar{
  background:linear-gradient(180deg, rgba(18,12,31,.94), rgba(9,7,18,.98)) !important;
  border-bottom:1px solid rgba(155,53,255,.45) !important;
  box-shadow:0 8px 26px rgba(0,0,0,.45), 0 0 18px rgba(155,53,255,.14) !important;
}
.sts-mock-nav a,
.sts-mock-more-btn{
  color:#f4efff !important;
  text-shadow:none !important;
}
.sts-mock-nav a.is-active,
.sts-mock-nav a:hover,
.sts-mock-more-btn:hover{
  color:var(--sts-green) !important;
  text-shadow:0 0 10px rgba(57,255,20,.34) !important;
}

/* Search/input focus: purple normal, green only on focus */
input,
textarea,
select,
.chat-input,
#chatInput,
.sts-search-input,
.sts-nav-search input{
  background:#0d111a !important;
  border-color:rgba(155,53,255,.28) !important;
  color:var(--sts-text) !important;
  box-shadow:none !important;
}
input:focus,
textarea:focus,
select:focus,
.chat-input:focus,
#chatInput:focus,
.sts-nav-search input:focus{
  border-color:rgba(57,255,20,.78) !important;
  box-shadow:0 0 0 2px rgba(57,255,20,.12), 0 0 14px rgba(57,255,20,.16) !important;
  outline:none !important;
}

/* Sidebar/user cards: remove big green switch glow; status text is enough */
.status-pill,
.live-toggle,
.sts-live-toggle,
.green-pill,
.online-pill{
  background:transparent !important;
  box-shadow:none !important;
  border-color:transparent !important;
}

/* Drops: make progress and claim stand out without flooding page */
.sts-drop-progress,
.drop-progress,
.progress-track{
  background:rgba(255,255,255,.10) !important;
}
.sts-drop-progress > span,
.drop-progress > span,
.progress-track > span,
.progress-fill{
  background:linear-gradient(90deg, var(--sts-green), var(--sts-purple-2)) !important;
  box-shadow:0 0 12px rgba(155,53,255,.18) !important;
}

/* Preview thumbnails: purple selection, green only for live accent */
.sts-preview-card,
.preview-thumb,
.live-preview-thumb,
.sts-rail-card{
  border-color:rgba(155,53,255,.36) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.38), 0 0 14px rgba(155,53,255,.12) !important;
}
.sts-preview-card.is-active,
.preview-thumb.is-active,
.live-preview-thumb.is-active,
.sts-rail-card.is-active{
  border-color:var(--sts-green) !important;
  box-shadow:0 0 18px rgba(57,255,20,.20), 0 12px 32px rgba(0,0,0,.42) !important;
}

/* Chat/emote popups */
.emote-picker,
.unlocked-emote-picker,
.streamer-emote-popup,
.sts-emote-popup{
  background:#10131d !important;
  border:1px solid rgba(155,53,255,.42) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.55), 0 0 18px rgba(155,53,255,.16) !important;
}