/* ============================================================
   ORCA PANEL — SOLPUMP DESIGN SYSTEM (final, v34)
   All element styles taken 1:1 from the design sheet
   (css/design-sheet.css). Structure: sp-nav header with
   nested sp-pill tabs, content + chat-panel layout.
   ============================================================ */

/* ---------- tokens (exact) ---------- */
:root {
  --bg: #0c1017;
  --surface: #141722;
  --surface-2: #1a1e2b;
  --surface-3: #191d29;
  --surface-chat: #161a26;
  --surface-select: #1e2331;
  --surface-accordion: #171b27;
  --border: #161a22;
  --border-2: #252b3a;
  --knob: #232a3a;
  --track: #12151e;
  --muted: #767676;
  --muted-hover: #a1a1a1;
  --muted-3: #8b8b8b;
  --blue-muted: #758baa;
  --link: #b1bad3;
  --blue-light: #86abff;
  --blue-deep: #5f7acc;
  --primary: #51719f;
  --green: #11a777;
  --green-bright: #02df98;
  --red: #fc5a5a;
  --red-2: #dd2d2d;
  --hot-1: #c98c7a;
  --hot-2: #ff5b5b;
  --silver-1: #dbdbdb;
  --silver-2: #757575;
  --pump-1: #6aa7ef;
  --pump-2: #98bada;
  --price-dim: rgba(255, 255, 255, 0.36);
  --font-space: 'SpaceGrotesk', sans-serif;
  --font-chakra: 'ChakraPetch', sans-serif;
  --font-tourney: 'Tourney', sans-serif;
  --shadow-primary: 0 8px 5px rgba(0, 0, 0, 0.12), inset 0 2px rgba(255, 255, 255, 0.07), inset 0 -2px rgba(0, 0, 0, 0.24);
  --shadow-primary-hover: 0 12px 10px rgba(0, 0, 0, 0.18), inset 0 3px rgba(255, 255, 255, 0.08), inset 0 -3px rgba(0, 0, 0, 0.26);
  --shadow-default: inset 0 2px rgba(255, 255, 255, 0.04), inset 0 -2px rgba(0, 0, 0, 0.24);
  --shadow-bet-inputs: inset 0 2px rgba(255, 255, 255, 0.07);
  --shadow-games: 0 2px 10px rgba(80, 153, 255, 0.16);
  --shadow-inset-pill: inset 0 -2px rgba(0, 0, 0, 0.24), inset 0 2px rgba(255, 255, 255, 0.04);
  /* legacy aliases for app.js inline styles */
  --accent: var(--primary);
  --accent-strong: var(--primary);
  --accent-deep: #3d5a82;
  --accent-soft: var(--blue-light);
  --accent-rgb: 81, 113, 159;
  --accent-text: var(--blue-light);
  --text-1: #fff;
  --text-2: var(--muted-3);
  --text-3: var(--muted);
  --hairline: var(--border-2);
  --hairline-strong: #3a3f4a;
  --ok: var(--green-bright);
  --warn: #ffd27f;
  --err: var(--red);
  --r-md: 8px;
  --r-lg: 8px;
  --color-success: var(--green-bright);
  --color-warning: #ffd27f;
  --color-error: var(--err);
  --color-info: var(--blue-light);
  --color-premium: #c98c7a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-hover: none;
}

