:root {
  --bg: #0d0f13;
  --panel: #161a22;
  --text: #e7ecf1;
  --muted: #8d96a5;
  --border: #232836;
  --up: #4cf3b7;
  --down: #ff5a6b;
  --flat: #8d96a5;
  --mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.45;
}

.hero {
  padding: 2.5rem 1.5rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.hero h1 {
  margin: 0 0 0.25rem;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
}

.subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem 3rem;
}

.status {
  color: var(--muted);
  padding: 2rem 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 0.35rem;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.rank {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  background: #1f2533;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--muted);
}

.id { display: flex; align-items: baseline; gap: 0.5rem; }
.name { font-weight: 600; font-size: 1.05rem; }
.symbol { color: var(--muted); font-family: var(--mono); font-size: 0.85rem; }

.price {
  font-family: var(--mono);
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

.change {
  font-family: var(--mono);
  font-size: 0.95rem;
}
.change.up { color: var(--up); }
.change.down { color: var(--down); }
.change.flat { color: var(--flat); }

.spark svg { width: 100%; height: 40px; display: block; }
.spark polyline { fill: none; stroke-width: 1.5; }

.cap {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.85rem;
  padding-top: 0.25rem;
  border-top: 1px dashed var(--border);
}

.error {
  color: var(--down);
}

@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
}