/* ==========================================================================
   UPGRADER / SPIKE DROP - Exact Layout Replica
   Theme: Matte Obsidian Dark (#0e0f12) & CS2 Golden Amber (#f7b900)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@500;600;700;800;900&family=Rajdhani:wght@600;700;800&display=swap');

:root {
  /* CSGOEmpire / Rollbit Matte Obsidian Palette */
  --bg-main: #0b0c10;
  --bg-header: #0e1016;
  --bg-card: #12141c;
  --bg-card-hover: #171924;
  --bg-sidebar: #0e1016;
  --bg-input: #0e1016;
  
  /* CSGOEmpire Authentic Gold / Amber */
  --accent-yellow: #f59e0b;
  --accent-yellow-hover: #fbbf24;
  --accent-yellow-active: #d97706;
  --accent-yellow-glow: rgba(245, 158, 11, 0.25);
  --accent-yellow-subtle: rgba(245, 158, 11, 0.10);
  
  /* Tactical Subtle Borders */
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-light: rgba(255, 255, 255, 0.10);
  --border-yellow: rgba(245, 158, 11, 0.35);

  --text-white: #ffffff;
  --text-gray: #94a3b8;
  --text-dim: #64748b;

  /* CS2 Authentic Rarities */
  --rarity-gold: #ffd700;
  --rarity-red: #eb4b4b;
  --rarity-pink: #d32ce6;
  --rarity-purple: #8847ff;
  --rarity-blue: #4b69ff;

  --emerald: #10b981;
  --emerald-subtle: rgba(16, 185, 129, 0.12);

  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-title: 'Montserrat', sans-serif;
  --font-display: 'Rajdhani', sans-serif;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

body {
  background-color: var(--bg-main);
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.04) 0%, transparent 600px),
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
  color: var(--text-white);
  font-family: var(--font-main);
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25);
}
::-webkit-scrollbar-thumb {
  background: var(--accent-yellow);
  border-radius: 4px;
}

/* =============================================================
   1. TOP HEADER (Exact Match)
============================================================= */
.main-header {
  height: 64px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left-group {
  display: flex;
  align-items: center;
  gap: 22px;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
}
.brand-logo-img {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.header-logo:hover .brand-logo-img {
  transform: scale(1.05);
  border-color: var(--accent-yellow);
}
.logo-titles {
  display: flex;
  flex-direction: column;
}
.logo-main-text {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffffff;
  line-height: 1.1;
}
.logo-brand-tag {
  font-size: 9px;
  color: var(--accent-yellow);
  font-weight: 700;
  letter-spacing: 1.5px;
}

.header-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #12141c;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
}
.stat-dot {
  color: var(--emerald);
  font-size: 8px;
}
.stat-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stat-label {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.1;
}
.stat-val {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display);
  color: #ffffff;
  line-height: 1.1;
}

/* Nav Menu */
.header-nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-link {
  color: var(--text-gray);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: color 0.2s;
  padding: 6px 0;
  position: relative;
}
.nav-link:hover {
  color: #fff;
}
.nav-link.active {
  color: #fff;
}
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-yellow);
  box-shadow: 0 0 10px var(--accent-yellow-glow);
}

.rtp-fair-pill {
  background: var(--accent-yellow-subtle);
  border: 1px solid var(--border-yellow);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-yellow);
  cursor: pointer;
}

/* Header Right */
.header-right-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.circle-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1c1d22;
  border: 1px solid var(--border-subtle);
  color: var(--text-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.circle-icon-btn:hover {
  color: #fff;
  border-color: var(--border-light);
}

.user-balance-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #12141c;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  transition: border-color 0.2s ease;
}
.user-balance-pill:hover {
  border-color: rgba(245, 158, 11, 0.4);
}
.balance-coin-icon {
  font-size: 14px;
}
.balance-digits {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.btn-yellow-deposit {
  background: var(--accent-yellow);
  border: none;
  border-radius: var(--radius-sm);
  color: #0b0c10;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 800;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 10px rgba(247, 185, 0, 0.3);
}
.btn-yellow-deposit:hover {
  background: var(--accent-yellow-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(247, 185, 0, 0.5);
}
.btn-plus-icon {
  font-size: 16px;
  line-height: 1;
}

/* Steam Button & Avatar */
.btn-steam-header {
  background: #1c1d22;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.btn-steam-header:hover {
  background: #22252e;
  border-color: #66c0f4;
  color: #66c0f4;
  box-shadow: 0 0 16px rgba(102, 192, 244, 0.35);
  transform: translateY(-1px);
}
.steam-icon-svg {
  width: 14px;
  height: 14px;
  fill: #66c0f4;
}

.steam-avatar-chip {
  position: relative;
  cursor: pointer;
}
.user-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-yellow);
}
.avatar-notif-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #ff3344;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-header);
}

/* =============================================================
   2. APP LAYOUT: SIDEBAR + MAIN VIEW
============================================================= */
.app-layout-container {
  display: flex;
  flex: 1;
  min-height: calc(100vh - 64px);
}