/* ---------- base ---------- */
html, body { background: var(--bg) !important; color: #fff !important; }
body {
  font-family: var(--font-space) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* page glow (sheet) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('/assets/img/background_shadows-blue.png') top center / cover no-repeat;
}
.panel, #mainApp, .authWrap { position: relative; z-index: 1; background: transparent !important; }
.panel { padding: 0 !important; margin: 0 auto !important; max-width: none !important; width: 100% !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; }

::selection { background: rgba(134, 171, 255, 0.35); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #2a2e38 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #2a2e38; border-radius: 4px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: #3a3f4a; }
*::-webkit-scrollbar-track { background: transparent; }
input, textarea, select { caret-color: var(--blue-light); }
:focus-visible { outline: 2px solid rgba(134, 171, 255, 0.6); outline-offset: 1px; border-radius: 8px; }

/* ---------- ornament kill ---------- */
.authBgGlow, .authBgGlow1, .authBgGlow2 { display: none !important; }

/* ============================================================
   SP-NAV HEADER (exact .sp-nav, mapped to panel DOM)
   ============================================================ */
.panel > .header {
  position: relative;
  display: flex;
  align-items: center;
  height: 74px;
  width: 100%;
  max-width: none !important;
  background: var(--surface) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}
/* logo zone */
.panel > .header .brand {
  display: flex !important;
  width: 300px !important;
  height: 74px !important;
  flex: 0 0 300px;
  align-items: center !important;
  justify-content: center !important;
  background: url('/assets/img/nav-navbar-left-side-bg-blue.svg') top left / cover no-repeat !important;
  border-right: 1px solid var(--border) !important;
  padding: 0 !important;
  margin: 0 !important;
}
.logo, .brand .logo {
  display: block !important;
  width: 205px !important;
  height: auto !important;
  max-width: 240px !important;
  object-fit: contain !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
/* right side */
.panel > .header .sp-nav-right,
.panel > .header > .global-search-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 0 24px;
  width: 100%;
  min-width: 0;
}
.sp-nav-group { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sp-nav-group::-webkit-scrollbar { display: none; }
.sp-nav-spacer { flex: 1 1 auto; }
.account { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
#globalSearch {
  height: 36px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: var(--font-space) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-bet-inputs) !important;
  width: 200px !important;
}
#globalSearch:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(81, 113, 159, 0.16) !important; }
#globalSearch::placeholder { color: var(--muted) !important; }
.userChip {
  display: flex !important;
  align-items: center !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-2) !important;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(80, 153, 255, 0.16)), rgba(37, 43, 58, , 0.72) !important;
  color: #fff !important;
  font-family: var(--font-chakra) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.logoutBtn {
  display: flex !important;
  align-items: center !important;
  height: 36px !important;
  padding: 0 14px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--muted) !important;
  font-family: var(--font-space) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.logoutBtn:hover { color: var(--muted-hover) !important; background: rgba(37, 43, 58, , 0.36) !important; }

/* ============================================================
   SP-PILL TABS (exact .sp-pill, inside the nav)
   ============================================================ */
.tab.sp-pill {
  position: relative;
  display: flex;
  height: 42px;
  width: auto;
  min-width: 110px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  padding: 0;
  color: #fff;
  font-weight: 700;
  box-shadow: none;
  transition: all 0.2s;
}
.sp-pill-frame { width: 100%; height: 100%; border-radius: 8px; }
.sp-pill-face {
  height: 40px; width: 100%;
  overflow: hidden; border-radius: 8px;
  background: #1a1e2b;
  box-shadow: inset 0 -2px rgba(0, 0, 0, 0.24), inset 0 2px rgba(255, 255, 255, 0.04);
}
.sp-pill-face-inner {
  display: flex; height: 100%; width: 100%;
  align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 14px;
  background: linear-gradient(360deg, rgba(62, 91, 130, 0.16) 0%, rgba(0, 0, 0, 0) 100%);
  transition: background-color 0.2s;
}
.tab.sp-pill:hover .sp-pill-face-inner {
  background: linear-gradient(360deg, rgba(62, 91, 130, 0.26) 0%, rgba(0, 0, 0, 0) 100%);
}
.tab.sp-pill[aria-selected="true"] .sp-pill-frame,
.tab.sp-pill.is-active .sp-pill-frame {
  padding: 1px;
  background: linear-gradient(180deg, var(--blue-light) 0%, var(--blue-deep) 100%);
  box-shadow: var(--shadow-games);
}
.tab.sp-pill[aria-selected="true"] .sp-pill-face-inner,
.tab.sp-pill.is-active .sp-pill-face-inner {
  background: linear-gradient(360deg, rgba(62, 91, 130, 0.56) 0%, rgba(0, 0, 0, 0) 100%);
}
.sp-pill-left { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 12px; }
.sp-pill-icon { display: grid; height: 20px; min-height: 20px; place-items: center; color: var(--muted); transition: color 0.2s; }
.sp-pill-icon svg { height: 100%; width: auto; }
.tab.sp-pill:hover .sp-pill-icon, .tab.sp-pill:hover .sp-pill-label { color: var(--muted-hover); }
.tab.sp-pill[aria-selected="true"] .sp-pill-icon,
.tab.sp-pill[aria-selected="true"] .sp-pill-label,
.tab.sp-pill.is-active .sp-pill-icon,
.tab.sp-pill.is-active .sp-pill-label { color: #fff; }
.sp-pill-label {
  font-family: var(--font-space); font-size: 16px; font-weight: 700;
  color: var(--muted); transition: color 0.2s; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.sp-pill-right { display: flex; align-items: center; gap: 6px; }
.sp-pill-right .badge {
  font-family: var(--font-chakra) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(118, 118, 118, 0.55) !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.sp-pill-right .badge.recent { color: var(--muted-hover) !important; }

/* ============================================================
   LAYOUT: content + chat-panel
   ============================================================ */
.reduce-animations > .panel > .layout,
body .panel > .layout,
.layout {
  display: flex !important;
  gap: 20px !important;
  max-width: 1500px !important;
  margin: 20px auto 48px !important;
  width: auto !important;
  padding: 0 24px !important;
  align-items: flex-start !important;
  background: transparent !important;
  opacity: 1 !important;
  filter: none !important;
}
.content, #panelContent {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  color: #fff !important;
}

/* ============================================================
   TYPOGRAPHY (exact)
   ============================================================ */
h1 {
  font-family: var(--font-chakra) !important;
  font-size: 20px !important; font-weight: 700 !important; line-height: 28px !important;
  text-transform: uppercase !important; text-align: left !important; margin: 0 0 6px !important;
  color: transparent !important;
  background: linear-gradient(180deg, var(--silver-1), var(--silver-2)) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
}
h2, h3 {
  font-family: var(--font-chakra) !important;
  font-size: 16px !important; font-weight: 700 !important; line-height: 24px !important;
  color: #fff !important; margin: 0 !important;
}
h4, h5 {
  font-family: var(--font-chakra) !important;
  font-size: 15px !important; font-weight: 700 !important; line-height: 22px !important;
  color: #fff !important; margin: 0 !important;
}
h1, h2, h3, h4, h5 { opacity: 1 !important; filter: none !important; }
p, .small, .muted, [class*="subtle"] {
  font-family: var(--font-space) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  color: var(--muted-3) !important;
}
p strong, p b { color: #fff !important; }
main { color: #fff !important; }
table, .statCard, [class*="stat"], code, .mono { font-variant-numeric: tabular-nums; }
code {
  font-family: ui-monospace, Consolas, monospace !important;
  color: var(--link) !important;
  background: rgba(0, 0, 0, 0.3) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}
a { color: var(--link) !important; text-decoration: none !important; font-weight: 700 !important; transition: color 0.2s !important; }
a:hover { color: #fff !important; }
/* labels (exact .sp-label) */
.stat-label, .status-label, .stat-label-mini, .activity-title, .chart-title-home, .formLabel, .walletLabel {
  font-family: var(--font-space) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  letter-spacing: 0 !important;
}
.walletLabel { color: #fff !important; min-width: 90px !important; }

/* ============================================================
   CARDS (player-row state-normal / bet-panel)
   ============================================================ */

.glass-card:hover { box-shadow: inset 0 2px rgba(255, 255, 255, 0.04), inset 0 -2px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(81, 113, 159, 0.35) !important; }
/* wrapper cards flatten */
#panelContent 
/* stat values (ChakraPetch, exact row-amount style) */
.stat-value, .status-value, .stat-value-mini, .crank-tier {
  font-family: var(--font-chakra) !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
.stat-value, .status-value { font-size: 26px !important; }
.stat-value-mini { font-size: 24px !important; }

/* ============================================================
   BUTTONS (exact recipes)
   ============================================================ */
button, .btn, [class*="btn"] {
  font-family: var(--font-space) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  cursor: pointer;
}
#panelContent button, .chatInput button { font-size: 14px !important; }
#panelContent button svg, .action-btn svg, .sp-pill-icon svg { width: 16px !important; height: 16px !important; flex-shrink: 0; }

/* primary green — exact .btn-primary */
.btn-primary, .action-btn.primary, .authSubmitBtn,
#panelContent button[style*="var(--accent-strong)"],
#panelContent button[style*="var(--accent)"],
#panelContent button[style*="#0091de"],
.btnPrimary, .compileBtn, #quickDeployBtn, .logWithdrawBtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-family: var(--font-space) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  white-space: nowrap !important;
  background: var(--green) !important;
  box-shadow: var(--shadow-primary) !important;
  text-shadow: none !important;
  filter: none !important;
  transition: all 0.2s !important;
}
.btn-primary:hover, .action-btn.primary:hover, .authSubmitBtn:hover,
#panelContent button[style*="var(--accent-strong)"]:hover,
#panelContent button[style*="var(--accent)"]:hover,
#panelContent button[style*="#0091de"]:hover,
.btnPrimary:hover, .compileBtn:hover, #quickDeployBtn:hover, .logWithdrawBtn:hover {
  background: #0e8d66 !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-primary-hover) !important;
  border-color: transparent !important;
}
.btn-primary:disabled, .btnPrimary:disabled, .logWithdrawBtn:disabled {
  background: var(--border-2) !important;
  opacity: 0.4 !important;
  transform: none !important;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)) !important;
}

/* blue bet button — exact .btn-bet */
.btn-bet, .action-btn.secondary, .action-btn.tertiary, .btnSecondary,
#panelContent button[style*="rgba(57, 176, 241"],
#panelContent button[style*="var(--bg-2)"],
#panelContent button[style*="var(--bg-3)"] {
  border: 1px solid var(--border-2) !important;
  border-radius: 8px !important;
  color: #fff !important;
  background: var(--primary) !important;
  box-shadow: inset 0 2px rgba(255, 255, 255, 0.04), inset 0 -2px rgba(0, 0, 0, 0.24) !important;
  font-weight: 700 !important;
  transition: all 0.5s !important;
}
.btn-bet:hover, .action-btn.secondary:hover, .action-btn.tertiary:hover, .btnSecondary:hover,
#panelContent button[style*="rgba(57, 176, 241"]:hover,
#panelContent button[style*="var(--bg-2)"]:hover,
#panelContent button[style*="var(--bg-3)"]:hover {
  background: rgba(81, 113, 159, 0.68) !important;
}

/* danger */
.btnDanger {
  background: rgba(252, 90, 90, 0.14) !important;
  border: 1px solid rgba(252, 90, 90, 0.45) !important;
  color: var(--red) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.btnDanger:hover { background: rgba(252, 90, 90, 0.24) !important; }

/* ghost / link — exact .btn-link */
.btn-ghost, .view-all-btn, .btn-link, .logoutBtn, .authToggleBtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: none !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--link) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.btn-ghost:hover, .view-all-btn:hover, .btn-link:hover, .logoutBtn:hover, .authToggleBtn:hover { color: #fff !important; }
button:disabled { opacity: 0.4 !important; }

/* chat send — exact .btn-send */
#sendMessage {
  height: 40px !important;
  flex: 0 0 auto !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
#sendMessage:hover { opacity: 0.8 !important; background: var(--primary) !important; }

/* ============================================================
   FORM CONTROLS (exact .input-bet / .input-chat)
   ============================================================ */
input, select, textarea {
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 8px !important;
  color: #fff !important;
  outline: none !important;
  font-family: var(--font-chakra) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
select, textarea { font-family: var(--font-space) !important; font-weight: 700 !important; }
input::placeholder, textarea::placeholder { color: var(--muted) !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(81, 113, 159, 0.16) !important;
}
input:disabled { cursor: not-allowed !important; opacity: 0.55 !important; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  caret-color: var(--blue-light) !important;
  transition: background-color 9999s ease-in-out 0s;
}
input:-webkit-autofill::first-line { color: #fff !important; }

/* ============================================================
   TABLES (player-row inspired)
   ============================================================ */
table { border-collapse: separate !important; border-spacing: 0 !important; width: 100%; }
table th {
  font-family: var(--font-space) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border-2) !important;
  background: transparent !important;
}
table td { border-bottom: 1px solid var(--border) !important; color: #fff !important; }
table tr td { background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(62, 91, 130, 0.06)), var(--surface-2); }
table tr:hover td { background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(62, 91, 130, 0.24)), var(--surface-2) !important; }

/* ============================================================
   BADGES (exact)
   ============================================================ */
.badge, .badge-new, .welcome-live {
  font-family: var(--font-chakra) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--green-bright) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* ============================================================
   CHAT PANEL (exact)
   ============================================================ */

.chatHeader {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
  background: transparent !important;
  color: #fff !important;
  font-family: var(--font-space) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 12px 16px !important;
}
.chatHeader .small { color: var(--muted) !important; font-size: 12px !important; }
.chatBox { background: transparent !important; flex: 1 !important; overflow-y: auto !important; }
/* chat messages: exact .chat-msg */
.chatBox .chatMessage {
  display: flex !important;
  width: 100% !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.24) 100%) !important;
  padding: 14px 16px 16px 12px !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  font-family: var(--font-space) !important;
}
.chatBox .chatMessage b, .chatBox .chatMessage strong { color: #fff !important; }
.chatBox .chatMessage div, .chatBox .chatMessage span { color: #a1a1a1 !important; font-size: 13px !important; font-weight: 700 !important; }
.chatInput {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
  padding: 14px 16px !important;
  background: var(--surface-chat) !important;
}
.chatInput input {
  height: 40px !important;
  font-family: var(--font-space) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  padding: 0 12px !important;
  flex: 1 1 auto !important;
}
.chatInput input:focus { color: #fff !important; }
.chatInput > div { display: flex !important; align-items: center !important; gap: 8px !important; flex-direction: row !important; }
/* community telegram card: social-telegram exact */
#telegramReminder {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(58, 173, 224, 0.36)), #1a1e2b !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px !important;
  box-shadow: var(--shadow-inset-pill) !important;
  transition: background 0.2s !important;
}
#telegramReminder:hover { background: linear-gradient(rgba(0, 0, 0, 0), rgba(58, 173, 224, 0.36)), #1d4353 !important; }
#telegramReminder div { font-size: 13px !important; line-height: 1.5 !important; color: var(--muted-3) !important; }
#telegramReminder b { color: #fff !important; }
#telegramReminder span {
  font-family: var(--font-chakra) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--blue-light) !important;
}

/* ---------- modals ---------- */
.modal-content, [class*="modal"] {
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
}

/* ============================================================
   AUTH (solpump modal card + exact inputs + green submit)
   ============================================================ */
.authWrap {
  position: fixed !important;
  inset: 0 !important;
  min-height: 0 !important;
  padding: 24px !important;
  overflow-y: auto !important;
  z-index: 1000 !important;
  background: var(--bg) !important;
}
.authWrap[style*="display:none"],
.authWrap[style*="display: none"] { display: none !important; }
.authWrap:not([style*="display:none"]):not([style*="display: none"]) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.authWrap::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('/assets/img/background_shadows-blue.png') top center / cover no-repeat;
  
}
.authContainer {
  display: block !important;
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  float: none !important;
  padding: 0 !important;
  background: transparent !important;
}
.authCard {
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), var(--shadow-default) !important;
  width: 100% !important;
  padding: 32px 28px !important;
}
.authBrand { display: flex !important; align-items: center !important; margin-bottom: 24px !important; }
.authLogo {
  width: 200px !important;
  height: auto !important;
  max-width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.authCard .authBrandTitle { display: none !important; }
.authTitle { font-family: var(--font-chakra) !important; font-size: 16px !important; font-weight: 700 !important; color: #fff !important; }
.authSubtitle { font-family: var(--font-space) !important; font-size: 13px !important; font-weight: 700 !important; color: var(--muted) !important; }
.authToggleBtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: none !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--link) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 0 !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
}
.authToggleBtn:hover { color: #fff !important; }
.authToggleArrow { color: var(--blue-light) !important; }
.authInput { height: 48px !important; font-size: 15px !important; }
.formLabel, .authForm .formLabel {
  font-family: var(--font-space) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
}
.authSubmitBtn {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: var(--font-space) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: var(--green) !important;
  box-shadow: var(--shadow-primary) !important;
  filter: none !important;
  transition: all 0.2s !important;
}
.authSubmitBtn:hover {
  background: #0e8d66 !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-primary-hover) !important;
}
.authMessage { font-size: 13px !important; font-weight: 700 !important; }
.authMessage.error { color: var(--red) !important; }
.authFooter { font-family: var(--font-space) !important; font-size: 12px !important; font-weight: 700 !important; color: rgba(255, 255, 255, 0.56) !important; }
.walletToggleBtn {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 8px !important;
  color: var(--muted) !important;
  font-weight: 700 !important;
}
.inputIcon { color: var(--muted) !important; }

/* ============================================================
   SETTINGS / COMPILE / LOGS / ANALYTICS
   ============================================================ */
.walletLabel { font-family: var(--font-space) !important; font-weight: 700 !important; font-size: 13.5px !important; color: #fff !important; min-width: 90px !important; }
#templateContainer {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: none !important;
}
@media (max-width: 1250px) { #templateContainer { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { #templateContainer { grid-template-columns: 1fr !important; } }
.compileBtn::before, .compileBtn::after,
.btnPrimary::before, .btnPrimary::after { display: none !important; }
.btnPrimary:hover, .compileBtn:hover { transform: translateY(-2px) !important; }
.compileBtn .label, .btnPrimary .label { font-weight: 700 !important; }

/* analytics cards = bet-input surfaces (exact) */

.stat-label-mini { font-family: var(--font-space) !important; font-size: 12px !important; color: var(--muted) !important; font-weight: 700 !important; }
.stat-value-mini { font-family: var(--font-chakra) !important; font-size: 24px !important; font-weight: 700 !important; color: #fff !important; text-shadow: none !important; }
.toggle-btn.active, .filter-btn.active {
  background: var(--primary) !important;
  border: 1px solid var(--border-2) !important;
  color: #fff !important;
  box-shadow: inset 0 2px rgba(255, 255, 255, 0.04), inset 0 -2px rgba(0, 0, 0, 0.24) !important;
  animation: none !important;
}
.toggle-btn, .filter-btn {
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  color: var(--muted) !important;
  font-weight: 700 !important;
}

/* logs danger — sheet red */
.btnDanger {
  background: rgba(252, 90, 90, 0.14) !important;
  border: 1px solid rgba(252, 90, 90, 0.45) !important;
  color: var(--red) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.btnDanger:hover { background: rgba(252, 90, 90, 0.24) !important; }

/* ---------- home ---------- */
.activity-live-dot { display: none !important; }

.crank-tier { font-family: var(--font-chakra) !important; font-weight: 700 !important; color: var(--blue-light) !important; }
.rankBadge {
  background: linear-gradient(180deg, #275570, #232f32) !important;
  color: transparent !important;
  box-shadow: none !important;
}
.rankBadge:hover { transform: none !important; box-shadow: none !important; animation: none !important; }
.status-grid .glass-card, .stats-grid .glass-card, .home-section .glass-card { border-radius: 8px !important; }

/* ---------- scrollbars ---------- */
.chatBox, .logsBox, .table-wrapper { scrollbar-width: thin; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .chatColumn { display: none !important; }
}
@media (max-width: 900px) {
  .panel > .header { flex-wrap: wrap !important; height: auto !important; min-height: 74px !important; padding-bottom: 10px !important; }
  .panel > .header .brand { width: 220px !important; flex: 0 0 220px; height: 60px !important; }
  .logo, .brand .logo { width: 160px !important; }
  .panel > .header .tabs { order: 3 !important; flex: 1 1 100% !important; padding: 0 !important; }
}
@media (max-width: 768px) {
  .layout { padding: 0 14px !important; margin-top: 130px !important; }
  .content, #panelContent { padding: 0 !important; }
  .sp-nav-group { gap: 6px !important; }
  .tab.sp-pill { min-width: 0 !important; }
  .sp-pill-label { font-size: 13px !important; }
  table { font-size: 12px !important; }
  table th, table td { padding: 7px 10px !important; }
  .stats-grid, .statGrid, .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  input, select, textarea { font-size: 16px !important; }
}
@media (max-width: 480px) {
  .panel > .header .brand { width: 150px !important; flex: 0 0 150px; }
  .logo, .brand .logo { width: 120px !important; }
  .layout { padding: 0 8px !important; }
  .tab.sp-pill { flex: 1 1 auto !important; }
  .sp-pill-label { font-size: 12px !important; }
  h1 { font-size: 16px !important; }
  button, .btn, [class*="btn"], button[type="submit"] { min-height: 40px; }
  .card, [class*="Card"] { padding: 12px !important; }
}

/* ---------- motion (sheet: 0.2s cubic-bezier(0.4,0,0.2,1)) ---------- */
@media (prefers-reduced-motion: no-preference) {
  button, .btn, input, select, textarea, .tab, .card, [class*="Card"], .glass-card {
    transition-duration: 0.2s !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}


/* pass: panel is a normal block (old css set display:flex row) */
.reduce-animations > .panel,
body .panel {
  display: block !important;
}


/* nav: fixed at viewport top, full width (sheet: sp-nav is the top chrome) */
.reduce-animations > .panel > .header,
body .panel > .header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
}
/* content clearance below the fixed nav */
.reduce-animations > .panel > .layout,
body .panel > .layout {
  margin-top: 130px !important;
}
.chatColumn[style*="sticky"], .chatColumn { top: 96px !important; }


/* nav: fixed at viewport top */
.reduce-animations > .panel > .header,
body .panel > .header {
  position: fixed !important;
  top: 0 !important;
  z-index: 200 !important;
}


/* kill containing-block creators above the fixed nav */
.reduce-animations,
.panel,
#mainApp {
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
  contain: none !important;
  perspective: none !important;
}


/* .panel's own backdrop-filter creates a containing block that pins the fixed nav ? kill it */
.reduce-animations > .panel,
body .panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* pin: top edge, full width, no auto-centering */
body .panel > .header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}


/* ============================================================
   FINAL NAV PIN ? parent-agnostic, wins the cascade everywhere
   ============================================================ */
.header.sp-nav,
body > .header.sp-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 500 !important;
}
.reduce-animations { padding-top: 0 !important; }
body > .header.sp-nav .sp-nav-right,
.header.sp-nav .sp-nav-right { padding: 0 16px 0 24px !important; }


/* ============================================================
   NAV FINAL: single row, solid surface, sheet-exact pills
   ============================================================ */
body > .header.sp-nav {
  flex-wrap: nowrap !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
  background: #141722 !important;
  border-bottom: 1px solid #161a22 !important;
  overflow: visible !important;
}
body > .header.sp-nav .sp-nav-right {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body > .header.sp-nav .sp-nav-group,
body > .header.sp-nav .tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}
body > .header.sp-nav .tab.sp-pill {
  flex: 0 0 auto !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  min-width: 110px !important;
}
body > .header.sp-nav .sp-pill-face { height: 40px !important; }
body > .header.sp-nav .sp-pill-face-inner { padding: 0 14px !important; }
body > .header.sp-nav .sp-pill-left { grid-template-columns: 20px 1fr !important; gap: 10px !important; }
body > .header.sp-nav .sp-pill-label { font-size: 16px !important; font-weight: 700 !important; white-space: nowrap !important; }
body > .header.sp-nav .sp-pill-icon svg { height: 18px !important; width: auto !important; }
body > .header.sp-nav .account {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin-left: auto !important;
}
body > .header.sp-nav .userChip {
  height: 36px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}
body > .header.sp-nav .logoutBtn { height: 36px !important; padding: 0 14px !important; }


/* ============================================================
   SP-NAV EXACT ? grid 300px+1fr, everything centered, zero
   legacy .tabs bleed (bg/border/padding/margin/shadow nuked)
   ============================================================ */
.header.sp-nav {
  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr) !important;
  align-items: center !important;
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
  width: 100% !important;
  background: var(--surface) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 500 !important;
}
.header.sp-nav .brand,
.header.sp-nav .sp-nav-left {
  display: flex !important;
  width: 300px !important;
  height: 74px !important;
  align-items: center !important;
  justify-content: center !important;
  background: url('/assets/img/nav-navbar-left-side-bg-blue.svg') top left / cover no-repeat !important;
  border-right: 1px solid var(--border) !important;
  padding: 0 !important;
  margin: 0 !important;
}
.header.sp-nav .sp-nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 16px 0 40px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.header.sp-nav .sp-nav-spacer { flex: 1 1 auto !important; }
.header.sp-nav .account {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}
/* tabs group: NO card chrome ? exact .sp-nav-group */
.header.sp-nav .tabs,
.header.sp-nav .sp-nav-group {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  height: 74px !important;
}
.header.sp-nav .tabs::-webkit-scrollbar { display: none; }
/* pills: exact .sp-pill (42px, vertically centered by the grid) */
.header.sp-nav .tab.sp-pill {
  display: flex !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  width: auto !important;
  min-width: 110px !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #fff !important;
}
.header.sp-nav .tab.sp-pill .sp-pill-frame {
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}
.header.sp-nav .tab.sp-pill[aria-selected="true"] .sp-pill-frame,
.header.sp-nav .tab.sp-pill.is-active .sp-pill-frame {
  padding: 1px !important;
  background: linear-gradient(180deg, var(--blue-light) 0%, var(--blue-deep) 100%) !important;
  box-shadow: var(--shadow-games) !important;
}
.header.sp-nav .tab.sp-pill .sp-pill-face {
  height: 40px !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: #1a1e2b !important;
  box-shadow: inset 0 -2px rgba(0, 0, 0, 0.24), inset 0 2px rgba(255, 255, 255, 0.04) !important;
  border: none !important;
}
.header.sp-nav .tab.sp-pill .sp-pill-face-inner {
  display: flex !important;
  height: 100% !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 0 12px !important;
  background: linear-gradient(360deg, rgba(62, 91, 130, 0.16) 0%, rgba(0, 0, 0, 0) 100%) !important;
  transition: background-color 0.2s !important;
}
.header.sp-nav .tab.sp-pill:hover .sp-pill-face-inner {
  background: linear-gradient(360deg, rgba(62, 91, 130, 0.26) 0%, rgba(0, 0, 0, 0) 100%) !important;
}
.header.sp-nav .tab.sp-pill[aria-selected="true"] .sp-pill-face-inner,
.header.sp-nav .tab.sp-pill.is-active .sp-pill-face-inner {
  background: linear-gradient(360deg, rgba(62, 91, 130, 0.56) 0%, rgba(0, 0, 0, 0) 100%) !important;
}
.header.sp-nav .sp-pill-left {
  display: grid !important;
  grid-template-columns: 20px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
}
.header.sp-nav .sp-pill-icon {
  display: grid !important;
  height: 20px !important;
  min-height: 20px !important;
  place-items: center !important;
  color: var(--muted) !important;
}
.header.sp-nav .sp-pill-icon svg { height: 100% !important; width: auto !important; }
.header.sp-nav .tab.sp-pill:hover .sp-pill-icon,
.header.sp-nav .tab.sp-pill:hover .sp-pill-label { color: var(--muted-hover) !important; }
.header.sp-nav .tab.sp-pill[aria-selected="true"] .sp-pill-icon,
.header.sp-nav .tab.sp-pill[aria-selected="true"] .sp-pill-label,
.header.sp-nav .tab.sp-pill.is-active .sp-pill-icon,
.header.sp-nav .tab.sp-pill.is-active .sp-pill-label { color: #fff !important; }
.header.sp-nav .sp-pill-label {
  font-family: var(--font-space) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}
.header.sp-nav .sp-pill-right { display: flex !important; align-items: center !important; gap: 6px !important; }
.header.sp-nav .sp-pill-right .badge {
  font-family: var(--font-space) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(118, 118, 118, 0.55) !important;
  background: none !important;
  padding: 0 !important;
}
/* logo: sp-logo exact */
.header.sp-nav .logo,
.header.sp-nav .sp-logo {
  display: block !important;
  width: 205px !important;
  height: auto !important;
  max-width: 240px !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
/* layout clearance below fixed 74px nav */
.layout { margin-top: 130px !important; }


/* ============================================================
   ANNOUNCEMENT BANNER (exact sheet code ? section 09)
   ============================================================ */
.sp-banner {
  position: relative !important;
  display: flex !important;
  height: 40px !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  padding: 0 32px !important;
  background:
    linear-gradient(280deg, rgba(62, 91, 130, 0.14) 0%, rgba(95, 111, 204, 0.08) 100%),
    linear-gradient(360deg, rgba(38, 29, 46, 0) 0%, #1d2735 100%) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 99 !important;
}
.sp-banner-left { display: flex !important; align-items: center !important; gap: 8px !important; color: var(--muted) !important; }
.sp-banner-title { font-family: var(--font-chakra) !important; font-size: 16px !important; font-weight: 700 !important; color: #fff !important; }
.sp-banner-sub { font-family: var(--font-chakra) !important; font-size: 16px !important; font-weight: 700 !important; color: var(--blue-muted) !important; }
.sp-banner-sub em { font-style: normal !important; color: #fff !important; text-transform: uppercase !important; }
.sp-banner-link {
  display: flex !important; align-items: center !important; gap: 4px !important;
  font-family: var(--font-chakra) !important; font-size: 14px !important; font-weight: 700 !important;
  color: var(--link) !important; text-decoration: none !important; white-space: nowrap !important;
  transition: color 0.2s !important;
}
.sp-banner-link:hover { color: #fff !important; }
.live-bar-sweep {
  position: absolute !important; inset: 0 auto 0 0 !important; width: 68% !important; pointer-events: none !important;
  filter: blur(12px) !important; mix-blend-mode: screen !important;
  background: linear-gradient(90deg, #86abff00, #86abff24 22%, #86abff66 42%, #86abff85 50%, #86abff57 60%, #86abff1f 74%, #86abff00) !important;
  animation: live-bar-sweep 8s linear infinite !important;
}
@keyframes live-bar-sweep {
  0% { transform: translateX(-100%); opacity: 0; }
  4% { opacity: 1; }
  50% { transform: translateX(80%); opacity: 1; }
  96% { opacity: 1; }
  100% { transform: translateX(160%); opacity: 0; }
}


/* banner: directly below the fixed 74px nav, full width */
.sp-banner {
  position: fixed !important;
  top: 74px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  z-index: 99 !important;
}


/* banner at body level: pin directly below fixed nav */
body > .sp-banner {
  position: fixed !important;
  top: 74px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  z-index: 99 !important;
}
/* layout clearance: nav 74 + banner 40 + gap */
body .panel > .layout,
.reduce-animations > .panel > .layout {
  margin-top: 130px !important;
}


/* ============================================================
   CHAT COMPONENTS (exact ? design sheet section 07)
   .chat-bottom-input-bg #161a26 ? .chat-box-level-* badges
   panel 300px ? bottom bar #161a26 ? border-top #ffffff08
   message row bg 135deg transparent 50% ? black/24%
   name SpaceGrotesk 700 15.5px (hover glow) ? text 700 13.5px #a1a1a1
   channel select h40 ? bg #1e2331 ? border #252b3a
   ============================================================ */

/* chat panel container */


/* chat header ? minimal, blends into messages */
.chatColumn .chatHeader {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
  background: transparent !important;
  color: #fff !important;
  font-family: var(--font-space) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 10px 16px !important;
  flex: 0 0 auto !important;
}
.chatColumn .chatHeader .small { color: var(--muted) !important; font-size: 12px !important; }

/* messages area */
.chatColumn .chatBox {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  padding: 0 !important;
}

/* individual message: exact .chat-msg */
.chatColumn .chatBox .chatMessage {
  display: flex !important;
  width: 100% !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.24) 100%) !important;
  padding: 20px 16px 22px 12px !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  font-family: var(--font-space) !important;
}
.chatColumn .chatBox .chatMessage.mine {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, rgba(81, 113, 159, 0.12) 100%) !important;
}
.chatColumn .chatBox .chatMessage.mentioned {
  border-left: 2px solid var(--blue-light) !important;
}

/* inner row (maps .chatRow ? .chat-msg-top) */
.chatColumn .chatBox .chatRow {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
}

/* avatar: exact .avatar-frame */
.chatColumn .chatBox .chatAvatar {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border-radius: 5px !important;
  background: #929292 !important;
  padding: 1px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-space) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #fff !important;
  overflow: hidden !important;
}
.chatColumn .chatBox .chatAvatar > * {
  width: 100% !important;
  height: 100% !important;
  border-radius: 4px !important;
  background: #21242c !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* body column (maps .chatBody ? .chat-msg-col) */
.chatColumn .chatBox .chatBody {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

/* meta line (maps .chatMeta ? .chat-msg-head) */
.chatColumn .chatBox .chatMeta {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  font-weight: 700 !important;
}
/* chat name: exact .chat-name */
.chatColumn .chatBox .chatUser {
  font-family: var(--font-space) !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 22.14px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 150px !important;
}
.chatColumn .chatBox .chatUser:hover {
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.69), 0 0 1px #000 !important;
}
/* timestamp */
.chatColumn .chatBox .chatTime {
  font-family: var(--font-space) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
}
/* text: exact .sp-chat-text / .chat-text */
.chatColumn .chatBox .chatBubble {
  font-family: var(--font-space) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 16.875px !important;
  color: #a1a1a1 !important;
  overflow-wrap: break-word !important;
}

/* ============================================================
   CHAT BOTTOM (exact .chat-bottom)
   bg #161a26 ? border-top rgba(255,255,255,0.03) ? padding 20px 16px
   ============================================================ */
.chatColumn .chatInput {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
  padding: 20px 16px !important;
  background: var(--surface-chat) !important;
  flex: 0 0 auto !important;
}

/* channel select (exact .chat-select-wrap / .chat-select) */
.chatColumn .chat-select-wrap {
  position: relative !important;
  width: 100% !important;
  cursor: pointer !important;
}
.chatColumn .chat-select {
  display: flex !important;
  height: 40px !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 8px !important;
  background: var(--surface-select) !important;
  padding: 0 12px 0 16px !important;
  font-family: var(--font-space) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  transition: color 0.15s !important;
}
.chatColumn .chat-select:hover { color: #fff !important; }

/* chat input row (exact .chat-input-row) */
.chatColumn .chat-input-row {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.chatColumn .chat-input-row .input-chat,
.chatColumn .chatInput input#chatMessage {
  width: 100% !important;
  height: 40px !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  padding: 0 12px !important;
  font-family: var(--font-space) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #767676 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.chatColumn .chat-input-row .input-chat:focus,
.chatColumn .chatInput input#chatMessage:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(81, 113, 159, 0.16) !important;
  color: #fff !important;
}
.chatColumn .chat-input-row .input-chat::placeholder {
  color: var(--muted) !important;
}

/* send button: exact .btn-send (32px blue icon square) */
.chatColumn .chat-input-row .btn-send,
.chatColumn .chatInput #sendMessage {
  height: 40px !important;
  width: 40px !important;
  flex: 0 0 40px !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
  transition: opacity 0.3s !important;
}
.chatColumn .chat-input-row .btn-send:hover,
.chatColumn .chatInput #sendMessage:hover {
  opacity: 0.8 !important;
  background: var(--primary) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* online count (exact .online-row / .playing-count) */
.chatColumn .online-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--muted) !important;
  font-family: var(--font-space) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
}
.chatColumn .playing-count { color: var(--muted) !important; }

/* community card: telegram social-card recipe */
.chatColumn #telegramReminder {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(58, 173, 224, 0.36)), #1a1e2b !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px !important;
  box-shadow: var(--shadow-inset-pill) !important;
  transition: background 0.2s !important;
}
.chatColumn #telegramReminder:hover {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(58, 173, 224, 0.36)), #1d4353 !important;
}
.chatColumn #telegramReminder div { font-size: 13px !important; color: var(--muted-3) !important; }
.chatColumn #telegramReminder b { color: #fff !important; }
.chatColumn #telegramReminder span {
  font-family: var(--font-chakra) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--blue-light) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}


