.calculator {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  margin: auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.toggle-group {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px;
  margin-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.toggle-group::-webkit-scrollbar {
  display: none;
}

.toggle-group input[type="radio"] {
  display: none;
}

.toggle-group label {
  flex: 1;
  min-width: 120px;
  padding: 0.6rem;
  border: 2px solid #634fa1;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s;
  white-space: nowrap;
}

.toggle-group input[type="radio"]:checked + label {
  background: #634fa1;
  color: white;
}

.form-group {
  margin-bottom: 1rem;
}

input[type="number"] {
      width: 100%;
      padding: 12px 14px;
      font-size: 16px;
      border-radius: 8px;
      border: 1.8px solid #ccc;
      transition: border-color 0.25s ease;
      outline-offset: 2px;
      outline-color: transparent;
      font-weight: 500;
      color: #222;
      user-select: text;
      cursor: text;
}
input[type="number"]:hover, input[type="number"]:focus {
  border: 1px solid #ccc !important;
}

.result {
  margin-top: 2rem;
  background: #ebebeb;
  padding: 1rem;
  border-radius: 8px;
}
button.calculate-btn {
    background-color: #fdc620;
    color: #43413d;
    cursor: pointer !important;
    padding: 10px 25px;
    letter-spacing: .1em;
    user-select: none;
    right: 10px;
    float: right;
    margin-top: 15px;
}
button:hover {
    background-color: #ffd863;
    color: #43413d;
}
@media (max-width: 450px) {
  .toggle-group {
    flex-direction: column;
    overflow-x: unset;
  }
  .toggle-group label {
    min-width: 100%;
  }
}