:root{
  --bg:#0B4230;
  --panel:#116C4F;
  --accent:#FCC128;
  --text:#fff;
  --btn-bg:#0d5239;
  --btn-border:#0a3828;
  --btn-hover:#0f6045;
  --display-bg:#D4EDE5;
  --display-text:#0B4230;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);font-family:Arial,Helvetica,sans-serif;display:flex;align-items:center;justify-content:center;padding:2rem}
.calc{width:min(380px,92vw);background:var(--panel);border-radius:20px;box-shadow:0 12px 40px rgba(0,0,0,.35);padding:20px;gap:12px;display:flex;flex-direction:column}
.display{width:100%;font-size:2.2rem;padding:16px 14px;border:none;border-radius:12px;text-align:right;background:var(--display-bg);color:var(--display-text);font-weight:700;letter-spacing:.02em}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
button{padding:22px 8px;border-radius:10px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--text);font-size:1.15rem;cursor:pointer;transition:background .12s,transform .08s;font-weight:500}
button:hover{background:var(--btn-hover)}
button:active{transform:scale(.94)}
button.span-2{grid-column:span 2}
/* Operators column — slightly lighter green */
button.btn-op{background:#1a7a5e;border-color:#155f49;font-size:1.25rem}
button.btn-op:hover{background:#1e8f6d}
/* Clear button */
button.btn-clear{background:#D4EDE5;color:#0B4230;font-weight:700;border-color:#aacfbf}
button.btn-clear:hover{background:#bcdfcf}
/* Equals button */
button.btn-eq{background:var(--accent);color:#0B4230;font-weight:700;border-color:#e0a800;font-size:1.25rem}
button.btn-eq:hover{background:#ffd152}
@media (max-width:420px){.calc{width:100%}}