/* ============================================================
   CHAT SIDEBAR: flush right, below banner, stretches to bottom
   ============================================================ */

/* messages area stretches to fill */
.chatColumn .chatBox {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}
.chatColumn .chatBox::-webkit-scrollbar { display: none !important; }
/* content clearance: make room for the chat sidebar */
.reduce-animations > .panel > .layout,
body .panel > .layout {
  
}


/* ============================================================
   CHAT SIDEBAR ? FINAL (last rule, wins everything)
   fixed right side, below banner, stretches to bottom
   ============================================================ */
body .panel > .layout > .chatColumn,
.chatColumn {
  position: fixed !important;
  top: 114px !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--surface) !important;
  border: none !important;
  border-left: 1px solid var(--border) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 90 !important;
  align-self: auto !important;
}
body .panel > .layout > .chatColumn .chatBox,
.chatColumn .chatBox {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}
.chatColumn .chatBox::-webkit-scrollbar { display: none !important; }
body .panel > .layout,
.reduce-animations > .panel > .layout {
  
}


/* ============================================================
   FOOTER (exact .sp-footer from design sheet)
   ============================================================ */
.sp-footer {
  width: 100% !important;
  padding: 32px 40px !important;
  background: linear-gradient(rgba(0,0,0,0), rgba(62, 91, 130, 0.12)), var(--surface) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 1 !important;
}
.sp-footer-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 56px !important;
  flex-wrap: wrap !important;
}
.sp-footer-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}
.sp-footer-brand .sp-logo {
  width: 180px !important;
  height: auto !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.sp-footer-socials { display: flex !important; align-items: center !important; gap: 12px !important; }
.social-card {
  position: relative !important;
  height: 40px !important;
  width: 48px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 2px rgba(255, 255, 255, 0.04), inset 0 -2px rgba(0, 0, 0, 0.24) !important;
  transition: background-color 0.2s !important;
  text-decoration: none !important;
}
.social-card svg { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }
.social-telegram { background: linear-gradient(rgba(0,0,0,0), rgba(58, 173, 224, 0.36)), #1a1e2b !important; }
.social-telegram:hover { background: #1d4353 !important; }
.sp-footer-text {
  margin-top: 16px !important;
  max-width: 668px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.sp-footer-note {
  font-family: var(--font-space) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.56) !important;
}
.sp-footer-note a { color: #fff !important; }


/* footer inside layout: sp-footer exact styling (belt and suspenders for the inline styles) */
.sp-footer {
  width: 100% !important;
  padding: 32px 40px !important;
  background: linear-gradient(rgba(0,0,0,0), rgba(62, 91, 130, 0.12)), var(--surface) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
}
.sp-footer-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 56px !important;
  flex-wrap: wrap !important;
}
.sp-footer-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}
.sp-footer-brand .sp-logo {
  width: 180px !important;
  height: auto !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.sp-footer-socials { display: flex !important; align-items: center !important; gap: 12px !important; }
.social-card {
  position: relative !important;
  height: 40px !important;
  width: 48px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 2px rgba(255, 255, 255, 0.04), inset 0 -2px rgba(0, 0, 0, 0.24) !important;
  transition: background 0.2s !important;
  text-decoration: none !important;
}
.social-card svg { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }
.sp-footer-text {
  margin-top: 16px !important;
  max-width: 668px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.sp-footer-note {
  font-family: var(--font-space) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.56) !important;
}
.sp-footer-note a { color: #fff !important; }


/* ============================================================
   FOOTER: fixed at viewport bottom, left edge to chat left edge
   ============================================================ */
body > .sp-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 300px !important;
  width: auto !important;
  height: auto !important;
  z-index: 89 !important;
  border-radius: 0 !important;
  border: none !important;
  border-top: 1px solid var(--border-2) !important;
  background: linear-gradient(rgba(0,0,0,0), rgba(62, 91, 130, 0.12)), var(--surface) !important;
  padding: 16px 28px !important;
  box-sizing: border-box !important;
}
/* content area clears the footer */
.reduce-animations > .panel > .layout,
body .panel > .layout {
  padding-bottom: 110px !important;
}


/* footer social card hover (exact) */
body > .sp-footer .social-card:hover {
  background: #1d4353 !important;
}
/* footer brand logo (exact .sp-logo sizing) */
body > .sp-footer .sp-logo {
  width: 205px !important;
  height: auto !important;
}


/* content centered between left screen edge and chat sidebar */
.reduce-animations > .panel > .layout,
body .panel > .layout {
    margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}


/* layout: centered between left screen edge and chat sidebar
   (auto margins center on viewport, then shift left by half the chat width) */
body .panel > .layout,
.reduce-animations > .panel > .layout {
  max-width: 1500px !important;
  margin: 20px auto 48px auto !important;
  transform: translateX(-150px) !important;
}
@media (max-width: 1824px) {
  body .panel > .layout,
  .reduce-animations > .panel > .layout {
    max-width: calc(100vw - 372px) !important;
    transform: none !important;
    margin-left: 24px !important;
    margin-right: 348px !important;
  }
}


/* ============================================================
   UNIVERSAL CARD RECIPE ? one background for every card, no exceptions
   Exact player-row state-normal from the design sheet
   ============================================================ */
.glass-card,
.card,
[class*="Card"],
[class*="card"],
.statCard,
.stat-grid > div,
.stats-grid > div,
.stat-card-mini,
.chart-card,
.chartCard,
.chartColumn .chartCard,
#statsSummary > div,
.statsSummary > div,
.templateCard,
.feat-card,
.rank-card,
.bet-panel,
#panelContent .glass-card:not(:first-child),
.reduce-animations .panel .glass-card {
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(62, 91, 130, 0.16)), #1a1e2b !important;
  box-shadow: inset 0 2px rgba(255, 255, 255, 0.04), inset 0 -2px rgba(0, 0, 0, 0.24) !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #fff !important;
}
/* wrapper cards that contain other cards stay transparent */
.glass-card:has(.glass-card),
#panelContent > .glass-card:first-child {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* ============================================================
   .SP-CARD: universal card recipe (last rule, wins everything)
   Applied automatically to every card element by MutationObserver
   ============================================================ */
.sp-card,
body .sp-card,
#panelContent .sp-card {
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(62, 91, 130, 0.16)), #1a1e2b !important;
  box-shadow: inset 0 2px rgba(255, 255, 255, 0.04), inset 0 -2px rgba(0, 0, 0, 0.24) !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #fff !important;
  overflow: hidden;
}
/* wrapper cards that contain other cards stay transparent */
.sp-card:has(.sp-card) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* ============================================================
   CSS RESET + REBUILD ? strip ALL legacy styling from panel
   content, then apply ONLY the design system. Nothing else.
   This kills every card-in-card, inconsistent bg, stray border,
   and legacy shadow in one pass.
   ============================================================ */

