.mcds-calculator{
  max-width:760px;
  background:#f5f5f5;
  border:1px solid #ddd;
  padding:14px;
  border-radius:14px;
  font-family:system-ui;
}

.mcds-display{
  background:#fff;
  border:2px solid #3b82f6;
  border-radius:12px;
  padding:10px;
  margin-bottom:14px;
}

.mcds-expression{
  min-height:22px;
  text-align:right;
  color:#666;
}

.mcds-result{
  font-size:28px;
  font-weight:bold;
  text-align:right;
}

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

.mcds-grid button{
  height:46px;
  border-radius:12px;
  border:1px solid #d0d0d0;
  font-size:15px;
  cursor:pointer;
}

/* number + basic operators */
.mcds-grid button[data-val="0"],
.mcds-grid button[data-val="1"],
.mcds-grid button[data-val="2"],
.mcds-grid button[data-val="3"],
.mcds-grid button[data-val="4"],
.mcds-grid button[data-val="5"],
.mcds-grid button[data-val="6"],
.mcds-grid button[data-val="7"],
.mcds-grid button[data-val="8"],
.mcds-grid button[data-val="9"],
.mcds-grid button[data-val="+"],
.mcds-grid button[data-val="-"],
.mcds-grid button[data-val="*"],
.mcds-grid button[data-val="/"]{
  background:#ffffff;
}

/* pink light function keys */
.mcds-grid button[data-fn],
.mcds-grid button[data-op]:not([data-op="+"]):not([data-op="-"]):not([data-op="*"]):not([data-op="/"]){
  background:#f6e4e8;
}

/* AC */
.mcds-clear{
  background:#ef4444;
  color:#fff;
  font-weight:bold;
}

/* Execute */
.mcds-eval{
  background:#2563eb;
  color:#fff;
  font-weight:bold;
}

.mcds-grid button:hover{
  filter:brightness(0.97);
}