/* ════════════════════════════════════════════════════════════
   SCOUT AXIS — restyle.css  (complete redesign, Apr 2026)
   Black + green premium dark SaaS system.
   ════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ──────────────────────────────────────────────────────────── */
:root {
  --sa-accent:        #00a45b;
  --sa-accent-soft:   rgba(0, 164, 91, 0.16);
  --sa-accent-glow:   rgba(0, 164, 91, 0.24);

  --sa-bg-base:       #050505;
  --sa-bg-surface:    #0d0d0d;
  --sa-bg-elevated:   #141414;
  --sa-bg-soft:       rgba(255, 255, 255, 0.03);
  --sa-bg-overlay:    rgba(5, 5, 5, 0.7);

  --sa-text-primary:   #f5f5f5;
  --sa-text-secondary: #a3a3a3;
  --sa-text-muted:     #525252;

  --sa-border-subtle:  rgba(255, 255, 255, 0.06);
  --sa-border-default: rgba(255, 255, 255, 0.10);
  --sa-border-strong:  rgba(255, 255, 255, 0.18);

  --sa-shadow-lg:    0 32px 100px rgba(0, 0, 0, 0.45);
  --sa-shadow-panel: 0 24px 70px  rgba(0, 0, 0, 0.40);

  --sa-radius-sm: 14px;
  --sa-radius-md: 22px;
  --sa-radius-lg: 30px;

  --sa-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");

  /* Scroll-driven gradient motion — set by restyle.js */
  --sa-gx: 0px;
  --sa-gy: 0px;
  --sa-gz: 0px;
  --sa-scroll-pct: 0;
}

html {
  background: var(--sa-bg-base);
}

/* Performance-safe rendering mode for Brave/privacy-hardened environments */
html.sa-performance-lite {
  scroll-behavior: auto !important;
}

html.sa-performance-lite,
html.sa-performance-lite::before,
html.sa-performance-lite body::before,
html.sa-performance-lite body::after {
  animation: none !important;
}

html.sa-performance-lite::before,
html.sa-performance-lite body::before,
html.sa-performance-lite body::after {
  filter: none !important;
}

html.sa-performance-lite * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.sa-performance-lite .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ════════════════════════════════════════════════════════════
   1. AMBIENT GRADIENT BACKGROUND
   ════════════════════════════════════════════════════════════

   Three layers:
   A) html::before — fixed, two large green ellipse orbs that
      shift with scroll via CSS vars from JS. Blurred 80px so
      they look like ambient light, not shapes.
   B) body.sa-page::before — subtle grid texture overlay.
   C) body.sa-page::after — vignette edges for depth.

   The JS in restyle.js:
   - Sets --sa-gx/gy/gz on scroll (capped at ±48/32/18px)
   - Applies @keyframes for slow autonomous drift on both orbs
   ──────────────────────────────────────────────────────────── */

/* Orb layer — rendered behind everything via z-index: -10 */
html.sa-ambient::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;

  /* Orb 1 — upper-left green anchor */
  /* Orb 2 — lower-right secondary green drift */
  /* Orb 3 — center-right faint warmth for depth */
  background:
    radial-gradient(
      ellipse 70% 60% at
      calc(14% + var(--sa-gx)) calc(-8% + var(--sa-gy)),
      rgba(0, 196, 106, 0.13), transparent 65%
    ),
    radial-gradient(
      ellipse 50% 45% at
      calc(90% - var(--sa-gx)) calc(72% + var(--sa-gz)),
      rgba(0, 164, 91, 0.08), transparent 68%
    ),
    radial-gradient(
      ellipse 38% 35% at
      calc(55% + var(--sa-gz)) calc(35% - var(--sa-gy)),
      rgba(0, 196, 106, 0.04), transparent 72%
    );

  filter: blur(72px);
  will-change: background;

  /* Moderate gradient motion — 14s cycle, noticeable but not distracting */
  animation: sa-ambient-breathe 14s ease-in-out infinite;
}

@keyframes sa-ambient-breathe {
  0%   { opacity: 0.75; filter: blur(72px); background-position: 0% 50%; }
  33%  { opacity: 1.0;  filter: blur(60px); background-position: 60% 30%; }
  66%  { opacity: 0.9;  filter: blur(68px); background-position: 100% 70%; }
  100% { opacity: 0.75; filter: blur(72px); background-position: 0% 50%; }
}

/* Grid texture & noise overlay */
body.sa-page {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 164, 91, 0.10), transparent 28%),
    var(--sa-bg-base) !important;
  color: var(--sa-text-primary) !important;
  font-family: "Montserrat", sans-serif !important;
  letter-spacing: -0.01em;
}

body.sa-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.013) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.013) 1px, transparent 1px),
    var(--sa-noise);
  background-size: 88px 88px, 88px 88px, 220px 220px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.85), transparent 90%);
  opacity: 0.6;
}

/* Bottom edge vignette for depth */
body.sa-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 40% at 50% 105%, rgba(0,0,0,0.9), transparent),
    linear-gradient(180deg, rgba(5,5,5,0.0), rgba(5,5,5,0.55));
}

/* ────────────────────────────────────────────────────────────
   GLOBAL TYPOGRAPHY
   ──────────────────────────────────────────────────────────── */
body.sa-page,
body.sa-page button,
body.sa-page input,
body.sa-page select,
body.sa-page textarea {
  font-family: "Montserrat", sans-serif !important;
}

body.sa-page .page-topbar-sub,
body.sa-page .sidebar-section-label,
body.sa-page .user-role,
body.sa-page .nav-badge,
body.sa-page .axis-ai-badge,
body.sa-page .stat-tile-label-top,
body.sa-page .stat-tile-label,
body.sa-page .hn-lbl,
body.sa-page .plan-tier,
body.sa-page .mockup-url,
body.sa-page .m-row.hdr,
body.sa-page .m-sl,
body.sa-page .cb,
body.sa-page .foot-copy,
body.sa-page .kicker,
body.sa-page .save-chip,
body.sa-page .hero-pill,
body.sa-page .pp-region,
body.sa-page .pp-sl,
body.sa-page .login-sub,
body.sa-page .login-meta,
body.sa-page .pricing-note,
body.sa-page .upgrade-plan-price span,
body.sa-page table thead th,
body.sa-page .region-tag,
body.sa-page .tcard-role {
  font-family: "Montserrat", sans-serif !important;
}

body.sa-page ::selection {
  background: rgba(0, 164, 91, 0.3);
  color: var(--sa-text-primary);
}

body.sa-page a {
  color: inherit;
}

/* ────────────────────────────────────────────────────────────
   INPUTS
   ──────────────────────────────────────────────────────────── */
body.sa-page input,
body.sa-page select,
body.sa-page textarea,
body.sa-page .search-box,
body.sa-page .filter-sel,
body.sa-page #stripe-card-element,
body.sa-page #axis-ai-input {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.012)) !important;
  border: 1px solid var(--sa-border-default) !important;
  border-radius: var(--sa-radius-sm) !important;
  color: var(--sa-text-primary) !important;
  box-shadow: none !important;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

body.sa-page input::placeholder,
body.sa-page textarea::placeholder {
  color: var(--sa-text-muted);
}

body.sa-page input:focus,
body.sa-page select:focus,
body.sa-page textarea:focus,
body.sa-page #axis-ai-input:focus,
body.sa-page #stripe-card-element.StripeElement--focus {
  border-color: rgba(0, 164, 91, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(0, 164, 91, 0.12) !important;
  outline: none !important;
}

