/* ============================================================
   Cowboy's AC — Premium polish layer (refined dark)
   Additive only. Linked AFTER each page's inline <style> so it
   layers on top without rewriting existing layouts.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --pl-accent:#22d3ee;
  --pl-shadow:0 8px 26px rgba(3,8,15,.45), 0 1px 0 rgba(255,255,255,.025) inset;
  --pl-shadow-sm:0 3px 12px rgba(3,8,15,.35);
}

html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }

/* ---- Typography: display font + tabular figures on headings & metrics ---- */
h1,h2,h3,.section-title,.panel h2,.brand h1,.ttl{
  font-family:'Space Grotesk',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  letter-spacing:-.018em;
}
.kpi .val,.kpi .value,.chip .v,.fcard .v,.m .v,.val,.v,.ringwrap .pct,.clock .t,.wxt{
  font-family:'Space Grotesk',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  letter-spacing:-.01em;
}
.kpi .val,.kpi .value,.chip .v,.fcard .v,.m .v,.val,.v,.ringwrap .pct,.clock .t,
table td,.spend,.mini,.money,.num,.nowchip b{ font-variant-numeric:tabular-nums; }

/* ---- Surfaces: consistent depth + gentle hover lift (transform/opacity only) ---- */
.card,.kpi,.panel,.chip,.m,.fcard,.gapchip,.tile{
  transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, border-color .2s ease;
}
.card:hover,.kpi:hover,.panel:hover,.fcard:hover,.tile:hover{
  transform:translateY(-2px);
  box-shadow:var(--pl-shadow);
}

/* ---- Interactive feedback ---- */
a,button,.btn,.seg button,nav a,[role=button]{
  transition:color .15s ease, background-color .15s ease, border-color .15s ease, transform .12s ease, opacity .15s ease;
}
button:active,.btn:active,.seg button:active,[role=button]:active{ transform:scale(.975); }
:focus-visible{ outline:2px solid var(--pl-accent); outline-offset:2px; border-radius:6px; }

/* ---- Refined scrollbars + selection ---- */
*{ scrollbar-width:thin; scrollbar-color:#2a3a4d transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#243243; border-radius:9px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#33475d; background-clip:content-box; }
::selection{ background:rgba(34,211,238,.28); }

/* ---- Ambient depth: soft top glow + faint grain, both BEHIND content ---- */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(1100px 600px at 80% -12%, rgba(34,211,238,.07), transparent 58%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}