:root {
  --bg: #0b0e14;
  --surface: #131823;
  --surface-2: #1a2130;
  --border: #222a3a;
  --text: #e6edf3;
  --muted: #8b97a8;
  --accent: #58a6ff;
  --up: #3fb950;
  --down: #f85149;
  --warn: #d29922;
  --radius-sm: 6px;
  --radius-md: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.4 var(--font-ui);
  min-height: 100vh;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
h2 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: var(--space-5) var(--space-4) var(--space-2); }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-4);
  padding: var(--space-4);
}
@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.mono { font-family: var(--font-mono); }
.pos { color: var(--up); }
.neg { color: var(--down); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}