:root{
  --bg:#ffffff;       /* Page background */
  --panel:#f5f5f5;    /* Calculator box background */
  --accent:#4a90e2;   /* Blue equal button */
  --btn:#e8e8e8;      /* Normal buttons */
  --btn-hover:#dcdcdc;
  --text:#000000;     /* Black text */
  --radius:14px;
  --maxw:420px;
  --font: Inter, system-ui, sans-serif;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  background:var(--bg);
  font-family:var(--font);
  color:var(--text);
  padding:20px;
}

.calculator{
  width:100%; 
  max-width:var(--maxw); 
  background:var(--panel);
  border-radius:18px; 
  padding:18px; 
  box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

.display{
  height:84px; 
  border-radius:12px; 
  background:#ffffff; 
  display:flex; 
  align-items:flex-end;
  justify-content:flex-end; 
  padding:18px; 
  font-size:32px; 
  font-weight:600; 
  color:var(--text); 
  overflow:hidden;
  word-break:break-all; 
  text-align:right;
  border:1px solid #ddd;
}

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

.btn{
  padding:18px 12px; 
  border-radius:12px; 
  border:none; 
  background:var(--btn); 
  color:var(--text); 
  font-size:18px;
  cursor:pointer; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
  user-select:none;
}

.btn:hover{ 
  background:var(--btn-hover);
}

.operator{
  background:#d0ecff; 
  color:#003b73; 
  font-weight:700;
}

.equal{
  background:var(--accent); 
  color:#fff; 
  font-weight:800;
}

.function{
  background:#f0f0f0; 
  color:#333;
}

.btn:active{
  transform:scale(0.97);
}

@media (max-width:420px){
  .display{ height:72px; font-size:28px; padding:12px }
  .btn{ padding:14px 8px; font-size:16px }
}