/* --- step 1: strip ALL legacy decoration from inside .panel --- */
#mainApp *,
#mainApp {
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}
/* strip backgrounds, borders, radius from non-interactive inner divs */
#mainApp div:not(.sp-nav-left):not(.sp-nav-right):not(.sp-pill-face):not(.sp-pill-face-inner):not(.sp-pill-frame):not(.sp-pill-icon):not(.sp-pill-right):not(.sp-nav-group):not(.sp-nav-spacer):not(.brand):not(.account):not(.chatInput):not(.chat-select-wrap):not(.chat-select):not(.chat-select > *):not(.chat-msg-head):not(.chat-msg-top):not(.avatar-frame):not(.avatar-frame > div):not(.sp-banner):not(.sp-banner-left):not(.sp-banner-link):not(.live-bar-sweep):not(.sp-footer):not(.sp-footer-inner):not(.sp-footer-brand):not(.sp-footer-socials):not(.sp-footer-text):not(.social-card):not(.sp-footer-text):not(.chat-msg-top):not(.chat-msg-col):not(.chev-box) {
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: var(--border) !important;
}

/* --- step 2: rebuild design system surfaces --- */

/* page-level sections get the dark bg */
#mainApp { background: var(--bg) !important; }

/* top-level card containers get player-row surface */
#mainApp > .panel > .layout .glass-card,
#mainApp > .panel > .layout .statCard,
#mainApp > .panel > .layout .chart-card,
#mainApp > .panel > .layout .chartCard,
#mainApp > .panel > .layout .stat-card-mini,
#mainApp > .panel > .layout .templateCard,
#mainApp > .panel > .layout .feat-card,
#mainApp > .panel > .layout .rank-card,
#mainApp > .panel > .layout .bet-panel,
#mainApp .sp-card {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(62, 91, 130, 0.16)), #1a1e2b !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px rgba(255, 255, 255, 0.04), inset 0 -2px rgba(0, 0, 0, 0.24) !important;
  overflow: hidden;
}