/* Left Sidebar (Upgrades stream) */
.left-upgrades-sidebar {
  width: 140px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.event-banner-card {
  margin: 10px 8px 6px;
  background: linear-gradient(135deg, #2b2513 0%, #17181d 100%);
  border: 1px solid rgba(247, 185, 0, 0.3);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.event-banner-text {
  display: flex;
  flex-direction: column;
}
.event-tag {
  font-size: 8px;
  color: var(--accent-yellow);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.event-title {
  font-size: 12px;
  font-weight: 900;
  color: #fff;
}
.event-banner-img {
  font-size: 20px;
}

.vertical-feed-stream {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  overflow-y: auto;
  overflow-x: hidden;
}
.vertical-feed-stream::-webkit-scrollbar { display: none; }

.feed-item-card, .vertical-feed-item {
  background: #17181d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--accent-yellow);
  border-radius: var(--radius-md);
  padding: 6px 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 52px;
  overflow: hidden;
  transition: all 0.25s;
  animation: slide-in 0.3s ease-out;
}
.feed-item-card.win, .vertical-feed-item.win {
  border-left-color: #00e676;
  background: linear-gradient(90deg, rgba(0, 230, 118, 0.05) 0%, #17181d 100%);
}
.feed-item-card.loss, .vertical-feed-item.loss {
  border-left-color: #ff3344;
  background: linear-gradient(90deg, rgba(255, 51, 68, 0.05) 0%, #17181d 100%);
}
@keyframes slide-in {
  0% { opacity: 0; transform: translateY(-15px); }
  100% { opacity: 1; transform: translateY(0); }
}

.feed-chance-tag, .feed-chance-badge {
  font-size: 10px;
  font-weight: 800;
  color: var(--accent-yellow);
  margin-bottom: 2px;
  z-index: 2;
}
.feed-item-card.win .feed-chance-tag,
.vertical-feed-item.win .feed-chance-badge {
  color: #00e676;
}
.feed-item-card.loss .feed-chance-tag,
.vertical-feed-item.loss .feed-chance-badge {
  color: #ff5252;
}

.feed-skin-name {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 72px;
  z-index: 2;
}
.feed-weapon-name {
  font-size: 9px;
  color: #8e929f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 72px;
  z-index: 2;
}
.feed-item-thumb {
  position: absolute;
  right: -2px;
  bottom: 2px;
  width: 58px;
  height: 44px;
  object-fit: contain;
  opacity: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.85));
  transition: transform 0.2s;
  z-index: 1;
  pointer-events: none;
}
.feed-item-card:hover .feed-item-thumb,
.vertical-feed-item:hover .feed-item-thumb {
  transform: scale(1.15) rotate(-3deg);
}

/* =============================================================
   3. CENTER MAIN VIEW (Upgrader Arena)
============================================================= */
.main-center-view {
  flex: 1;
  padding: 16px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1480px;
  margin: 0 auto;
  width: calc(100% - 140px);
}

.arena-center-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: -6px;
}
.heading-arrows {
  color: var(--accent-yellow);
  font-size: 14px;
}
.heading-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
}

.arena-tool-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: -8px;
}
.tool-icons-left {
  display: flex;
  gap: 6px;
}
.tool-btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #17181d;
  border: 1px solid var(--border-subtle);
  color: var(--text-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.tool-btn-icon:hover {
  color: #fff;
  border-color: var(--border-light);
}

/* =============================================================
   4. THREE-COLUMN UPGRADE ARENA
/* =============================================================
   UPGRADER ARENA 1:1 REPLICA (IMAGE 2)
============================================================= */
.arena-top-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-left: 4px;
}
.arena-icon-btn {
  background: transparent;
  border: none;
  color: #8c909e;
  font-size: 15px;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, transform 0.15s ease;
}
.arena-icon-btn:hover {
  color: #ffffff;
  transform: scale(1.15);
}
.arena-icon-btn.active {
  color: #f7b900;
}

.upgrader-arena-row {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.arena-box {
  background: #14161f;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
  min-height: 290px;
}

.arena-box-center {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-height: auto;
  align-items: center;
  justify-content: center;
}

.box-header-hint {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 4px;
  margin-bottom: 14px;
}
.box-header-hint strong {
  font-size: 13px;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.box-header-hint span {
  font-size: 11px;
  color: #7b808e;
  font-weight: 500;
}

/* AK-47 Placeholder with Military Chevrons (Image 2) */
.weapon-placeholder-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 180px;
  cursor: pointer;
}
.silhouette-img {
  width: 250px;
  height: 120px;
  object-fit: contain;
  opacity: 0.15;
  filter: brightness(0.6);
  position: absolute;
}

.military-chevrons-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.chevrons-svg {
  filter: drop-shadow(0 0 14px rgba(247, 185, 0, 0.65)) drop-shadow(0 0 4px rgba(247, 185, 0, 0.95));
}
.chevrons-svg path {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Active Selected Item Preview in Box */
.active-item-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.preview-skin-img {
  width: 170px;
  height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6));
  transition: transform 0.2s;
}
.active-item-preview:hover .preview-skin-img {
  transform: scale(1.05);
}
.preview-weapon-title {
  font-size: 10px;
  font-weight: 600;
  color: #7b808e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.preview-skin-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}
.preview-price-tag {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #f7b900;
  background: rgba(247, 185, 0, 0.12);
  border: 1px solid rgba(247, 185, 0, 0.3);
  border-radius: 6px;
  padding: 3px 14px;
}
.btn-buy-target-now {
  margin-top: 10px;
  background: rgba(247, 185, 0, 0.15);
  border: 1px solid rgba(247, 185, 0, 0.35);
  color: #f7b900;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-buy-target-now:hover {
  background: #f7b900;
  color: #14161f;
}

/* =============================================================
   CENTER GAUGE / SPEEDOMETER (IMAGE 2)
============================================================= */
.gauge-display-container {
  width: 320px;
  height: 320px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gauge-labels-top {
  display: none;
}
#wheelCanvas {
  width: 320px;
  height: 320px;
  display: block;
}
.gauge-inner-hud {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
  z-index: 10;
}
.hud-watermark-chevron {
  margin-bottom: 2px;
  opacity: 0.6;
}
.gauge-big-percentage {
  font-family: inherit;
  font-size: 38px;
  font-weight: 800;
  color: #4caf50;
  line-height: 1;
  letter-spacing: 0.5px;
  text-shadow: 0 0 24px rgba(76, 175, 80, 0.45);
}
.gauge-small-caption {
  font-size: 12px;
  font-weight: 600;
  color: #8c919d;
  margin-top: 6px;
  letter-spacing: 0.5px;
}
.gauge-pointer-arrow {
  display: none;
}

/* =============================================================
   ARENA BOTTOM CONTROLS ROW (IMAGE 2: 3 COLUMNS)
============================================================= */
.arena-bottom-controls-row {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 18px;
  margin-bottom: 24px;
}
.bottom-control-col.left-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.slider-text-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}
.lbl-balance {
  color: #8c919d;
  font-size: 11px;
}
.val-balance-box {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #8c919d;
  font-size: 11px;
}
.val-balance-box input {
  background: transparent;
  border: none;
  color: #ffffff;
  font-weight: 700;
  font-size: 11px;
  width: 45px;
  outline: none;
  text-align: right;
}
.styled-slider {
  width: 100%;
  accent-color: #f7b900;
  height: 4px;
  background: #252834;
  outline: none;
  border-radius: 2px;
  cursor: pointer;
}

.bottom-control-col.center-col {
  display: flex;
  justify-content: center;
}
.btn-upgrade-action {
  width: 100%;
  max-width: 280px;
  background: #d4a000;
  border: none;
  border-radius: 12px;
  color: #14161f;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  padding: 14px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 16px rgba(212, 160, 0, 0.3);
}
.btn-upgrade-action:hover:not(:disabled) {
  background: #f7b900;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(247, 185, 0, 0.45);
}
.btn-upgrade-action:active:not(:disabled) {
  transform: translateY(1px);
}
.btn-upgrade-action:disabled {
  background: #222530;
  color: #555a6a;
  cursor: not-allowed;
  box-shadow: none;
}
.up-arrow-icon {
  font-size: 14px;
}

.bottom-control-col.right-col {
  display: flex;
  justify-content: flex-end;
}
.multiplier-pills-bar {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pill-btn {
  background: #181a24;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: #8c919d;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pill-btn:hover {
  background: #222634;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
}
.pill-btn.active {
  background: rgba(247, 185, 0, 0.15);
  border-color: #f7b900;
  color: #f7b900;
}
.pill-btn-35 {
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}
.pill-btn-35:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: #ef4444;
  color: #ffffff;
}
.pill-btn-55 {
  border-color: rgba(247, 185, 0, 0.4);
  color: #facc15;
}
.pill-btn-55:hover {
  background: rgba(247, 185, 0, 0.12);
  border-color: #f7b900;
  color: #ffffff;
}
.pill-btn-75 {
  border-color: rgba(34, 197, 94, 0.4);
  color: #4ade80;
}
.pill-btn-75:hover {
  background: rgba(34, 197, 94, 0.12);
  border-color: #22c55e;
  color: #ffffff;
}
.pill-btn-gear {
  padding: 8px 10px;
}

/* =============================================================
   UPGRADE QUICK BUTTONS SETTINGS MODAL
============================================================= */
.modal-upgrade-settings {
  max-width: 480px;
  width: 95%;
  background: #191b22;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  font-family: var(--font-body);
}

.upgrade-settings-body {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-hint-text {
  font-size: 13px;
  color: #8c93a4;
  line-height: 1.45;
  margin: 0;
}

.settings-group-box {
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-group-title {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-group-desc {
  font-size: 11px;
  color: #6d7485;
}

.settings-inputs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.settings-input-card {
  background: #1d202b;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s ease;
}

.settings-input-card:focus-within {
  border-color: #ffd000;
}

.settings-input-card label {
  font-size: 10px;
  font-weight: 800;
  color: #7d8496;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.input-with-prefix {
  display: flex;
  align-items: center;
  gap: 4px;
}

.input-prefix {
  font-size: 15px;
  font-weight: 800;
  color: #ffd000;
}

.settings-input-card input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  width: 100%;
  font-family: inherit;
}

.chance-red:focus-within {
  border-color: #f87171;
}
.chance-red .input-prefix {
  color: #f87171;
}

.chance-yellow:focus-within {
  border-color: #facc15;
}
.chance-yellow .input-prefix {
  color: #facc15;
}

.chance-green:focus-within {
  border-color: #4ade80;
}
.chance-green .input-prefix {
  color: #4ade80;
}

.settings-preview-wrap {
  background: #12141a;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.preview-title {
  font-size: 11px;
  font-weight: 700;
  color: #7d8496;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.preview-bar {
  justify-content: center;
}

.settings-action-row {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.btn-save-upgrade-settings {
  flex: 1.4;
  background: #ffd000;
  border: none;
  border-radius: 10px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 800;
  color: #14161f;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(255, 208, 0, 0.3);
}

.btn-save-upgrade-settings:hover {
  background: #ffe033;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 208, 0, 0.45);
}

.btn-reset-upgrade-settings {
  flex: 1;
  background: #20232c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #8e95a5;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-reset-upgrade-settings:hover {
  background: #282c38;
  color: #ffffff;
}

/* =============================================================
   6. BOTTOM SPLIT SECTION (My Skins | Select Skin)
============================================================= */
.split-windows-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 4px;
}

.split-window-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.panel-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.panel-title-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.yellow-check-sq {
  color: var(--accent-yellow);
  font-size: 15px;
}
.yellow-arrow-sm {
  color: var(--accent-yellow);
  font-size: 11px;
}
.badge-count {
  color: var(--text-dim);
  font-size: 12px;
}

.panel-buttons-right {
  display: flex;
  gap: 6px;
}
.btn-clean-mini {
  background: #141620;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-gray);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-clean-mini:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
  background: #181b26;
}
.btn-bonus-highlight {
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--accent-yellow);
  background: rgba(245, 158, 11, 0.08);
}
.btn-bonus-highlight:hover {
  background: rgba(245, 158, 11, 0.16);
  border-color: var(--accent-yellow);
}

/* Filter controls on catalog panel */
.catalog-header-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-dropdown-select {
  background: #0e1017;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-gray);
  font-size: 11px;
  padding: 5px 8px;
  outline: none;
  transition: border-color 0.15s ease;
}
.filter-dropdown-select:focus {
  border-color: var(--accent-yellow);
}
.range-filter-box {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-dim);
}
.input-range-num {
  background: #0e1017;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  width: 55px;
  padding: 4px 6px;
  outline: none;
  transition: border-color 0.15s ease;
}
.input-range-num:focus {
  border-color: var(--accent-yellow);
}
.search-input-box {
  position: relative;
  display: flex;
  align-items: center;
}
.search-input-box input {
  background: #0e1017;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: #ffffff;
  font-size: 11px;
  padding: 4px 24px 4px 8px;
  width: 110px;
  outline: none;
  transition: border-color 0.15s ease;
}
.search-input-box input:focus {
  border-color: var(--accent-yellow);
}
.search-glass-icon {
  position: absolute;
  right: 6px;
  font-size: 10px;
  color: var(--text-dim);
  pointer-events: none;
}

/* Category Tabs */
.catalog-category-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
}
.catalog-category-tabs::-webkit-scrollbar { display: none; }
.cat-pill-tab {
  background: #141620;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-gray);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.cat-pill-tab:hover {
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
.cat-pill-tab.active {
  background: rgba(245, 158, 11, 0.12);
  border-color: var(--accent-yellow);
  color: var(--accent-yellow);
}

/* Scrollable Skin Grids */
.skins-scrollable-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 8px;
  max-height: 330px;
  overflow-y: auto;
  padding-right: 4px;
}
.catalog-style-grid {
  max-height: 290px;
}

/* Empty state for user inventory */
.inv-empty-state {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 16px;
  background: rgba(20, 21, 26, 0.4);
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
}
.inv-empty-icon {
  margin-bottom: 12px;
}
.empty-state-sticker {
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7));
  transition: transform 0.3s;
}
.empty-state-sticker:hover {
  transform: scale(1.1) rotate(4deg);
}
.inv-empty-title {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}
.inv-empty-desc {
  font-size: 12px;
  color: #8e929f;
  max-width: 320px;
  line-height: 1.5;
  margin: 0 auto 14px;
}
.inv-empty-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.btn-highlight-gold {
  background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
  color: #111216;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(255, 183, 0, 0.35);
  transition: all 0.2s;
}
.btn-highlight-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 183, 0, 0.55);
}