/* ────────────────────────────────────────────────────────────
   CARDS / PANELS
   ──────────────────────────────────────────────────────────── */
body.sa-page .card,
body.sa-page .table-section,
body.sa-page .info-panel,
body.sa-page .login-card,
body.sa-page .plan,
body.sa-page .tcard,
body.sa-page .mockup,
body.sa-page .modal,
body.sa-page .profile-modal,
body.sa-page .archive-modal,
body.sa-page .update-popup,
body.sa-page .alias-modal,
body.sa-page .upgrade-modal,
body.sa-page .scan-modal,
body.sa-page .kb-modal,
body.sa-page .pp-card,
body.sa-page #axis-ai-panel,
body.sa-page .modal-backdrop .profile-modal {
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.014)) !important;
  border: 1px solid var(--sa-border-default) !important;
  box-shadow: var(--sa-shadow-panel) !important;
  backdrop-filter: blur(18px);
}

body.sa-page .card:hover,
body.sa-page .tcard:hover,
body.sa-page .plan:hover,
body.sa-page .info-panel:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(255,255,255,0.036), rgba(255,255,255,0.018)) !important;
}

/* ────────────────────────────────────────────────────────────
   BUTTONS
   ──────────────────────────────────────────────────────────── */
body.sa-page .btn,
body.sa-page .btn-login,
body.sa-page .btn-submit,
body.sa-page .btn-plan,
body.sa-page .btn-hm,
body.sa-page .btn-ns,
body.sa-page .pp-cta,
body.sa-page .btn-go,
body.sa-page #axis-ai-send {
  border-radius: var(--sa-radius-sm) !important;
  border: 1px solid transparent !important;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease !important;
}

body.sa-page .btn,
body.sa-page .btn-hg,
body.sa-page .btn-pg,
body.sa-page .btn-ng,
body.sa-page .logout-btn,
body.sa-page .btn.ghost,
body.sa-page .follow-btn,
body.sa-page .cmp-sel-clear,
body.sa-page .upgrade-dismiss {
  background: rgba(255,255,255,0.02) !important;
  border-color: var(--sa-border-default) !important;
  color: var(--sa-text-secondary) !important;
}

body.sa-page .btn:hover,
body.sa-page .btn-login:hover,
body.sa-page .btn-submit:hover,
body.sa-page .btn-plan:hover,
body.sa-page .btn-hm:hover,
body.sa-page .btn-hg:hover,
body.sa-page .btn-ng:hover,
body.sa-page .btn-ns:hover,
body.sa-page .pp-cta:hover,
body.sa-page .btn-go:hover,
body.sa-page .logout-btn:hover,
body.sa-page #axis-ai-send:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 164, 91, 0.38) !important;
  box-shadow: 0 18px 34px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,164,91,0.16) !important;
}

body.sa-page .btn-hm,
body.sa-page .btn-ns,
body.sa-page .btn-ps,
body.sa-page .btn-submit,
body.sa-page .btn-login,
body.sa-page .pp-cta,
body.sa-page .btn-go,
body.sa-page #axis-ai-send {
  background: linear-gradient(135deg, rgba(0,164,91,0.96), rgba(0,184,103,0.92)) !important;
  color: #04150d !important;
  box-shadow: 0 18px 44px rgba(0,164,91,0.24) !important;
}

body.sa-page .btn.danger,
body.sa-page .ev-del,
body.sa-page .archive-post-delete,
body.sa-page .saved-lb-del {
  background: rgba(232, 69, 74, 0.1) !important;
  border-color: rgba(232, 69, 74, 0.26) !important;
  color: #ff8d90 !important;
}

/* ────────────────────────────────────────────────────────────
   MISC SURFACES
   ──────────────────────────────────────────────────────────── */
body.sa-page .empty,
body.sa-page .order-box,
body.sa-page .creds-box,
body.sa-page .success-view,
body.sa-page .alert-config-row,
body.sa-page .pp-tier-row,
body.sa-page .pp-stat,
body.sa-page .dc,
body.sa-page .dm,
body.sa-page .admin-stat-card,
body.sa-page .saved-lb-item,
body.sa-page .cmp-slot,
body.sa-page .cmp-slot-selected,
body.sa-page .bulk-pool-item,
body.sa-page .bulk-chip,
body.sa-page .update-banner,
body.sa-page .followed-item,
body.sa-page .notif-item {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--sa-border-subtle) !important;
  border-radius: var(--sa-radius-sm) !important;
}

body.sa-page table {
  border-collapse: collapse;
}

body.sa-page th,
body.sa-page td {
  border-bottom-color: var(--sa-border-subtle) !important;
}

/* ────────────────────────────────────────────────────────────
   SCROLLBARS
   ──────────────────────────────────────────────────────────── */
body.sa-page ::-webkit-scrollbar       { width: 10px; height: 10px; }
body.sa-page ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border: 2px solid transparent; background-clip: content-box; border-radius: 999px; }
body.sa-page ::-webkit-scrollbar-track { background: transparent; }

/* ────────────────────────────────────────────────────────────
   HERO TYPOGRAPHY
   ──────────────────────────────────────────────────────────── */
body.sa-page .hero-title {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* ────────────────────────────────────────────────────────────
   GATED OVERLAY
   ──────────────────────────────────────────────────────────── */
body.sa-page .gated {
  position: relative;
  overflow: hidden;
}

body.sa-page .gated::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5,5,5,0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
}

body.sa-page .gated > * {
  pointer-events: none;
}


/* ════════════════════════════════════════════════════════════
   LANDING PAGE
   ════════════════════════════════════════════════════════════ */

/* ── Nav ── */
body.sa-landing nav {
  height: 78px;
  padding: 0 clamp(1rem, 3vw, 2rem) !important;
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  backdrop-filter: blur(0px) !important;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

body.sa-landing.nav-scrolled nav {
  background: rgba(8,8,8,0.66) !important;
  border-bottom-color: var(--sa-border-default) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 18px 70px rgba(0,0,0,0.24);
}

body.sa-landing .nav-logo-text,
body.sa-landing .login-logo-text {
  font-family: "Montserrat", sans-serif !important;
  font-size: 1rem !important;
  letter-spacing: -0.03em !important;
}

body.sa-landing .nav-logo-text span,
body.sa-login .login-logo-text span {
  color: var(--sa-accent) !important;
}

body.sa-landing .nav-links a,
body.sa-landing .btn-ng {
  color: var(--sa-text-secondary) !important;
}

body.sa-landing .nav-links a:hover,
body.sa-landing .btn-ng:hover {
  color: var(--sa-text-primary) !important;
}

/* ── Hero ── */
body.sa-landing .hero {
  min-height: 100vh !important;
  padding: clamp(72px, 10vw, 96px) clamp(1.5rem, 4vw, 3rem) 3rem !important;
  text-align: left;
  align-items: flex-start !important;
}

body.sa-landing .hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) !important;
}

body.sa-landing .hero-glow {
  width: min(84vw, 980px) !important;
  height: min(84vw, 980px) !important;
  background: radial-gradient(circle, rgba(0,164,91,0.18), transparent 62%) !important;
}

body.sa-landing .hero-inner {
  max-width: 860px !important;
}

body.sa-landing .hero-pill {
  gap: 10px;
  padding: 0.55rem 0.95rem !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--sa-border-default) !important;
  border-radius: 999px !important;
  color: var(--sa-text-secondary) !important;
  letter-spacing: 0.14em !important;
}

