/* ============================================================
   Site theme — light default, dark via .dark on <html>
   Class vocabulary preserved 1:1 so all existing views keep working.
   ============================================================ */

/* ── Stake-style dark (default) ─────────────────────────────── */
:root {
  --card:        #1a3347;
  --card-2:      #213f58;
  --popover:     #1a3347;
  --background:  #0f212e;
  --sidebar:     #0b1923;
  --foreground:  #ffffff;
  --muted:       #b1bad3;
  --muted-2:     #9ab0c2;
  --border:      #2a4a64;
  --border-2:    #2b5278;
  --input:       #071824;
  --ring:        rgba(20,160,133,.30);

  --primary:              #14a085;
  --primary-fg:           #ffffff;
  --primary-foreground:   #ffffff;
  --secondary:            #1a3347;
  --secondary-foreground: #ffffff;
  --accent:               #213f58;
  --accent-foreground:    #ffffff;
  --destructive:          #e23b3b;
  --destructive-foreground: #ffffff;
  --muted-foreground:     #b1bad3;
  --card-foreground:      #ffffff;
  --popover-foreground:   #ffffff;

  --sidebar-ring:               rgba(20,160,133,.30);
  --sidebar-accent:             #1a3347;
  --sidebar-border:             #0b1923;
  --sidebar-primary:            #14a085;
  --sidebar-foreground:         #b1bad3;
  --sidebar-accent-foreground:  #ffffff;
  --sidebar-primary-foreground: #ffffff;

  --chart-1: #14a085;
  --chart-2: #1e85f7;
  --chart-3: #f5a623;
  --chart-4: #a855f7;
  --chart-5: #e23b3b;

  /* trading/status colors */
  --green:   #00e887;
  --red:     #e23b3b;
  --yellow:  #f5a623;
  --blue:    #1e85f7;
  --warning: #f5a623;

  /* semantic aliases */
  --bg:    var(--background);
  --bg-1:  var(--sidebar);
  --bg-2:  var(--card);
  --bg-3:  var(--card-2);
  --text:  var(--foreground);

  --font-sans:  'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: 'Geist', ui-serif, Georgia, serif;
  /* Numeric/mono contexts render in Geist Sans: Geist Mono's only zero glyph is
     slashed — user verdict 2026-07-10: no crossed zeros anywhere. Numeric classes
     already set tabular-nums; Stake renders balances in its sans the same way. */
  --font-mono:  'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --radius:    0.625rem;
  --radius-sm: 0.375rem;
  --nav-h:        60px;
  --sidebar-w:    228px;
  --bottom-nav-h: 64px;
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
  --shadow:    0 8px 32px rgba(0,0,0,.55);
  --shadow-sm: 0 2px 12px rgba(0,0,0,.40);

  /* ── Type scale ───────────────────────────────────────────────
     Nine steps replacing the ~100 ad-hoc sizes that had accumulated
     across app.css and per-page style blocks. Pick the nearest step;
     never introduce a new size. */
  --text-2xs:  0.625rem;   /* 10px — badges, micro-labels */
  --text-xs:   0.6875rem;  /* 11px — captions, nav labels */
  --text-sm:   0.75rem;    /* 12px — table headers, meta */
  --text-md:   0.8125rem;  /* 13px — secondary text */
  --text-base: 0.875rem;   /* 14px — body, buttons, links */
  --text-lg:   0.9375rem;  /* 15px — emphasised body, inputs */
  --text-xl:   1.0625rem;  /* 17px — names, section titles */
  --text-2xl:  1.25rem;    /* 20px — page + modal headings */
  --text-3xl:  1.5rem;     /* 24px — balances, stat values */

  /* Icon sizing is deliberately separate from the type scale:
     an icon beside 13px text is not 13px. */
  --icon-sm:   0.875rem;
  --icon-md:   1rem;
  --icon-lg:   1.25rem;
  --icon-xl:   1.5rem;

  /* ── Weight scale ─────────────────────────────────────────────
     Four steps. 800 is retired: it read as a different typeface
     next to 700 and was the main source of "these pages don't
     match" in the navbar and sidebar. */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* ── Spacing scale ────────────────────────────────────────────
     4px base. Replaces the 199 distinct padding values found across
     the views. Every gap, pad and margin should resolve to a step. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x: clip (not hidden) prevents horizontal scroll WITHOUT making the
   root a scroll container — which would break the sticky navbar. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
html, body {
  touch-action: manipulation;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  overscroll-behavior: none;
}
canvas, button, .btn, input[type="button"], input[type="submit"] { touch-action: manipulation; }
* { -webkit-tap-highlight-color: transparent; }
button, .btn, a, [onclick] { -webkit-user-select: none; user-select: none; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }

h1,h2,h3,h4,h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.25;
  color: var(--foreground);
  letter-spacing: -.01em;
}
a { color: inherit; text-decoration: none; }
a:hover { opacity: .85; }
/* Baseline overflow guard — media can never force horizontal scroll on mobile */
img, video { max-width: 100%; height: auto; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }

/* ── Top Navbar ─────────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 200;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  /* Reserve the iOS status-bar / notch area so the header is never hidden
     under it when launched from the home screen (viewport-fit=cover).
     env() is 0 on devices without a safe area, so desktop is unaffected. */
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 20px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.navbar-brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); white-space: nowrap;
  color: var(--foreground); text-decoration: none;
}
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(145deg, #1ec79f, #14a085);
  display: flex; align-items: center; justify-content: center;
  color: #04241c; font-size: 1rem; flex-shrink: 0;
}
.brand-word { font-size: 1.18rem; font-weight: 800; letter-spacing: -.02em; }
.navbar-brand .dot { color: var(--primary); }
.navbar-nav { display: flex; align-items: center; gap: 6px; }
.nav-link {
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: .86rem; font-weight: 600; color: var(--muted);
  transition: color .15s, background .15s;
}
.nav-link:hover, .nav-link.active { color: var(--foreground); background: var(--card); opacity: 1; }
.nav-btn {
  padding: 8px 18px; border-radius: 99px;
  font-size: .86rem; font-weight: 700;
  background: var(--primary); color: var(--primary-fg);
  cursor: pointer; border: none; font-family: var(--font-sans);
  transition: filter .15s, transform .1s; white-space: nowrap;
}
.nav-btn:hover { filter: brightness(1.08); }
.nav-btn:active { transform: scale(.97); }

/* Navbar icon buttons (theme, logout) — rounded squares to match the wallet pill */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--border);
  color: var(--foreground); cursor: pointer; font-size: 1.05rem;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.theme-toggle:hover { background: var(--card-2); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle.logout:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, var(--border)); }

/* ── Hamburger ──────────────────────────────────────────────── */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 6px; border-radius: var(--radius-sm);
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--foreground); border-radius: 2px; transition: all .25s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  position: fixed; top: var(--nav-h); left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  padding: 16px 12px; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 2px; z-index: 100;
  transition: transform .25s ease;
}
.sidebar-label {
  font-size: .7rem; font-weight: 500;
  letter-spacing: 0; color: var(--muted-foreground);
  padding: 16px 8px 6px; display: block;
}
.sidebar-link {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: var(--radius-sm);
  font-size: .88rem; font-weight: 600; color: var(--sidebar-foreground);
  transition: all .15s; cursor: pointer; min-height: 44px;
  border-left: 3px solid transparent; opacity: .7;
}
.sidebar-link:hover { color: var(--sidebar-foreground); background: var(--sidebar-accent); opacity: 1; }
.sidebar-link:active { background: var(--sidebar-accent); transform: scale(.99); }
.sidebar-link.active {
  color: var(--sidebar-foreground);
  background: var(--sidebar-accent);
  border-left: 3px solid var(--sidebar-primary);
  font-weight: 700; opacity: 1;
}
.sidebar-link.active i { color: var(--sidebar-primary); }
.sidebar-link i { font-size: 1.1rem; width: 20px; text-align: center; }

.sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 998;
  background: rgba(0,0,0,.78);
}
.sidebar-overlay.show { display: block; }
.sidebar-brand-header { display: none !important; }

