body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f6f8;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    
}




.cal {
   width: 340px;
   background: #ffffff;
   border-radius: 12px;
   box-shadow: 0 6px 20px rgb(0,0,0,0,0.8);
   padding: 16px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 64px;
   gap: 10px;
   justify-content: center;
   
}


/* Display (input) */
.cal input[type="text"] {
  grid-column: 1 / -1;   /* span all 4 columns */
  height: 72px;
  font-size: 1.6rem;
  padding: 10px 14px;
  box-sizing: border-box;
  text-align: right;
  border-radius: 8px;
  border: 1px solid #e6e9ed;
  background: #0b1620;   /* dark display look */
  color: #fff;
  caret-color: transparent;
  pointer-events: none;  /* make readonly-like (JS will manage value) */
}



/* Buttons style */
.cal button {
  margin-top: 10px;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  background: #f1f3f5;
  color: #0f1720;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}

/* Button hover / active feeling */
.cal button:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(12,20,30,0.06); }
.cal button:active { transform: translateY(0); box-shadow: none; }

/* Operator buttons (visual group) */
.cal button.operator {
  background: #ffd166;
  color: #0d1b2a;
}

/* Accent / equals */
.cal button.equals {
  background: #06b6d4;
  color: #fff;
  font-weight: 700;
}

/* Clear / special */
.cal button.clear {
  background: #ff6b6b;
  color: #fff;
}

/* Make 0 button span two columns when given class "span-2" */
.cal button.span-2 {
  grid-column: span 2;
}

/* Responsive tweak: smaller on narrow screens */
@media (max-width: 380px) {
  .cal { width: 92%; grid-auto-rows: 56px; gap: 8px; }
  .cal input[type="text"] { height: 60px; font-size: 1.3rem; }
  .cal button { font-size: 1rem; }
}