body.sa-landing .hero-pill-dot {
  background: var(--sa-accent) !important;
  box-shadow: 0 0 18px rgba(0,164,91,0.65);
}

body.sa-landing .hero-h1 {
  margin-bottom: 1rem !important;
  color: var(--sa-text-primary) !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: clamp(3.4rem, 8vw, 6.8rem) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
}

body.sa-landing .hero-h1 .g  { color: var(--sa-accent) !important; }
body.sa-landing .hero-h1 .d  { color: rgba(255,255,255,0.12) !important; }

body.sa-landing .hero-sub,
body.sa-landing .ssub,
body.sa-landing .cta-sub,
body.sa-login .login-note {
  color: var(--sa-text-secondary) !important;
  font-size: clamp(1rem, 1.3vw, 1.15rem) !important;
  line-height: 1.7 !important;
}

body.sa-landing .hero-sub {
  max-width: 680px !important;
  margin: 0 0 28px !important;
}

body.sa-landing .hero-actions {
  justify-content: flex-start !important;
}

body.sa-landing .btn-hm,
body.sa-landing .btn-hg,
body.sa-landing .btn-ng,
body.sa-landing .btn-ns,
body.sa-landing .btn-plan {
  min-height: 50px;
  padding-inline: 1.2rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.015em !important;
}

/* ── Nav-right buttons (Sign In / Get Access) — compact size ── */
body.sa-landing .nav-right .btn-ng,
body.sa-landing .nav-right .btn-ns,
body.sa-landing .nav-right .btn-hm {
  min-height: unset !important;
  height: 34px !important;
  padding: 0 1rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
}

body.sa-landing .hero-nums {
  max-width: 880px !important;
  margin-top: 40px !important;
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--sa-border-default) !important;
  border-radius: 24px !important;
  box-shadow: var(--sa-shadow-panel) !important;
  backdrop-filter: blur(16px);
}

body.sa-landing .hero-num {
  padding: 16px 14px !important;
  border-right-color: var(--sa-border-subtle) !important;
}

body.sa-landing .hn-val {
  font-family: "Montserrat", sans-serif !important;
  font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
  font-weight: 600 !important;
  color: var(--sa-accent) !important;
  letter-spacing: -0.03em;
}

body.sa-landing .hn-lbl {
  margin-top: 5px !important;
  color: var(--sa-text-muted) !important;
  letter-spacing: 0.14em !important;
  font-size: 0.66rem !important;
}

/* ── Section padding ── */
body.sa-landing .preview-wrap,
body.sa-landing .features-wrap,
body.sa-landing .data-wrap,
body.sa-landing .testi-wrap,
body.sa-landing .pricing-wrap,
body.sa-landing .faq-wrap,
body.sa-landing .axai-wrap,
body.sa-landing .cta-band,
body.sa-landing footer {
  padding-left:  clamp(1rem, 4vw, 3rem) !important;
  padding-right: clamp(1rem, 4vw, 3rem) !important;
}

/* ── Hide "How It Works / From access to live intel" section ── */
body.sa-landing .how-wrap {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════
   3. LIVE PREVIEW MOCKUP — eliminate dead space
   ════════════════════════════════════════════════════════════
   Old issue: large empty black area at the bottom of the
   preview frame because .mockup-layout had no fixed height
   and .mockup-main had too much padding.

   Fix:
   - .preview-wrap gets a snug top-to-content height via
     aspect-ratio on the mockup container.
   - .mockup-layout fills the frame fully (no min-height gaps).
   - .mockup-main is restructured to fill available space with
     better density: stats row + table + a mini area below.
   ════════════════════════════════════════════════════════════ */
body.sa-landing .preview-wrap {
  padding-top: 0 !important;
  padding-bottom: 40px !important;
  margin-top: -0.5rem;
}

body.sa-landing .preview-hdr {
  display: none !important;
}

/* Mockup container — fixed 16/9 aspect, no overflow */
body.sa-landing .hero-visual,
body.sa-landing .mockup {
  width: 100%;
  max-width: 960px;
  /* Matches screenshot: wide, compact height */
  aspect-ratio: 16 / 8.2;
  margin: 0 auto;
  border-radius: var(--sa-radius-lg) !important;
  overflow: hidden;
}

body.sa-landing .mockup-bar,
body.sa-landing .mockup-sb,
body.sa-landing .m-stat,
body.sa-landing .m-table,
body.sa-landing .m-row,
body.sa-landing .m-row.hdr {
  background: transparent !important;
  border-color: var(--sa-border-subtle) !important;
}

body.sa-landing .mockup {
  box-shadow:
    0 32px 120px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.03),
    0 0 120px rgba(0,164,91,0.08) !important;
}

/* Layout inside the mockup — fills the full frame */
body.sa-landing .mockup-layout {
  grid-template-columns: 170px 1fr !important;
  height: calc(100% - 42px) !important;
  min-height: 0 !important;
  overflow: hidden;
}

/* Main content area — fills frame with tighter padding */
body.sa-landing .mockup-main {
  padding: 14px 18px !important;
  background:
    radial-gradient(circle at top right, rgba(0,164,91,0.08), transparent 26%),
    rgba(255,255,255,0.015) !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

/* Stats row inside mockup — takes its natural height */
body.sa-landing .m-stats {
  flex-shrink: 0;
}

/* Table inside mockup — fills remaining space */
body.sa-landing .m-table {
  flex: 1 1 auto;
  overflow: hidden;
}

/* Each mockup row — match screenshot: taller rows, bolder player names */
body.sa-landing .m-row {
  padding: 11px 18px !important;
  font-size: 13px !important;
}

body.sa-landing .m-row.hdr {
  padding: 8px 18px !important;
  font-size: 10px !important;
}

/* Rank number — accent colour, mono, prominent */
body.sa-landing .m-rk {
  font-size: 14px !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600 !important;
}

/* Player name — white, bold, large */
body.sa-landing .m-nm {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--sa-text-primary) !important;
  letter-spacing: -0.02em !important;
}

/* Power value — accent, mono */
body.sa-landing .m-pg,
body.sa-landing .m-pm {
  font-family: "Montserrat", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Events column — muted mono */
body.sa-landing .m-row > span:last-child {
  font-family: "Montserrat", sans-serif !important;
  font-size: 12px !important;
  color: var(--sa-text-muted) !important;
}

body.sa-landing .m-sv,
body.sa-landing .m-rk,
body.sa-landing .m-pg {
  color: var(--sa-accent) !important;
}

/* ────────────────────────────────────────────────────────────
   SECTION HEADINGS
   ──────────────────────────────────────────────────────────── */
body.sa-landing .sh {
  font-family: "Montserrat", sans-serif !important;
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.05em !important;
}

body.sa-landing .sh .g,
body.sa-landing .kicker {
  color: var(--sa-accent) !important;
}

body.sa-landing .sh .d {
  color: rgba(255,255,255,0.18) !important;
}

body.sa-landing .ssub {
  max-width: 580px;
}

/* ════════════════════════════════════════════════════════════
   4. FEATURES SECTION — remove repetitive card grid
   ════════════════════════════════════════════════════════════
   Problem: six equal bordered boxes in a 3×2 grid look
   like a template and feel generic.

   New structure — split layout:
   ┌────────────────────────────────────────────┐
   │  LEAD FEATURE  (large, left, ~55% width)   │
   │  with a visual accent / icon treatment     │
   ├────────────────────────────────────────────┤
   │  3 supporting features (horizontal strip)  │
   └────────────────────────────────────────────┘
   The lead feature has a green left border accent,
   larger title, and more breathing room.
   Supporting features share a single divided row —
   no individual card borders, just internal dividers.
   ════════════════════════════════════════════════════════════ */

/* Remove the old uniform bordered grid */
body.sa-landing .feat-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;  /* reset — JS layout handles columns */
  gap: 0 !important;
  border: none !important;
  background: none !important;
  border-radius: 0 !important;

  /* New: two-row asymmetric layout */
  grid-template-rows: auto auto;
}