/* Individual Skin Card (CSGOEmpire / Rollbit Tactical Item) */
.grid-skin-card {
  background: #12141c;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 8px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  overflow: hidden;
}
.grid-skin-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--card-rarity, rgba(255, 255, 255, 0.08));
}
.grid-skin-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: #171924;
  transform: translateY(-2px);
}
.grid-skin-card.selected {
  border-color: #f7b900 !important;
  background: #181c28 !important;
  box-shadow: 0 0 16px rgba(247, 185, 0, 0.4) !important;
  transform: translateY(-2px);
}

.card-top-price {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--accent-yellow);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 3px;
  padding: 2px 6px;
  align-self: flex-start;
  margin-bottom: 2px;
}
.card-top-price.gold-tag {
  color: var(--accent-yellow);
  background: rgba(245, 158, 11, 0.12);
}

.grid-skin-img {
  width: 90px;
  height: 65px;
  object-fit: contain;
  margin: 4px 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
  transition: transform 0.2s ease;
}
.grid-skin-card:hover .grid-skin-img {
  transform: scale(1.05);
}
.grid-skin-weapon {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.grid-skin-name {
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* Pagination Footer */
.pagination-footer-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
.btn-arrow-nav {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: #1c1d22;
  border: 1px solid var(--border-subtle);
  color: var(--text-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
}
.btn-arrow-nav:hover {
  color: #fff;
  border-color: var(--accent-yellow);
}
.current-page-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-yellow);
  background: #1c1d22;
  border: 1px solid var(--border-yellow);
  width: 26px;
  height: 26px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-count-hint {
  font-size: 11px;
  color: var(--text-dim);
}

/* =============================================================
   7. FLOATING CHAT BUBBLE (Bottom Right)
============================================================= */
.floating-chat-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-yellow);
  color: #0e0f12;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(247, 185, 0, 0.5);
  cursor: pointer;
  z-index: 90;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.floating-chat-bubble:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(247, 185, 0, 0.7);
}

/* =============================================================
   8. MODALS & OVERLAYS
============================================================= */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(4, 5, 8, 0.85);
  backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 20px;
}
.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: #17181d;
  border: 1px solid var(--border-yellow);
  border-radius: var(--radius-lg);
  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.8), 0 0 35px var(--accent-yellow-subtle);
  animation: modal-pop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}
@keyframes modal-pop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.modal-small {
  width: 100%;
  max-width: 520px;
}
.modal-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-gray);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}
.modal-close-btn:hover { color: #fff; }

.provably-fair-box {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.info-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.info-row label {
  font-size: 11px;
  color: var(--text-gray);
}
.info-row code {
  background: #101115;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  font-family: monospace;
  font-size: 11px;
  color: var(--accent-yellow);
  word-break: break-all;
}

/* Steam Modals */
.steam-modal-box {
  background: #171a21;
  border: 1px solid #324865;
  border-radius: 8px;
  width: 100%;
  max-width: 520px;
}
.steam-modal-header {
  background: #101822;
  border-bottom: 1px solid #2a3f5a;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.steam-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #c5c3c0;
}
.steam-icon-sm {
  width: 18px;
  height: 18px;
  fill: #66c0f4;
}
.steam-modal-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.steam-auth-site-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #1b2838;
  border: 1px solid #2a475e;
  border-radius: 6px;
}
.steam-site-logo {
  height: 40px;
  border-radius: 6px;
}
.steam-site-name {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.steam-site-perm {
  font-size: 11px;
  color: #8f98a0;
}

.steam-security-badge {
  background: rgba(102, 192, 244, 0.08);
  border: 1px solid rgba(102, 192, 244, 0.25);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.45;
  color: #b8b6b4;
}
.steam-sub-header {
  font-size: 12px;
  font-weight: 700;
  color: #c5c3c0;
}
.steam-presets-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.steam-pro-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #1b2838;
  border: 1px solid #2a475e;
  border-radius: 6px;
  padding: 8px 4px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.steam-pro-item:hover {
  border-color: #66c0f4;
  background: #213347;
  transform: translateY(-2px);
}
.steam-pro-item img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  margin-bottom: 4px;
}
.steam-pro-nick {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.steam-pro-team {
  font-size: 9px;
  color: #8f98a0;
}
.steam-pro-lvl {
  font-size: 9px;
  color: #ffd700;
  font-weight: 700;
}

.steam-divider-line {
  display: flex;
  align-items: center;
  text-align: center;
  color: #4b6177;
  font-size: 10px;
  font-weight: 700;
  margin: 4px 0;
}
.steam-divider-line::before, .steam-divider-line::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #2a3f5a;
}
.steam-divider-line span { padding: 0 8px; }

.steam-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.steam-form-group label {
  font-size: 11px;
  color: #8f98a0;
}
.steam-dark-input {
  background: #101822;
  border: 1px solid #2a3f5a;
  border-radius: 4px;
  padding: 8px 10px;
  color: #fff;
  font-size: 12px;
  outline: none;
}
.steam-dark-input:focus { border-color: #66c0f4; }

.btn-steam-action {
  background: linear-gradient(to right, #75b022 5%, #588a1b 95%);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 10px;
  cursor: pointer;
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(88, 138, 27, 0.4);
}
.btn-steam-action:hover { filter: brightness(1.15); }

/* Steam Profile Modal */
.steam-profile-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #1b2838;
  border: 1px solid #2a475e;
  border-radius: 6px;
  padding: 14px;
}
.steam-profile-avatar-lg {
  width: 58px;
  height: 58px;
  border-radius: 6px;
  border: 2px solid #5c7e10;
}
.steam-profile-name-lg {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}
.steam-level-pill {
  font-size: 10px;
  color: #ffd700;
  background: rgba(255,215,0,0.15);
  border: 1px solid rgba(255,215,0,0.4);
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 700;
}
.steam-status-tag {
  font-size: 11px;
  color: #5c7e10;
  font-weight: 600;
}
.steam-online-indicator {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5c7e10;
  margin-right: 4px;
}
.steam-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.steam-stat-item {
  background: #101822;
  border: 1px solid #2a3f5a;
  border-radius: 4px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
}
.steam-stat-label {
  font-size: 10px;
  color: #8f98a0;
}
.steam-stat-val {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

/* Rig options */
.rig-options-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rig-option-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #121316;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  cursor: pointer;
}
.rig-option-card.active {
  border-color: var(--accent-yellow);
  background: rgba(247, 185, 0, 0.08);
}
.rig-card-title {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}
.rig-card-desc {
  font-size: 11px;
  color: var(--text-gray);
}

#confettiCanvas {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 999;
}

/* =============================================================
   NEW ENHANCED UI: BUY SKINS, STORE, TOASTIFY & MODAL
============================================================= */

/* Target preview buy button */
.btn-buy-target-now {
  margin-top: 10px;
  background: var(--accent-yellow);
  color: #0e0f12;
  border: none;
  border-radius: 6px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 800;
  padding: 8px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(247, 185, 0, 0.4);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 100%;
}
.btn-buy-target-now:hover {
  background: #ffc400;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(247, 185, 0, 0.65);
}

/* Catalog Card Quick Action Buttons */
.card-quick-actions {
  display: flex;
  gap: 4px;
  width: 100%;
  margin-top: 6px;
  z-index: 2;
}
.btn-card-buy-quick {
  flex: 1.1;
  background: rgba(247, 185, 0, 0.18);
  border: 1px solid rgba(247, 185, 0, 0.45);
  color: var(--accent-yellow);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  padding: 4px 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.15s;
}
.btn-card-buy-quick:hover {
  background: var(--accent-yellow);
  color: #0e0f12;
  border-color: var(--accent-yellow);
  transform: scale(1.04);
}
.btn-card-upg-quick {
  flex: 0.9;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.15s;
}
.btn-card-upg-quick:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #fff;
  transform: scale(1.04);
}

/* Inventory Total Value Badge */
.inv-sum-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-yellow);
  background: rgba(247, 185, 0, 0.12);
  border: 1px solid rgba(247, 185, 0, 0.25);
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 6px;
}
.btn-skin-sell-card {
  width: 100%;
  margin-top: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #8e929f;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-skin-sell-card:hover {
  background: rgba(255, 51, 68, 0.15);
  border-color: #ff3344;
  color: #ff3344;
}

/* Buy Skin Modal */
.buy-skin-preview-box {
  width: 100%;
  background: #111216;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6);
}
.buy-rarity-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
}
.buy-preview-img {
  width: 190px;
  height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.7));
  margin: 8px 0;
  transition: transform 0.25s;
}
.buy-skin-preview-box:hover .buy-preview-img {
  transform: scale(1.06);
}
.buy-weapon-title {
  font-size: 11px;
  color: #8e929f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.buy-skin-title {
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
}
.buy-price-badge {
  font-size: 20px;
  font-weight: 900;
  color: var(--accent-yellow);
  margin-top: 8px;
  background: var(--accent-yellow-subtle);
  border: 1px solid var(--border-yellow);
  padding: 4px 16px;
  border-radius: 20px;
}
.buy-balance-summary {
  width: 100%;
  background: #14151a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #8e929f;
}
.buy-modal-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.btn-confirm-purchase {
  flex: 1;
  justify-content: center;
  padding: 14px;
  font-size: 15px;
}

/* Toastify Gaming Theme */
.toastify {
  font-family: var(--font-main) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(247, 185, 0, 0.5) !important;
  background: #17181d !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 15px rgba(247, 185, 0, 0.3) !important;
  padding: 12px 20px !important;
}
.toast-success {
  border-color: #00e676 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 15px rgba(0, 230, 118, 0.3) !important;
}
.toast-error {
  border-color: #ff3344 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 15px rgba(255, 51, 68, 0.3) !important;
}

/* =============================================================
   NEW: ESPORTS PLAYER PROFILE & INSTANT WITHDRAW HUB
/* =============================================================
   STEAM PROFILE MODAL: REDESIGN MATCHING USER REFERENCE
============================================================= */
.fd-profile-modal-box {
  max-width: 1040px !important;
  width: 95vw !important;
  max-height: 92vh !important;
  background: #121316 !important;
  border: 1px solid #23262e !important;
  border-radius: 20px !important;
  padding: 22px 24px !important;
  position: relative !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  color: #fff !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 1px rgba(255, 255, 255, 0.1) !important;
}
.fd-profile-modal-box::-webkit-scrollbar {
  width: 6px;
}
.fd-profile-modal-box::-webkit-scrollbar-thumb {
  background: #2a2e38;
  border-radius: 4px;
}

