/* Calculator page background */
.calc-page{
  background: #000;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
  font-family: Arial, Helvetica, sans-serif;
}

.calc-wrap{
  width: min(520px, 96vw);
  text-align: center;
}

.calc-title{
  font-weight: 700;
  font-size: 44px;
  letter-spacing: 1px;
  margin: 0 0 22px;
}

/* Card*/
.calc-card{
  background: #f7f7f7;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
  color: #111;
}

/* top row: display + C */
.calc-top{
  display: grid;
  grid-template-columns: 1fr 78px;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}

.calc-display{
  height: 46px;
  border-radius: 6px;
  border: 2px solid rgba(0,0,0,.25);
  background: #bfe6f1; 
  padding: 10px 12px;
  font-size: 20px;
  text-align: left;
  outline: none;
}

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

/* button base */
.btn{
  height: 62px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
}

.btn:active{
  transform: translateY(1px);
}

/* operators on right */
.btn-op{
  background: #e5b428; 
  font-weight: 700;
}

/* equals */
.btn-eq{
  background: #2d9bd6;
  color: #fff;
  font-weight: 800;
}

/* clear button */
.btn-clear{
  height: 46px;
  background: #e15a62; 
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  border: 1px solid rgba(0,0,0,.15);
}

.calc-footer{
  margin-top: 16px;
}

.calc-back{
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.3);
  opacity: .85;
}

.calc-back:hover{
  opacity: 1;
}
@media (max-width: 600px){
  .calculator, .calc, .container, .wrapper{
    width: min(520px, 92vw) !important;
    margin: 0 auto !important;
  }

  /* Try to fix display row overflow */
  .display, .screen, .result, .calc-display{
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
  }

  input[type="text"], input[type="display"], #display{
    flex: 1 !important;
    min-width: 0 !important;
  }

  .clear, #clear, #clearBtn{
    flex: 0 0 64px !important;
  }
}