/* First cell becomes the lead feature — full-width banner */
body.sa-landing .feat:first-child {
  grid-column: 1 / -1;
  display: flex !important;
  align-items: center !important;
  gap: 2.5rem !important;
  padding: 36px 40px !important;
  background: linear-gradient(135deg, rgba(0,164,91,0.07), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(0,164,91,0.18) !important;
  border-radius: 22px !important;
  margin-bottom: 2px;
  position: relative;
  overflow: hidden;
}

body.sa-landing .feat:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(0,196,106,0.9), rgba(0,196,106,0.2));
  border-radius: 0 3px 3px 0;
}

body.sa-landing .feat:first-child .feat-icon {
  width: 56px !important;
  height: 56px !important;
  flex-shrink: 0;
  font-size: 1.3rem !important;
}

body.sa-landing .feat:first-child .feat-title {
  font-size: 1.15rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 0.45rem;
}

body.sa-landing .feat:first-child .feat-desc {
  font-size: 0.95rem !important;
  max-width: 560px;
}

/* Remaining features — share a single horizontal strip */
body.sa-landing .feat:not(:first-child) {
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  padding: 28px 32px !important;
  border-top: 1px solid var(--sa-border-subtle) !important;
  border-right: 1px solid var(--sa-border-subtle) !important;
  position: relative;
}

body.sa-landing .feat:not(:first-child):last-child {
  border-right: none !important;
}

/* Wrap non-first features in a flex row */
body.sa-landing .feat-grid {
  grid-template-columns: 1fr !important;
}

/* We can't restructure the DOM from CSS alone, so we use
   a :not(:first-child) display:contents + parent reflow trick.
   Instead, override the grid to handle both rows properly: */
body.sa-landing .feat-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

body.sa-landing .sa-feat-row {
  display: flex !important;
  border: 1px solid var(--sa-border-subtle) !important;
  border-radius: 18px !important;
  overflow: hidden;
  margin-top: 2px;
}

body.sa-landing .feat:not(:first-child) {
  flex: 1;
}

/* Tighten step cards */
body.sa-landing .steps {
  gap: 1px;
  border-color: var(--sa-border-default) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,0.03) !important;
}

body.sa-landing .step {
  background: rgba(255,255,255,0.018) !important;
  padding: 26px 24px !important;
}

/* Fallback: if DOM doesn't have .sa-feat-row wrapper,
   keep feat-grid as a 3-column grid for non-first items */
body.sa-landing .feat-grid:not(:has(.sa-feat-row)) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  border: 1px solid var(--sa-border-default) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,0.015) !important;
}

body.sa-landing .feat-grid:not(:has(.sa-feat-row)) .feat:first-child {
  grid-column: 1 / -1;
  border-radius: 22px 22px 0 0 !important;
  border-bottom: 1px solid var(--sa-border-subtle) !important;
  margin-bottom: 0;
}

body.sa-landing .feat-grid:not(:has(.sa-feat-row)) .feat:not(:first-child) {
  padding: 26px 28px !important;
  border-right: 1px solid var(--sa-border-subtle) !important;
}

body.sa-landing .feat-grid:not(:has(.sa-feat-row)) .feat:last-child {
  border-right: none !important;
}

/* Icon shared styles */
body.sa-landing .feat-icon,
body.sa-landing .step-icon,
body.sa-landing .tcard-ava,
body.sa-landing .pp-ava {
  background: rgba(0,164,91,0.12) !important;
  border-color: rgba(0,164,91,0.26) !important;
  color: var(--sa-accent) !important;
}

body.sa-landing .feat-title,
body.sa-landing .step-title,
body.sa-landing .tcard-name,
body.sa-landing .plan-desc,
body.sa-landing .foot-links a:hover {
  color: var(--sa-text-primary) !important;
}

body.sa-landing .feat-desc,
body.sa-landing .step-desc,
body.sa-landing .dc-lbl,
body.sa-landing .dm-desc,
body.sa-landing .tcard-quote,
body.sa-landing .foot-tag,
body.sa-landing .foot-links a,
body.sa-landing .faq-body {
  color: var(--sa-text-secondary) !important;
}

/* ── Testimonials / Data / FAQ ── */
body.sa-landing .dc.hi,
body.sa-landing .dm:hover,
body.sa-landing .tcard:hover {
  border-color: rgba(0,164,91,0.26) !important;
}

body.sa-landing .testi-wrap,
body.sa-landing .how-wrap,
body.sa-landing .faq-wrap,
body.sa-landing footer {
  background: transparent !important;
  border-color: transparent !important;
}

body.sa-landing .tcard {
  padding: 22px !important;
}

/* ── Pricing ── */
body.sa-landing .plans {
  gap: 1rem !important;
}

body.sa-landing .plan {
  border-radius: 24px !important;
  padding: 2rem !important;
}

body.sa-landing .plan.featured,
body.sa-landing .plan.plan-org,
body.sa-landing .plan.enterprise-plan {
  border-color: rgba(0,164,91,0.3) !important;
  background:
    radial-gradient(circle at top right, rgba(0,164,91,0.1), transparent 35%),
    rgba(255,255,255,0.02) !important;
}

body.sa-landing .plan-badge,
body.sa-landing .plan.plan-org .plan-badge,
body.sa-landing .plan.enterprise-plan .plan-badge {
  background: var(--sa-accent) !important;
  color: #05140d !important;
}

body.sa-landing .plan-tier,
body.sa-landing .plan.plan-org .plan-tier,
body.sa-landing .plan.plan-org .plan-cur,
body.sa-landing .plan.plan-org .plan-amt,
body.sa-landing .plan.enterprise-plan .plan-tier,
body.sa-landing .plan.enterprise-plan .plan-cur,
body.sa-landing .plan.enterprise-plan .plan-amt {
  color: var(--sa-text-primary) !important;
}

body.sa-landing .plan-cur,
body.sa-landing .plan-per {
  color: var(--sa-text-secondary) !important;
}

body.sa-landing .plan-amt {
  font-family: "Montserrat", sans-serif !important;
  font-size: clamp(2.8rem, 5vw, 4.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.05em !important;
}

body.sa-landing .pf { color: var(--sa-text-secondary) !important; }

body.sa-landing .pf-y,
body.sa-landing .plan.plan-org .pf-y,
body.sa-landing .plan.enterprise-plan .pf-y {
  background: rgba(0,164,91,0.14) !important;
  border-color: rgba(0,164,91,0.28) !important;
  color: var(--sa-accent) !important;
}

body.sa-landing .pf-n {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--sa-border-subtle) !important;
  color: var(--sa-text-muted) !important;
}

/* ── FAQ ── */
body.sa-landing .faq-item       { border-bottom-color: var(--sa-border-subtle) !important; }
body.sa-landing .faq-q          { color: var(--sa-text-primary) !important; font-weight: 600 !important; padding-block: 1.35rem !important; }
body.sa-landing .faq-icon       { color: var(--sa-text-muted) !important; }

