/*
 * SPY.CSS — v1.0.0
 * Terminal-aesthetic CSS framework
 * Token-first · Zero inline styles · Zero duplication
 * https://github.com/nylz/spy
 *
 * Table of Contents:
 *  1. Tokens (CSS Custom Properties)
 *  2. Reset & Base
 *  3. Keyframes
 *  4. Background Effects
 *  5. Layout — Page, Container, Dashboard Grid
 *  6. Layout — 12-Column Grid
 *  7. Layout — Flex Utilities
 *  8. Layout — Divider & VR
 *  9. Topbar / Navbar
 * 10. Status Chip & Blink
 * 11. Tabs
 * 12. Meta Pill
 * 13. Panel
 * 14. Card
 * 15. Badge
 * 16. Alert
 * 17. Button
 * 18. Typography — Labels, Values, Change, Trend
 * 19. Status Dot
 * 20. KPI Card
 * 21. Metric Row
 * 22. Score Badge
 * 23. Spark Bars
 * 24. Progress
 * 25. Spinner
 * 26. Skeleton
 * 27. Data Table
 * 28. Feed Item
 * 29. Pagination
 * 30. Search
 * 31. Dropdown
 * 32. Modal
 * 33. Toast
 * 34. Accordion
 * 35. List Group
 * 36. Breadcrumb
 * 37. Chart Containers
 * 38. Empty State
 * 39. Forms
 * 40. Utilities
 * 41. Responsive Overrides
 */


/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  /* Base palette */
  --spy-black:        #020408;
  --spy-dark-1:       #060e16;
  --spy-dark-2:       #0a1420;
  --spy-dark-3:       #0f1a28;
  --spy-dark-4:       #1a2535;

  --spy-teal-100:     #64f0c8;
  --spy-teal-60:      rgba(100,240,200,0.6);
  --spy-teal-30:      rgba(100,240,200,0.3);
  --spy-teal-12:      rgba(100,240,200,0.12);
  --spy-teal-06:      rgba(100,240,200,0.06);

  --spy-blue-100:     #44ccff;
  --spy-blue-30:      rgba(68,204,255,0.3);
  --spy-blue-12:      rgba(68,204,255,0.12);
  --spy-blue-06:      rgba(68,204,255,0.06);

  --spy-amber-100:    #ffb84c;
  --spy-amber-30:     rgba(255,184,76,0.3);
  --spy-amber-12:     rgba(255,184,76,0.12);

  --spy-red-100:      #ff5f63;
  --spy-red-30:       rgba(255,95,99,0.3);
  --spy-red-12:       rgba(255,95,99,0.12);

  --spy-green-100:    #4ade80;
  --spy-green-30:     rgba(74,222,128,0.3);
  --spy-green-12:     rgba(74,222,128,0.12);

  --spy-white-10:     rgba(255,255,255,0.10);
  --spy-white-06:     rgba(255,255,255,0.06);
  --spy-white-04:     rgba(255,255,255,0.04);
  --spy-white-02:     rgba(255,255,255,0.02);

  /* Semantic tokens */
  --bg:               var(--spy-black);
  --panel:            rgba(6,14,22,0.82);
  --glass:            rgba(10,20,32,0.55);
  --text:             #e8f4f0;
  --dim:              #8aaa9f;
  --muted:            #5a7a70;

  --accent:           var(--spy-teal-100);
  --accent-glow:      var(--spy-teal-30);
  --accent-bg:        var(--spy-teal-06);

  --accent2:          var(--spy-blue-100);
  --accent2-glow:     var(--spy-blue-30);
  --accent2-bg:       var(--spy-blue-06);

  --warn:             var(--spy-amber-100);
  --warn-glow:        var(--spy-amber-30);
  --warn-bg:          var(--spy-amber-12);

  --danger:           var(--spy-red-100);
  --danger-glow:      var(--spy-red-30);
  --danger-bg:        var(--spy-red-12);

  --positive:         var(--spy-green-100);
  --positive-glow:    var(--spy-green-30);
  --positive-bg:      var(--spy-green-12);

  --border:           var(--spy-teal-12);
  --border-bright:    var(--spy-teal-30);
  --border-subtle:    var(--spy-white-06);

  /* Typography */
  --mono:             'IBM Plex Mono', monospace;
  --sans:             'Space Grotesk', sans-serif;

  --text-xs:          10px;
  --text-sm:          11px;
  --text-base:        12px;
  --text-md:          13px;
  --text-lg:          15px;
  --text-xl:          18px;
  --text-2xl:         22px;
  --text-3xl:         28px;
  --text-4xl:         36px;

  --fw-light:         300;
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;

  --lh-tight:         1.2;
  --lh-snug:          1.35;
  --lh-base:          1.5;
  --lh-relaxed:       1.7;

  --ls-tight:         -0.02em;
  --ls-normal:        0;
  --ls-wide:          0.05em;
  --ls-wider:         0.10em;
  --ls-widest:        0.15em;
  --ls-caps:          0.12em;

  /* Spacing — base unit 4px */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Border */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-xl:    12px;
  --radius-full:  9999px;
  --border-width: 1px;

  /* Shadow / Glow */
  --shadow-sm:       0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:       0 8px 32px rgba(0,0,0,0.5);
  --shadow-xl:       0 16px 48px rgba(0,0,0,0.6);
  --glow-accent:     0 0 8px var(--accent-glow);
  --glow-accent-lg:  0 0 16px var(--accent-glow);
  --glow-danger:     0 0 8px var(--danger-glow);
  --glow-warn:       0 0 8px var(--warn-glow);
  --glow-positive:   0 0 8px var(--positive-glow);

  /* Z-index */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
  --z-top:      9999;

  /* Animation */
  --duration-fast:    150ms;
  --duration-base:    200ms;
  --duration-slow:    300ms;
  --duration-slower:  500ms;
  --ease-default:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* =============================================================
   2. RESET & BASE
   ============================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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


/* =============================================================
   3. KEYFRAMES
   ============================================================= */
@keyframes spy-spin         { to { transform: rotate(360deg); } }
@keyframes spy-pulse-blink  { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes spy-fade-in      { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes spy-scanline     { 0%{top:-2px} 100%{top:100%} }
@keyframes spy-skeleton     { 0%{background-position:200% 0} 100%{background-position:-200% 0} }


/* =============================================================
   4. BACKGROUND EFFECTS
   ============================================================= */
.spy-bg-grid {
  position: fixed; inset: 0;
  pointer-events: none; z-index: var(--z-below);
  background-image:
    linear-gradient(var(--spy-teal-06) 1px, transparent 1px),
    linear-gradient(90deg, var(--spy-teal-06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 70%);
}

.spy-bg-radial {
  position: fixed; inset: 0;
  pointer-events: none; z-index: var(--z-below);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(40,120,100,0.15), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(40,100,180,0.08), transparent 40%);
}

.spy-scanline {
  position: fixed; inset: 0;
  pointer-events: none; overflow: hidden;
  z-index: var(--z-top); opacity: 0.4;
}
.spy-scanline::after {
  content: ''; position: absolute;
  left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(100,240,200,0.1), transparent);
  animation: spy-scanline 6s linear infinite;
}


/* =============================================================
   5. LAYOUT — PAGE, CONTAINER, DASHBOARD
   ============================================================= */
.spy-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: var(--space-5) var(--space-6);
}

