:root{
  --bg: #0f1724;
  --panel: #111827;
  --accent: #06b6d4;
  --btn: #1f2937;
  --btn-hover: #374151;
  --text: #e6eef8;
  --muted: #9ca3af;
  --success: #10b981;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, #071129 0%, #0b1220 100%);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.calculator{
  width:340px;
  max-width:96%;
  background:linear-gradient(180deg,#071428,#071827);
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.7);
  padding:16px;
}

.screen{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-radius:10px;
  padding:14px;
  margin-bottom:12px;
  min-height:76px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap:6px;
}

.history{
  font-size:13px;
  color:var(--muted);
  width:100%;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.display{
  font-size:28px;
  font-weight:600;
  width:100%;
  text-align:right;
  word-break:break-all;
}

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

.btn{
  background:var(--btn);
  border:none;
  padding:14px;
  border-radius:8px;
  font-size:18px;
  color:var(--text);
  cursor:pointer;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.18);
  transition:transform .06s ease, background .08s ease;
  user-select:none;
}

.btn:active{transform:translateY(2px)}
.btn:hover{background:var(--btn-hover)}

.btn.op{background:linear-gradient(180deg,#0b7285,#03657a); color:#fff}
.btn.equal{grid-column:4 / 5; background:linear-gradient(180deg,#10b981,#059669); font-weight:700}
.btn.func{background:linear-gradient(180deg,#374151,#111827)}

.wide{grid-column:1 / 3; text-align:left; padding-left:22px}
@media (max-width:420px){
  .calculator{width:320px}
  .display{font-size:24px}
  .btn{padding:12px; font-size:16px}
}