/* ── Axis AI showcase ── */
body.sa-landing .axai-chat,
body.sa-landing .axai-bubble,
body.sa-landing .axai-msg.assistant,
body.sa-landing .axai-input-mock {
  background: rgba(255,255,255,0.02) !important;
  border-color: var(--sa-border-default) !important;
}

body.sa-landing .axai-send-mock {
  background: var(--sa-accent) !important;
  color: #04150d !important;
}

/* ── CTA band ── */
body.sa-landing .cta-band {
  position: relative;
  background:
    radial-gradient(circle at center, rgba(0,164,91,0.12), transparent 42%),
    transparent !important;
}

body.sa-landing .cta-band::before {
  border-top-color: var(--sa-border-default) !important;
  border-bottom-color: var(--sa-border-default) !important;
}

body.sa-landing .foot-grid,
body.sa-landing .foot-bottom {
  max-width: 1280px;
}

/* ── Profile / Player card overlay ── */
body.sa-landing .pp-card,
body.sa-landing .modal {
  border-radius: 26px !important;
}

body.sa-landing .pp-stats           { margin-bottom: 1rem !important; }

body.sa-landing .pp-advanced,
body.sa-landing .pp-gated {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--sa-border-default);
  background: rgba(255,255,255,0.025);
}

body.sa-landing .pp-advanced-grid,
body.sa-landing .pp-gated-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