/* Page with sticky topbar — browser handles height automatically */
.spy-page--has-topbar { padding-top: var(--space-5); }

.spy-container        { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 var(--space-6); }
.spy-container--sm    { max-width: 768px; }
.spy-container--md    { max-width: 1024px; }
.spy-container--lg    { max-width: 1440px; }
.spy-container--fluid { max-width: none; }

/* Three-column dashboard */
.spy-dashboard {
  display: grid;
  grid-template-columns: 240px 1fr 340px;
  gap: var(--space-5);
  margin-top: var(--space-5);
  min-height: calc(100vh - 100px);
  align-items: start;
}
.spy-dashboard--wide    { grid-template-columns: 280px 1fr 380px; }
.spy-dashboard--narrow  { grid-template-columns: 200px 1fr 300px; }
.spy-dashboard--no-left { grid-template-columns: 1fr 340px; }
.spy-dashboard--no-right{ grid-template-columns: 240px 1fr; }
.spy-dashboard--center-only { grid-template-columns: 1fr; }

.spy-col       { display: flex; flex-direction: column; gap: var(--space-5); }
.spy-col--gap-sm{ gap: var(--space-3); }
.spy-col--gap-lg{ gap: var(--space-8); }

/* Auto-fill card grid */
.spy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 450px), 1fr));
  gap: var(--space-8);
  justify-content: center;
}
.spy-grid--sm  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.spy-grid--lg  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 600px), 1fr)); }
.spy-grid--2   { grid-template-columns: repeat(2, 1fr); }
.spy-grid--3   { grid-template-columns: repeat(3, 1fr); }
.spy-grid--4   { grid-template-columns: repeat(4, 1fr); }


/* =============================================================
   6. LAYOUT — 12-COLUMN GRID
   ============================================================= */
.spy-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}
.spy-grid-12--gap-sm { gap: var(--space-2); }
.spy-grid-12--gap-lg { gap: var(--space-6); }

.spy-col-1  { grid-column: span 1; }
.spy-col-2  { grid-column: span 2; }
.spy-col-3  { grid-column: span 3; }
.spy-col-4  { grid-column: span 4; }
.spy-col-5  { grid-column: span 5; }
.spy-col-6  { grid-column: span 6; }
.spy-col-7  { grid-column: span 7; }
.spy-col-8  { grid-column: span 8; }
.spy-col-9  { grid-column: span 9; }
.spy-col-10 { grid-column: span 10; }
.spy-col-11 { grid-column: span 11; }
.spy-col-12 { grid-column: span 12; }

/* Column offsets */
.spy-col-offset-1  { grid-column-start: 2; }
.spy-col-offset-2  { grid-column-start: 3; }
.spy-col-offset-3  { grid-column-start: 4; }
.spy-col-offset-4  { grid-column-start: 5; }
.spy-col-offset-6  { grid-column-start: 7; }

/* =============================================================
   7. LAYOUT — FLEX UTILITIES
   ============================================================= */
.spy-flex           { display: flex; }
.spy-flex--col      { flex-direction: column; }
.spy-flex--wrap     { flex-wrap: wrap; }
.spy-flex--center   { align-items: center; justify-content: center; }
.spy-flex--between  { align-items: center; justify-content: space-between; }
.spy-flex--start    { align-items: flex-start; }
.spy-flex--end      { align-items: flex-end; }
.spy-flex--baseline { align-items: baseline; }
.spy-flex--gap-1    { gap: var(--space-1); }
.spy-flex--gap-2    { gap: var(--space-2); }
.spy-flex--gap-3    { gap: var(--space-3); }
.spy-flex--gap-4    { gap: var(--space-4); }
.spy-flex--gap-5    { gap: var(--space-5); }
.spy-flex--gap-6    { gap: var(--space-6); }
.spy-flex--gap-8    { gap: var(--space-8); }
.spy-grow           { flex: 1; min-width: 0; }
.spy-shrink-0       { flex-shrink: 0; }


/* =============================================================
   8. LAYOUT — DIVIDER & VR
   ============================================================= */
.spy-divider           { width: 100%; height: 1px; background: var(--border); border: none; }
.spy-divider--bright   { background: var(--border-bright); }
.spy-divider--subtle   { background: var(--border-subtle); }
.spy-divider--vertical { width: 1px; height: 100%; background: var(--border); }

.spy-vr {
  display: inline-block; width: 1px; height: 1em;
  background: var(--border); vertical-align: middle;
  margin: 0 var(--space-3);
}


/* =============================================================
   9. TOPBAR / NAVBAR
   ============================================================= */
.spy-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-wrap: wrap;
  gap: var(--space-5);
  position: relative;
  z-index: var(--z-sticky);
}

/* Sticky — stays in document flow, pushes content down naturally */
.spy-topbar--fixed {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.spy-topbar__left   { display: flex; align-items: center; gap: var(--space-7); }
.spy-topbar__center { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.spy-topbar__right  { display: flex; align-items: center; gap: var(--space-5); }

.spy-brand {
  font-family: var(--mono);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent);
}


/* =============================================================
   10. STATUS CHIP & BLINK
   ============================================================= */
.spy-status-chip {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  font-family: var(--mono); font-size: var(--text-xs);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider);
  text-transform: uppercase; border: 1px solid;
}
.spy-status-chip--live   { border-color: var(--spy-teal-30); color: #c8f4eb; background: var(--accent-bg); }
.spy-status-chip--warn   { border-color: var(--warn-glow);   color: #ffeec0; background: var(--warn-bg); }
.spy-status-chip--danger { border-color: var(--danger-glow); color: #ffd8d9; background: var(--danger-bg); }

.spy-blink {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); box-shadow: var(--glow-accent);
  animation: spy-pulse-blink 1.5s ease-in-out infinite;
}
.spy-blink--danger { background: var(--danger); box-shadow: var(--glow-danger); }
.spy-blink--warn   { background: var(--warn);   box-shadow: var(--glow-warn); }
.spy-blink--accent2{ background: var(--accent2); box-shadow: 0 0 8px var(--accent2-glow); }


/* =============================================================
   11. TABS
   ============================================================= */
.spy-tabs { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.spy-tab {
  border: 1px solid var(--border);
  background: var(--spy-white-02);
  color: var(--dim);
  font-family: var(--mono); font-size: var(--text-sm);
  padding: var(--space-3) var(--space-5);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-default);
  white-space: nowrap;
}
.spy-tab:hover    { border-color: var(--accent); color: var(--text); }
.spy-tab.is-active{ color: var(--bg); background: var(--accent); border-color: var(--accent); }
.spy-tab--sm      { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }


/* =============================================================
   12. META PILL
   ============================================================= */
.spy-meta-pill {
  font-family: var(--mono); font-size: var(--text-sm);
  color: var(--dim); letter-spacing: var(--ls-wide);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
}


/* =============================================================
   13. PANEL
   ============================================================= */
.spy-panel {
  border: 1px solid var(--border);
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: var(--space-6);
  position: relative; overflow: hidden;
}
.spy-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--spy-teal-12), transparent);
  pointer-events: none;
}
.spy-panel--compact { padding: var(--space-4); }
.spy-panel--flush   { padding: 0; }
.spy-panel--accent  { border-color: var(--accent); }
.spy-panel--warn    { border-color: var(--warn-glow); }
.spy-panel--danger  { border-color: var(--danger-glow); }