.fd-modal-close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  background: transparent;
  border: none;
  color: #8e929f;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  z-index: 10;
}
.fd-modal-close-btn:hover {
  color: #fff;
  transform: scale(1.1);
}

/* 1. VIP Club Banner */
.fd-vip-banner {
  background: rgba(22, 24, 29, 0.85);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.fd-vip-left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.fd-vip-badge-text {
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fd-crown-icon {
  color: #8e929f;
  font-size: 13px;
}
.fd-vip-subtext {
  color: #8e929f;
  font-size: 13px;
}
.fd-btn-vip {
  background: #252830;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}
.fd-btn-vip:hover {
  background: #2f333d;
  border-color: rgba(255, 255, 255, 0.22);
}

/* 2. Main Dashboard Card */
.fd-dashboard-card {
  background: #17181c;
  border: 1px solid #23262e;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fd-dashboard-top-grid {
  display: grid;
  grid-template-columns: 280px 1fr 340px;
  gap: 14px;
  align-items: stretch;
}

/* Column 1: User & Push Notifications */
.fd-user-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fd-user-header-card {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #1e2026;
  border: 1px solid #282b34;
  border-radius: 14px;
  padding: 14px;
}
.fd-user-avatar-wrap {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #2c303a;
  flex-shrink: 0;
  background: #121316;
}
.fd-user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fd-user-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.fd-user-nick {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}
.fd-user-controls-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fd-id-pill {
  background: #252831;
  color: #8e929f;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}
.fd-mini-icon-btn {
  background: #252831;
  color: #8e929f;
  border: none;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
}
.fd-mini-icon-btn:hover {
  background: #333845;
  color: #fff;
}

.fd-push-card {
  background: #1e2026;
  border: 1px solid #282b34;
  border-radius: 12px;
  padding: 12px 14px;
}
.fd-push-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fd-push-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #252831;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8e929f;
  font-size: 13px;
  flex-shrink: 0;
}
.fd-push-texts {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.fd-push-texts strong {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
}
.fd-push-texts span {
  font-size: 11px;
  color: #8e929f;
}

/* Custom Switch Toggle */
.fd-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.fd-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.fd-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #2b2e38;
  transition: 0.25s;
  border-radius: 22px;
}
.fd-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.25s;
  border-radius: 50%;
}
.fd-switch input:checked + .fd-slider {
  background-color: #ffc700;
}
.fd-switch input:checked + .fd-slider:before {
  transform: translateX(16px);
  background-color: #121316;
}

.fd-btn-notifications-manage {
  background: #23262f;
  color: #8e929f;
  border: 1px solid #2c303c;
  border-radius: 10px;
  padding: 10px;
  font-size: 12px;
  font-weight: 700;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}
.fd-btn-notifications-manage:hover {
  background: #2b2f3a;
  color: #fff;
}

/* Column 2: Balance & Coupon */
.fd-balance-col {
  display: flex;
  flex-direction: column;
}
.fd-balance-card {
  background: #1e2026;
  border: 1px solid #282b34;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}
.fd-bal-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #8e929f;
}
.fd-bal-icon-stack {
  color: #8e929f;
  font-size: 14px;
}
.fd-bal-val-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 2px;
}
.fd-bal-number {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
}
.fd-coin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fd-link-payments {
  color: #8e929f;
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  width: fit-content;
  transition: color 0.15s;
}
.fd-link-payments:hover {
  color: #fff;
}

.fd-coupon-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.fd-coupon-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: #16171b;
  border: 1px solid #282b34;
  border-radius: 8px;
  padding: 0 10px;
  gap: 8px;
}
.fd-coupon-ticket-icon {
  color: #8e929f;
  font-size: 12px;
}
.fd-coupon-input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 12px;
  padding: 9px 0;
  width: 100%;
  outline: none;
}
.fd-btn-coupon-apply {
  background: #2a2d36;
  color: #fff;
  border: 1px solid #363a45;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 0 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.fd-btn-coupon-apply:hover {
  background: #363a46;
  border-color: #4a4f5d;
}

.fd-btn-deposit-yellow {
  background: #ffc700;
  color: #000;
  font-size: 14px;
  font-weight: 800;
  border: none;
  border-radius: 10px;
  padding: 13px;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(255, 199, 0, 0.25);
}
.fd-btn-deposit-yellow:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 199, 0, 0.4);
}

/* Column 3: Best Drop, Withdrawn, Upgrades */
.fd-stats-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fd-best-drop-card {
  background: linear-gradient(135deg, #22242b 0%, #1a1c22 100%);
  border: 1px solid #2c2f38;
  border-radius: 14px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 116px;
}
.fd-best-content {
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.fd-best-top-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.fd-best-title {
  font-size: 12px;
  color: #8e929f;
  font-weight: 600;
}
.fd-best-percent-badge {
  background: rgba(255, 199, 0, 0.15);
  color: #ffc700;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid rgba(255, 199, 0, 0.25);
}
.fd-best-weapon-txt {
  font-size: 10px;
  color: #8e929f;
  font-weight: 700;
  text-transform: uppercase;
}
.fd-best-name-txt {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
}
.fd-best-wear-txt {
  font-size: 10px;
  color: #696e7c;
  font-weight: 600;
  margin-bottom: 4px;
}
.fd-best-price-txt {
  font-size: 13px;
  font-weight: 800;
  color: #ffc700;
  display: flex;
  align-items: center;
  gap: 4px;
}
.fd-best-visual-wrap {
  position: absolute;
  right: 4px;
  top: 0;
  bottom: 0;
  width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fd-chevron-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fd-best-skin-img {
  width: 100px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8));
  z-index: 1;
  transition: transform 0.25s;
}
.fd-best-drop-card:hover .fd-best-skin-img {
  transform: scale(1.08);
}

.fd-mini-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.fd-stat-box-mini {
  background: #1e2026;
  border: 1px solid #282b34;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}
.fd-stat-mini-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #8e929f;
  margin-bottom: 4px;
}
.fd-icon-round {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #252831;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #8e929f;
}
.fd-stat-mini-sub {
  font-size: 11px;
  color: #8e929f;
  margin-bottom: 2px;
}
.fd-stat-mini-val {
  font-size: 14px;
  font-weight: 800;
  color: #ffc700;
  display: flex;
  align-items: center;
  gap: 4px;
}
.fd-stat-mini-upgrades-row {
  font-size: 18px;
  font-weight: 900;
  color: #ffc700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.fd-yellow-angles {
  color: #ffc700;
  font-size: 14px;
}

/* Dashboard Bottom Row: Email & Trade URL */
.fd-dashboard-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fd-email-link-card {
  background: #1e2026;
  border: 1px solid #282b34;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fd-email-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fd-icon-round-lg {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #252831;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;
}
.fd-email-texts strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.fd-email-texts span {
  display: block;
  font-size: 11px;
  color: #8e929f;
}
.fd-btn-link-action {
  background: #252831;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.fd-btn-link-action:hover {
  background: #303440;
}

.fd-trade-config-card {
  background: #1e2026;
  border: 1px solid #282b34;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fd-trade-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fd-trade-texts {
  flex: 1;
}
.fd-trade-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #fff;
  font-weight: 700;
}
.fd-trade-hint-link {
  font-size: 11px;
  color: #66c0f4;
  text-decoration: underline;
}
.fd-trade-input-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.fd-trade-text-input {
  flex: 1;
  background: #16171b;
  border: 1px solid #282b34;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 11px;
  color: #fff;
  outline: none;
}
.fd-btn-save-trade {
  background: linear-gradient(to right, #75b022 5%, #588a1b 95%);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  white-space: nowrap;
}
.fd-btn-save-trade:hover {
  filter: brightness(1.15);
}

/* 3. Bottom Inventory Section */
.fd-inventory-section {
  background: #17181c;
  border: 1px solid #23262e;
  border-radius: 16px;
  margin-top: 14px;
  overflow: hidden;
}
.fd-inv-navbar {
  background: #1c1e24;
  border-bottom: 1px solid #262932;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.fd-inv-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.fd-inv-tab-btn {
  background: transparent;
  border: none;
  color: #8e929f;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}
.fd-inv-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.fd-inv-tab-btn.active {
  background: #ffc700;
  color: #000;
  font-weight: 800;
}
.fd-vs-pill {
  background: rgba(255, 255, 255, 0.12);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
}
.fd-inv-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}
.fd-control-switch-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #8e929f;
  font-weight: 600;
}
.fd-btn-sell-all-dark {
  background: #22242b;
  color: #8e929f;
  border: 1px solid #2c2f38;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
}
.fd-btn-sell-all-dark:hover {
  color: #fff;
  background: #2c2f38;
}

.fd-tab-page {
  min-height: 180px;
  padding: 12px 16px;
}
.fd-empty-inventory-text {
  padding: 70px 20px;
  text-align: center;
  color: #696e7c;
  font-size: 14px;
  font-weight: 500;
}

.fd-batch-withdraw-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #14161b;
  border: 1px solid #242730;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}
.fd-batch-info {
  font-size: 12px;
  color: #c5c3c0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fd-batch-info strong {
  color: #ffc700;
}
.fd-dot-sep {
  color: #555;
}
.fd-batch-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fd-inventory-grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px;
}
.fd-inventory-grid-wrap::-webkit-scrollbar {
  width: 5px;
}
.fd-inventory-grid-wrap::-webkit-scrollbar-thumb {
  background: #2a3f5a;
  border-radius: 4px;
}

@media (max-width: 900px) {
  .fd-dashboard-top-grid {
    grid-template-columns: 1fr;
  }
  .fd-dashboard-bottom-row {
    grid-template-columns: 1fr;
  }
}
.btn-do-withdraw-all:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 230, 118, 0.6);
}
.btn-do-withdraw-all:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