body.sa-landing .pp-advanced-label,
body.sa-landing .pp-gated-head,
body.sa-landing .pp-gated-metric span {
  color: var(--sa-text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

body.sa-landing .pp-advanced-value,
body.sa-landing .pp-gated-metric strong {
  margin-top: 0.45rem;
  color: var(--sa-text-primary);
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

body.sa-landing .pp-gated          { position: relative; }

body.sa-landing .pp-gated::before {
  content: "Upgrade for the full scouting read";
  position: absolute;
  left: 1rem; right: 1rem; bottom: 0.95rem;
  z-index: 2;
  color: var(--sa-text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

body.sa-landing .pp-gated-head     { margin-bottom: 0.85rem; }
body.sa-landing .pp-gated-metric   { display: flex; flex-direction: column; gap: 0.35rem; }

body.sa-landing .pp-lock {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.45rem;
  text-align: center; padding: 1rem; z-index: 1;
}

body.sa-landing .pp-lock-title     { color: var(--sa-text-primary); font-size: 0.95rem; font-weight: 600; }
body.sa-landing .pp-lock-copy      { color: var(--sa-text-secondary); font-size: 0.82rem; max-width: 17rem; line-height: 1.5; }

body.sa-landing .modal-head,
body.sa-landing .modal-actions-row,
body.sa-landing .pp-head           { border-color: var(--sa-border-subtle) !important; }

body.sa-landing .success-ring {
  background: rgba(0,164,91,0.14) !important;
  color: var(--sa-accent) !important;
  border: 1px solid rgba(0,164,91,0.3) !important;
}


/* ════════════════════════════════════════════════════════════
   LOGIN PAGE
   ════════════════════════════════════════════════════════════ */
body.sa-login {
  min-height: 100vh;
  padding: 1.5rem;
}

body.sa-login .bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) !important;
  background-size: 88px 88px !important;
}

body.sa-login .bg-glow {
  width: min(72vw, 720px) !important;
  height: min(72vw, 720px) !important;
  background: radial-gradient(circle, rgba(0,164,91,0.18), transparent 62%) !important;
}

body.sa-login .login-wrap {
  max-width: 460px !important;
  padding: 1.5rem !important;
}

body.sa-login .login-card {
  border-radius: 28px !important;
  padding: 28px 30px !important;
}

body.sa-login .login-title {
  margin-bottom: 0.35rem !important;
  color: var(--sa-text-primary) !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: clamp(1.8rem, 4vw, 2.3rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
}

body.sa-login .login-sub {
  margin-bottom: 20px !important;
  color: var(--sa-text-secondary) !important;
  font-size: 12px !important;
}

/* Hide clutter on login page */
body.sa-login .login-meta { display: none !important; }
body.sa-login .login-note { display: none !important; }

body.sa-login .login-footer {
  margin-top: 1.35rem !important;
  color: var(--sa-text-muted) !important;
}

body.sa-login .login-footer a:hover { color: var(--sa-accent) !important; }

body.sa-login .fg               { gap: 0.5rem !important; }
body.sa-login .fg label         { color: var(--sa-text-secondary) !important; }
body.sa-login .fg input         { padding: 0.9rem 1rem !important; font-size: 0.95rem !important; font-family: "Montserrat", sans-serif !important; }


/* ════════════════════════════════════════════════════════════
   DASHBOARD — base
   ════════════════════════════════════════════════════════════ */
body.sa-dashboard {
  background:
    radial-gradient(circle at 12% 0%, rgba(0,164,91,0.12), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(255,255,255,0.04), transparent 18%),
    var(--sa-bg-base) !important;
}

body.sa-dashboard .app-shell { background: transparent !important; }

/* ── Sidebar ── */
body.sa-dashboard .sidebar {
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  padding: 0.6rem;
  background: rgba(10,10,10,0.78) !important;
  border-right: 1px solid var(--sa-border-default) !important;
  backdrop-filter: blur(20px);
  box-shadow: 20px 0 80px rgba(0,0,0,0.25);
}

body.sa-dashboard .sidebar-logo {
  margin-bottom: 0;
  padding: 10px 12px 8px !important;
  border-bottom-color: var(--sa-border-subtle) !important;
}

body.sa-dashboard .sidebar-logo-mark {
  border-radius: 12px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}

body.sa-dashboard .sidebar-logo-name {
  font-family: "Montserrat", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.03em !important;
}

body.sa-dashboard .sidebar-logo-name .h,
body.sa-dashboard .nav-btn.active,
body.sa-dashboard .nav-btn.axis-ai-btn,
body.sa-dashboard .card-title::before,
body.sa-dashboard .page-topbar-title strong,
body.sa-dashboard .stat-tile-accent .stat-tile-val,
body.sa-dashboard .cmp-vs-center,
body.sa-dashboard .admin-stat-val,
body.sa-dashboard .modal-player-name:hover {
  color: var(--sa-accent) !important;
}

body.sa-dashboard .sidebar-logo-sub,
body.sa-dashboard .sidebar-section-label {
  color: var(--sa-text-muted) !important;
  letter-spacing: 0.12em !important;
}

/* Sidebar nav — tight */
body.sa-dashboard .sidebar-nav {
  gap: 2px !important;
  padding: 6px 6px !important;
}

body.sa-dashboard .nav-btn {
  min-height: 36px !important;
  padding: 0 10px !important;
  border: 1px solid transparent;
  border-radius: 10px !important;
  color: var(--sa-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
}

body.sa-dashboard .nav-btn:hover {
  border-color: var(--sa-border-default);
  background: rgba(255,255,255,0.03) !important;
  color: var(--sa-text-primary) !important;
}

body.sa-dashboard .nav-btn.active,
body.sa-dashboard .nav-btn.axis-ai-btn {
  border-color: rgba(0,164,91,0.24) !important;
  background: rgba(0,164,91,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

body.sa-dashboard .nav-btn.plan-locked { opacity: 0.75; }

body.sa-dashboard .nav-btn.plan-locked::after {
  content: "Locked";
  margin-left: auto;
  color: var(--sa-text-muted);
  font-size: 0.62rem;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

body.sa-dashboard .sidebar-section-label {
  padding: 5px 8px 2px !important;
  font-size: 9.5px !important;
  margin-top: 4px !important;
}

body.sa-dashboard .sidebar-footer {
  border-top-color: var(--sa-border-subtle) !important;
  padding: 8px 6px !important;
}

body.sa-dashboard .sidebar-user {
  border: 1px solid transparent;
  border-radius: 16px !important;
}

body.sa-dashboard .sidebar-user:hover {
  border-color: var(--sa-border-default);
  background: rgba(255,255,255,0.03) !important;
}

body.sa-dashboard .theme-toggle-btn { display: none !important; }

body.sa-dashboard .nav-btn.axis-ai-btn { margin-top: 4px !important; }

/* Avatars */
body.sa-dashboard .user-avatar,
body.sa-dashboard #acc-avatar,
body.sa-dashboard .cmp-sel-avatar,
body.sa-dashboard .modal-avatar {
  background: linear-gradient(135deg, rgba(0,164,91,0.9), rgba(0,184,103,0.86)) !important;
  color: #04150d !important;
  box-shadow: 0 14px 28px rgba(0,164,91,0.24);
}

/* Main area */
body.sa-dashboard .main-content {
  margin-left: var(--sidebar-width) !important;
  background: transparent !important;
}

body.sa-dashboard .page-body  { padding: 12px 1.5rem 5rem !important; }
body.sa-dashboard .page       { padding-bottom: 0 !important; }


/* ════════════════════════════════════════════════════════════
   2. RANKINGS PAGE TOP BAR — true capsule, properly spaced
   ════════════════════════════════════════════════════════════
   Goals:
   - Full pill shape (border-radius: 999px on all sides)
   - Left: region tabs (NAC EU NAW ASIA)
   - Right: GLOBAL chip | separator | Share Print Excel
   - All controls same visual height (32px)
   - No text clipping, no cramping
   - Center divider between regions and actions
   ════════════════════════════════════════════════════════════ */

/* Top bar container — slim capsule bar */
body.sa-dashboard .page-topbar {
  /* Full pill */
  border-radius: 999px !important;
  /* Single-row flex */
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  /* Height */
  min-height: 52px !important;
  max-height: 60px !important;
  /* Padding: generous internal horizontal breathing room */
  padding: 0 20px !important;
  gap: 0 !important;
  /* Positioning */
  margin: 0 1.5rem !important;
  /* Bottom border only removed on capsule — keep full border */
  border-top: 1px solid var(--sa-border-default) !important;
  border-radius: 999px !important;
}

/* Rankings page: hide the text title — use full-width actions */
body.sa-dashboard #page-rankings .page-topbar > div:first-child {
  display: none !important;
}

/* Actions row — full width single line */
body.sa-dashboard .page-topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

/* Region chips — left group */
body.sa-dashboard .page-topbar-actions .rchip {
  height: 32px !important;
  padding: 0 14px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  letter-spacing: 0.04em !important;
  border-radius: 999px !important;
}

/* Vertical divider between regions and actions */
body.sa-dashboard .page-topbar-actions .sa-topbar-divider {
  width: 1px;
  height: 22px;
  background: var(--sa-border-default);
  margin: 0 10px;
  flex-shrink: 0;
}

/* Push Share button and siblings to the right */
body.sa-dashboard .page-topbar-actions #btn-share {
  margin-left: auto !important;
}

body.sa-dashboard .page-topbar-actions #btn-print,
body.sa-dashboard .page-topbar-actions #btn-excel {
  margin-left: 0 !important;
}

/* All action buttons — uniform slim height */
body.sa-dashboard .page-topbar .btn {
  height: 32px !important;
  padding: 0 14px !important;
  font-size: 11.5px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

/* Global chip */
body.sa-dashboard #global-chip {
  height: 32px !important;
  padding: 0 14px !important;
  font-size: 11.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

/* Top bar title (non-rankings pages) */
body.sa-dashboard .page-topbar-title {
  font-family: "Montserrat", sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.03em !important;
  color: var(--sa-text-primary) !important;
}

body.sa-dashboard .page-topbar-sub {
  margin-top: 0.2rem;
  color: var(--sa-text-muted) !important;
  font-size: 0.66rem !important;
  text-transform: uppercase;
  letter-spacing: 0.12em !important;
}

body.sa-dashboard .page-topbar-actions {
  gap: 5px !important;
  flex-wrap: nowrap !important;
}


/* ════════════════════════════════════════════════════════════
   2b. SUMMARY CARDS — clean 2-row layout
   ════════════════════════════════════════════════════════════
   Row 1: Players · Events · Top Rated  — 3 equal tiles
   Row 2: Up & Comers — wide, intentional module

   The old "3 cards + crammed Up & Comers beside them" is
   replaced. Up & Comers is now beneath, spanning full width.
   ════════════════════════════════════════════════════════════ */

/* Stats strip: 3 columns, then Up & Comers below */
body.sa-dashboard .stats-strip {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  background: transparent !important;
  grid-template-columns: unset !important;
}

/* Stat tiles: small compact squares */
body.sa-dashboard .stats-strip .stat-tile {
  flex: 0 0 auto !important;
  width: 130px !important;
  min-height: unset !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}

/* Hide the 4th tile (Top Rated) — keep only Players, Events, Elite */
body.sa-dashboard .stats-strip .stat-tile:nth-child(4) {
  display: none !important;
}

/* Tile sizing for admin cards */
body.sa-dashboard .admin-stat-card {
  min-height: 80px !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
}

body.sa-dashboard .stat-tile-val,
body.sa-dashboard #stat-top1,
body.sa-dashboard .admin-stat-val {
  font-family: "Montserrat", sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: var(--sa-text-primary) !important;
  letter-spacing: -0.03em !important;
  margin-top: 2px !important;
}

body.sa-dashboard .stat-tile-accent {
  background:
    radial-gradient(circle at top right, rgba(0,164,91,0.14), transparent 40%),
    rgba(255,255,255,0.03) !important;
  border-color: rgba(0,164,91,0.28) !important;
}

body.sa-dashboard .stats-strip,
body.sa-dashboard .admin-stats-strip {
  gap: 10px !important;
}

/* ════════════════════════════════════════════════════════════
   2c. UP & COMERS — real interactive module
   ════════════════════════════════════════════════════════════
   This is no longer a thin strip. It's a proper medium-height
   card with mini player chips inside, hover states, and a
   clear visual structure. It feels like a real feature.
   ════════════════════════════════════════════════════════════ */

/* Up & Comers: full-width horizontal bar */
body.sa-dashboard .prospects-panel {
  display: block !important;
  width: 100% !important;
  background: linear-gradient(90deg, rgba(0,196,106,0.06), rgba(0,196,106,0.02)) !important;
  border: 1px solid rgba(0,196,106,0.18) !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  margin-bottom: 14px !important;
  box-shadow: none !important;
  min-height: unset !important;
}

/* Panel header */
body.sa-dashboard .prospects-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

body.sa-dashboard .prospects-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--sa-text-primary) !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
  font-family: "Montserrat", sans-serif !important;
}

/* Green pulse dot next to title */
body.sa-dashboard .prospects-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sa-accent);
  box-shadow: 0 0 8px rgba(0,196,106,0.6);
  margin-right: 8px;
  animation: sa-prospect-pulse 2.4s ease-in-out infinite;
}

@keyframes sa-prospect-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(0,196,106,0.6); }
  50%       { opacity: 0.5; box-shadow: 0 0 4px rgba(0,196,106,0.2); }
}

