/* =========================================================
   SAPPHIRE2 PREMIUM UI SYSTEM
   Global redesign layer
========================================================= */

:root {
  --s2-bg: #020617;
  --s2-bg2: #050b1f;
  --s2-panel: rgba(7, 13, 32, .72);
  --s2-panel2: rgba(9, 16, 38, .82);
  --s2-border: rgba(255, 255, 255, .105);
  --s2-border-strong: rgba(0, 210, 255, .30);
  --s2-text: #eaf6ff;
  --s2-muted: rgba(235,245,255,.62);
  --s2-cyan: #00d2ff;
  --s2-cyan-soft: rgba(0,210,255,.16);
  --s2-purple: #7c3aed;
  --s2-red: #ef4444;
  --s2-green: #22c55e;
  --s2-gold: #ffd700;
  --s2-radius: 24px;
  --s2-radius-sm: 16px;
  --s2-shadow: 0 28px 90px rgba(0,0,0,.34);
  --s2-glow: 0 0 36px rgba(0,210,255,.12);
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 10% 5%, rgba(0,210,255,.16), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(124,58,237,.16), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(239,68,68,.08), transparent 26%),
    linear-gradient(180deg, #020617 0%, #030817 44%, #020617 100%) !important;
  color: var(--s2-text) !important;
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 75%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(120deg, transparent, rgba(0,210,255,.035), transparent);
  animation: s2GlobalSweep 9s ease-in-out infinite;
}