/* nested cards (inside other cards) get slightly darker surface */
.glass-card .glass-card,
.glass-card .statCard,
.glass-card .card {
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

/* buttons keep their exact styling */
#mainApp .action-btn.primary,
#mainApp .btnPrimary,
#mainApp .compileBtn,
#mainApp .authSubmitBtn,
#mainApp .logWithdrawBtn,
#mainApp button[style*="var(--green)"],
#mainApp button[class*="primary"] {
  background: var(--green) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  box-shadow: var(--shadow-primary) !important;
}
#mainApp .action-btn.primary:hover,
#mainApp .btnPrimary:hover {
  background: #0e8d66 !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-primary-hover) !important;
}

/* secondary buttons get solpump blue */
#mainApp .action-btn.secondary,
#mainApp .btnSecondary,
#mainApp .action-btn.tertiary {
  background: var(--primary) !important;
  border: 1px solid var(--border-2) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* inputs keep exact input-bet style */
#mainApp input:not([type="checkbox"]):not([type="radio"]),
#mainApp select,
#mainApp textarea {
  background: var(--surface) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 8px !important;
  color: #fff !important;
}

/* chat panel: keep its specific surfaces */
.chatColumn { background: var(--surface) !important; border: 1px solid var(--border) !important; }
.chatColumn .chatInput { background: var(--surface-chat) !important; }

