/* pages/calculator/calculator.wxss */
page {
  height: 100%;
  background-color: #f5f5f5;
}

.calculator {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.screen {
  flex: 1;
  background-color: #333;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 20rpx;
  word-break: break-all;
}

.history {
  font-size: 40rpx;
  color: #aaa;
  margin-bottom: 10rpx;
}

.result {
  font-size: 80rpx;
  font-weight: bold;
}

.keypad {
  background-color: #fff;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1px;
  background-color: #ccc; /* Gap color */
}

.btn {
  background-color: #fff;
  height: 150rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40rpx;
  active-color: #eee;
}

.btn:active {
  background-color: #eee;
}

.operator {
  color: #ff9500;
  font-weight: bold;
}

.equal {
  background-color: #ff9500;
  color: white;
}

.equal:active {
  background-color: #e08900;
}

.zero {
  grid-column: span 2;
}