/* 6. Profile Inventory Grid */
.profile-inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px;
}
.profile-inventory-grid::-webkit-scrollbar {
  width: 5px;
}
.profile-inventory-grid::-webkit-scrollbar-thumb {
  background: #2a3f5a;
  border-radius: 4px;
}

.prof-skin-card {
  background: #151921;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid var(--card-rarity, #f7b900);
  border-radius: 8px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.prof-skin-card:hover {
  background: #1c222d;
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}
.prof-skin-card.selected {
  border: 1.5px solid #00e676;
  border-top: 3px solid #00e676;
  background: rgba(0, 230, 118, 0.08);
  box-shadow: 0 0 16px rgba(0, 230, 118, 0.35);
}
.prof-skin-checkbox {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: transparent;
  transition: all 0.15s;
}
.prof-skin-card.selected .prof-skin-checkbox {
  background: #00e676;
  border-color: #00e676;
  color: #0e0f12;
}
.prof-skin-price {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10px;
  font-weight: 800;
  color: var(--accent-yellow);
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 6px;
  border-radius: 4px;
}
.prof-skin-thumb {
  width: 100px;
  height: 64px;
  object-fit: contain;
  margin: 14px 0 6px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
  transition: transform 0.2s;
}
.prof-skin-card:hover .prof-skin-thumb {
  transform: scale(1.08);
}
.prof-skin-weapon {
  font-size: 9px;
  color: #8f98a0;
  text-transform: uppercase;
  font-weight: 600;
}
.prof-skin-name {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
  text-align: center;
  margin-bottom: 6px;
}
.prof-card-actions {
  display: flex;
  gap: 4px;
  width: 100%;
  margin-top: 2px;
}
.btn-prof-withdraw-single {
  flex: 1;
  background: rgba(0, 230, 118, 0.15);
  border: 1px solid rgba(0, 230, 118, 0.45);
  color: #00e676;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.15s;
}
.btn-prof-withdraw-single:hover {
  background: #00e676;
  color: #0e0f12;
  transform: scale(1.04);
}
.btn-prof-sell-single {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #8f98a0;
  border-radius: 4px;
  font-size: 10px;
  padding: 4px 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-prof-sell-single:hover {
  color: var(--accent-yellow);
  border-color: var(--accent-yellow);
}

/* 7. Arena Card Withdraw Button in "Мои скины" */
.btn-skin-withdraw-card {
  margin-top: 4px;
  width: 100%;
  background: rgba(0, 230, 118, 0.15);
  border: 1px solid rgba(0, 230, 118, 0.4);
  color: #00e676;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s;
}
.btn-skin-withdraw-card:hover {
  background: #00e676;
  color: #0e0f12;
  transform: scale(1.03);
}

/* 8. Withdrawal History List */
.withdraw-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px;
}
.withdraw-hist-item {
  background: #14181f;
  border: 1px solid #243547;
  border-left: 3px solid #00e676;
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.hist-item-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hist-item-title {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}
.hist-item-meta {
  font-size: 10px;
  color: #8f98a0;
  display: flex;
  gap: 8px;
}
.hist-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.hist-item-price {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-yellow);
}
.hist-status-pill {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 230, 118, 0.15);
  color: #00e676;
}

/* 9. Steam Trade Offer Simulation Modal */
.trade-bot-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #101822;
  border: 1px solid #2a3f5a;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 14px;
  position: relative;
}
.trade-bot-avatar {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  border: 1.5px solid var(--accent-yellow);
}
.bot-verified-tag {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 9px;
  font-weight: 800;
  color: #00e676;
  background: rgba(0, 230, 118, 0.15);
  border: 1px solid rgba(0, 230, 118, 0.35);
  padding: 2px 6px;
  border-radius: 4px;
}
.trade-status-icon-box {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 230, 118, 0.1);
  border: 2px solid #00e676;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 24px;
  color: #00e676;
  box-shadow: 0 0 20px rgba(0, 230, 118, 0.4);
}
.trade-plane-fly {
  animation: plane-fly 1.5s ease-in-out infinite alternate;
}
@keyframes plane-fly {
  0% { transform: translate(-2px, 2px); }
  100% { transform: translate(3px, -3px); }
}
.trade-sent-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  margin: 10px 0;
  text-align: left;
}
.trade-sent-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #14181f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 10px;
}
.trade-sent-item-row img {
  width: 44px;
  height: 28px;
  object-fit: contain;
}
.trade-sent-item-row .skin-title {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex: 1;
}
.trade-sent-item-row .skin-val {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-yellow);
}
.trade-token-box {
  background: #101822;
  border: 1px dashed #2a3f5a;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 11px;
  color: #8f98a0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.trade-token-box code {
  color: #66c0f4;
  font-weight: 700;
}

@media (max-width: 768px) {
  .profile-stats-dashboard {
    grid-template-columns: repeat(2, 1fr);
  }
  .profile-hero-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* =============================================================
   DEV TAGS & HOT BADGES (HEADER & PROFILE)
============================================================= */
.nav-dev-tag {
  display: inline-block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ff9800;
  background: rgba(255, 152, 0, 0.14);
  border: 1px solid rgba(255, 152, 0, 0.35);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 5px;
  vertical-align: middle;
  text-transform: uppercase;
}
.nav-hot-tag {
  display: inline-block;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(135deg, #ff3344, #ff8c00);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 5px;
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(255, 75, 75, 0.6);
  animation: pulse-hot 1.8s infinite;
}
@keyframes pulse-hot {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 75, 75, 0.5); }
  50% { transform: scale(1.08); box-shadow: 0 0 14px rgba(255, 75, 75, 0.85); }
}

.badge-dev-tag {
  display: inline-block;
  font-size: 8px;
  font-weight: 800;
  color: #ff9800;
  background: rgba(255, 152, 0, 0.16);
  border: 1px solid rgba(255, 152, 0, 0.32);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.fd-dev-empty-box {
  padding: 50px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.fd-dev-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 152, 0, 0.1);
  border: 1px solid rgba(255, 152, 0, 0.3);
  color: #ff9800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.fd-dev-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.fd-dev-desc {
  font-size: 13px;
  color: #8e929f;
  max-width: 440px;
  margin: 0;
  line-height: 1.5;
}
.fd-dev-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ff9800;
  background: rgba(255, 152, 0, 0.12);
  border: 1px solid rgba(255, 152, 0, 0.3);
  padding: 5px 14px;
  border-radius: 20px;
  margin-top: 6px;
}

/* =============================================================
   GAME VIEW PANES (UPGRADER vs CRASH)
============================================================= */
.game-view-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  animation: fadeInPane 0.25s ease-out;
}
@keyframes fadeInPane {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   CRASH ARENA STYLES
============================================================= */
.crash-history-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #14151a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 14px;
  overflow: hidden;
}
.crash-history-label {
  font-size: 11px;
  font-weight: 800;
  color: #8e929f;
  letter-spacing: 0.5px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.crash-history-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.crash-history-pills::-webkit-scrollbar { display: none; }

.crash-pill {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  letter-spacing: 0.3px;
}
.crash-pill:hover {
  transform: translateY(-2px);
}
.crash-pill.loss {
  background: rgba(255, 51, 68, 0.12);
  border: 1px solid rgba(255, 51, 68, 0.35);
  color: #ff5252;
}
.crash-pill.win {
  background: rgba(0, 230, 118, 0.12);
  border: 1px solid rgba(0, 230, 118, 0.4);
  color: #00e676;
}
.crash-pill.moon {
  background: linear-gradient(135deg, rgba(255, 0, 128, 0.35), rgba(255, 140, 0, 0.35));
  border: 1px solid #ffaa00;
  color: #ffd700;
  box-shadow: 0 0 14px rgba(255, 170, 0, 0.6);
  animation: moon-pill-glow 1.5s infinite alternate;
}
@keyframes moon-pill-glow {
  0% { box-shadow: 0 0 10px rgba(255, 170, 0, 0.4); transform: scale(1); }
  100% { box-shadow: 0 0 20px rgba(255, 0, 128, 0.8); transform: scale(1.05); }
}

/* Stage Layout */
.crash-stage-grid {
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 16px;
  align-items: stretch;
}

/* Canvas Graph Card */
.crash-graph-card {
  background: #111216;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6);
}
.crash-canvas-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#crashCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Multiplier HUD */
.crash-multiplier-hud {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 10;
}
.crash-hud-sub {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #8e929f;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.crash-hud-number {
  font-family: var(--font-main, 'Montserrat', sans-serif);
  font-size: 78px;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
  letter-spacing: 1px;
  text-shadow: 0 0 30px rgba(247, 185, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.8);
  transition: color 0.15s, transform 0.15s;
}
.crash-hud-number.crashed {
  color: #ff3344 !important;
  text-shadow: 0 0 35px rgba(255, 51, 68, 0.8), 0 4px 12px rgba(0, 0, 0, 0.9) !important;
  animation: shake 0.4s ease-in-out;
}
.crash-hud-number.moon {
  background: linear-gradient(135deg, #ff007f 0%, #ff8c00 50%, #ffd700 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 25px rgba(255, 140, 0, 0.9));
  transform: scale(1.1);
}
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20%, 60% { transform: translate(-4px, 2px); }
  40%, 80% { transform: translate(4px, -2px); }
}

/* Countdown bar */
.crash-hud-countdown-wrap {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 220px;
}
.crash-countdown-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
}
.crash-countdown-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f7b900, #00e676);
  border-radius: 6px;
  transition: width 0.1s linear;
}
.crash-countdown-text {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

/* Moon Session Banner */
.crash-moon-banner {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(255, 0, 128, 0.85), rgba(255, 140, 0, 0.9));
  border: 2px solid #ffd700;
  box-shadow: 0 0 35px rgba(255, 140, 0, 0.8), 0 0 60px rgba(255, 0, 128, 0.6);
  border-radius: 12px;
  padding: 10px 24px;
  text-align: center;
  z-index: 12;
  pointer-events: none;
  animation: moon-banner-pulse 1.2s infinite alternate;
}
.moon-fire-icons {
  font-size: 20px;
  margin-bottom: 2px;
}
.moon-banner-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0,0,0,0.8);
}
.moon-banner-sub {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
  opacity: 0.95;
}
@keyframes moon-banner-pulse {
  0% { transform: translateX(-50%) scale(0.98); }
  100% { transform: translateX(-50%) scale(1.03); }
}

