/* ==========================================================================
   StakeClaimer — shared theme (spliced from the Lovable design system)
   Dark casino-terminal theme: navy surfaces, emerald primary, Space Grotesk.
   Loaded AFTER each page's inline <style>, so equal-specificity rules win.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* New design system */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --background: oklch(0.172 0.035 245.8);
  --foreground: oklch(0.975 0.005 260);
  --surface: oklch(0.239 0.035 241.6);
  --surface-2: oklch(0.283 0.032 238.6);
  --card: oklch(0.283 0.032 238.6);
  --primary: oklch(0.81 0.214 151.8);
  --primary-foreground: oklch(0.18 0.04 160);
  --muted-foreground: oklch(0.685 0.043 258.8);
  --subtle: oklch(0.465 0.032 250.2);
  --border: oklch(0.349 0.039 249);
  --warning: oklch(0.77 0.174 64.1);
  --destructive: oklch(0.643 0.215 28.8);
  --accent: oklch(0.789 0.033 267.9);

  --gradient-hero: radial-gradient(
    ellipse 80% 55% at 50% -10%,
    color-mix(in oklab, var(--primary) 18%, transparent),
    transparent 70%
  );
  --gradient-primary: linear-gradient(
    135deg,
    var(--primary),
    color-mix(in oklab, var(--primary) 70%, oklch(0.85 0.16 190))
  );
  --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--primary) 30%, transparent),
    0 18px 50px -22px color-mix(in oklab, var(--primary) 65%, transparent);
  --shadow-card: 0 18px 40px -28px oklch(0 0 0 / 0.9);

  /* Legacy aliases — existing pages reference these */
  --bg-deep: var(--background);
  --bg-card: var(--surface);
  --bg-input: var(--surface-2);
  --bg-nav: color-mix(in oklab, var(--background) 82%, transparent);
  --border-hover: color-mix(in oklab, var(--primary) 45%, var(--border));
  --text: var(--foreground);
  --text-muted: var(--muted-foreground);
  --text-dim: var(--subtle);
  --green: var(--primary);
  --green-glow: color-mix(in oklab, var(--primary) 45%, transparent);
  --green-bg: color-mix(in oklab, var(--primary) 12%, transparent);
  --yellow: var(--warning);
  --yellow-bg: color-mix(in oklab, var(--warning) 14%, transparent);
  --orange: var(--warning);
  --red: var(--destructive);
  --blue: oklch(0.72 0.11 210);
  --cyan: oklch(0.8 0.07 200);
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* ---------- Base ---------- */
html,
body {
  background-color: var(--background) !important;
  color: var(--muted-foreground);
}

body {
  font-family: var(--font) !important;
  background-image: var(--gradient-hero) !important;
  background-repeat: no-repeat !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.section-title, .hero h1, .problem h2, .final-cta h2 {
  font-family: var(--font-display) !important;
  color: var(--foreground);
  letter-spacing: -0.02em;
}

a { color: var(--primary); }
code, pre, .mono { font-family: var(--font-mono); }

::selection { background: color-mix(in oklab, var(--primary) 35%, transparent); color: var(--foreground); }

* { scrollbar-color: var(--border) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--subtle); }

/* ---------- Nav ---------- */
.nav {
  background: var(--bg-nav) !important;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
}
.nav-pill {
  background: color-mix(in oklab, var(--surface) 70%, transparent) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted-foreground) !important;
}
.nav-pill .dot { background: var(--primary) !important; box-shadow: 0 0 0 0 var(--green-glow) !important; }
.nav-pill .speed { color: var(--primary) !important; }
.nav-dropdown > button { color: var(--muted-foreground) !important; font-family: var(--font) !important; font-weight: 600 !important; }
.nav-dropdown > button:hover { color: var(--primary) !important; background: color-mix(in oklab, var(--primary) 10%, transparent) !important; }
.nav-dropdown-menu {
  background: color-mix(in oklab, var(--surface) 96%, transparent) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 24px 60px -24px oklch(0 0 0 / 0.9) !important;
  backdrop-filter: blur(16px);
}
.nav-dropdown-menu a { color: var(--muted-foreground) !important; }
.nav-dropdown-menu a:hover { background: color-mix(in oklab, var(--primary) 12%, transparent) !important; color: var(--primary) !important; }
.nav-forum-link { color: var(--primary) !important; font-family: var(--font) !important; font-weight: 600 !important; }
.nav-forum-link:hover { color: var(--foreground) !important; background: color-mix(in oklab, var(--primary) 12%, transparent) !important; }
.nav-hamburger { color: var(--muted-foreground) !important; }

/* ---------- Buttons ---------- */
.btn,
[class^="btn-"],
[class*=" btn-"] {
  font-family: var(--font) !important;
  border-radius: var(--radius-lg) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease, color .15s ease, background-color .15s ease;
}
.btn:hover,
[class^="btn-"]:hover,
[class*=" btn-"]:hover { transform: translateY(-1px); }

.btn-primary, .btn-green {
  background: var(--gradient-primary) !important;
  color: var(--primary-foreground) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-glow) !important;
}
.btn-primary:hover, .btn-green:hover { filter: brightness(1.06); }

.btn-secondary {
  background: color-mix(in oklab, var(--surface) 70%, transparent) !important;
  color: var(--accent) !important;
  border: 1px solid var(--border) !important;
}
.btn-secondary:hover { border-color: var(--primary) !important; color: var(--primary) !important; }

