@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #0f172a;
    --surface: #111c2f;
    --surface-soft: #0d2f35;
    --text: #edf4f8;
    --muted: #a8b5c6;
    --border: #27364d;
    --primary: #2dd4bf;
    --primary-dark: #5eead4;
    --accent: #fbbf24;
    --shadow: 0 18px 46px rgba(0, 0, 0, .22);
  }

  html {
    color-scheme: dark;
  }

  body {
    background:
      radial-gradient(circle at top left, rgba(45, 212, 191, .12), transparent 34rem),
      linear-gradient(180deg, #111827 0%, var(--page-bg) 100%);
  }

  .hero-panel,
  .tool-card {
    background: rgba(17, 28, 47, .94);
  }

  input,
  select {
    background: #0b1220;
    color: var(--text);
  }

  .calc-display {
    background: #050b18;
  }

  .calc-keys button {
    background: #1f2a3f;
    color: var(--text);
  }

  .calc-keys button:hover {
    background: #293852;
  }

  .calc-keys .ghost {
    background: #3f2f12;
    color: #fde68a;
  }

  .calc-keys .operator {
    background: #123c42;
    color: #99f6e4;
  }
}