:root{
  --bg1:#0f1724; --bg2:#1e293b;
  --panel:#0b1220; --accent:#60a5fa; --op:#ffb86b;
  --radius:12px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
body{
  background: linear-gradient(135deg,var(--bg1),var(--bg2));
  display:flex; align-items:center; justify-content:center; padding:20px;
  color:#e6eef8;
}

.page { width:100%; max-width:420px; }

.calculator{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:var(--radius); padding:18px; box-shadow:0 10px 40px rgba(2,6,23,0.6);
}

.display{
  background:#000; color:#c8fff0; font-size:2.2rem; padding:12px 14px; border-radius:8px;
  text-align:right; overflow-x:auto; min-height:58px; margin-bottom:12px;
}

.keypad{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 56px;
  gap:10px;
}

.btn{
  background:#111827; color:#fff; border:none; border-radius:8px; font-size:1.05rem;
  cursor:pointer; transition:transform .08s ease, box-shadow .08s ease;
  display:flex; align-items:center; justify-content:center;
}
.btn:active{transform:translateY(1px)}
.btn.wide{grid-column: span 2;}
.btn.tall{grid-row: span 2; align-self:stretch;}
.btn.op{background:linear-gradient(90deg,var(--op),#ff9d3b); color:#07121a; font-weight:700;}
.equals{background:linear-gradient(90deg,#5af2b6,#2ecf8b); color:#07231a; font-weight:800;}

@media (max-width:480px){
  .display{font-size:1.4rem; min-height:48px}
  .keypad{grid-auto-rows: 48px; gap:8px}
  .btn{font-size:0.95rem}
}