/* ── Redesigned sidebar: account-first drawer ───────────────── */
.sb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 14px; margin-bottom: 4px; }
.sb-id { display: flex; align-items: center; gap: 11px; min-width: 0; text-decoration: none; flex: 1; }
.sb-avatar {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(145deg, var(--primary), #0c6e5b);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 800; font-size: 1.1rem; color: #fff;
  box-shadow: 0 4px 14px rgba(20,160,133,.35);
}
.sb-id-text { display: flex; flex-direction: column; min-width: 0; }
.sb-name { font-family: var(--font-sans); font-weight: 700; font-size: 1rem; color: var(--foreground); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-sub { font-size: .7rem; color: var(--muted-2); margin-top: 1px; }
.sb-close { flex-shrink: 0; width: 36px; height: 36px; border: none; border-radius: 11px; background: #1a3347; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; }
.sb-close:hover { background: var(--card-2); color: var(--foreground); }
.sb-close i { font-size: .95rem; }

.sb-wallet { background: #1a3347; border-radius: 14px; padding: 14px; }
.sb-bal { display: flex; flex-direction: column; margin-bottom: 11px; }
.sb-bal-label { font-size: .72rem; font-weight: 600; color: var(--muted-2); }
.sb-bal-amt { font-family: var(--font-sans); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--foreground); margin-top: 4px; line-height: 1; }
/* Was a "$" glyph. Now holds the inline USDT mark - sized in em so it tracks
   .sb-bal-amt if that font-size ever changes, rather than pinning a px box. */
.sb-cur { display: inline-flex; width: .78em; height: .78em; margin-right: .22em; vertical-align: -.02em; }
.sb-cur svg { width: 100%; height: 100%; display: block; }
.sb-wallet-btns { display: flex; gap: 8px; }
.sb-wbtn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; font-size: .84rem; font-weight: 700; text-decoration: none; cursor: pointer; border: 0; background: var(--card-2); color: var(--foreground); transition: filter .15s; }
.sb-wbtn i { font-size: .9rem; }
.sb-wbtn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.sb-wbtn:active { filter: brightness(.92); }

.sb-section { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted-2); padding: 0 2px 8px; }
/* Grouped-menu section label: caption + hairline rule running to the edge */
.sb-section-rule { display: flex; align-items: center; gap: 9px; padding: 18px 2px 8px; } /* 2px column gap + 18px = 20px above every label */

.sb-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* Four games (Dice/Lotto switched off) sit 2x2 instead of 3 + an orphan. */
.sb-games:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
.sb-game { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 14px 4px; border-radius: 12px; background: #1a3347; border: 1.5px solid transparent; color: var(--muted); text-decoration: none; transition: transform .12s, border-color .15s, color .15s, background .15s; }
.sb-game i { font-size: 1.4rem; }
.sb-gico { width: 23px; height: 23px; display: block; }
i.sb-gico { font-size: 20px; line-height: 23px; text-align: center; }
.sb-game span { font-size: .72rem; font-weight: 600; font-family: var(--font-sans); }
.sb-game:active { transform: scale(.95); }
.sb-game.active { border-color: var(--primary); color: var(--foreground); background: color-mix(in srgb, var(--primary) 12%, #1a3347); }
.sb-game.active i, .sb-game.active .sb-gico { color: var(--primary); }
.sb-new { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 25%, transparent); }

.sb-menu { display: flex; flex-direction: column; gap: 2px; }
.sb-row { display: flex; align-items: center; gap: 11px; padding: 7px 8px 7px 6px; border-radius: var(--radius-sm); font-size: .86rem; font-weight: 600; color: var(--muted); text-decoration: none; min-height: 46px; transition: background .15s, color .15s; }
/* The one .sb-row that is a <button>, not a link (chat opens a drawer rather
   than navigating). Buttons carry their own background, border, font and
   centred text, so they have to be told to look like their neighbours. */
.sb-row-btn { width: 100%; background: none; border: 0; font: inherit; font-size: .86rem; font-weight: 600; text-align: left; cursor: pointer; }
/* Icon chip: quiet by default, lights teal on the active route */
.sb-ic { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: #1a3347; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.sb-ic i { font-size: .9rem; color: var(--muted-2); transition: color .15s; }
.sb-row:hover, .sb-row:active { background: color-mix(in srgb, #1a3347 60%, transparent); color: var(--foreground); }
.sb-row.active { background: #1a3347; color: var(--foreground); }
.sb-row.active .sb-ic { background: color-mix(in srgb, var(--primary) 18%, transparent); }
.sb-row.active .sb-ic i { color: var(--primary); }
.sb-chev { margin-left: auto; font-size: .7rem; color: var(--muted-2); opacity: .55; }
.sb-pill { margin-left: auto; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--green); }
.sb-tag { margin-left: auto; background: var(--warning); color: #000; border-radius: 99px; font-size: .62rem; padding: 3px 8px; font-weight: 800; }
.sb-tag.wait { background: color-mix(in srgb, var(--yellow) 18%, transparent); color: var(--yellow); }
.sb-tag.bad { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }

.sb-signout { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; border: 0; border-radius: 12px; background: #1a3347; color: var(--muted); font-size: .85rem; font-weight: 700; cursor: pointer; font-family: var(--font-sans); transition: background .15s, color .15s, border-color .15s; }
.sidebar > * { flex-shrink: 0; }
#bnChatBadge:not([hidden]) + .sb-chev { display: none; } /* unread pill takes the chevron's place, like Affiliate */ /* the drawer scrolls; without this, flex squeezed Sign Out to 23px */
.sb-signout:hover { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.sb-signout i { font-size: 1rem; }

/* Desktop persistent rail is narrow (228px) and has no close affordance */
@media (min-width: 769px) {
  .sb-close { display: none; }
}

/* ── Main content ───────────────────────────────────────────── */
.main-wrap {
  margin-left: var(--sidebar-w);
  min-height: calc(100vh - var(--nav-h));   /* fallback */
  min-height: calc(100dvh - var(--nav-h));  /* no address-bar jump on mobile */
  padding: 26px;
  animation: fadeIn .25s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Bottom mobile nav ──────────────────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--bottom-nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: color-mix(in srgb, var(--sidebar) 97%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  z-index: 150; display: none; align-items: stretch;
  transition: transform .28s cubic-bezier(.4,0,.2,1); will-change: transform;
}
.bn-item {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 7px 2px 9px;
  color: var(--muted-2); font-weight: 600; font-family: var(--font-sans);
  cursor: pointer; transition: color .15s; text-decoration: none; min-height: 44px;
  background: none; border: 0;
}
.bn-ico { position: relative; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.bn-ico svg { width: 22px; height: 22px; display: block; transition: transform .16s ease; position: relative; z-index: 1; }
.bn-ico i { font-size: 20px; line-height: 1; transition: transform .16s ease; position: relative; z-index: 1; }
.bn-lbl { font-size: .62rem; letter-spacing: .015em; line-height: 1; }
.bn-item:active .bn-ico svg, .bn-item:active .bn-ico i { transform: scale(.86); }
.bn-item.active { color: var(--primary); }
/* active: soft rounded pill fades in behind the icon (slides between tabs on nav).
   Vertical inset (4px) < the icon→label gap (7px) so the pill never touches the text. */
.bn-item .bn-ico::before {
  content: ''; position: absolute; inset: -4px -13px; border-radius: 99px;
  background: transparent; transition: background .2s ease; z-index: 0;
}
.bn-item.active .bn-ico::before {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
}
/* auto-hide: slides out of view on scroll-down, back on scroll-up (JS toggles .nav-down) */
.bottom-nav.nav-down { transform: translateY(calc(100% + 2px)); }
/* unread / notification badge on a tab icon */
.bn-badge {
  position: absolute; top: -4px; right: -8px; min-width: 9px; height: 15px;
  padding: 0 4px; border-radius: 99px; background: var(--red); color: #fff;
  font-size: .58rem; font-weight: 800; line-height: 15px; text-align: center;
  border: 2px solid var(--sidebar); box-sizing: content-box; z-index: 2;
}
.bn-badge[hidden] { display: none; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card-sm { padding: 14px 16px; }
.card-title {
  font-size: .75rem; font-weight: 500;
  color: var(--muted); margin-bottom: 8px;
  font-family: var(--font-sans); letter-spacing: 0;
}
.card-value {
  font-family: var(--font-sans);
  font-size: 1.55rem; font-weight: 600;
  letter-spacing: -.015em; color: var(--foreground);
}
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px; margin-bottom: 26px;
}

/* ── Shared page kit: notices, section headers (funds/account pages) ── */
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); font-size: .83rem; line-height: 1.45; border: 1px solid var(--border); background: var(--card-2); color: var(--muted); }
.notice i { flex-shrink: 0; margin-top: 1px; font-size: .95rem; }
.notice a { font-weight: 700; text-decoration: underline; }
.notice-teal   { background: color-mix(in srgb, var(--primary) 9%, transparent);  border-color: color-mix(in srgb, var(--primary) 28%, transparent); color: var(--foreground); }
.notice-teal i, .notice-teal a { color: var(--primary); }
.notice-warn   { background: color-mix(in srgb, var(--warning) 10%, transparent); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: #f0c879; }
.notice-warn i, .notice-warn a { color: var(--warning); }
.notice-danger { background: color-mix(in srgb, var(--red) 9%, transparent);      border-color: color-mix(in srgb, var(--red) 28%, transparent);     color: #f0a8a8; }
.notice-danger i, .notice-danger a { color: var(--red); }
.notice-info   { background: color-mix(in srgb, var(--blue) 10%, transparent);    border-color: color-mix(in srgb, var(--blue) 28%, transparent);    color: #9cc2f5; }
.notice-info i { color: var(--blue); }

/* Consistent section-card header (sans — replaces ad-hoc serif headers) */
.section-hd { padding: 14px 16px; border-bottom: 1px solid var(--border); font-family: var(--font-sans); font-weight: 700; font-size: .95rem; letter-spacing: -.01em; color: var(--foreground); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 500; font-family: var(--font-sans);
  cursor: pointer; border: none; letter-spacing: 0;
  transition: filter .15s, transform .1s, background .15s, border-color .15s;
  white-space: nowrap;
}
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: 0 2px 14px rgba(20,160,133,.22); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline { background: transparent; color: var(--foreground); border: 1px solid var(--border-2); }
.btn-outline:hover { background: var(--card); border-color: var(--border); }
.btn-green { background: var(--green); color: #071824; box-shadow: 0 2px 14px rgba(0,232,135,.25); }
.btn-green:hover { filter: brightness(1.08); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { filter: brightness(1.06); }
.btn-sm { padding: 7px 14px; font-size: .82rem; }
.btn-lg { padding: 14px 30px; font-size: .95rem; }
.btn-full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: .8rem; font-weight: 500;
  color: var(--muted); margin-bottom: 6px;
  letter-spacing: 0;
  font-family: var(--font-sans);
}
.form-control {
  width: 100%; background: var(--background);
  border: 1px solid var(--input); border-radius: var(--radius-sm);
  color: var(--foreground); padding: 11px 14px;
  font-size: .92rem; font-family: var(--font-sans);
  transition: border-color .15s, box-shadow .15s; outline: none; -webkit-appearance: none;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.form-control::placeholder { color: var(--muted-2); }
select.form-control { cursor: pointer; }

/* ── Table ──────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
thead th {
  text-align: left; padding: 11px 14px;
  font-size: .75rem; font-weight: 500;
  color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap;
  font-family: var(--font-sans); letter-spacing: 0;
}
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--card-2); }
.mono, td .mono { font-family: var(--font-mono); }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-sm);
  font-size: .72rem; font-weight: 500; letter-spacing: 0;
  font-family: var(--font-sans);
}
.badge-green  { background: color-mix(in srgb, var(--green) 14%, transparent);  color: var(--green); }
.badge-red    { background: color-mix(in srgb, var(--red) 14%, transparent);    color: var(--red); }
.badge-yellow { background: color-mix(in srgb, var(--yellow) 16%, transparent); color: var(--yellow); }
.badge-gray   { background: var(--card-2); color: var(--muted); }
.badge-blue   { background: color-mix(in srgb, var(--blue) 14%, transparent);   color: var(--blue); }

/* ── Modal ──────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  display: none; align-items: flex-end; justify-content: center; padding: 0;
}
.modal-backdrop.show { display: flex; }
.modal-box {
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 24px 20px; padding-bottom: calc(24px + var(--safe-bottom));
  width: 100%; max-width: 480px; animation: sheetUp .25s ease;
}
.modal-title { font-family: var(--font-sans); font-weight: 700; font-size: 1.15rem; margin-bottom: 18px; color: var(--foreground); letter-spacing: -.02em; }
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: .88rem; margin-bottom: 16px; border-left: 3px solid; }
.alert-success { background: color-mix(in srgb, var(--green) 9%, transparent);  border-color: var(--green); color: var(--green); }
.alert-error   { background: color-mix(in srgb, var(--red) 10%, transparent);   border-color: var(--red);   color: var(--red); }
.alert-info    { background: var(--card); border-color: var(--border-2); color: var(--muted); }

/* ── Toast ──────────────────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: calc(var(--bottom-nav-h) + 8px); right: 16px;
  display: flex; flex-direction: column; gap: 8px; z-index: 9999;
}
.toast {
  background: var(--card); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); padding: 12px 16px;
  font-size: .86rem; min-width: 220px; max-width: 320px;
  display: flex; align-items: center; gap: 10px;
  animation: toastIn .2s ease; box-shadow: var(--shadow);
  color: var(--foreground);
}
.toast.success { border-left: 3px solid var(--green); }
.toast.error   { border-left: 3px solid var(--red); }
.toast i { font-size: 1.1rem; }
.toast.success i { color: var(--green); }
.toast.error i { color: var(--red); }
@keyframes toastIn { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Inline insufficient-balance feedback (plinko-style, shared by all games) ── */
.inq-msg { min-height: 0; font-size: .8rem; font-weight: 500; text-align: center; color: var(--red); transition: opacity .2s; opacity: 0; line-height: 1.3; }
.inq-msg.show { opacity: 1; }
.inq-err { border-color: var(--red) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent) !important; }
@keyframes inqShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.inq-shake { animation: inqShake .28s ease; }

/* ── Misc helpers ───────────────────────────────────────────── */
.divider { height: 1px; background: var(--border); margin: 20px 0; }
.text-muted  { color: var(--muted); }
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-yellow { color: var(--yellow); }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
/* Remapped 2026-07-20 so mb-N and space-N mean the same thing. They were
   offset by a step (.mb-3 was 16px while --space-3 is 12px), which made
   margin and padding disagree on any page that used both. */
.mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); }
.mt-auto { margin-top: auto; }

/* ── Wallet widget ──────────────────────────────────────────── */
.wal-widget {
  position: relative; display: flex; align-items: stretch;
  height: 38px; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px;
}
.wal-pill {
  display: flex; align-items: center; gap: 7px; padding: 0 11px;
  cursor: pointer; user-select: none; transition: background .15s;
  border-radius: 9px 0 0 9px;
}
.wal-pill:hover { background: var(--card-2); }
.wal-coin { width: 18px; height: 18px; display: inline-flex; flex-shrink: 0; }
.wal-coin svg { width: 100%; height: 100%; display: block; }
.wal-amt {
  font-family: var(--font-sans); font-size: .94rem; font-weight: 600;
  color: var(--foreground); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.wal-chev { font-size: .68rem; color: var(--muted-2); transition: transform .2s; flex-shrink: 0; }
.wal-chev.open { transform: rotate(180deg); }
.wal-btn {
  width: 40px; background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; text-decoration: none;
  border-left: 1px solid rgba(0,0,0,.18); border-radius: 0 9px 9px 0;
  transition: filter .15s; flex-shrink: 0;
}
.wal-btn:hover { filter: brightness(1.1); opacity: 1; }
.wal-drop {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--card); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 6px; z-index: 400;
  min-width: 168px; box-shadow: var(--shadow); display: none;
  animation: toastIn .15s ease;
}
.wal-drop.open { display: block; }
.wal-drop-item {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  border-radius: var(--radius-sm); color: var(--foreground);
  font-size: .87rem; font-weight: 500; text-decoration: none; transition: background .12s;
}
.wal-drop-item:hover { background: var(--card-2); opacity: 1; }
.wal-drop-item i { color: var(--muted); font-size: .95rem; }

/* ── Spinner ────────────────────────────────────────────────── */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid color-mix(in srgb, var(--foreground) 20%, transparent);
  border-top-color: var(--foreground);
  border-radius: 50%; animation: spin .65s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Page header ────────────────────────────────────────────── */
.page-header { margin-bottom: 26px; }
.page-header h1 { font-family: var(--font-sans); font-size: clamp(1.15rem, 1rem + 1vw, 1.45rem); font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
.page-header p { font-size: .9rem; color: var(--muted); }

/* ── Grids ──────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ── Desktop/mobile table toggle ────────────────────────────── */
.mobile-cards { display: none; }
.desktop-table { display: block; }
.m-card { background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 10px; }
.m-card-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: .84rem; }
.m-card-label { color: var(--muted); font-weight: 600; }
.m-card-value { font-weight: 700; text-align: right; font-family: var(--font-mono); }
.m-card-actions { margin-top: 10px; display: flex; gap: 8px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* iOS Safari zooms the viewport when focusing inputs < 16px — prevent it */
  .form-control, select.form-control, input, textarea { font-size: 16px; }
  /* Prevent horizontal scroll on body */
  body { overflow-x: clip; max-width: 100vw; }
  .sidebar-brand-header { display: flex !important; }
  .sidebar {
    transform: translateX(-100%); top: 0; bottom: 0;
    width: min(85vw, 320px);
    padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    padding-left: calc(env(safe-area-inset-left, 0px) + 12px);
    padding-right: 12px;
    z-index: 999; transition: transform .28s cubic-bezier(.4,0,.2,1); will-change: transform;
    border-right: none;
    box-shadow: none;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 40px rgba(0,0,0,.6); }
  .hamburger { display: flex; }
  .navbar-nav { display: none; }
  .navbar { padding: 0 14px; }
  .main-wrap { margin-left: 0 !important; padding: 14px 14px calc(var(--bottom-nav-h) + var(--safe-bottom) + 14px) !important; }
  .bottom-nav { display: flex; }
  #toast-container { bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 10px); }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .mobile-cards { display: block; }
  .desktop-table { display: none; }
}
/* ── Wide-screen content cap ───────────────────────────────────────────
   The desktop shell (persistent sidebar, no bottom nav) is the BASE layout
   here - mobile is the max-width:768px override. What it never had was an
   upper bound, so on a 1920 monitor every card and button stretched the full
   width (a 1180px "Bet" button on /plinko). Cap the content column and centre
   it in the space beside the sidebar; below 1400px nothing changes. ── */
:root { --content-max: 1320px; }

@media (min-width: 1400px) {
  .main-wrap {
    max-width: var(--content-max);
    margin-left: calc(var(--sidebar-w) + max(0px, (100vw - var(--sidebar-w) - var(--content-max)) / 2));
    margin-right: auto;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-w: 200px; }
  .main-wrap { padding: 18px; }
  /* the 200px rail has no room for a word tag beside "Verification": show it as a dot */
  .sb-tag { font-size: 0; width: 9px; height: 9px; padding: 0; flex: none; }
}
@media (max-width: 380px) { .stat-grid { grid-template-columns: 1fr; } }

/* ── Mobile performance: blur on sticky elements is a known scroll-jank
   source on phones. Drop to a solid translucent bg under 768px. ── */
@media (max-width: 768px) {
  .navbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--background); }
  .bottom-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--background); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* keyboard focus visibility */
.btn:focus-visible, .nav-link:focus-visible, .sidebar-link:focus-visible,
.form-control:focus-visible, .theme-toggle:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

/* ── Portrait-only lock ─────────────────────────────────────────
   The site is designed for vertical (portrait) use only. When a phone
   is rotated to landscape, cover the screen and ask the user to rotate
   back. Targets phone-sized landscape viewports (short height) so it
   never triggers on desktop/tablet landscape. ── */
#rotate-lock {
  display: none;
  position: fixed; inset: 0; z-index: 100000;
  background: var(--background); color: var(--foreground);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center; padding: 24px;
}
#rotate-lock .rl-icon {
  font-size: 3.4rem; color: var(--primary);
  animation: rlRotate 2s ease-in-out infinite;
}
#rotate-lock h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
#rotate-lock p { font-size: .92rem; color: var(--muted); max-width: 320px; line-height: 1.5; }
@keyframes rlRotate {
  0%, 40% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}
@media screen and (orientation: landscape) and (max-height: 500px) {
  #rotate-lock { display: flex; }
  /* prevent the locked content behind from scrolling */
  body { overflow: hidden; }
}


/* ═══════════════════════════════════════════════════════════════
   Shared component layer
   Added 2026-07-20. Everything below exists so pages stop inventing
   their own version of the same thing. Before this, 93 views carried
   1,023 inline style attributes, 36 per-page <style> blocks, ~100
   distinct font sizes and 199 distinct padding values between them.
   Reach for a class here before writing a new rule.
   ═══════════════════════════════════════════════════════════════ */

/* ── Labels ─────────────────────────────────────────────────────
   One label style, used everywhere. 91 separate uppercase rules were
   scattered across the views, which is why one card could read
   "PORTFOLIO VALUE" while the card beside it read "Total Deposited". */
.label {
  display: block;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
/* Sentence-case label, for when uppercase would shout (longer strings). */
.label-plain {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Numeric display ────────────────────────────────────────────
   Money always renders tabular so digits line up between rows. */
.num      { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.num-lg   { font-size: var(--text-3xl); font-weight: var(--fw-semi); line-height: 1.1; }
.num-md   { font-size: var(--text-xl);  font-weight: var(--fw-semi); line-height: 1.2; }
.num-sm   { font-size: var(--text-base);font-weight: var(--fw-semi); }
/* Currency mark: smaller and lifted, so "$5,250.00" sits on one baseline
   instead of the symbol hanging below the digits. */
.cur { font-size: .62em; font-weight: var(--fw-semi); margin-right: .12em; vertical-align: .28em; color: var(--muted-2); }

/* ── Layout primitives ──────────────────────────────────────────
   A vertical stack and a horizontal cluster cover most of what the
   per-page style blocks were hand-rolling with margins. */
.stack   { display: flex; flex-direction: column; }
.stack-1 { gap: var(--space-1); } .stack-2 { gap: var(--space-2); }
.stack-3 { gap: var(--space-3); } .stack-4 { gap: var(--space-4); }
.stack-5 { gap: var(--space-5); } .stack-6 { gap: var(--space-6); }

.cluster { display: flex; align-items: center; flex-wrap: wrap; }
.cluster-1 { gap: var(--space-1); } .cluster-2 { gap: var(--space-2); }
.cluster-3 { gap: var(--space-3); } .cluster-4 { gap: var(--space-4); }
.cluster-between { justify-content: space-between; }
.cluster-nowrap  { flex-wrap: nowrap; }
.grow { flex: 1; min-width: 0; }   /* min-width:0 so long text truncates rather than pushing the row wide */

/* ── Key/value row ──────────────────────────────────────────────
   The single most repeated pattern in the views: a muted label on the
   left, a value on the right. */
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; }
.kv + .kv { border-top: 1px solid var(--border); }
.kv-label { font-size: var(--text-md); color: var(--muted); }
.kv-value { font-size: var(--text-md); font-weight: var(--fw-semi); color: var(--foreground); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Empty state ────────────────────────────────────────────────
   Every list needs one. Pages were each writing their own. */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); color: var(--muted-2); }
.empty i { font-size: var(--icon-xl); opacity: .5; }
.empty-title { font-size: var(--text-base); font-weight: var(--fw-semi); color: var(--muted); }
.empty-hint  { font-size: var(--text-md); color: var(--muted-2); max-width: 30ch; line-height: 1.5; }

/* ── Icon chip ──────────────────────────────────────────────────
   The rounded square behind an icon, used on stat cards and menu rows. */
.chip { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--card-2); border: 1px solid var(--border); flex-shrink: 0; }
.chip i { font-size: var(--icon-sm); color: var(--muted); }
.chip-teal   { background: color-mix(in srgb, var(--primary) 14%, var(--card)); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.chip-teal i { color: var(--primary); }
.chip-green  { background: color-mix(in srgb, var(--green) 14%, var(--card));   border-color: color-mix(in srgb, var(--green) 38%, var(--border)); }
.chip-green i{ color: var(--green); }
.chip-red    { background: color-mix(in srgb, var(--red) 14%, var(--card));     border-color: color-mix(in srgb, var(--red) 38%, var(--border)); }
.chip-red i  { color: var(--red); }
.chip-blue   { background: color-mix(in srgb, var(--blue) 14%, var(--card));    border-color: color-mix(in srgb, var(--blue) 38%, var(--border)); }
.chip-blue i { color: var(--blue); }

/* ── Spacing utilities (mapped to the scale) ───────────────────── */
.mt-1{margin-top:var(--space-1)}    .mt-2{margin-top:var(--space-2)}
.mt-3{margin-top:var(--space-3)}    .mt-4{margin-top:var(--space-4)}
.mt-5{margin-top:var(--space-5)}    .mt-6{margin-top:var(--space-6)}
.mb-5{margin-bottom:var(--space-5)} .mb-6{margin-bottom:var(--space-6)}
.p-3{padding:var(--space-3)}        .p-4{padding:var(--space-4)}
.p-5{padding:var(--space-5)}        .p-6{padding:var(--space-6)}

/* ── Type utilities (mapped to the scale) ─────────────────────── */
.t-2xs{font-size:var(--text-2xs)}  .t-xs{font-size:var(--text-xs)}
.t-sm{font-size:var(--text-sm)}    .t-md{font-size:var(--text-md)}
.t-base{font-size:var(--text-base)}.t-lg{font-size:var(--text-lg)}
.t-xl{font-size:var(--text-xl)}    .t-2xl{font-size:var(--text-2xl)}
.fw-medium{font-weight:var(--fw-medium)} .fw-semi{font-weight:var(--fw-semi)}
.fw-bold{font-weight:var(--fw-bold)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}