.toggle {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;
    }
    .toggle-button {
      flex: 1;
      padding: 10px;
      text-align: center;
      border: 2px solid #634fa1;
      border-radius: 8px;
      cursor: pointer;
      user-select: none;
      transition: 0.2s;
      background-color: white;
      outline-color: #634fa1 !important;
    }
    .toggle-button.active {
      background-color: #634fa1;
      color: white;
      border-color: #634fa1;
    }

    .form-section {
      display: none;
    }

    .form-section.active {
      display: block;
    }

    label {
      display: block;
      margin-top: 10px;
    }

    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;
    }

    .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;
    }
    .calculate-btn:hover {
        background-color: #ffd863;
        color: #43413d;
    }

    .results {
      background: #ebebeb;
      margin-top: 20px;
      padding: 15px;
      border-radius: 10px;
      font-size: 1.1rem;
    }

    .error {
      color: red;
      margin-top: 10px;
      font-size: 14px !important;
    }