/* nav pills keep their exact styling */
.sp-pill-face { background: #1a1e2b !important; }
.tab.sp-pill[aria-selected="true"] .sp-pill-face-inner {
  background: linear-gradient(360deg, rgba(62, 91, 130, 0.56) 0%, rgba(0, 0, 0, 0) 100%) !important;
}


/* ============================================================
   SURGICAL CARD FIX: strip card surface from non-card containers,
   keep it only on actual card elements
   ============================================================ */

/* strip card surface from these known non-card containers */
.logsToolbar,
.logsToolbar *,
.tab-group,
.button-group,
.formRow,
.walletEditRow,
.field,
.field-head,
.affiliate-section,
.affiliate-banner,
.toolbar-row,
.search-row,
.controls-row,
.filter-group,
.toggle-group,
.input-wrapper,
.logsSubTab,
.stat-controls,
.statsControls,
.welcome-section .status-grid .glass-card .status-icon,
.action-group,
.quick-actions,
.input-actions,
.chat-select-wrap,
.online-row,
.sp-footer-text {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* the tabs button group in logs: no card surface */
.logsSubTab,
.logsSubTab.active {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-family: var(--font-space) !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
}
.logsSubTab.active {
  background: var(--primary) !important;
  border-color: var(--border-2) !important;
  color: #fff !important;
}

/* affiliate program section: clean input + button row */
.affiliate-input-row {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

/* the card-in-card inner pills on stat cards: strip their borders */
.status-grid .glass-card .status-pill,
.status-grid .glass-card [class*="pill"],
.status-grid .glass-card [class*="inner"],
.stats-grid .glass-card [class*="inner"],
.glass-card [class*="Inner"],
.glass-card [class*="inner"] {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* ============================================================
   OCTOBER LAYER — canonical blue tokens, elevation, layout fixes,
   october components (sub-pills, leaderboard, payout, chat e2ee)
   This layer is appended after the base; later cascade wins.
   ============================================================ */

/* ---------- canonical tokens (AGENT-COLOR-TOKENS.md, blue-cast) ---------- */
:root {
  --bg: #0c1017;
  --surface: #141722;
  --surface-2: #1a1e2b;
  --surface-3: #191d29;
  --surface-chat: #161a26;
  --surface-select: #1e2331;
  --surface-accordion: #171b27;
  --border: #161a22;
  --border-2: #252b3a;
  --knob: #232a3a;
  --track: #12151e;
  --shadow-default: inset 0 2px rgba(255,255,255,0.04), inset 0 -2px rgba(0,0,0,0.24);
  --shadow-primary: 0 8px 5px rgba(0,0,0,0.12), inset 0 2px rgba(255,255,255,0.07), inset 0 -2px rgba(0,0,0,0.24);
  --shadow-primary-hover: 0 12px 10px rgba(0,0,0,0.18), inset 0 3px rgba(255,255,255,0.08), inset 0 -3px rgba(0,0,0,0.26);
  --shadow-games: 0 2px 10px rgba(80,153,255,0.16);
  --shadow-bet-inputs: inset 0 2px rgba(255,255,255,0.07);
  --shadow-inset-pill: inset 0 -2px rgba(0,0,0,0.24), inset 0 2px rgba(255,255,255,0.04);
}

/* ---------- layout fixes (verified october state) ---------- */
body { display: flex; align-items: flex-start; min-height: 100vh; }
body > .panel { padding-top: 114px !important; }   /* fixed chrome: nav 74 + banner 40 */
#panelContent { margin-top: 16px !important; padding-top: 31px !important; }
#panelContent > :first-child { margin-top: 0 !important; }
body > .panel > .layout { margin-top: 20px; }

/* ---------- focus ring (universal) ---------- */
.input:focus,
.input-bet:focus,
.authInput:focus,
.walletInput:focus,
#claimDestWallet:focus,
.snippetArea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(81, 113, 159, 0.16) !important;
  outline: none;
}

/* ---------- tab bars: SpaceGrotesk 16/700, flex-centered ---------- */
.tabs,
.sp-nav-group,
.tab-btn,
.tabs .tab {
  font-family: var(--font-space);
  font-size: 16px;
  font-weight: 700;
}
.tabs { display: flex; justify-content: center; gap: 8px; }

/* ---------- sub-pill (live tab sub-tabs) ---------- */
.sub-pill {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-space);
}
.sub-pill-frame {
  display: inline-block;
  border-radius: 8px;
  background: var(--surface-2);
  box-shadow: var(--shadow-default);
  border: 1px solid var(--border);
  overflow: hidden;
}
.sub-pill-face {
  display: inline-block;
  padding: 7px 16px;
  font-family: var(--font-space);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.sub-pill:hover .sub-pill-face { color: var(--muted-hover); }
.sub-pill.is-active .sub-pill-frame { border-color: var(--border-2); }
.sub-pill.is-active .sub-pill-face {
  color: #fff;
  background: linear-gradient(180deg, rgba(81,113,159,0.16), rgba(81,113,159,0.08));
}

/* ---------- generic buttons ---------- */
body #panelContent .btnPrimary {
  background: linear-gradient(180deg, rgba(2,223,152,0.16), rgba(2,223,152,0.08)), var(--surface-2);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-default);
  color: var(--green-bright);
  font-family: var(--font-space);
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
  padding: 9px 18px;
  cursor: pointer;
}
body #panelContent .btnPrimary:hover:not([disabled]) { box-shadow: var(--shadow-primary-hover); transform: translateY(-2px); }
body #panelContent .btnPrimary:disabled,
body #panelContent .claimExecBtn:disabled {
  background: transparent;
  color: rgba(118,118,118,0.55);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
body #panelContent .btnSecondary {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-default);
  color: var(--silver-1);
  font-family: var(--font-space);
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
}
body #panelContent .btnDanger {
  background: linear-gradient(180deg, rgba(252,90,90,0.16), rgba(252,90,90,0.08)), var(--surface-2);
  border: 1px solid rgba(252,90,90,0.35);
  color: var(--red);
  font-family: var(--font-space);
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
}
.copyBtn {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-default);
  color: var(--blue-light);
  font-family: var(--font-space);
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
}
.copyBtn:hover { color: #fff; }

/* ---------- inputs ---------- */
.input,
.walletInput,
#claimDestWallet,
.snippetArea {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-bet-inputs);
  color: #fff;
  font-family: var(--font-space);
  border-radius: 8px;
  padding: 9px 12px;
}