.spy-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-5);
  flex-wrap: wrap; gap: var(--space-3);
}
.spy-panel__title {
  font-family: var(--mono); font-size: var(--text-xs);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--dim);
}


/* =============================================================
   14. CARD
   ============================================================= */
.spy-card {
  border: 1px solid var(--border);
  background: var(--spy-dark-1);
  overflow: hidden;
  transition: border-color var(--duration-slow), box-shadow var(--duration-slow);
}
.spy-card:hover {
  border-color: var(--spy-teal-30);
  box-shadow: var(--shadow-lg), 0 0 20px var(--accent-bg);
}
.spy-card__head {
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--spy-dark-2);
}
.spy-card__body   { padding: var(--space-5); }
.spy-card__footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--spy-white-02);
}


/* =============================================================
   15. BADGE
   ============================================================= */
.spy-badge {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: var(--text-xs);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border); color: var(--accent);
  white-space: nowrap;
}
.spy-badge--accent  { color: var(--accent);   border-color: var(--spy-teal-30);   background: var(--accent-bg); }
.spy-badge--accent2 { color: var(--accent2);  border-color: var(--spy-blue-30);   background: var(--accent2-bg); }
.spy-badge--warn    { color: var(--warn);     border-color: var(--spy-amber-30);  background: var(--warn-bg); }
.spy-badge--danger  { color: var(--danger);   border-color: var(--spy-red-30);    background: var(--danger-bg); }
.spy-badge--positive{ color: var(--positive); border-color: var(--spy-green-30);  background: var(--positive-bg); }
.spy-badge--dim     { color: var(--dim);      border-color: var(--border); }


/* =============================================================
   16. ALERT
   ============================================================= */
.spy-alert {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border); border-left-width: 3px;
  background: var(--spy-white-02);
  font-size: var(--text-sm); line-height: var(--lh-snug);
}
.spy-alert--accent  { border-left-color: var(--accent);   background: var(--accent-bg); }
.spy-alert--warn    { border-left-color: var(--warn);     background: var(--warn-bg); }
.spy-alert--danger  { border-left-color: var(--danger);   background: var(--danger-bg); }
.spy-alert--positive{ border-left-color: var(--positive); background: var(--positive-bg); }

.spy-alert__title {
  font-family: var(--mono); font-size: var(--text-xs);
  font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--ls-caps); display: block;
  margin-bottom: var(--space-2);
}
.spy-alert__body { color: var(--text); flex: 1; }


/* =============================================================
   17. BUTTON
   ============================================================= */
.spy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  font-family: var(--mono); font-size: var(--text-sm);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--border);
  background: var(--spy-white-02); color: var(--dim);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-default);
  white-space: nowrap; text-decoration: none;
}
.spy-btn:hover { border-color: var(--accent); color: var(--text); }

.spy-btn--primary { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.spy-btn--primary:hover { background: #82f5d5; border-color: #82f5d5; color: var(--bg); }

.spy-btn--ghost { background: transparent; color: var(--accent); border-color: var(--spy-teal-30); }
.spy-btn--ghost:hover { background: var(--accent-bg); }

.spy-btn--danger { color: var(--bg); background: var(--danger); border-color: var(--danger); }
.spy-btn--danger:hover { background: #ff8a8d; border-color: #ff8a8d; }

.spy-btn--warn { color: var(--bg); background: var(--warn); border-color: var(--warn); }

.spy-btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.spy-btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-md); }

.spy-btn:disabled,
.spy-btn.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }


/* =============================================================
   18. TYPOGRAPHY — HEADINGS, BODY, LABELS, VALUES, CHANGE, TREND
   ============================================================= */

/* Headings — sans-serif, bright */
.spy-h1 { font-family: var(--sans); font-size: var(--text-4xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--text); letter-spacing: var(--ls-tight); }
.spy-h2 { font-family: var(--sans); font-size: var(--text-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--text); letter-spacing: var(--ls-tight); }
.spy-h3 { font-family: var(--sans); font-size: var(--text-2xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--text); }
.spy-h4 { font-family: var(--sans); font-size: var(--text-xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--text); }
.spy-h5 { font-family: var(--sans); font-size: var(--text-lg); font-weight: var(--fw-medium); line-height: var(--lh-base); color: var(--text); }
.spy-h6 { font-family: var(--sans); font-size: var(--text-md); font-weight: var(--fw-medium); line-height: var(--lh-base); color: var(--text); }

/* Body text — sans-serif */
.spy-body     { font-family: var(--sans); font-size: var(--text-base); line-height: var(--lh-base); color: var(--text); }
.spy-body--sm { font-size: var(--text-sm); font-weight: var(--fw-medium); }
.spy-body--lg { font-size: var(--text-md); }
.spy-lead     { font-size: var(--text-lg); font-weight: var(--fw-medium); color: var(--text); line-height: var(--lh-relaxed); }

/* Mono text shortcuts */
.spy-mono     { font-family: var(--mono); }
.spy-mono--sm { font-family: var(--mono); font-size: var(--text-sm); }
.spy-mono--xs { font-family: var(--mono); font-size: var(--text-xs); }

/* Labels — mono, dim, uppercase */
.spy-label {
  font-family: var(--mono); font-size: var(--text-xs);
  font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: var(--ls-caps); color: var(--dim);
}
.spy-label--sm     { font-size: 9px; letter-spacing: var(--ls-wider); }
.spy-label--lg     { font-size: var(--text-sm); }
.spy-label--bright { color: var(--text); }
.spy-label--accent { color: var(--accent); }
.spy-label--accent2{ color: var(--accent2); }
.spy-label--warn   { color: var(--warn); }
.spy-label--danger { color: var(--danger); }

