:root {
  --bg: #0f172a;
  --panel: #111827;
  --btn: #1f2937;
  --btn-accent: #334155;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --focus: #60a5fa;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(60vmax 60vmax at 20% 10%, #111827, transparent),
              radial-gradient(40vmax 40vmax at 90% 70%, #0b1020, transparent),
              var(--bg);
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
}

.calculator {
  width: min(92vw, 420px);
  background: linear-gradient(180deg, #0b1224, #0b1020);
  border: 1px solid #1f2937;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  overflow: hidden;
}

.display {
  font-variant-numeric: tabular-nums lining-nums;
  padding: 22px 16px 8px;
  min-height: 96px;
  display: grid;
  gap: 6px;
  align-content: end;
  background: linear-gradient(180deg, #0e162c, #0a0f1f);
  border-bottom: 1px solid #1f2937;
}

.line-small { 
  color: var(--muted); 
  font-size: 0.95rem; 
  text-align: right; 
  min-height: 1.4em; 
}

.line-main { 
  font-size: clamp(1.8rem, 5vw, 2.6rem); 
  text-align: right; 
  word-wrap: anywhere; 
}

.keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px;
  background: linear-gradient(180deg, #0b1020, #0a0d1a);
}

button {
  appearance: none;
  border: 0;
  background: var(--btn);
  color: var(--text);
  padding: 16px;
  border-radius: 14px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 6px 16px rgba(0,0,0,.25);
  transition: transform .04s ease, filter .2s ease;
}

button:active { transform: translateY(1px) scale(.99); }
button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.op, .equals { background: var(--btn-accent); }
.span-2 { grid-column: span 2; }

.sr-only { 
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px; 
  overflow: hidden; 
  clip: rect(0,0,0,0); 
  white-space: nowrap; 
  border: 0; 
}