/* ---------- stat cards ---------- */
.statCard,
.stat-card-mini {
  background: var(--surface-2);
  border-radius: 8px;
  box-shadow: var(--shadow-default);
}
.stat-value-xl {
  font-family: var(--font-tourney);
  font-weight: 900;
  font-size: 44px;
}

/* ---------- leaderboard player rows ---------- */
body #panelContent .player-row {
  background: linear-gradient(180deg, rgba(81,113,159,0.16), rgba(81,113,159,0.08)), var(--surface-2);
  box-shadow: var(--shadow-default);
  border-radius: 8px;
}
body #panelContent .player-row.state-won {
  background: linear-gradient(180deg, rgba(2,223,152,0.16), rgba(2,223,152,0.08)), var(--surface-2);
}
body #panelContent .player-row.state-bust {
  background: linear-gradient(180deg, rgba(252,90,90,0.16), rgba(252,90,90,0.08)), var(--surface-2);
}
.pr-inner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.pr-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.pr-avatar-letter {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-select);
  color: var(--blue-light);
  font-family: var(--font-chakra);
  font-weight: 700; font-size: 15px;
  flex: none;
}
.pr-coin { width: 16px; height: 16px; flex: none; }
.pr-name {
  font-family: var(--font-space); font-weight: 700; font-size: 14px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-sub { font-size: 11.5px; color: var(--muted); }
.pr-status {
  font-family: var(--font-chakra); font-weight: 700; font-size: 14px;
  color: var(--green-bright); white-space: nowrap;
}

/* ---------- activity feed / online rows ---------- */
.activity-card, .glass-card, .feat-card, .social-card, .chart-card {
  background: var(--surface-2);
  border-radius: 8px;
  box-shadow: var(--shadow-default);
}
.glass-card { border: 1px solid var(--border-2); } /* opaque — frosted glass banned */
.online-row, .act-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.act-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-select); display: flex; align-items: center; justify-content: center; flex: none; }
.act-main { flex: 1; min-width: 0; }
.act-site { font-family: var(--font-space); font-weight: 700; font-size: 13.5px; color: #fff; }
.act-sub { font-size: 11.5px; color: var(--muted); }
.act-val { font-family: var(--font-chakra); font-weight: 700; font-size: 13.5px; color: var(--green-bright); white-space: nowrap; }
.act-time { font-size: 11px; color: var(--muted-3); }
.activity-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-bright);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.playing-count {
  font-family: var(--font-chakra); font-weight: 700; font-size: 12px;
  color: var(--blue-light);
  background: linear-gradient(180deg, rgba(81,113,159,0.16), rgba(81,113,159,0.08)), var(--surface-2);
  border-radius: 999px; padding: 3px 12px;
}
.welcome-live { color: var(--green-bright); font-family: var(--font-chakra); font-weight: 700; }

