:root {
  --bg: #0b0f17;
  --panel: #141a24;
  --border: #263140;
  --fg: #e6edf3;
  --muted: #8b98a9;
  --accent: #3b82f6;
  --error: #ef4444;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* The hidden attribute must win over the display rules on .controls/.auth
   (author styles otherwise override the UA [hidden] rule). */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 1.5rem;
  max-width: 60rem;
  margin-inline: auto;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
h1 { font-size: 1.4rem; margin: 0; letter-spacing: -0.01em; }
.status { color: var(--muted); font-size: 0.85rem; }
.status.error { color: var(--error); }

section { margin-bottom: 1rem; }

.auth, .controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}

label { color: var(--muted); font-size: 0.85rem; }

input, select, button {
  font: inherit;
  color: var(--fg);
  background: #0e131c;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.45rem 0.6rem;
}
input#apikey { flex: 1 1 18rem; min-width: 12rem; }
select { min-width: 10rem; }

button {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  cursor: pointer;
  font-weight: 600;
}
button:hover { filter: brightness(1.08); }

.chart {
  padding: 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  height: 22rem;
}
#chart { width: 100% !important; height: 100% !important; }

details summary { cursor: pointer; color: var(--muted); }
.tablewrap { overflow-x: auto; margin-top: 0.75rem; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.3rem 0.75rem 0.3rem 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; }