.spy-value {
  font-family: var(--mono); font-size: var(--text-md);
  font-weight: var(--fw-semibold); color: var(--text);
}
.spy-value--sm  { font-size: var(--text-base); }
.spy-value--lg  { font-size: var(--text-xl); font-weight: var(--fw-bold); }
.spy-value--xl  { font-size: var(--text-2xl); font-weight: var(--fw-bold); }
.spy-value--2xl { font-size: var(--text-3xl); font-weight: var(--fw-bold); }
.spy-value--accent   { color: var(--accent);   text-shadow: var(--glow-accent); }
.spy-value--accent2  { color: var(--accent2);  text-shadow: 0 0 8px var(--accent2-glow); }
.spy-value--positive { color: var(--positive); text-shadow: var(--glow-positive); }
.spy-value--warn     { color: var(--warn);     text-shadow: var(--glow-warn); }
.spy-value--danger   { color: var(--danger);   text-shadow: var(--glow-danger); }
.spy-value--dim      { color: var(--dim); }

.spy-change { font-family: var(--mono); font-size: var(--text-sm); font-weight: var(--fw-semibold); white-space: nowrap; }
.spy-change--positive { color: var(--positive); text-shadow: var(--glow-positive); }
.spy-change--negative { color: var(--danger);   text-shadow: var(--glow-danger); }
.spy-change--neutral  { color: var(--dim); }
.spy-change--warn     { color: var(--warn);     text-shadow: var(--glow-warn); }

.spy-trend { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--mono); font-size: var(--text-sm); font-weight: var(--fw-semibold); white-space: nowrap; }
.spy-trend::before { font-size: 10px; line-height: 1; }
.spy-trend--up      { color: var(--positive); text-shadow: var(--glow-positive); }
.spy-trend--up::before { content: '▲'; }
.spy-trend--down    { color: var(--danger); text-shadow: var(--glow-danger); }
.spy-trend--down::before { content: '▼'; }
.spy-trend--neutral { color: var(--dim); }
.spy-trend--neutral::before { content: '—'; }
.spy-trend--warn    { color: var(--warn); text-shadow: var(--glow-warn); }
.spy-trend--warn::before { content: '◆'; }
.spy-trend--sm { font-size: var(--text-xs); }
.spy-trend--lg { font-size: var(--text-md); }
.spy-trend--xl { font-size: var(--text-xl); font-weight: var(--fw-bold); }


/* =============================================================
   19. STATUS DOT
   ============================================================= */
.spy-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.spy-dot--sm  { width: 6px;  height: 6px; }
.spy-dot--lg  { width: 12px; height: 12px; }
.spy-dot--accent   { background: var(--accent);   box-shadow: 0 0 6px var(--accent-glow); }
.spy-dot--positive { background: var(--positive); box-shadow: 0 0 6px var(--positive-glow); }
.spy-dot--warn     { background: var(--warn);     box-shadow: 0 0 6px var(--warn-glow); }
.spy-dot--danger   { background: var(--danger);   box-shadow: 0 0 6px var(--danger-glow); }
.spy-dot--accent2  { background: var(--accent2);  box-shadow: 0 0 6px var(--accent2-glow); }
.spy-dot--dim      { background: var(--dim); }


/* =============================================================
   20. KPI CARD
   ============================================================= */
.spy-kpi {
  padding: var(--space-5); border: 1px solid var(--border);
  background: var(--spy-white-02); display: flex;
  flex-direction: column; gap: var(--space-1);
  transition: border-color var(--duration-base);
}
.spy-kpi:hover { border-color: var(--spy-teal-30); }
.spy-kpi__label { font-family: var(--mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--dim); }
.spy-kpi__value { font-family: var(--mono); font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--text); line-height: 1; display: block; margin-top: var(--space-2); }
.spy-kpi__sub   { font-family: var(--mono); font-size: var(--text-xs); color: var(--dim); display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.spy-kpi__bar   { height: 3px; margin-top: var(--space-3); background: var(--spy-white-06); overflow: hidden; }
.spy-kpi__bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent2-bg), var(--accent)); transition: width var(--duration-slower) var(--ease-out); }

.spy-kpi--accent   .spy-kpi__value { color: var(--accent);   text-shadow: var(--glow-accent); }
.spy-kpi--positive .spy-kpi__value { color: var(--positive); text-shadow: var(--glow-positive); }
.spy-kpi--warn     .spy-kpi__value { color: var(--warn);     text-shadow: var(--glow-warn); }
.spy-kpi--danger   .spy-kpi__value { color: var(--danger);   text-shadow: var(--glow-danger); }


/* =============================================================
   21. METRIC ROW
   ============================================================= */
.spy-metric-row {
  display: flex; justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--spy-white-04);
  font-size: var(--text-sm); align-items: center;
}
.spy-metric-row__label { color: var(--dim); font-weight: var(--fw-medium); }
.spy-metric-row__value { font-family: var(--mono); font-weight: var(--fw-semibold); color: var(--text); }

/* Metric block (label + value) — matches components.md */
.spy-metric        { display: flex; flex-direction: column; gap: 1px; }
.spy-metric__label {
  font-family: var(--mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--dim);
}
.spy-metric__value {
  font-family: var(--mono); font-size: var(--text-md);
  font-weight: var(--fw-semibold); color: var(--text);
}
.spy-metric--row {
  display: flex; justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--spy-white-04);
}
.spy-metric--row .spy-metric__label { color: var(--dim); font-size: var(--text-sm); }
.spy-metric--row .spy-metric__value { font-family: var(--mono); font-weight: var(--fw-semibold); }
.spy-metric--featured .spy-metric__value {
  font-size: var(--text-2xl); font-weight: var(--fw-bold);
  line-height: 1; margin-top: var(--space-3); display: block;
}
.spy-metric--featured .spy-metric__sub {
  font-family: var(--mono); font-size: var(--text-xs);
  color: var(--dim); margin-top: var(--space-2); display: block;
}


/* =============================================================
   22. SCORE BADGE
   ============================================================= */
.spy-score {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--mono); font-size: var(--text-xs);
  font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
  padding: var(--space-2) var(--space-3);
  border: 1px solid; white-space: nowrap;
}
.spy-score--low      { color: var(--accent);   border-color: var(--spy-teal-30);   background: var(--accent-bg); }
.spy-score--mild     { color: var(--positive); border-color: var(--spy-green-30);  background: var(--positive-bg); }
.spy-score--moderate { color: var(--warn);     border-color: var(--spy-amber-30);  background: var(--warn-bg); }
.spy-score--high     { color: var(--danger);   border-color: var(--spy-red-30);    background: var(--danger-bg); }
.spy-score--pending  { color: var(--dim);      border-color: var(--border); }


/* =============================================================
   23. SPARK BARS
   ============================================================= */
