._root_mzo4v_1 {
  [data-slot="balance"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    min-width: 15rem;
    width: fit-content;

    @media (max-width: 30rem) {
      width: 100%;
    }

    [data-slot="amount"] {
      padding: var(--space-3-5) var(--space-4);
      background-color: var(--color-bg-surface);
      border-radius: var(--border-radius-sm);
      display: flex;
      align-items: baseline;
      gap: var(--space-1);
      justify-content: flex-end;

      [data-slot="currency"] {
        position: relative;
        bottom: 2px;
        font-size: var(--font-size-lg);
        color: var(--color-text-muted);
        font-weight: 400;
      }

      [data-slot="value"] {
        font-size: var(--font-size-3xl);
        font-weight: 500;
        color: var(--color-text);
      }
    }

    [data-slot="create-form"] {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      margin-top: var(--space-1);

      [data-slot="input-container"] {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
      }

      @media (max-width: 30rem) {
        gap: var(--space-2);
      }

      input {
        flex: 1;
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-sm);
        background-color: var(--color-bg);
        color: var(--color-text);
        font-size: var(--font-size-sm);
        font-family: var(--font-mono);

        &:focus {
          outline: none;
          border-color: var(--color-accent);
        }

        &::placeholder {
          color: var(--color-text-disabled);
        }
      }

      [data-slot="form-actions"] {
        display: flex;
        gap: var(--space-2);
        justify-content: flex-end;
      }

      [data-slot="form-error"] {
        color: var(--color-danger);
        font-size: var(--font-size-sm);
        line-height: 1.4;
      }
    }
  }

  [data-slot="usage-status"] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
  }
}
._root_4untq_1 {
  [data-slot="reload-error"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);

    p {
      color: var(--color-danger);
      font-size: var(--font-size-sm);
      line-height: 1.4;
      margin: 0;
      flex: 1;
    }

    [data-slot="create-form"] {
      display: flex;
      gap: var(--space-2);
      margin: 0;
      flex-shrink: 0;
    }
  }

  [data-slot="section-content"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  [data-slot="balance-display"] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);

    @media (max-width: 30rem) {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-2);
    }

    [data-slot="balance-amount"] {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: var(--space-4);
      border: 1px solid var(--color-border);
      border-radius: var(--border-radius-sm);
      background-color: var(--color-bg-surface);
      align-self: stretch;

      [data-slot="balance-label"] {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        margin-top: var(--space-2);
        font-weight: 400;
      }

      [data-slot="balance-value"] {
        font-size: var(--font-size-2xl);
        font-weight: 600;
        color: var(--color-text);
      }
    }

    [data-slot="balance-right-section"] {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      flex: 1;
    }

    [data-slot="add-balance-form-container"] {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    [data-slot="add-balance-form"] {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--space-3);

      label {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--color-text-muted);
        white-space: nowrap;
      }

      input[data-component="input"] {
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-sm);
        background-color: var(--color-bg);
        color: var(--color-text);
        font-size: var(--font-size-sm);
        line-height: 1.5;

        &:focus {
          outline: none;
          border-color: var(--color-accent);
          box-shadow: 0 0 0 3px var(--color-accent-alpha);
        }

        &::placeholder {
          color: var(--color-text-disabled);
        }
      }

      [data-slot="form-actions"] {
        display: flex;
        gap: var(--space-2);
      }
    }

    [data-slot="form-error"] {
      color: var(--color-danger);
      font-size: var(--font-size-sm);
      line-height: 1.4;
    }

    [data-slot="credit-card"] {
      padding: var(--space-2) var(--space-4);
      background-color: var(--color-bg-surface);
      border-radius: var(--border-radius-sm);
      display: flex;
      align-items: center;
      gap: var(--space-3);
      min-width: 150px;
      align-self: flex-start;

      [data-slot="card-icon"] {
        display: flex;
        align-items: center;
        color: var(--color-text-muted);
      }

      [data-slot="card-details"] {
        display: flex;
        align-items: baseline;
        gap: var(--space-1);
        flex: 1;
        justify-content: flex-end;

        [data-slot="secret"] {
          font-size: var(--font-size-sm);
          color: var(--color-text-muted);
          font-weight: 400;
        }

        [data-slot="number"] {
          font-size: var(--font-size-sm);
          font-weight: 500;
          color: var(--color-text-muted);
        }

        [data-slot="type"] {
          font-size: var(--font-size-sm);
          font-weight: 400;
          color: var(--color-text-muted);
        }
      }

      button {
        white-space: nowrap;
        flex-shrink: 0;
      }
    }

    button {
      align-self: flex-start;
      white-space: nowrap;
      flex-shrink: 0;
    }
  }

  [data-slot="enable-billing-button"] {
    align-self: flex-start;
    padding: var(--space-4);
    min-width: 150px;
  }
}
._root_q4gsi_1 {
  [data-slot="transfer-container"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 20rem;
    width: fit-content;

    @media (max-width: 30rem) {
      width: 100%;
    }
  }

  [data-slot="transfer-form"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);

    [data-slot="input-row"] {
      display: flex;
      gap: var(--space-2);
      align-items: stretch;

      @media (max-width: 30rem) {
        flex-direction: column;
      }
    }

    input {
      flex: 1;
      padding: var(--space-2) var(--space-3);
      border: 1px solid var(--color-border);
      border-radius: var(--border-radius-sm);
      background-color: var(--color-bg);
      color: var(--color-text);
      font-size: var(--font-size-sm);
      font-family: var(--font-mono);

      &:focus {
        outline: none;
        border-color: var(--color-accent);
      }

      &::placeholder {
        color: var(--color-text-disabled);
      }
    }
  }

  [data-slot="bank-details"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);

    code {
      font-family: var(--font-mono);
      user-select: all;
    }
  }

  [data-slot="form-error"] {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    line-height: 1.4;
  }

  [data-slot="form-success"] {
    color: var(--color-success, var(--color-accent));
    font-size: var(--font-size-sm);
    line-height: 1.4;
  }

  [data-slot="request-list"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--font-size-sm);

    [data-slot="request-row"] {
      display: flex;
      justify-content: space-between;
      gap: var(--space-3);
      padding: var(--space-2) 0;
      border-bottom: 1px solid var(--color-border);

      &:last-child {
        border-bottom: none;
      }
    }

    [data-slot="request-status"] {
      &[data-status="pending"] {
        color: var(--color-text-disabled);
      }
      &[data-status="approved"] {
        color: var(--color-success, var(--color-accent));
      }
      &[data-status="rejected"] {
        color: var(--color-danger);
      }
    }
  }
}
._root_18aqt_1 {
  [data-slot="title-row"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
  }

  [data-slot="section-content"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  [data-slot="setting-row"] {
    display: flex;
    align-items: center;
    gap: var(--space-3);

    p {
      flex: 1;
      font-size: var(--font-size-sm);
      line-height: 1.5;
      color: var(--color-text-secondary);
      margin: 0;

      b {
        font-weight: 600;
      }
    }

    [data-slot="create-form"] {
      margin: 0;
    }
  }

  [data-slot="create-form"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    margin-top: var(--space-4);

    [data-slot="form-field"] {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);

      label {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
      }

      [data-slot="field-label"] {
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--color-text-muted);
      }

      [data-slot="toggle-container"] {
        display: flex;
        align-items: center;
      }

      input[data-component="input"] {
        flex: 1;
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-sm);
        background-color: var(--color-bg);
        color: var(--color-text);
        font-size: var(--font-size-sm);
        font-family: var(--font-mono);

        &:focus {
          outline: none;
          border-color: var(--color-accent);
        }

        &::placeholder {
          color: var(--color-text-disabled);
        }
      }
    }

    [data-slot="input-row"] {
      display: flex;
      flex-direction: row;
      gap: var(--space-3);

      @media (max-width: 40rem) {
        flex-direction: column;
        gap: var(--space-2);
      }
    }

    [data-slot="input-field"] {
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
      flex: 1;

      p {
        line-height: 1.2;
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
      }

      input[data-component="input"] {
        flex: 1;
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-sm);
        background-color: var(--color-bg);
        color: var(--color-text);
        font-size: var(--font-size-sm);
        line-height: 1.5;
        min-width: 0;

        &:focus {
          outline: none;
          border-color: var(--color-accent);
          box-shadow: 0 0 0 3px var(--color-accent-alpha);
        }

        &::placeholder {
          color: var(--color-text-disabled);
        }

        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
          background-color: var(--color-bg-surface);
        }
      }

      [data-slot="field-with-connector"] {
        display: flex;
        align-items: center;
        gap: var(--space-2);

        [data-slot="field-connector"] {
          font-size: var(--font-size-sm);
          color: var(--color-text-muted);
          white-space: nowrap;
        }

        input[data-component="input"] {
          flex: 1;
          min-width: 80px;
        }
      }
    }

    [data-slot="form-actions"] {
      display: flex;
      gap: var(--space-2);
      margin-top: var(--space-1);
    }

    [data-slot="form-error"] {
      color: var(--color-danger);
      font-size: var(--font-size-sm);
      line-height: 1.4;
      margin-top: calc(var(--space-1) * -1);
    }

    [data-slot="model-toggle-label"] {
      position: relative;
      display: inline-block;
      width: 2.5rem;
      height: 1.5rem;
      cursor: pointer;

      input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      span {
        position: absolute;
        inset: 0;
        background-color: #ccc;
        border: 1px solid #bbb;
        border-radius: 1.5rem;
        transition: all 0.3s ease;
        cursor: pointer;

        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0.125rem;
          width: 1.25rem;
          height: 1.25rem;
          background-color: white;
          border: 1px solid #ddd;
          border-radius: 50%;
          transform: translateY(-50%);
          transition: all 0.3s ease;
        }
      }

      input:checked + span {
        background-color: #21ad0e;
        border-color: #148605;

        &::before {
          transform: translateX(1rem) translateY(-50%);
        }
      }

      &:hover span {
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
      }

      input:checked:hover + span {
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
      }

      &:has(input:disabled) {
        cursor: not-allowed;
      }

      input:disabled + span {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }
  }

  [data-slot="reload-error"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-4);

    p {
      color: var(--color-danger);
      font-size: var(--font-size-sm);
      line-height: 1.4;
      margin: 0;
      flex: 1;
    }

    [data-slot="create-form"] {
      display: flex;
      gap: var(--space-2);
      margin: 0;
      flex-shrink: 0;
      padding: 0;
      border: none;
    }
  }
}
._root_x7up5_1 {
  [data-slot="payments-table"] {
    overflow-x: auto;
  }

  [data-slot="payments-table-element"] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);

    thead {
      border-bottom: 1px solid var(--color-border);
    }

    th {
      padding: var(--space-3) var(--space-4);
      text-align: left;
      font-weight: normal;
      color: var(--color-text-muted);
      text-transform: uppercase;
    }

    td {
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--color-border-muted);
      color: var(--color-text-muted);
      font-family: var(--font-mono);

      &[data-slot="payment-date"] {
        color: var(--color-text);
      }

      &[data-slot="payment-id"] {
        font-family: var(--font-mono);
        font-weight: 400;
        color: var(--color-text-muted);
        max-width: 200px;
        word-break: break-word;
      }

      &[data-slot="payment-amount"] {
        color: var(--color-text);

        &[data-refunded="true"] {
          text-decoration: line-through;
        }
      }

      &[data-slot="payment-receipt"] {
        span {
          display: inline-block;
          padding: var(--space-3) var(--space-4);
          font-size: var(--font-size-sm);
          line-height: 1.5;
        }

        button {
          font-size: var(--font-size-sm);
        }
      }
    }

    tbody tr {
      &:last-child td {
        border-bottom: none;
      }
    }

    @media (max-width: 40rem) {
      th,
      td {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-xs);
      }

      th {
        &:nth-child(2)

        /* Payment ID */ {
          display: none;
        }
      }

      td {
        &:nth-child(2)

        /* Payment ID */ {
          display: none;
        }
      }
    }
  }
}
._root_v5pcw_1 {
  [data-slot="usage"] {
    display: flex;
    gap: var(--space-6);
    margin-top: var(--space-4);

    @media (max-width: 40rem) {
      flex-direction: column;
      gap: var(--space-4);
    }
  }

  [data-slot="usage-item"] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  [data-slot="usage-header"] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  [data-slot="usage-label"] {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--color-text);
  }

  [data-slot="usage-value"] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  [data-slot="progress"] {
    height: 8px;
    background-color: var(--color-bg-surface);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
  }

  [data-slot="progress-bar"] {
    height: 100%;
    background-color: var(--color-accent);
    border-radius: var(--border-radius-sm);
    transition: width 0.3s ease;
  }

  [data-slot="reset-time"] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  [data-slot="setting-row"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);

    p {
      font-size: var(--font-size-sm);
      line-height: 1.5;
      color: var(--color-text-secondary);
      margin: 0;
    }
  }

  [data-slot="toggle-label"] {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 1.5rem;
    cursor: pointer;
    flex-shrink: 0;

    input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    span {
      position: absolute;
      inset: 0;
      background-color: #ccc;
      border: 1px solid #bbb;
      border-radius: 1.5rem;
      transition: all 0.3s ease;
      cursor: pointer;

      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0.125rem;
        width: 1.25rem;
        height: 1.25rem;
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 50%;
        transform: translateY(-50%);
        transition: all 0.3s ease;
      }
    }

    input:checked + span {
      background-color: #21ad0e;
      border-color: #148605;

      &::before {
        transform: translateX(1rem) translateY(-50%);
      }
    }

    &:hover span {
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
    }

    input:checked:hover + span {
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
    }

    &:has(input:disabled) {
      cursor: not-allowed;
    }

    input:disabled + span {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}