.btn-ghost, .btn-outline {
  background: transparent !important;
  color: var(--muted-foreground) !important;
  border: 1px solid var(--border) !important;
}
.btn-ghost:hover, .btn-outline:hover { border-color: var(--primary) !important; color: var(--primary) !important; }

.btn-telegram {
  background: color-mix(in oklab, var(--surface) 80%, transparent) !important;
  color: var(--blue) !important;
  border: 1px solid color-mix(in oklab, var(--blue) 30%, transparent) !important;
}
.btn-telegram:hover { border-color: var(--blue) !important; color: var(--blue) !important; }

.btn-orange, .btn-danger {
  background: color-mix(in oklab, var(--warning) 16%, transparent) !important;
  color: var(--warning) !important;
  border: 1px solid color-mix(in oklab, var(--warning) 45%, transparent) !important;
}
.btn-danger { background: color-mix(in oklab, var(--destructive) 16%, transparent) !important; color: var(--destructive) !important; border-color: color-mix(in oklab, var(--destructive) 45%, transparent) !important; }

.btn-sm { padding: 8px 14px !important; font-size: 12px !important; }
.btn-big { padding: 14px 26px !important; font-size: 15px !important; }
.btn-xl { padding: 15px 30px !important; font-size: 15px !important; font-weight: 700 !important; }

/* ---------- Cards & surfaces ---------- */
.card, .cards, .ccard, .panel, .tile, .tiles,
.blog-card, .feature-card, .price-card, .stat-card, .trust-card, .get-card,
.review-card, .bal-card, .status-card, .note-card, .post, .post-list-item,
.thread-head, .term, .modal, .alert, .warn, .safety-banner, .urgency-box,
.cta-box, .onboard, .how-step, .how-box, .faq-item, .sat-history, .earn-promo,
.trust-banner, .final-cta, .problem, .pricing-info, .vid-preview, .vid-form,
.perm-table, .term-body {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card);
}
.feature-card:hover, .price-card:hover, .trust-card:hover, .blog-card:hover {
  border-color: color-mix(in oklab, var(--primary) 40%, var(--border)) !important;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 15%, transparent), var(--shadow-card);
}
.price-card.featured { border-color: var(--primary) !important; }

/* tinted icon chips */
.feat-icon, .trust-icon, .trust-card-icon, .get-ic, .step-num {
  border-radius: 10px !important;
}
.feat-icon.green, .trust-icon.green, .trust-card-icon.green { background: color-mix(in oklab, var(--primary) 12%, transparent) !important; color: var(--primary) !important; }
.feat-icon.blue, .trust-icon.blue, .trust-card-icon.blue { background: color-mix(in oklab, var(--blue) 12%, transparent) !important; color: var(--blue) !important; }
.feat-icon.amber, .trust-icon.amber, .trust-card-icon.amber { background: color-mix(in oklab, var(--warning) 12%, transparent) !important; color: var(--warning) !important; }
.feat-icon.cyan, .trust-card-icon.cyan { background: color-mix(in oklab, var(--cyan) 12%, transparent) !important; color: var(--cyan) !important; }
.feat-icon.purple { background: color-mix(in oklab, oklch(0.66 0.18 300) 14%, transparent) !important; color: oklch(0.72 0.17 300) !important; }
.feat-icon.rose { background: color-mix(in oklab, var(--destructive) 14%, transparent) !important; color: var(--destructive) !important; }

/* ---------- Section headers / eyebrows ---------- */
.section-tag, .label-eyebrow, .hero-brand, .hero-eyebrow {
  color: var(--subtle) !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.section-title { color: var(--foreground) !important; }
.section-sub, .sub, .sub2 { color: var(--muted-foreground) !important; }

/* ---------- Forms ---------- */
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  background-color: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--foreground) !important;
  font-family: var(--font) !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent) !important;
}
label, .label, .field-lbl, .rate-label { color: var(--muted-foreground) !important; }

/* ---------- Tables ---------- */
table { border-color: var(--border) !important; }
th { color: var(--foreground); }
td, th { border-color: var(--border) !important; }

/* ---------- Badges / pills / tags ---------- */
.badge, .pill, .tag, .channel-tag, .p-chip, .tick-code, .ref-code {
  border-radius: 999px !important;
}
.badge-active, .ok, .ok-c { color: var(--primary) !important; }
.badge-banned, .err { color: var(--destructive) !important; }
.badge-expired, .warn { color: var(--warning) !important; }

/* ---------- Footer ---------- */
.footer, .pv-footer, .p-bottombar {
  border-color: color-mix(in oklab, var(--border) 70%, transparent) !important;
}
.footer a { color: var(--muted-foreground) !important; }
.footer a:hover { color: var(--primary) !important; }
.footer p { color: var(--subtle) !important; }

/* ---------- Misc text ---------- */
.muted, .ptxt, .meta, .desc { color: var(--muted-foreground) !important; }
.money, .val, .stat-value { color: var(--primary) !important; }
.highlight, .hl { background: color-mix(in oklab, var(--primary) 14%, transparent) !important; color: var(--foreground) !important; }

/* legacy literal-hex text/back colors used on the simple pages */
.back { color: var(--subtle) !important; }
.back:hover { color: var(--primary) !important; }