body.sa-dashboard .prospects-sub {
  font-size: 10.5px !important;
  color: var(--sa-text-muted) !important;
  margin-left: auto !important;
}

/* Top prospects: horizontal scrolling row — no wrapping */
body.sa-dashboard .prospects-top {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  margin-bottom: 0 !important;
}

body.sa-dashboard .prospects-top > * {
  flex: 0 0 auto !important;
  min-width: 150px !important;
  max-width: 200px !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(0,196,106,0.15) !important;
  border-radius: 10px !important;
  padding: 10px 13px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease !important;
}

body.sa-dashboard .prospects-top > *:hover {
  background: rgba(0,196,106,0.09) !important;
  border-color: rgba(0,196,106,0.36) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
}

/* Secondary prospects: hide to keep bar clean and uncluttered */
body.sa-dashboard .prospects-rest {
  display: none !important;
}

body.sa-dashboard .prospects-rest > * {
  background: rgba(255,255,255,0.015) !important;
  border: 1px solid var(--sa-border-subtle) !important;
  border-radius: 8px !important;
  padding: 7px 11px !important;
  font-size: 11px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
}

body.sa-dashboard .prospects-rest > *:hover {
  background: rgba(0,196,106,0.07) !important;
  border-color: rgba(0,196,106,0.28) !important;
  transform: translateY(-1px) !important;
}

/* Hide JS-injected thin strip from earlier pass */
body.sa-dashboard .sa-uc-strip { display: none !important; }

/* ────────────────────────────────────────────────────────────
   SEARCH + FILTERS — single horizontal row
   ──────────────────────────────────────────────────────────── */
body.sa-dashboard .table-toolbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  flex-wrap: wrap !important;
}

body.sa-dashboard .table-toolbar .search-box,
body.sa-dashboard .table-toolbar #search-box {
  width: 190px !important;
  min-width: 130px !important;
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}

body.sa-dashboard .table-toolbar .filter-sel,
body.sa-dashboard .table-toolbar select {
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}

body.sa-dashboard .table-toolbar > div {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-direction: row !important;
}

body.sa-dashboard #btn-snapshot,
body.sa-dashboard #btn-snapshot-clear {
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
}

/* ────────────────────────────────────────────────────────────
   TABLE / TABLE SECTION
   ──────────────────────────────────────────────────────────── */
body.sa-dashboard .table-section,
body.sa-dashboard .info-panel {
  border-radius: 18px !important;
  overflow: hidden;
}

body.sa-dashboard .table-toolbar,
body.sa-dashboard .info-panel-header,
body.sa-dashboard .modal-header,
body.sa-dashboard .modal-actions-row,
body.sa-dashboard .archive-modal-header,
body.sa-dashboard .scan-modal-header,
body.sa-dashboard .axis-ai-header {
  background: rgba(255,255,255,0.018) !important;
  border-bottom: 1px solid var(--sa-border-subtle) !important;
}

body.sa-dashboard .table-section .tbl-wrap,
body.sa-dashboard .bulk-table-wrap,
body.sa-dashboard .user-table-wrap,
body.sa-dashboard .alias-table-wrap {
  background: transparent !important;
}

body.sa-dashboard table thead th {
  color: var(--sa-text-muted) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  background: rgba(255,255,255,0.018) !important;
}

body.sa-dashboard tbody tr:hover,
body.sa-dashboard .clickable-row:hover,
body.sa-dashboard .m-row-click:hover,
body.sa-dashboard .wl-row:hover {
  background: rgba(255,255,255,0.026) !important;
}

/* ────────────────────────────────────────────────────────────
   CHIPS / REGIONS
   ──────────────────────────────────────────────────────────── */
body.sa-dashboard .rchip,
body.sa-dashboard .region-chip,
body.sa-dashboard .breakdown-region-item,
body.sa-dashboard .axis-suggestion,
body.sa-dashboard .metric-col-btn {
  border-radius: 999px !important;
  border: 1px solid var(--sa-border-default) !important;
  background: rgba(255,255,255,0.02) !important;
  color: var(--sa-text-secondary) !important;
}

body.sa-dashboard .rchip.active,
body.sa-dashboard .breakdown-region-item.active,
body.sa-dashboard .metric-col-btn.active {
  border-color: rgba(0,164,91,0.32) !important;
  background: rgba(0,164,91,0.10) !important;
  color: var(--sa-accent) !important;
}

body.sa-dashboard .region-locked { opacity: 0.62; }

/* ────────────────────────────────────────────────────────────
   MODALS / PANELS
   ──────────────────────────────────────────────────────────── */
body.sa-dashboard .prospects-panel,
body.sa-dashboard .update-banner {
  border-radius: 18px !important;
  box-shadow: var(--sa-shadow-panel);
}

body.sa-dashboard .cmp-slot,
body.sa-dashboard .cmp-slot-selected,
body.sa-dashboard .bulk-selected-chips,
body.sa-dashboard .bulk-player-pool,
body.sa-dashboard .followed-list,
body.sa-dashboard .notif-list,
body.sa-dashboard .saved-lb-list {
  border-radius: 18px !important;
}

body.sa-dashboard .modal-backdrop,
body.sa-dashboard #edit-user-backdrop,
body.sa-dashboard #my-account-backdrop,
body.sa-dashboard #player-editor-backdrop,
body.sa-dashboard #scan-modal-backdrop,
body.sa-dashboard #alias-debug-backdrop,
body.sa-dashboard #upgrade-modal-overlay,
body.sa-dashboard #axis-ai-backdrop,
body.sa-dashboard #clean-paste-backdrop,
body.sa-dashboard #filter-manager-backdrop,
body.sa-dashboard #known-players-backdrop {
  background: rgba(5,5,5,0.72) !important;
  backdrop-filter: blur(10px);
}

body.sa-dashboard .profile-modal,
body.sa-dashboard .scan-modal,
body.sa-dashboard .upgrade-modal,
body.sa-dashboard .kb-modal,
body.sa-dashboard .archive-modal,
body.sa-dashboard .update-popup,
body.sa-dashboard .alias-modal {
  border-radius: 26px !important;
}

body.sa-dashboard .modal-player-name,
body.sa-dashboard .modal-title,
body.sa-dashboard .admin-stat-label,
body.sa-dashboard .card-title,
body.sa-dashboard .info-panel-title,
body.sa-dashboard .lb-result-title,
body.sa-dashboard .upgrade-modal-title,
body.sa-dashboard .alias-modal-title {
  font-family: "Montserrat", sans-serif !important;
  letter-spacing: -0.03em !important;
}

body.sa-dashboard .msec-title {
  color: var(--sa-text-primary) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}

body.sa-dashboard .placements-table th,
body.sa-dashboard .placements-table td,
body.sa-dashboard .compare-table th,
body.sa-dashboard .compare-table td,
body.sa-dashboard .bulk-table th,
body.sa-dashboard .bulk-table td,
body.sa-dashboard .user-table th,
body.sa-dashboard .user-table td,
body.sa-dashboard .alias-table th,
body.sa-dashboard .alias-table td {
  padding: 0.9rem 1rem !important;
}

