.svelte-fa-base {
    height: 1em;
    overflow: visible;
    transform-origin: center;
    vertical-align: -0.125em;
  }

  .svelte-fa-fw {
    text-align: center;
    width: 1.25em;
  }

  .svelte-fa-pull-left.svelte-bvo74f {
    float: left;
  }

  .svelte-fa-pull-right.svelte-bvo74f {
    float: right;
  }

  .svelte-fa-size-lg.svelte-bvo74f {
    font-size: 1.33333em;
    line-height: 0.75em;
    vertical-align: -0.225em;
  }

  .svelte-fa-size-sm.svelte-bvo74f {
    font-size: 0.875em;
  }

  .svelte-fa-size-xs.svelte-bvo74f {
    font-size: 0.75em;
  }

  .spin.svelte-bvo74f {
    animation: svelte-bvo74f-spin 2s 0s infinite linear;
  }

  .pulse.svelte-bvo74f {
    animation: svelte-bvo74f-spin 1s infinite steps(8);
  }

  @keyframes svelte-bvo74f-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

    .logo.svelte-fpoti1 {
        width: 200px;
        margin: 0 auto 1em auto;
        display: block;
    }

    .credit-info.svelte-fpoti1 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5em;
        margin-bottom: 1.5em;
        font-size: 0.9em;
        opacity: 0.8;
    }

    main.svelte-fpoti1 {
        font-family: sans-serif;
        text-align: center;
        padding: 2em;
        position: relative; /* For positioning the overlay */
    }
    button.svelte-fpoti1 {
        padding: 0.8em 1.2em;
        border-radius: 8px;
        border: 1px solid transparent;
        font-size: 1em;
        font-weight: 500;
        font-family: inherit;
        background-color: var(--color-primary-1);
        cursor: pointer;
        transition: border-color 0.25s;
        color: white;
        margin-top: 1em;
    }
    button.svelte-fpoti1:hover {
        border-color: var(--color-accent);
    }
    .logout-button.svelte-fpoti1 {
        background-color: red;
        color: white;
    }

    .api-key-overlay.svelte-fpoti1 {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .api-key-popup.svelte-fpoti1 {
        background-color: #2a2a2a;
        padding: 2em;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        max-width: 500px;
        color: white;
        text-align: center;
    }

    .api-key-popup.svelte-fpoti1 h2:where(.svelte-fpoti1) {
        margin-top: 0;
        color: var(--color-accent);
    }

    .api-key-display.svelte-fpoti1 {
        background-color: #1a1a1a;
        padding: 1em;
        border-radius: 5px;
        margin: 1.5em 0;
        word-break: break-all; /* Ensures long keys wrap */
        font-family: monospace;
        font-size: 0.9em;
        text-align: left;
    }

    .api-key-popup.svelte-fpoti1 button:where(.svelte-fpoti1) {
        background-color: var(--color-primary-1);
        border-color: var(--color-primary-1);
        margin-top: 1.5em;
    }

    .api-key-popup.svelte-fpoti1 button:where(.svelte-fpoti1):hover {
        background-color: var(--color-secondary-1);
        border-color: var(--color-secondary-1);
    }

    main.svelte-13pzv6h {
        font-family: sans-serif;
        text-align: center;
        padding: 2em;
    }