:root {
  color-scheme: light;
  --bg: #f4f7f8;
  --panel: rgba(255, 255, 255, 0.82);
  --line: rgba(15, 23, 42, 0.1);
  --text: #101623;
  --muted: #5b6676;
}

.dark {
  color-scheme: dark;
  --bg: #0c1118;
  --panel: rgba(18, 25, 35, 0.78);
  --line: rgba(226, 232, 240, 0.12);
  --text: #eef4f7;
  --muted: #9da8b8;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(20, 124, 140, 0.18), transparent 32rem),
    radial-gradient(circle at 78% 6%, rgba(217, 149, 27, 0.14), transparent 26rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

.glass {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.09);
  backdrop-filter: blur(18px);
}

.muted {
  color: var(--muted);
}

.grid-bg {
  background-image:
    linear-gradient(rgba(20, 124, 140, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 124, 140, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
}

input[type="range"] {
  accent-color: #147c8c;
}

.chart-text {
  fill: var(--muted);
}

.country-card:hover {
  transform: translateY(-3px);
}