/* ============================================================
   BARG CLUB — CORE DESIGN TOKENS & HIGH-PERF RESET (2026)
   ============================================================ */
:root {
  --bg-0: #020403;
  --bg-1: #050807;
  --bg-2: #07100c;

  --surface-1: rgba(11, 17, 15, 0.76);
  --surface-2: rgba(16, 24, 20, 0.88);
  --surface-3: rgba(22, 32, 27, 0.94);
  --surface-hi: rgba(28, 42, 35, 0.98);

  --border:    rgba(255, 255, 255, 0.065);
  --border-2:  rgba(255, 255, 255, 0.11);
  --border-3:  rgba(255, 255, 255, 0.18);
  --hairline:  rgba(255, 255, 255, 0.04);

  --emerald:      #18f6a2;
  --emerald-2:    #0fd68a;
  --emerald-soft: rgba(24, 246, 162, 0.10);
  --emerald-line: rgba(24, 246, 162, 0.35);
  --emerald-glow: rgba(24, 246, 162, 0.45);

  --cyan:      #23d9ff;
  --cyan-soft: rgba(35, 217, 255, 0.10);
  --cyan-line: rgba(35, 217, 255, 0.32);
  --cyan-glow: rgba(35, 217, 255, 0.40);

  --gold:      #d6b36a;
  --gold-soft: rgba(214, 179, 106, 0.10);
  --gold-line: rgba(214, 179, 106, 0.34);
  --gold-glow: rgba(214, 179, 106, 0.38);

  --violet:      #9b7cff;
  --violet-soft: rgba(155, 124, 255, 0.10);
  --violet-line: rgba(155, 124, 255, 0.32);
  --violet-glow: rgba(155, 124, 255, 0.42);

  --pink:      #ff4fd8;
  --pink-soft: rgba(255, 79, 216, 0.10);
  --pink-line: rgba(255, 79, 216, 0.30);
  --pink-glow: rgba(255, 79, 216, 0.42);

  --danger:      #ff4d6d;
  --danger-soft: rgba(255, 77, 109, 0.10);
  --danger-line: rgba(255, 77, 109, 0.35);
  --danger-glow: rgba(255, 77, 109, 0.38);

  --text:   #edf5f1;
  --text-2: #b5c0bc;
  --muted:  #798580;
  --dim:    #49534f;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 20px; --r-5: 26px; --r-6: 32px;

  /* Spring Physics Timings */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --ease-out: cubic-bezier(0.2, 0.9, 0.2, 1);
  --dur-1: 140ms; --dur-2: 240ms; --dur-3: 380ms; --dur-4: 520ms;

  --header-h: 64px;
  --bottom-nav-h: 96px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --content-max: 1380px;

  --z-header: 60;
  --z-bnav: 80;
  --z-more-sheet: 90;
  --z-floating: 75;
  --z-backdrop: 1199;
  --z-sheet: 1200;
  --z-drawer-shade: 1090;
  --z-drawer: 1100;
  --z-modal: 1000;
  --z-toast: 12000;
  --z-preloader: 9999;
  --z-banner: 8000;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg-0);
  overscroll-behavior-y: none;
}
body {
  font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;
  background: var(--bg-0);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.55;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 16px);
  position: relative;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -3;
  background:
    radial-gradient(900px 620px at 8% -12%, rgba(24,246,162,0.08), transparent 62%),
    radial-gradient(760px 520px at 100% -6%, rgba(35,217,255,0.06), transparent 60%),
    radial-gradient(640px 520px at 50% 115%, rgba(214,179,106,0.05), transparent 65%),
    radial-gradient(500px 420px at 94% 85%, rgba(155,124,255,0.045), transparent 62%);
}
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -2;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at 50% 35%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000 20%, transparent 80%);
}
body.lock-scroll { overflow: hidden; }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: 8px;
}

.mono {
  font-family: 'Teko', 'Vazirmatn', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}
.ltr { direction: ltr; unicode-bidi: isolate; }
.hidden { display: none !important; }