/* ---------- affiliate crank ---------- */
.crank-wrap { background: var(--surface-2); border-radius: 8px; box-shadow: var(--shadow-default); padding: 14px; }
.crank-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.crank-tier { font-family: var(--font-chakra); font-weight: 700; color: var(--blue-light); }
.crank-bar { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.crank-bar > div { height: 100%; background: linear-gradient(90deg, var(--primary), var(--blue-light)); border-radius: 999px; }

/* ---------- faq ---------- */
.faqToggle {
  width: 100%;
  text-align: left;
  background: var(--surface-accordion);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--silver-1);
  font-family: var(--font-space);
  font-size: 13.5px;
  font-weight: 700;
  padding: 12px 14px;
  cursor: pointer;
}
.faqArrow { color: var(--muted); float: right; }

/* ---------- E2EE badge ---------- */
.e2ee-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-chakra);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--green-bright);
  background: linear-gradient(180deg, rgba(2,223,152,0.16), rgba(2,223,152,0.08)), var(--surface-2);
  border: 1px solid rgba(2,223,152,0.3);
  border-radius: 999px;
  padding: 4px 12px;
}
.e2ee-badge svg { width: 12px; height: 12px; }

/* ---------- checkboxes / toggles ---------- */
.customCheckbox, .chipCheck { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }
.walletToggleBtn { background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px; }
.walletToggleBtn:hover { color: var(--muted-hover); }
.walletToggleIcon { transition: transform 0.2s cubic-bezier(0.4,0,0.2,1); }
.walletToggleIcon.open { transform: rotate(180deg); }
.walletEditRow { display: flex; gap: 8px; align-items: center; }
.walletLabel { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.14em; }

/* ---------- misc october ---------- */
.milestone { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); padding: 6px 0; }
.easySetupStep { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
.toast-undo, .filter-btn, .time-btn, .view-all-btn {
  background: var(--surface-2); border: 1px solid var(--border-2);
  color: var(--blue-light); font-family: var(--font-space);
  font-size: 12.5px; font-weight: 700; border-radius: 8px;
  padding: 5px 12px; cursor: pointer;
}
.log-select, .statsControls select {
  background: var(--surface-2); border: 1px solid var(--border-2);
  color: var(--silver-1); font-family: var(--font-space);
  border-radius: 8px; padding: 6px 10px;
}
bulk-actions-bar, .bulk-actions-bar {
  display: flex; gap: 8px; align-items: center;
  background: var(--surface-2); border-radius: 8px;
  box-shadow: var(--shadow-default); padding: 8px 12px;
}

/* ============================================================
   AUDIT PATCH v98 — banner single-line fit + auth typography
   ============================================================ */

/* legacy styles.css forces uppercase on auth labels/buttons — sheet says sentence case */
.formLabel, .authForm .formLabel, .authSubmitBtn, .authTitle, .authSubtitle, .authToggleText {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* banner: the october veil copy is longer than the sheet's banner —
   shrink to fit one line at 1600px+, ellipsize gracefully below that */
.sp-banner-left { flex: 1 1 auto !important; min-width: 0 !important; gap: 16px !important; }
.sp-banner-title {
  font-size: 13px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.sp-banner-sub {
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.sp-banner-link { flex-shrink: 0 !important; }
@media (max-width: 1100px) {
  .sp-banner-sub { display: none !important; }
}