body.sa-dashboard .upgrade-plan.highlighted {
  border-color: rgba(0,164,91,0.32) !important;
  background:
    radial-gradient(circle at top right, rgba(0,164,91,0.1), transparent 40%),
    rgba(255,255,255,0.02) !important;
}

body.sa-dashboard .upgrade-plan-badge {
  background: var(--sa-accent) !important;
  color: #04150d !important;
}

/* ────────────────────────────────────────────────────────────
   AXIS AI PANEL
   ──────────────────────────────────────────────────────────── */
body.sa-dashboard #axis-ai-panel {
  width: min(480px, calc(100vw - 18px)) !important;
  right: calc(-1 * min(480px, calc(100vw - 18px))) !important;
  background:
    radial-gradient(circle at top right, rgba(0,164,91,0.08), transparent 28%),
    rgba(10,10,10,0.96) !important;
}

body.sa-dashboard #axis-ai-panel.open { right: 0 !important; }

body.sa-dashboard .axis-msg.assistant .axis-msg-bubble,
body.sa-dashboard .axis-suggestion:hover {
  background: rgba(255,255,255,0.03) !important;
}

/* ────────────────────────────────────────────────────────────
   SIDEBAR COLLAPSE BUTTON
   ──────────────────────────────────────────────────────────── */
body.sa-dashboard #sidebar-collapse-btn {
  top: 16px;
  border-radius: 999px !important;
  border: 1px solid var(--sa-border-default) !important;
  background: rgba(10,10,10,0.78) !important;
  color: var(--sa-text-secondary) !important;
  backdrop-filter: blur(18px);
}

body.sa-dashboard #sidebar-collapse-btn:hover {
  color: var(--sa-text-primary) !important;
  border-color: rgba(0,164,91,0.28) !important;
}

/* ────────────────────────────────────────────────────────────
   MISC DASHBOARD
   ──────────────────────────────────────────────────────────── */
body.sa-dashboard .empty .icon { filter: grayscale(0.1); }

body.sa-dashboard .plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(0,164,91,0.24);
  background: rgba(0,164,91,0.10);
  color: var(--sa-accent);
  font-size: 0.62rem;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.sa-dashboard .plan-badge.pro,
body.sa-dashboard .plan-badge.org,
body.sa-dashboard .plan-badge.scout {
  border-color: rgba(0,164,91,0.24);
  background: rgba(0,164,91,0.10);
  color: var(--sa-accent);
}

body.sa-dashboard.sa-admin .admin-stat-card,
body.sa-dashboard.sa-admin #page-add .card,
body.sa-dashboard.sa-admin #page-aliases .table-section,
body.sa-dashboard.sa-admin #page-admin .card {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.03), transparent 32%),
    rgba(255,255,255,0.02) !important;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  body.sa-dashboard .stats-strip,
  body.sa-dashboard .admin-stats-strip {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  body.sa-dashboard .page-topbar {
    margin: 0 1rem !important;
  }

  body.sa-dashboard .page-topbar-actions {
    justify-content: flex-start;
  }

  body.sa-landing .plans {
    grid-template-columns: 1fr !important;
  }

  body.sa-landing .mockup-layout {
    grid-template-columns: 1fr !important;
  }

  body.sa-landing .mockup-sb {
    display: none;
  }
}

@media (max-width: 960px) {
  body.sa-dashboard .sidebar {
    transform: translateX(-100%);
    box-shadow: 0 24px 80px rgba(0,0,0,0.42);
  }

  body.sa-dashboard .app-shell:not(.sidebar-hidden) .sidebar {
    transform: translateX(0);
  }

  body.sa-dashboard .main-content { margin-left: 0 !important; }

  body.sa-dashboard .page-topbar {
    margin-left: 0.85rem;
    margin-right: 0.85rem;
    padding-top: 0 !important;
  }

  body.sa-dashboard .page-body {
    padding: 1.25rem 0.85rem 4.25rem !important;
  }

  body.sa-dashboard .stats-strip,
  body.sa-dashboard .admin-stats-strip,
  body.sa-dashboard .admin-layout,
  body.sa-dashboard .add-events-layout,
  body.sa-dashboard .bulk-layout,
  body.sa-dashboard .alerts-layout,
  body.sa-dashboard .aliases-layout {
    grid-template-columns: 1fr !important;
  }

  body.sa-dashboard #axis-ai-panel {
    width: calc(100vw - 10px) !important;
    right: calc(-1 * (100vw - 10px)) !important;
  }

  body.sa-landing nav        { height: 72px; }

  body.sa-landing .hero {
    text-align: center;
    padding-top: 7.25rem !important;
  }

  body.sa-landing .hero-sub,
  body.sa-landing .ssub {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.sa-landing .hero-actions  { justify-content: center !important; }
  body.sa-landing .hero-nums     { border-radius: 20px !important; }

  body.sa-landing .data-inner,
  body.sa-landing .foot-grid     { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  body.sa-dashboard .stats-strip {
    grid-template-columns: 1fr 1fr !important;
  }

  body.sa-dashboard .page-topbar {
    border-radius: 0 0 20px 20px !important;
  }

  body.sa-dashboard .page-topbar-actions {
    flex-wrap: wrap !important;
  }

  body.sa-dashboard .page-topbar-actions #btn-share {
    margin-left: 0 !important;
  }

  body.sa-dashboard .table-toolbar .search-box,
  body.sa-dashboard .table-toolbar #search-box {
    width: 100% !important;
  }

  body.sa-landing .hero          { padding: 80px 24px 40px !important; }
  body.sa-landing .preview-wrap  { padding: 24px 24px 20px !important; }
}

@media (max-width: 640px) {
  body.sa-landing .nav-links,
  body.sa-landing .nav-right .btn-ng { display: none !important; }

  body.sa-landing .hero-h1 {
    font-size: clamp(2.75rem, 16vw, 4rem) !important;
  }

  body.sa-landing .hero-nums,
  body.sa-landing .pp-advanced-grid {
    grid-template-columns: 1fr !important;
  }

  body.sa-landing .hero-num {
    border-right: none !important;
    border-bottom: 1px solid var(--sa-border-subtle);
  }

  body.sa-landing .hero-num:last-child { border-bottom: none; }

  body.sa-login  { padding: 1rem; }

  body.sa-login .login-wrap,
  body.sa-login .login-card { padding: 1rem !important; }

  body.sa-dashboard .stats-strip,
  body.sa-dashboard .admin-stats-strip {
    grid-template-columns: 1fr !important;
  }

  body.sa-dashboard .page-topbar           { border-radius: 0 0 18px 18px; }
  body.sa-dashboard .page-topbar-title     { font-size: 1rem !important; }
  body.sa-dashboard .page-topbar-actions   { width: 100%; }

  body.sa-dashboard .btn,
  body.sa-dashboard .btn-login,
  body.sa-dashboard .btn-submit {
    width: 100%;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════════
   RANKINGS PAGE — Full-width table, compact stat squares
   ════════════════════════════════════════════════════════════ */

/* Page body: simple vertical stack so table fills full width */
body.sa-dashboard #page-rankings .page-body {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
  grid-template-areas: unset !important;
}

/* Table section fills full available width */
body.sa-dashboard #page-rankings .table-section {
  width: 100% !important;
  grid-area: unset !important;
}

/* Prospects panel also full width in this context */
body.sa-dashboard #page-rankings #prospects-panel {
  grid-area: unset !important;
  width: 100% !important;
}