.spy-spark { display: flex; align-items: flex-end; gap: 2px; height: 32px; }
.spy-spark__bar { flex: 1; min-width: 4px; max-width: 12px; border-radius: 1px 1px 0 0; background: linear-gradient(to top, var(--spy-teal-12), var(--accent)); transition: height var(--duration-base); }
.spy-spark__bar--highlight { background: linear-gradient(to top, var(--danger-bg), var(--danger)); box-shadow: 0 0 6px var(--danger-glow); }
.spy-spark__bar--dim       { background: var(--spy-white-06); }

.spy-hbar { display: flex; flex-direction: column; gap: var(--space-2); }
.spy-hbar__row   { display: flex; align-items: center; gap: var(--space-3); }
.spy-hbar__label { font-family: var(--mono); font-size: var(--text-xs); color: var(--dim); width: 80px; flex-shrink: 0; text-align: right; }
.spy-hbar__track { flex: 1; height: 4px; background: var(--spy-white-06); overflow: hidden; }
.spy-hbar__fill  { height: 100%; background: linear-gradient(90deg, var(--accent2-bg), var(--accent)); box-shadow: var(--glow-accent); transition: width var(--duration-slower) var(--ease-out); }
.spy-hbar__value { font-family: var(--mono); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--accent); min-width: 40px; }


/* =============================================================
   24. PROGRESS
   ============================================================= */
.spy-progress { height: 3px; background: var(--spy-white-06); overflow: hidden; }
.spy-progress__bar { height: 100%; background: linear-gradient(90deg, var(--accent2-bg), var(--accent)); transition: width var(--duration-slower) var(--ease-out); }
.spy-progress--thick  { height: 6px; }
.spy-progress--danger .spy-progress__bar { background: linear-gradient(90deg, var(--danger-bg), var(--danger)); }
.spy-progress--warn   .spy-progress__bar { background: linear-gradient(90deg, var(--warn-bg),   var(--warn)); }


/* =============================================================
   25. SPINNER
   ============================================================= */
.spy-spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spy-spin 0.8s linear infinite; display: inline-block; flex-shrink: 0; }
.spy-spinner--sm { width: 14px; height: 14px; border-width: 1.5px; }
.spy-spinner--lg { width: 32px; height: 32px; border-width: 3px; }


/* =============================================================
   26. SKELETON
   ============================================================= */
.spy-skeleton { background: linear-gradient(90deg, var(--spy-white-04) 25%, var(--spy-white-06) 50%, var(--spy-white-04) 75%); background-size: 200% 100%; animation: spy-skeleton 1.5s infinite; border-radius: var(--radius-sm); }
.spy-skeleton--text  { height: 12px; width: 80%; margin-bottom: var(--space-2); }
.spy-skeleton--title { height: 20px; width: 60%; margin-bottom: var(--space-3); }
.spy-skeleton--value { height: 32px; width: 40%; }
.spy-skeleton--bar   { height: 4px;  width: 100%; }


/* =============================================================
   27. TABLES (simple + data)
   ============================================================= */

/* Simple table — lightweight styling */
.spy-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.spy-table th {
  font-family: var(--mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--dim); font-weight: var(--fw-semibold);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.spy-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--spy-white-04);
  font-family: var(--mono); color: var(--text);
}
.spy-table tr:hover td { background: var(--accent-bg); }
.spy-table--compact th, .spy-table--compact td { padding: var(--space-2) var(--space-3); }
.spy-table .td-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Data table — sortable, dense */
.spy-data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

.spy-data-table thead tr { border-bottom: 1px solid var(--border); background: var(--spy-dark-2); }

.spy-data-table th {
  font-family: var(--mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--dim); font-weight: var(--fw-semibold);
  padding: var(--space-3) var(--space-4);
  text-align: left; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: color var(--duration-fast);
}
.spy-data-table th:hover     { color: var(--text); }
.spy-data-table th.is-sorted { color: var(--accent); }
.spy-data-table th .spy-sort-icon { font-size: 8px; margin-left: var(--space-2); opacity: 0.4; }
.spy-data-table th.is-sorted .spy-sort-icon { opacity: 1; }
.spy-data-table th.is-sorted-asc  .spy-sort-icon::after { content: ' ▲'; }
.spy-data-table th.is-sorted-desc .spy-sort-icon::after { content: ' ▼'; }

.spy-data-table tbody tr { border-bottom: 1px solid var(--spy-white-04); transition: background var(--duration-fast); }
.spy-data-table tbody tr:hover { background: var(--accent-bg); }
.spy-data-table tbody tr.is-selected { background: rgba(100,240,200,0.06); border-left: 2px solid var(--accent); }

.spy-data-table td { padding: var(--space-3) var(--space-4); font-family: var(--mono); color: var(--text); white-space: nowrap; }
.spy-data-table td.td-num   { text-align: right; font-variant-numeric: tabular-nums; }
.spy-data-table td.td-dim   { color: var(--dim); }
.spy-data-table td.td-label { font-family: var(--sans); color: var(--text); }

.spy-data-table--compact th,
.spy-data-table--compact td { padding: var(--space-2) var(--space-3); }

.spy-data-table--striped tbody tr:nth-child(even) { background: var(--spy-white-02); }


/* =============================================================
   28. FEED ITEM
   ============================================================= */
.spy-feed-item {
  padding: var(--space-4); margin-bottom: var(--space-3);
  border: 1px solid var(--spy-white-04); border-left: 2px solid var(--accent2);
  background: var(--spy-white-02);
}
.spy-feed-item--urgent  { border-left-color: var(--danger); }
.spy-feed-item--warn    { border-left-color: var(--warn); }
.spy-feed-item--positive{ border-left-color: var(--positive); }
.spy-feed-item--accent  { border-left-color: var(--accent); }

.spy-feed-item__source { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--accent); display: flex; justify-content: space-between; margin-bottom: var(--space-2); }
.spy-feed-item__text   { font-size: var(--text-sm); line-height: var(--lh-snug); color: #c8d8d2; }
.spy-feed-item__meta   { font-family: var(--mono); font-size: 9px; color: var(--dim); margin-top: var(--space-3); display: flex; gap: var(--space-4); }


/* =============================================================
   29. PAGINATION
   ============================================================= */
.spy-pagination { display: flex; align-items: center; gap: var(--space-2); }
.spy-page-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-family: var(--mono); font-size: var(--text-sm); border: 1px solid var(--border); background: var(--spy-white-02); color: var(--dim); transition: all var(--duration-fast); }
.spy-page-btn:hover     { border-color: var(--accent); color: var(--text); }
.spy-page-btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.spy-page-btn:disabled  { opacity: 0.3; cursor: not-allowed; }


/* =============================================================
   30. SEARCH
   ============================================================= */