/* Betting Console */
.crash-bet-console {
  background: #14151a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.crash-tabs-header {
  display: flex;
  background: #0f1013;
  border-radius: 8px;
  padding: 4px;
  gap: 4px;
}
.crash-tab-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #8e929f;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.crash-tab-btn:hover {
  color: #fff;
}
.crash-tab-btn.active {
  background: #1e2027;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.crash-tab-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.crash-console-label {
  font-size: 11px;
  font-weight: 700;
  color: #8e929f;
}

/* Skin Picker */
.crash-skin-picker-box {
  background: #0f1013;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px;
  max-height: 155px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.crash-skin-pick-card {
  background: #17181f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.crash-skin-pick-card:hover {
  border-color: rgba(247, 185, 0, 0.5);
  transform: translateY(-2px);
}
.crash-skin-pick-card.selected {
  border-color: #f7b900;
  background: rgba(247, 185, 0, 0.08);
  box-shadow: 0 0 10px rgba(247, 185, 0, 0.3);
}
.crash-pick-img {
  width: 48px;
  height: 34px;
  object-fit: contain;
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.crash-pick-name {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}
.crash-pick-price {
  font-size: 10px;
  font-weight: 800;
  color: #f7b900;
  margin-top: 2px;
}

/* Selected Skin Preview Bar */
.crash-selected-skin-preview {
  background: #0f1013;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 52px;
  display: flex;
  align-items: center;
}
.crash-sel-empty {
  font-size: 11px;
  color: #8e929f;
  display: flex;
  align-items: center;
  gap: 8px;
}
.crash-sel-filled {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.crash-sel-img {
  width: 50px;
  height: 36px;
  object-fit: contain;
}
.crash-sel-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.crash-sel-weapon {
  font-size: 10px;
  color: #8e929f;
  text-transform: uppercase;
}
.crash-sel-name {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}
.crash-sel-price {
  font-size: 12px;
  font-weight: 800;
  color: #f7b900;
}
.crash-btn-unselect-skin {
  background: transparent;
  border: none;
  color: #8e929f;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}
.crash-btn-unselect-skin:hover {
  color: #ff3344;
}

/* Cash Bet Input */
.crash-input-num-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.crash-num-input {
  width: 100%;
  background: #0f1013;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 36px 10px 14px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}
.crash-num-input:focus {
  border-color: #f7b900;
}
.crash-curr-pill {
  position: absolute;
  right: 14px;
  font-size: 14px;
  font-weight: 800;
  color: #f7b900;
}
.crash-quick-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.crash-chip-btn {
  background: #17181f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 2px;
  font-size: 11px;
  font-weight: 700;
  color: #8e929f;
  cursor: pointer;
  transition: all 0.2s;
}
.crash-chip-btn:hover {
  background: #20222a;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

/* Auto-Cashout */
.crash-auto-cashout-card {
  background: #0f1013;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crash-auto-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #8e929f;
}
.crash-auto-title {
  display: flex;
  align-items: center;
  gap: 6px;
}
.crash-auto-input-row {
  position: relative;
  display: flex;
  align-items: center;
}
.crash-auto-val-input {
  width: 100%;
  background: #17181f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 7px 30px 7px 10px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  outline: none;
}
.crash-auto-val-input:focus {
  border-color: #00e676;
}
.crash-x-tag {
  position: absolute;
  right: 10px;
  font-size: 12px;
  font-weight: 800;
  color: #00e676;
}

/* Real-Time Live Payout meter */
.crash-payout-meter-card {
  background: rgba(0, 230, 118, 0.06);
  border: 1px solid rgba(0, 230, 118, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.crash-payout-caption {
  font-size: 11px;
  color: #8e929f;
  font-weight: 700;
}
.crash-payout-digits {
  font-size: 15px;
  font-weight: 900;
  color: #00e676;
}

/* Main Action Button */
.btn-crash-main-action {
  width: 100%;
  padding: 16px;
  border-radius: 10px;
  border: none;
  font-family: var(--font-main, 'Montserrat', sans-serif);
  font-weight: 900;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
  color: #121316;
  box-shadow: 0 4px 18px rgba(255, 183, 0, 0.45);
}
.btn-crash-main-action:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 183, 0, 0.65);
}
.btn-crash-caption-main {
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 900;
}
.btn-crash-caption-sub {
  font-size: 12px;
  font-weight: 800;
  opacity: 0.85;
}

/* CASHOUT (Active in round) State */
.btn-crash-main-action.cashout-state {
  background: linear-gradient(135deg, #00e676 0%, #00b0ff 100%) !important;
  color: #05140b !important;
  box-shadow: 0 0 30px rgba(0, 230, 118, 0.75) !important;
  animation: btn-cashout-glow 0.8s infinite alternate;
}
@keyframes btn-cashout-glow {
  0% { transform: scale(1); box-shadow: 0 0 20px rgba(0, 230, 118, 0.6); }
  100% { transform: scale(1.03); box-shadow: 0 0 35px rgba(0, 230, 118, 0.95); }
}

.btn-crash-main-action:disabled {
  background: #242730;
  color: #646877;
  box-shadow: none;
  cursor: not-allowed;
  transform: none !important;
}

/* Aux tools */
.crash-aux-tools {
  display: flex;
  gap: 6px;
  justify-content: space-between;
  margin-top: 4px;
}
.crash-aux-tools .btn-clean-mini {
  flex: 1;
  font-size: 10px;
  padding: 6px 4px;
  text-align: center;
  justify-content: center;
}

/* Live Bets Table */
.crash-live-bets-table-card {
  background: #14151a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.crash-bets-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.crash-bets-left-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.crash-bets-right-pool {
  font-size: 12px;
  color: #8e929f;
}
.crash-pool-sum {
  font-weight: 800;
  color: #f7b900;
}

.crash-bets-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crash-bet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0f1013;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 8px 12px;
  transition: all 0.2s;
}
.crash-bet-row.is-user {
  border-color: rgba(247, 185, 0, 0.5);
  background: rgba(247, 185, 0, 0.04);
}
.crash-bet-row-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.crash-bet-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.crash-bet-nick {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}
.crash-bet-wager {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #f7b900;
  flex: 1;
  justify-content: center;
}
.crash-bet-wager-skin-img {
  width: 32px;
  height: 22px;
  object-fit: contain;
}
.crash-bet-result {
  min-width: 130px;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
}
.crash-bet-result.in-game {
  color: #8e929f;
}
.crash-bet-result.cashed {
  color: #00e676;
}
.crash-bet-result.busted {
  color: #ff3344;
}

@media (max-width: 960px) {
  .crash-stage-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   1:1 REPLICA CASHERA ACQUIRING PAYMENT MODAL (IMAGE 1)
============================================================= */
.modal-deposit-v2 {
  max-width: 490px;
  width: 95%;
  background: #191b22;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
  border-radius: 18px;
  overflow: hidden;
  font-family: var(--font-body);
}

.modal-header-clean {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 14px;
}

.modal-title-clean {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.2px;
  margin: 0;
}

.modal-header-clean .modal-close-btn {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #6c7384;
  cursor: pointer;
  transition: color 0.15s ease;
  padding: 0;
}

.modal-header-clean .modal-close-btn:hover {
  color: #ffffff;
}

.deposit-modal-body-v2 {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 1. Category Switcher Tabs */
.deposit-category-tabs {
  display: flex;
  background: #13141a;
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.dep-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: #7b8294;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dep-tab-btn:hover:not(.active) {
  color: #d1d5db;
}

.dep-tab-btn.active {
  background: #252834;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* 2. Subhead */
.dep-methods-subhead {
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #798092;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 3. Payment Methods Grid */
.dep-methods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.dep-method-card {
  background: #20232c;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  min-height: 68px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.dep-method-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: #252834;
}

.dep-method-card.active {
  border-color: #ffd000;
  background: #222530;
  box-shadow: 0 0 16px rgba(255, 208, 0, 0.15);
}

.dep-method-content {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.sbp-logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.dep-method-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dep-method-main {
  font-size: 16px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.1;
}

.dep-tag-mini {
  font-size: 11px;
  font-weight: 800;
  color: #7d8496;
}

.dep-method-sub {
  font-size: 10px;
  font-weight: 800;
  color: #7d8496;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sber-logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.sber-green {
  color: #21a038;
}

.mir-logo-badge {
  display: flex;
  align-items: center;
  padding-left: 4px;
}

.mir-text-logo {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #009846 0%, #00a44c 45%, #00a0e3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dep-gift-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  background: #3b82f6;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
  z-index: 2;
}

/* 4. Amount Selection Section */
.dep-amount-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.dep-amount-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dep-amount-label {
  font-size: 13px;
  font-weight: 600;
  color: #8c93a4;
}

.dep-quick-chips {
  display: flex;
  gap: 6px;
}

.dep-chip-btn {
  background: #20232c;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: #8c93a4;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dep-chip-btn:hover {
  color: #ffffff;
  background: #262936;
}

.dep-chip-btn.active {
  background: #ffd000;
  color: #14161f;
  font-weight: 800;
  border-color: #ffd000;
  box-shadow: 0 2px 10px rgba(255, 208, 0, 0.35);
}

.dep-big-input-wrap {
  background: #13141a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.15s;
}

.dep-big-input-wrap:focus-within {
  border-color: #ffd000;
}

.dep-big-input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  width: 100%;
  font-family: inherit;
  letter-spacing: -0.5px;
}

.dep-big-input.invalid-min {
  color: #ef4444;
}

.dep-currency-symbol {
  font-size: 24px;
  font-weight: 800;
  color: #6c7384;
  padding-left: 8px;
  user-select: none;
}

.deposit-min-alert {
  margin-top: 4px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #ef4444;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 5. Promocode Box */
.dep-promocode-wrap {
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dep-promo-icon {
  color: #656d80;
  font-size: 15px;
}

.dep-promo-input {
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
}

.dep-promo-input::placeholder {
  color: #555c6d;
}

/* 6. Agreement Checkbox */
.dep-agreement-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin-top: 2px;
}

.dep-custom-checkbox {
  display: none;
}

.dep-checkbox-custom {
  width: 18px;
  height: 18px;
  background: #ffd000;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #14161f;
  font-weight: 900;
  transition: all 0.15s;
  flex-shrink: 0;
}

.dep-custom-checkbox:not(:checked) + .dep-checkbox-custom {
  background: #1e212b;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: transparent;
}

.dep-agreement-text {
  font-size: 12px;
  color: #8c93a4;
  font-weight: 500;
}

.dep-agreement-link {
  color: #8c93a4;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dep-agreement-link:hover {
  color: #ffffff;
}

/* 7. Solid Yellow Button */
.btn-deposit-yellow-v2 {
  width: 100%;
  background: #ffd000;
  border: none;
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 17px;
  font-weight: 900;
  color: #14161f;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 6px 24px rgba(255, 208, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.btn-deposit-yellow-v2:hover:not(:disabled) {
  background: #ffe033;
  transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(255, 208, 0, 0.55);
}

.btn-deposit-yellow-v2:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-deposit-yellow-v2:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-dep-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

/* 8. Footers */
.dep-footer-help-text {
  font-size: 11px;
  color: #606778;
  line-height: 1.45;
  text-align: center;
  margin: 2px 0 0;
}

.dep-footer-legal-text {
  background: #14161d;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 9.5px;
  color: #4b5262;
  line-height: 1.45;
  text-align: center;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

/* Cashera Checkout Invoice Modal */
.modal-cashera-invoice {
  max-width: 480px;
  width: 95%;
  background: #14161b;
  border: 1px solid rgba(0, 230, 118, 0.3);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9), 0 0 35px rgba(0, 230, 118, 0.15);
  border-radius: 14px;
}

/* ==========================================================================
   AUTHENTIC CS2 SKIN STORE / CATALOG (MATCHING REFERENCE SCREENSHOT 1-TO-1)
   ========================================================================== */

.store-main-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  background: #0f1117;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px 18px 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

/* --- Top Store Toolbar --- */
.store-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.store-tool-btn {
  height: 38px;
  min-width: 38px;
  background: #141620;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0 12px;
  user-select: none;
}

.store-tool-btn:hover {
  background: #181b26;
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.store-btn-knife {
  width: 38px;
  padding: 0;
}

.store-btn-knife.active {
  border-color: var(--accent-yellow);
  color: var(--accent-yellow);
  background: rgba(245, 158, 11, 0.12);
}

.store-btn-shop {
  padding: 0 14px 0 8px;
  gap: 8px;
  background: #141620;
}

.store-btn-shop.active {
  background: #141620;
  border-color: var(--border-subtle);
}

.store-tab-icon-sq {
  width: 24px;
  height: 24px;
  background: var(--accent-yellow);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0b0c10;
  font-size: 12px;
}

.store-tab-title {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.store-btn-sort-dir {
  width: 38px;
  padding: 0;
}

.store-btn-sort-dir.desc svg {
  transform: rotate(180deg);
}

.store-select-wrap {
  position: relative;
  height: 38px;
  background: #141620;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  padding: 0 30px 0 12px;
  transition: border-color 0.15s ease;
}
.store-select-wrap:focus-within {
  border-color: var(--accent-yellow);
}

.store-dropdown-select {
  background: transparent;
  border: none;
  outline: none;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  font-family: inherit;
}

.store-select-arrow {
  position: absolute;
  right: 12px;
  color: #64748b;
  font-size: 11px;
  pointer-events: none;
}

.store-price-pill {
  height: 38px;
  background: #141620;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  gap: 6px;
  width: 105px;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.store-price-pill:focus-within {
  border-color: var(--accent-yellow);
}

.coin-hex-svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.store-pill-input {
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  width: 100%;
}

.store-pill-input::placeholder {
  color: #64748b;
  font-weight: 500;
  font-family: var(--font-main);
  font-size: 12px;
}

.store-search-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.store-btn-search {
  width: 38px;
  padding: 0;
}

.store-search-expandable-input {
  height: 38px;
  background: #141620;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  color: #ffffff;
  font-size: 13px;
  outline: none;
  width: 140px;
  font-family: inherit;
  transition: width 0.2s, border-color 0.2s;
}
.store-search-expandable-input:focus {
  border-color: var(--accent-yellow);
  width: 180px;
}

.store-top-cart-btn {
  margin-left: auto;
  height: 42px;
  width: 46px;
  background: #ffd000;
  border: none;
  border-radius: 10px;
  color: #000000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  font-size: 16px;
  box-shadow: 0 4px 14px rgba(255, 208, 0, 0.35);
  transition: all 0.15s ease;
}

.store-top-cart-btn:hover {
  background: #ffe033;
  transform: translateY(-1px);
}

.store-top-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #0f1117;
  color: #ffd000;
  border: 1.5px solid #ffd000;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  box-sizing: border-box;
}

/* --- Store 5x4 Grid --- */
.store-skins-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  min-height: 420px;
}

@media (max-width: 1100px) {
  .store-skins-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .store-skins-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 580px) {
  .store-skins-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Skin Card --- */
/* --- Skin Card (CSGOEmpire / Rollbit Tactical Store Item) --- */
.store-card {
  background: #12141c;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 10px 8px 10px;
  height: 182px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  user-select: none;
}
.store-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--card-rarity, rgba(255, 255, 255, 0.08));
}

.store-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: #171924;
  transform: translateY(-2px);
}

/* Selected state (CSGOEmpire Clean Gold Focus) */
.store-card.selected,
.store-card.upgrade-selected,
.store-card.in-cart {
  border: 1.5px solid var(--accent-yellow);
  background: #161824;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.22);
}

.store-card.selected:hover,
.store-card.upgrade-selected:hover,
.store-card.in-cart:hover {
  transform: translateY(-2px);
  border-color: var(--accent-yellow-hover);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.3);
}

/* Card Header */
.store-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
}

.store-card-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-yellow);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
}

.coin-hex-svg-sm {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.store-card-wear {
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Card Body */
.store-card-body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  margin: 2px 0;
}

.store-card-img {
  max-width: 100%;
  max-height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.store-card:hover .store-card-img {
  transform: scale(1.08);
}

/* Card Footer (Non-selected state) */
.store-card-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  overflow: hidden;
}

.store-card-weapon {
  color: #71788a;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  line-height: 1.2;
  margin-bottom: 2px;
}

.store-card-name {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  line-height: 1.2;
}

/* Card Quantity Pill (Selected state) */
.store-card-qty-pill {
  position: relative;
  z-index: 3;
  background: #ffd000;
  border-radius: 20px;
  height: 32px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

.store-qty-btn-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #12141c;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 10px;
  transition: all 0.15s ease;
}

.store-qty-btn-circle:hover {
  background: #000000;
  transform: scale(1.1);
}

.store-qty-num {
  color: #000000;
  font-size: 14px;
  font-weight: 800;
  min-width: 20px;
  text-align: center;
}

/* --- Bottom Action / Pagination Bar --- */
.store-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 8px;
}

.store-pagination-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.store-page-btn {
  width: 42px;
  height: 42px;
  background: #181b24;
  border: 1px solid #242936;
  border-radius: 10px;
  color: #8b92a5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.store-page-btn:hover {
  background: #202430;
  color: #ffffff;
  border-color: #353c4e;
}

.store-page-status {
  font-size: 12px;
  color: #71788a;
  font-weight: 600;
  margin-left: 6px;
}

.store-cart-actions-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.store-trash-btn {
  width: 42px;
  height: 42px;
  background: #181b24;
  border: 1px solid #242936;
  border-radius: 10px;
  color: #8b92a5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.store-trash-btn:hover {
  background: #251d22;
  color: #ff5252;
  border-color: #ff5252;
}

.store-checkout-btn {
  height: 42px;
  padding: 0 18px;
  background: #ffd000;
  border: none;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 18px rgba(255, 208, 0, 0.35);
  transition: all 0.18s ease;
  user-select: none;
}

.store-checkout-btn:hover {
  background: #ffe033;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(255, 208, 0, 0.5);
}

.store-checkout-btn:active {
  transform: translateY(0);
}

.coin-hex-svg-black {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.store-checkout-sum {
  color: #000000;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.store-checkout-cart-icon {
  color: #000000;
  font-size: 15px;
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}

.store-checkout-cart-icon sup {
  font-size: 10px;
  font-weight: 900;
  vertical-align: top;
  margin-left: 2px;
}

/* ==========================================================================
   16. MASTER ADMIN SECURITY GATE & CONTROL PANEL (F2 x3)
   Theme: Obsidian Gold & Neon Cyan/Green CS2 Cyberpunk
   ========================================================================== */

/* --- ADMIN PIN MODAL & PANEL OVERRIDES --- */
#adminPinModal,
#adminPanelModal {
  z-index: 999999 !important;
}

#adminGiveSkinModal,
#adminBalanceModal {
  z-index: 1000005 !important;
}

#adminPinModal.active,
#adminPanelModal.active,
#adminGiveSkinModal.active,
#adminBalanceModal.active {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* All toast notifications completely eliminated as requested by user */
.toastify,
.toast-success,
.toast-error,
.toastify-top,
.toastify-right,
.toastify-left,
.toastify-bottom {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.admin-pin-card {
  width: 360px;
  background: #14151b;
  border: 1.5px solid rgba(247, 185, 0, 0.5);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), 0 0 35px rgba(247, 185, 0, 0.2);
  animation: modal-pop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.admin-pin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.admin-pin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-pin-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(247, 185, 0, 0.15);
  border: 1px solid rgba(247, 185, 0, 0.4);
  color: #f7b900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 15px rgba(247, 185, 0, 0.3);
}

.admin-pin-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.admin-pin-subtitle {
  font-size: 11px;
  color: #8e929f;
  margin-top: 2px;
}

.admin-pin-hint {
  font-size: 12px;
  color: #8e929f;
  text-align: center;
  margin: 6px 0 14px;
}

.admin-pin-input-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 10px 0 16px;
  width: 100%;
}

.admin-pin-input-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.admin-pin-input-wrap input {
  width: 100%;
  background: #0b0c10;
  border: 2px solid rgba(247, 185, 0, 0.45);
  border-radius: 12px;
  padding: 13px 44px 13px 16px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 10px;
  text-align: center;
  color: #f7b900;
  outline: none;
  font-family: inherit;
  transition: all 0.2s ease;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7);
}

.admin-pin-input-wrap input:focus {
  border-color: #f7b900;
  box-shadow: 0 0 22px rgba(247, 185, 0, 0.35), inset 0 2px 8px rgba(0, 0, 0, 0.7);
}

.admin-pin-eye-btn {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: #8e929f;
  font-size: 16px;
  cursor: pointer;
  padding: 8px;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-pin-eye-btn:hover {
  color: #f7b900;
}

.admin-pin-dots {
  display: flex;
  gap: 14px;
}

.pin-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pin-dot.filled {
  background: #f7b900;
  border-color: #f7b900;
  box-shadow: 0 0 12px rgba(247, 185, 0, 0.8);
  transform: scale(1.15);
}

.admin-pin-error {
  min-height: 20px;
  font-size: 12px;
  color: #ff3344;
  font-weight: 700;
  text-align: center;
  margin-top: 8px;
}

.admin-pin-card.shake {
  animation: admin-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes admin-shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

.admin-keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0;
}

.keypad-btn {
  height: 48px;
  background: #191b22;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  user-select: none;
}

.keypad-btn:hover {
  background: #252835;
  border-color: rgba(247, 185, 0, 0.4);
  color: #f7b900;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.keypad-btn:active {
  transform: translateY(0);
}

.keypad-func {
  font-size: 15px;
  color: #8e929f;
}

.keypad-func:hover {
  color: #fff;
}

/* --- FULLSCREEN MASTER ADMIN PANEL --- */
.modal-admin-fullscreen {
  width: 95vw;
  max-width: 1360px;
  height: 90vh;
  max-height: 880px;
  background: #121318;
  border: 1.5px solid rgba(247, 185, 0, 0.45);
  border-radius: 16px;
  box-shadow: 0 25px 90px rgba(0, 0, 0, 0.95), 0 0 50px rgba(247, 185, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-pop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.admin-topbar {
  height: 64px;
  background: #0c0d11;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
}

.admin-brand-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-brand-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f7b900, #ff8c00);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 16px rgba(247, 185, 0, 0.4);
}

.admin-brand-titles {
  display: flex;
  flex-direction: column;
}

.admin-brand-main {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.3px;
}

.admin-badge-super {
  font-size: 9px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(247, 185, 0, 0.2);
  border: 1px solid rgba(247, 185, 0, 0.4);
  color: #f7b900;
  letter-spacing: 0.6px;
}

.admin-brand-sub {
  font-size: 11px;
  color: #8e929f;
}

.admin-top-stats {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-quick-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #171821;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
}

.admin-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.admin-pill-label {
  color: #8e929f;
}

.admin-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-layout-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.admin-sidebar {
  width: 250px;
  background: #0f1015;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 12px;
  flex-shrink: 0;
}

.admin-sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-nav-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #8e929f;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  user-select: none;
}

.admin-nav-tab i {
  font-size: 15px;
  width: 20px;
  text-align: center;
}

.admin-nav-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

.admin-nav-tab.active {
  background: rgba(247, 185, 0, 0.12);
  color: #f7b900;
  border-color: rgba(247, 185, 0, 0.35);
  font-weight: 700;
}

.admin-tab-counter {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  background: #f7b900;
  color: #000;
}

.admin-owner-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #171821;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-owner-avatar {
  font-size: 20px;
}

.admin-owner-name {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.admin-owner-role {
  font-size: 10px;
  color: #8e929f;
}

.admin-tab-content-area {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: #13141a;
}

.admin-tab-pane {
  display: none;
}

.admin-tab-pane.active {
  display: block;
  animation: fadeIn 0.2s ease;
}

.admin-pane-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-pane-header h2 {
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 3px;
}

.admin-pane-header p {
  font-size: 12px;
  color: #8e929f;
}

/* Metric Cards */
.admin-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.admin-metric-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #181921;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: transform 0.2s, border-color 0.2s;
}

.admin-metric-card:hover {
  border-color: rgba(247, 185, 0, 0.3);
  transform: translateY(-2px);
}

.metric-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.metric-title {
  font-size: 12px;
  color: #8e929f;
  margin-bottom: 4px;
}

.metric-value {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
}

.metric-sub {
  font-size: 11px;
  color: #696e7e;
  margin-top: 2px;
}

/* Section Box */
.admin-section-box {
  background: #181921;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
}

.admin-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
}

.admin-quick-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.admin-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
  color: #8e929f;
}

.admin-badge-loss {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(235, 75, 75, 0.2);
  color: #eb4b4b;
  border: 1px solid rgba(235, 75, 75, 0.4);
}

/* Tables */
.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: #14151c;
}