._root_1uwtq_1 {
  [data-slot="title-row"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
  }

  [data-slot="enroll-section"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  [data-slot="enroll-button"] {
    align-self: flex-start;
  }

  [data-slot="enroll-note"] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }
}
._root_ra8sf_1 {
  [data-slot="redeem-container"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 20rem;
    width: fit-content;

    @media (max-width: 30rem) {
      width: 100%;
    }
  }

  [data-slot="redeem-form"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);

    [data-slot="input-row"] {
      display: flex;
      gap: var(--space-2);
      align-items: stretch;

      @media (max-width: 30rem) {
        flex-direction: column;
      }
    }

    input {
      flex: 1;
      padding: var(--space-2) var(--space-3);
      border: 1px solid var(--color-border);
      border-radius: var(--border-radius-sm);
      background-color: var(--color-bg);
      color: var(--color-text);
      font-size: var(--font-size-sm);
      font-family: var(--font-mono);

      &:focus {
        outline: none;
        border-color: var(--color-accent);
      }

      &::placeholder {
        color: var(--color-text-disabled);
      }
    }

    [data-slot="form-error"] {
      color: var(--color-danger);
      font-size: var(--font-size-sm);
      line-height: 1.4;
    }

    [data-slot="form-success"] {
      color: var(--color-success, var(--color-accent));
      font-size: var(--font-size-sm);
      line-height: 1.4;
    }
  }
}