.spy-search { display: flex; align-items: center; border: 1px solid var(--border); background: var(--spy-dark-3); transition: border-color var(--duration-base); }
.spy-search:focus-within { border-color: var(--accent); }
.spy-search__icon  { padding: 0 var(--space-4); color: var(--dim); font-size: var(--text-md); flex-shrink: 0; }
.spy-search__input { flex: 1; background: none; border: none; outline: none; font-family: var(--mono); font-size: var(--text-sm); color: var(--text); padding: var(--space-3) 0; }
.spy-search__input::placeholder { color: var(--muted); }
.spy-search__clear { padding: 0 var(--space-4); color: var(--dim); background: none; border: none; font-size: var(--text-md); cursor: pointer; transition: color var(--duration-fast); }
.spy-search__clear:hover { color: var(--text); }


/* =============================================================
   31. DROPDOWN
   ============================================================= */
.spy-dropdown { position: relative; display: inline-flex; }
.spy-dropdown__menu { position: absolute; top: calc(100% + var(--space-2)); left: 0; min-width: 180px; z-index: var(--z-dropdown); background: var(--spy-dark-1); border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: none; }
.spy-dropdown.is-open .spy-dropdown__menu { display: block; }
.spy-dropdown__item { display: block; padding: var(--space-3) var(--space-5); font-family: var(--mono); font-size: var(--text-sm); color: var(--dim); cursor: pointer; transition: all var(--duration-fast); border-bottom: 1px solid var(--spy-white-04); }
.spy-dropdown__item:last-child { border-bottom: none; }
.spy-dropdown__item:hover   { background: var(--accent-bg); color: var(--text); }
.spy-dropdown__item.is-active { color: var(--accent); }
.spy-dropdown__divider { height: 1px; background: var(--border); margin: var(--space-2) 0; }


/* =============================================================
   32. MODAL
   ============================================================= */
.spy-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(2,4,8,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; padding: var(--space-5); }
.spy-overlay.is-open { display: flex; }

.spy-modal { position: relative; width: min(520px, 100%); max-height: calc(100vh - var(--space-10)); display: flex; flex-direction: column; border: 1px solid var(--border-bright); background: var(--spy-dark-1); box-shadow: var(--shadow-xl); z-index: var(--z-modal); }
.spy-modal__head   { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.spy-modal__title  { font-family: var(--mono); font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text); }
.spy-modal__body   { padding: var(--space-6); overflow-y: auto; flex: 1; }
.spy-modal__foot   { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: var(--space-4); }
.spy-modal__close  { background: none; border: 1px solid var(--border); color: var(--dim); width: 28px; height: 28px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--duration-base); }
.spy-modal__close:hover { color: var(--text); border-color: var(--accent); }


/* =============================================================
   33. TOAST
   ============================================================= */
.spy-toast-container { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-3); pointer-events: none; }
.spy-toast { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); background: var(--spy-dark-1); box-shadow: var(--shadow-md); font-family: var(--mono); font-size: var(--text-sm); pointer-events: auto; min-width: 240px; animation: spy-fade-in var(--duration-slow) var(--ease-out); }
.spy-toast--accent  { border-left: 3px solid var(--accent); }
.spy-toast--danger  { border-left: 3px solid var(--danger); }
.spy-toast--warn    { border-left: 3px solid var(--warn); }
.spy-toast--positive{ border-left: 3px solid var(--positive); }
.spy-toast__close   { background: none; border: none; color: var(--dim); font-size: var(--text-md); cursor: pointer; margin-left: auto; flex-shrink: 0; transition: color var(--duration-fast); }
.spy-toast__close:hover { color: var(--text); }


/* =============================================================
   34. ACCORDION
   ============================================================= */
.spy-accordion { border: 1px solid var(--border); }
.spy-accordion__item { border-bottom: 1px solid var(--border); }
.spy-accordion__item:last-child { border-bottom: none; }
.spy-accordion__trigger { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); cursor: pointer; width: 100%; background: none; border: none; color: var(--text); font-family: var(--sans); font-size: var(--text-sm); font-weight: var(--fw-medium); text-align: left; transition: background var(--duration-fast); }
.spy-accordion__trigger:hover { background: var(--accent-bg); }
.spy-accordion__trigger::after { content: '+'; font-family: var(--mono); color: var(--accent); font-size: var(--text-lg); transition: transform var(--duration-base); }
.spy-accordion__item.is-open .spy-accordion__trigger::after { content: '−'; }
.spy-accordion__body { display: none; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--dim); line-height: var(--lh-relaxed); }
.spy-accordion__item.is-open .spy-accordion__body { display: block; }


/* =============================================================
   35. LIST GROUP
   ============================================================= */
.spy-list { border: 1px solid var(--border); }
.spy-list__item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--spy-white-04); font-size: var(--text-sm); transition: background var(--duration-fast); }
.spy-list__item:last-child { border-bottom: none; }
.spy-list__item:hover { background: var(--accent-bg); }
.spy-list__item.is-active { background: var(--accent-bg); border-left: 2px solid var(--accent); }


/* =============================================================
   36. BREADCRUMB
   ============================================================= */
.spy-breadcrumb { display: flex; align-items: center; gap: var(--space-3); font-family: var(--mono); font-size: var(--text-xs); flex-wrap: wrap; }
.spy-breadcrumb__item { color: var(--dim); }
.spy-breadcrumb__item.is-active { color: var(--text); }
.spy-breadcrumb__sep  { color: var(--muted); }
.spy-breadcrumb a     { color: var(--dim); text-decoration: none; transition: color var(--duration-fast); }
.spy-breadcrumb a:hover { color: var(--accent); }


/* =============================================================
   37. CHART CONTAINERS
   ============================================================= */
.spy-chart-strip { width: 100%; background: var(--spy-dark-1); border-bottom: 1px solid var(--border); overflow: hidden; }
.spy-chart-strip--sm   { height: 60px; }
.spy-chart-strip--md   { height: 88px; }
.spy-chart-strip--lg   { height: 120px; }
.spy-chart-strip--hero { height: 200px; }

.spy-chart-split { display: flex; height: 88px; background: var(--spy-dark-1); border-bottom: 1px solid var(--border); }
.spy-chart-split__chart {
  flex: 1;
  min-width: 0; /* prevents SVG from overflowing flex container */
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.spy-chart-split__gauge {
  width: 180px; /* fixed — preserves circular aspect ratio */
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--spy-dark-1);
}


/* =============================================================
   38. EMPTY STATE
   ============================================================= */