@keyframes s2GlobalSweep {
  0%, 70% {
    transform: translateX(-100%);
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Global text */
h1, h2, h3 {
  color: var(--s2-text) !important;
}

h1 {
  letter-spacing: -.075em !important;
}

p,
.muted {
  color: var(--s2-muted) !important;
}

.eyebrow {
  display: inline-flex !important;
  width: fit-content !important;
  margin: 0 0 8px !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  color: #a5f3fc !important;
  background: rgba(0,210,255,.10) !important;
  border: 1px solid rgba(0,210,255,.20) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

/* Layout shell / sidebar / nav generic upgrade */
.sidebar,
.side,
nav,
.s2-sidebar,
.dashboard-sidebar,
.app-sidebar {
  border-right: 1px solid rgba(255,255,255,.08) !important;
  background:
    radial-gradient(circle at top, rgba(0,210,255,.105), transparent 34%),
    rgba(3,8,20,.78) !important;
  backdrop-filter: blur(18px) !important;
}

.sidebar a,
.side a,
nav a,
.s2-sidebar a,
.dashboard-sidebar a,
.app-sidebar a {
  border-radius: 14px !important;
  transition: all .18s ease !important;
}

.sidebar a:hover,
.side a:hover,
nav a:hover,
.s2-sidebar a:hover,
.dashboard-sidebar a:hover,
.app-sidebar a:hover {
  background: rgba(0,210,255,.10) !important;
  color: white !important;
  box-shadow: inset 0 0 0 1px rgba(0,210,255,.16) !important;
}

/* Main containers */
main,
.page,
.content,
.dashboard-content,
.panel-content {
  color: var(--s2-text) !important;
}

/* Universal panels/cards */
.card,
.panel,
.premium-card,
.market-card,
.inv-skin-card,
.premium-crate-card,
.trade-create-card,
.trade-list-card,
.s2-trade-tab,
.s3-tab,
.s2-online-card,
.s2-rank-card,
.s3-request,
.s3-builder-box,
.s3-trade-side,
.case-opening,
.roulette-wrap,
.empty-state,
.s2-online-empty {
  border: 1px solid var(--s2-border) !important;
  background:
    radial-gradient(circle at top left, rgba(0,210,255,.105), transparent 38%),
    radial-gradient(circle at bottom right, rgba(124,58,237,.095), transparent 34%),
    rgba(7,13,32,.78) !important;
  box-shadow: var(--s2-shadow) !important;
  backdrop-filter: blur(16px) !important;
}

/* Hover cards */
.market-card,
.inv-skin-card,
.premium-crate-card,
.tradeup-card,
.s2-trade-skin,
.s3-select-skin,
.s3-item-card,
.s2-online-card,
.s2-rank-card {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

.market-card:hover,
.inv-skin-card:hover,
.premium-crate-card:hover,
.tradeup-card:hover,
.s2-trade-skin:hover,
.s3-select-skin:hover,
.s3-item-card:hover,
.s2-online-card:hover,
.s2-rank-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(0,210,255,.34) !important;
  box-shadow:
    0 30px 100px rgba(0,0,0,.38),
    0 0 38px rgba(0,210,255,.09) !important;
}

/* Buttons */
button,
.btn,
.market-btn,
.market-sell-btn,
.s2-send-trade-btn,
.s3-send-btn,
.s2-tab-btn,
.s3-tab-btn,
.s2-online-tabs button,
.tradeup-actions-bar button {
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, background .16s ease !important;
}

button:hover,
.btn:hover,
.market-btn:hover,
.market-sell-btn:hover,
.s2-send-trade-btn:hover,
.s3-send-btn:hover,
.tradeup-actions-bar button:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.10) !important;
}

.btn.primary,
button[type="submit"],
.market-btn.buy,
.s2-send-trade-btn,
.s3-send-btn,
.tradeup-actions-bar button,
.s2-online-tabs button.active {
  background: linear-gradient(135deg, #00d2ff 0%, #2563eb 45%, #7c3aed 100%) !important;
  color: white !important;
  border: 0 !important;
  box-shadow: 0 0 32px rgba(0,210,255,.13) !important;
}

button:disabled,
.btn:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: none !important;
}

/* Inputs */
input,
select,
textarea {
  border: 1px solid rgba(0,210,255,.20) !important;
  background: rgba(2,6,23,.76) !important;
  color: var(--s2-text) !important;
  border-radius: 15px !important;
  outline: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(0,210,255,.62) !important;
  box-shadow: 0 0 0 4px rgba(0,210,255,.095) !important;
}

/* Alerts */
.panel-alert {
  border-radius: 18px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
}

.panel-alert.success {
  background: rgba(34,197,94,.12) !important;
  border-color: rgba(34,197,94,.24) !important;
  color: #bbf7d0 !important;
}

.panel-alert.danger {
  background: rgba(239,68,68,.12) !important;
  border-color: rgba(239,68,68,.24) !important;
  color: #fecaca !important;
}

/* Premium page heroes */
.market-hero,
.tradeup-hero,
.trades-hero,
.s3-hero,
.s2-online-hero,
.inventory-hero,
.cases-hero {
  position: relative !important;
  padding: 8px 0 4px !important;
}

.market-hero h1,
.tradeup-hero h1,
.trades-hero h1,
.s3-hero h1,
.s2-online-hero h1,
.inventory-hero h1,
.cases-hero h1 {
  color: white !important;
  text-shadow: 0 0 34px rgba(0,210,255,.11) !important;
}

/* Rarity backgrounds global */
.rarity-consumer-grade {
  background: radial-gradient(circle at top, rgba(176,195,217,.30), transparent 48%), rgba(8,13,28,.86) !important;
}

.rarity-industrial-grade {
  background: radial-gradient(circle at top, rgba(94,152,217,.36), transparent 48%), rgba(8,13,28,.86) !important;
}

.rarity-mil-spec-grade,
.rarity-mil-spec,
.rarity-milspec {
  background: radial-gradient(circle at top, rgba(75,105,255,.42), transparent 48%), rgba(8,13,28,.86) !important;
}

.rarity-restricted {
  background: radial-gradient(circle at top, rgba(136,71,255,.47), transparent 48%), rgba(8,13,28,.86) !important;
}

.rarity-classified {
  background: radial-gradient(circle at top, rgba(211,44,230,.52), transparent 48%), rgba(8,13,28,.86) !important;
}

.rarity-covert {
  background: radial-gradient(circle at top, rgba(235,75,75,.55), transparent 48%), rgba(8,13,28,.86) !important;
}

.rarity-extraordinary,
.rarity-rare-special,
.rarity-rare-special-item {
  background: radial-gradient(circle at top, rgba(255,215,0,.55), transparent 48%), rgba(8,13,28,.86) !important;
}

/* Inventory / marketplace skin images */
.inv-img img,
.market-img img,
.s3-select-img img,
.s3-item-img img,
.tradeup-img img,
.case-item img,
.premium-crate-card img {
  filter: drop-shadow(0 20px 28px rgba(0,0,0,.50)) !important;
}

/* Tables/list rows */
table,
.s2-leaderboard,
.s2-request-list,
.s3-request-list {
  border-radius: var(--s2-radius) !important;
}

tr,
.s2-rank-card {
  transition: background .16s ease, transform .16s ease !important;
}

/* Scrollbar */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: rgba(2,6,23,.6);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0,210,255,.55), rgba(124,58,237,.55));
  border-radius: 999px;
  border: 2px solid rgba(2,6,23,.8);
}

/* Page spacing standard */
.market-page,
.tradeup-page,
.s2-trades-page,
.s3-trades-page,
.s2-online-page,
.inventory-page,
.cases-page {
  animation: s2PageIn .26s ease both;
}

@keyframes s2PageIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Better responsive */
@media (max-width: 900px) {
  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(0,210,255,.16), transparent 34%),
      linear-gradient(180deg, #020617 0%, #030817 100%) !important;
  }
}