.admin-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.admin-data-table th {
  background: #0f1015;
  color: #8e929f;
  font-weight: 700;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #fff;
  vertical-align: middle;
}

.admin-data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.badge-status-completed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 230, 118, 0.15);
  color: #00e676;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(0, 230, 118, 0.3);
}

.badge-status-pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(247, 185, 0, 0.15);
  color: #f7b900;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(247, 185, 0, 0.3);
}

.admin-cashera-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, rgba(247, 185, 0, 0.08), rgba(0, 230, 118, 0.08));
  border: 1px solid rgba(247, 185, 0, 0.25);
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 18px;
}

.cashera-banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cashera-brand-badge {
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 4px;
  background: #f7b900;
  color: #000;
}

.cashera-banner-info {
  font-size: 12px;
  color: #8e929f;
}

.cashera-banner-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #00e676;
}

.status-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00e676;
  box-shadow: 0 0 10px #00e676;
}

.admin-table-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 12px;
}

.filter-tabs {
  display: flex;
  gap: 6px;
}

.filter-tab-btn {
  padding: 7px 14px;
  border-radius: 6px;
  background: #101116;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #8e929f;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.filter-tab-btn:hover {
  color: #fff;
}

.filter-tab-btn.active {
  background: #f7b900;
  color: #000;
  font-weight: 800;
  border-color: #f7b900;
}