.spy-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12); gap: var(--space-3); text-align: center; }
.spy-empty__icon { font-size: var(--text-3xl); color: var(--muted); line-height: 1; }
.spy-empty__text { font-family: var(--mono); font-size: var(--text-sm); color: var(--dim); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.spy-empty__sub  { font-size: var(--text-sm); color: var(--muted); }


/* =============================================================
   39. FORMS
   ============================================================= */
.spy-form        { display: flex; flex-direction: column; gap: var(--space-5); }
.spy-form-group  { display: flex; flex-direction: column; gap: var(--space-2); }
.spy-form-row    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.spy-form-row--3 { grid-template-columns: 1fr 1fr 1fr; }

.spy-form-label { font-family: var(--mono); font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--dim); }
.spy-form-label--required::after { content: ' *'; color: var(--danger); }

.spy-input, .spy-select, .spy-textarea {
  display: block; width: 100%;
  font-family: var(--mono); font-size: var(--text-sm);
  color: var(--text); background: var(--spy-dark-3);
  border: 1px solid var(--border);
  padding: var(--space-3) var(--space-4);
  outline: none;
  transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
.spy-input::placeholder, .spy-textarea::placeholder { color: var(--muted); }
.spy-input:focus, .spy-select:focus, .spy-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.spy-input:disabled, .spy-select:disabled, .spy-textarea:disabled { opacity: 0.4; cursor: not-allowed; background: var(--spy-white-02); }
.spy-input.is-error, .spy-select.is-error, .spy-textarea.is-error { border-color: var(--danger); }
.spy-input.is-valid, .spy-select.is-valid, .spy-textarea.is-valid { border-color: var(--positive); }
.spy-input--sm { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.spy-input--lg { padding: var(--space-4) var(--space-5); font-size: var(--text-md); }

.spy-select { appearance: none; padding-right: var(--space-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236a8a82' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-4) center; cursor: pointer; }

.spy-textarea { min-height: 100px; resize: vertical; line-height: var(--lh-base); }

.spy-check { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.spy-check__input { width: 16px; height: 16px; flex-shrink: 0; appearance: none; border: 1px solid var(--border); background: var(--spy-dark-3); cursor: pointer; transition: all var(--duration-base); position: relative; }
.spy-check__input[type="radio"] { border-radius: 50%; }
.spy-check__input:checked { background: var(--accent); border-color: var(--accent); }
.spy-check__input:checked::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l4 4 6-6' stroke='%23020408' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/12px no-repeat; }
.spy-check__input[type="radio"]:checked::after { background: var(--bg); margin: 3px; border-radius: 50%; }
.spy-check__label { font-size: var(--text-sm); color: var(--text); cursor: pointer; }

.spy-range { width: 100%; height: 4px; appearance: none; background: var(--spy-white-06); outline: none; cursor: pointer; }
.spy-range::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--spy-dark-1); border: 2px solid var(--accent); cursor: pointer; box-shadow: var(--glow-accent); transition: transform var(--duration-base), box-shadow var(--duration-base); }
.spy-range::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: var(--glow-accent-lg); }

.spy-input-group { display: flex; }
.spy-input-group .spy-input { flex: 1; }
.spy-input-group .spy-input:not(:first-child) { border-left: none; }
.spy-input-group .spy-input:not(:last-child)  { border-right: none; }
.spy-input-group__addon { display: flex; align-items: center; padding: 0 var(--space-4); background: var(--spy-dark-4); border: 1px solid var(--border); font-family: var(--mono); font-size: var(--text-xs); color: var(--dim); white-space: nowrap; flex-shrink: 0; }

.spy-form-error   { font-family: var(--mono); font-size: var(--text-xs); color: var(--danger); margin-top: var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.spy-form-error::before { content: '⚠'; }
.spy-form-success { font-family: var(--mono); font-size: var(--text-xs); color: var(--positive); margin-top: var(--space-2); }
.spy-form-hint    { font-family: var(--mono); font-size: var(--text-xs); color: var(--dim); margin-top: var(--space-2); }


/* =============================================================
   40. UTILITIES
   ============================================================= */

/* Display */
.u-block        { display: block !important; }
.u-inline       { display: inline !important; }
.u-inline-block { display: inline-block !important; }
.u-flex         { display: flex !important; }
.u-inline-flex  { display: inline-flex !important; }
.u-grid         { display: grid !important; }
.u-hidden       { display: none !important; }
.u-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* Position */
.u-relative { position: relative !important; }
.u-absolute { position: absolute !important; }
.u-fixed    { position: fixed !important; }
.u-sticky   { position: sticky !important; }
.u-inset-0  { inset: 0 !important; }
.u-top-0    { top: 0 !important; }
.u-bottom-0 { bottom: 0 !important; }

/* Sizing */
.u-w-full     { width: 100% !important; }
.u-w-auto     { width: auto !important; }
.u-h-full     { height: 100% !important; }
.u-h-screen   { height: 100vh !important; }
.u-min-w-0    { min-width: 0 !important; }
.u-max-w-full { max-width: 100% !important; }
.u-max-w-xs   { max-width: 200px !important; }
.u-max-w-sm   { max-width: 280px !important; }
.u-max-w-md   { max-width: 400px !important; }
.u-max-w-lg   { max-width: 560px !important; }
.u-max-w-xl   { max-width: 720px !important; }

/* Overflow */
.u-overflow-hidden  { overflow: hidden !important; }
.u-overflow-auto    { overflow: auto !important; }
.u-overflow-x-auto  { overflow-x: auto !important; }
.u-overflow-y-auto  { overflow-y: auto !important; }

/* Text */
.u-text-primary  { color: var(--text) !important; }
.u-text-dim      { color: var(--dim) !important; }
.u-text-muted    { color: var(--muted) !important; }
.u-text-accent   { color: var(--accent) !important; }
.u-text-accent2  { color: var(--accent2) !important; }
.u-text-warn     { color: var(--warn) !important; }
.u-text-danger   { color: var(--danger) !important; }
.u-text-positive { color: var(--positive) !important; }
.u-text-left     { text-align: left !important; }
.u-text-center   { text-align: center !important; }
.u-text-right    { text-align: right !important; }
.u-text-upper    { text-transform: uppercase !important; }
.u-text-normal   { text-transform: none !important; }
.u-fw-bold       { font-weight: var(--fw-bold) !important; }
.u-fw-semibold   { font-weight: var(--fw-semibold) !important; }
.u-fw-medium     { font-weight: var(--fw-medium) !important; }
.u-fw-regular    { font-weight: var(--fw-regular) !important; }
.u-mono          { font-family: var(--mono) !important; }
.u-sans          { font-family: var(--sans) !important; }
.u-truncate      { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.u-nowrap        { white-space: nowrap !important; }
.u-clamp-1       { display: -webkit-box !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden !important; }
.u-clamp-2       { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; }
.u-clamp-3       { display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important; }

/* Background */
.u-bg-page     { background: var(--bg) !important; }
.u-bg-panel    { background: var(--panel) !important; }
.u-bg-glass    { background: var(--glass) !important; }
.u-bg-accent   { background: var(--accent-bg) !important; }
.u-bg-warn     { background: var(--warn-bg) !important; }
.u-bg-danger   { background: var(--danger-bg) !important; }
.u-bg-positive { background: var(--positive-bg) !important; }
.u-bg-none     { background: none !important; }

/* Border */
.u-border         { border: 1px solid var(--border) !important; }
.u-border-accent  { border-color: var(--accent) !important; }
.u-border-danger  { border-color: var(--danger) !important; }
.u-border-warn    { border-color: var(--warn) !important; }
.u-border-none    { border: none !important; }
.u-border-top     { border-top: 1px solid var(--border) !important; }
.u-border-bottom  { border-bottom: 1px solid var(--border) !important; }
.u-border-left    { border-left: 1px solid var(--border) !important; }
.u-border-right   { border-right: 1px solid var(--border) !important; }
.u-radius-none    { border-radius: 0 !important; }
.u-radius-sm      { border-radius: var(--radius-sm) !important; }
.u-radius-md      { border-radius: var(--radius-md) !important; }
.u-radius-full    { border-radius: var(--radius-full) !important; }

/* Opacity */
.u-opacity-0   { opacity: 0 !important; }
.u-opacity-25  { opacity: 0.25 !important; }
.u-opacity-50  { opacity: 0.5 !important; }
.u-opacity-75  { opacity: 0.75 !important; }
.u-opacity-100 { opacity: 1 !important; }

/* Shadow / Glow */
.u-shadow-sm        { box-shadow: var(--shadow-sm) !important; }
.u-shadow-md        { box-shadow: var(--shadow-md) !important; }
.u-shadow-lg        { box-shadow: var(--shadow-lg) !important; }
.u-glow-accent      { box-shadow: var(--glow-accent) !important; }
.u-glow-danger      { box-shadow: var(--glow-danger) !important; }
.u-text-glow-accent { text-shadow: var(--glow-accent) !important; }
.u-text-glow-danger { text-shadow: var(--glow-danger) !important; }
.u-text-glow-warn   { text-shadow: var(--glow-warn) !important; }

/* Flex helpers */
.u-flex-1        { flex: 1 !important; min-width: 0 !important; }
.u-flex-none     { flex: none !important; }
.u-shrink-0      { flex-shrink: 0 !important; }
.u-items-center  { align-items: center !important; }
.u-items-start   { align-items: flex-start !important; }
.u-items-end     { align-items: flex-end !important; }
.u-justify-center  { justify-content: center !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-end     { justify-content: flex-end !important; }
.u-gap-1  { gap: var(--space-1) !important; }
.u-gap-2  { gap: var(--space-2) !important; }
.u-gap-3  { gap: var(--space-3) !important; }
.u-gap-4  { gap: var(--space-4) !important; }
.u-gap-5  { gap: var(--space-5) !important; }
.u-gap-6  { gap: var(--space-6) !important; }
.u-gap-8  { gap: var(--space-8) !important; }

/* Spacing — margin */
.u-m-0  { margin: 0 !important; }
.u-mt-1 { margin-top: var(--space-1) !important; }
.u-mt-2 { margin-top: var(--space-2) !important; }
.u-mt-3 { margin-top: var(--space-3) !important; }
.u-mt-4 { margin-top: var(--space-4) !important; }
.u-mt-5 { margin-top: var(--space-5) !important; }
.u-mt-6 { margin-top: var(--space-6) !important; }
.u-mt-8 { margin-top: var(--space-8) !important; }
.u-mb-1 { margin-bottom: var(--space-1) !important; }
.u-mb-2 { margin-bottom: var(--space-2) !important; }
.u-mb-3 { margin-bottom: var(--space-3) !important; }
.u-mb-4 { margin-bottom: var(--space-4) !important; }
.u-mb-5 { margin-bottom: var(--space-5) !important; }
.u-mb-6 { margin-bottom: var(--space-6) !important; }
.u-mb-8 { margin-bottom: var(--space-8) !important; }
.u-ml-auto { margin-left: auto !important; }
.u-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Spacing — padding */
.u-p-0  { padding: 0 !important; }
.u-p-3  { padding: var(--space-3) !important; }
.u-p-4  { padding: var(--space-4) !important; }
.u-p-5  { padding: var(--space-5) !important; }
.u-p-6  { padding: var(--space-6) !important; }
.u-p-8  { padding: var(--space-8) !important; }
.u-pt-4 { padding-top: var(--space-4) !important; }
.u-pb-4 { padding-bottom: var(--space-4) !important; }
.u-px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.u-py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }

/* Pointer & Interaction */
.u-pointer    { cursor: pointer !important; }
.u-no-pointer { pointer-events: none !important; }
.u-no-select  { user-select: none !important; }

/* Z-index */
.u-z-raised   { z-index: var(--z-raised) !important; }
.u-z-dropdown { z-index: var(--z-dropdown) !important; }
.u-z-sticky   { z-index: var(--z-sticky) !important; }
.u-z-modal    { z-index: var(--z-modal) !important; }
.u-z-top      { z-index: var(--z-top) !important; }

/* Visibility */
.u-visible   { visibility: visible !important; }
.u-invisible { visibility: hidden !important; }

/* Scrollbar */
.u-scrollbar::-webkit-scrollbar       { width: 4px; height: 4px; }
.u-scrollbar::-webkit-scrollbar-track { background: transparent; }
.u-scrollbar::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
.u-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Focus ring */
.u-focus-ring:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Object fit */
.u-object-cover   { object-fit: cover !important; }
.u-object-contain { object-fit: contain !important; }


/* =============================================================
   41. RESPONSIVE OVERRIDES
   ============================================================= */

/* Tablet — ≤1200px */
@media (max-width: 1200px) {
  .spy-dashboard { grid-template-columns: 1fr 300px; }
  .spy-dashboard > .spy-col--left { display: none; }

  /* Inner-card columns stack sooner than page-level columns */
  .spy-card .spy-col-4 {
    grid-column: span 12;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .spy-card .spy-col-4:last-child { border-bottom: none; }

  .spy-grid--3, .spy-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile — ≤768px */
@media (max-width: 768px) {
  .spy-page { padding: var(--space-4); }
  .spy-dashboard { grid-template-columns: 1fr; }
  .spy-dashboard > .spy-col--right { display: none; }

  .spy-grid--2, .spy-grid--3, .spy-grid--4 { grid-template-columns: 1fr; }
  .spy-grid-12 { grid-template-columns: repeat(6, 1fr); }
  .spy-col-3, .spy-col-4 { grid-column: span 6; }
  .spy-col-8, .spy-col-9 { grid-column: span 6; }
  .spy-col-1, .spy-col-2 { grid-column: span 3; }

  .spy-topbar { padding: var(--space-3) var(--space-4); }
  .spy-topbar__center { display: none; }

  .spy-form-row, .spy-form-row--3 { grid-template-columns: 1fr; }
}