@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: radial-gradient(circle at top left, #164e63 0, #0f172a 42%, #020617 100%);
}
.calculator {
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.18);
  backdrop-filter: blur(14px);
}
.display {
  background: linear-gradient(145deg, #020617, #111827);
  border: 1px solid rgba(148, 163, 184, 0.14);
  min-height: 112px;
}
.key {
  min-height: 58px;
  border-radius: 16px;
  background: #1e293b;
  color: #f8fafc;
  font-size: 1.2rem;
  font-weight: 600;
  transition: transform .12s ease, background .12s ease;
  user-select: none;
}
.key:hover { background: #334155; }
.key:active { transform: scale(.95); }
.key.utility { background: #334155; color: #67e8f9; }
.key.operator { background: #164e63; color: #a5f3fc; }
.key.operator:hover { background: #0e7490; }
.key.equals { background: #06b6d4; color: #082f49; }
.key.equals:hover { background: #22d3ee; }
@media (max-width: 360px) {
  .key { min-height: 52px; }
}