/* Rigging Cards */
.admin-rig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.admin-rig-card {
  padding: 18px;
  border-radius: 10px;
  background: #13141a;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.admin-rig-card:hover {
  border-color: rgba(247, 185, 0, 0.4);
}

.admin-rig-card.active {
  border-color: #f7b900;
  background: rgba(247, 185, 0, 0.06);
  box-shadow: 0 0 20px rgba(247, 185, 0, 0.15);
}

.rig-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rig-icon {
  font-size: 24px;
}

.rig-name {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}

.rig-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: #252834;
  color: #8e929f;
  display: inline-block;
  margin-top: 3px;
}

.rig-badge.active {
  background: #f7b900;
  color: #000;
}

.rig-desc {
  font-size: 12px;
  color: #8e929f;
  line-height: 1.4;
}

/* Crash Controls Row */
.admin-crash-controls-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.admin-btn-action {
  padding: 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #15161d;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.admin-btn-action i {
  font-size: 22px;
}

.admin-btn-action strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.admin-btn-action span {
  font-size: 11px;
  color: #8e929f;
}

.admin-btn-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.btn-crash-moon i { color: #ff3366; }
.btn-crash-moon:hover { border-color: #ff3366; background: rgba(255, 51, 102, 0.12); }

.btn-crash-win i { color: #00e676; }
.btn-crash-win:hover { border-color: #00e676; background: rgba(0, 230, 118, 0.12); }

.btn-crash-loss i { color: #ff9900; }
.btn-crash-loss:hover { border-color: #ff9900; background: rgba(255, 153, 0, 0.12); }

.btn-crash-skip i { color: #4b69ff; }
.btn-crash-skip:hover { border-color: #4b69ff; background: rgba(75, 105, 255, 0.12); }

/* Promocodes & Settings */
.admin-form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}

.admin-form-inline .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-form-inline label,
.settings-field label {
  font-size: 12px;
  font-weight: 700;
  color: #8e929f;
}

.admin-form-inline input,
.admin-form-inline select,
.settings-field input {
  padding: 10px 14px;
  background: #101116;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
}

.settings-field {
  margin-bottom: 18px;
}

.field-desc {
  font-size: 11px;
  color: #8e929f;
  margin: 3px 0 8px;
}

/* Skin Giver Modal */
.modal-skin-giver {
  width: 900px;
  max-width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.skin-giver-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.skin-giver-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0d0e12;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.skin-giver-search-bar input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 13px;
  width: 100%;
}

.skin-giver-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  overflow-y: auto;
  max-height: 500px;
  padding-right: 6px;
}

.skin-giver-item {
  padding: 12px;
  background: #16171e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.skin-giver-item:hover {
  border-color: #f7b900;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

.skin-giver-img {
  width: 120px;
  height: 80px;
  object-fit: contain;
  margin: 6px auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.skin-giver-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skin-giver-price {
  font-size: 12px;
  font-weight: 800;
  color: #f7b900;
  margin-top: 4px;
}