._root_v6c1j_1 {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-6);
  background-color: var(--color-bg-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--border-radius-sm);

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

  [data-component="feature-grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);

    @media (max-width: 30rem) {
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }

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

      h3 {
        font-size: var(--font-size-sm);
        font-weight: 600;
        margin: 0;
        color: var(--color-text);
        text-transform: uppercase;
        letter-spacing: -0.025rem;
      }

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

  [data-component="api-key-highlight"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);

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

      [data-slot="key-container"] {
        display: flex;
        gap: var(--space-3);
        padding: var(--space-4);
        border: 2px solid var(--color-accent);
        border-radius: var(--border-radius-sm);
        align-items: center;

        @media (max-width: 40rem) {
          flex-direction: column;
          gap: var(--space-3);
          align-items: stretch;
        }

        [data-slot="key-value"] {
          flex: 1;
          font-family: var(--font-mono);
          font-size: var(--font-size-sm);
          color: var(--color-text);
          background-color: var(--color-bg);
          padding: var(--space-3);
          border-radius: var(--border-radius-sm);
          border: 1px solid var(--color-border);
          word-break: break-all;
          line-height: 1.4;

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

        button {
          display: flex;
          align-items: center;
          gap: var(--space-2);
          padding: var(--space-3) var(--space-4);
          font-size: var(--font-size-sm);
          font-weight: 500;
          white-space: nowrap;
          min-width: 130px;

          @media (max-width: 40rem) {
            justify-content: center;
            padding: var(--space-2-5) var(--space-3);
            font-size: var(--font-size-xs);
            min-width: 96px;
          }
        }
      }
    }
  }

  [data-component="next-steps"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);

    ol {
      margin: 0;
      padding-left: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      list-style-position: inside;

      li {
        font-size: var(--font-size-md);
        line-height: 1.5;
        color: var(--color-text-secondary);

        code {
          font-family: var(--font-mono);
          font-size: var(--font-size-sm);
          padding: var(--space-1) var(--space-2);
          border: 1px solid var(--color-border);
          border-radius: var(--border-radius-sm);
          color: var(--color-text);
        }
      }
    }
  }
}
[data-slot="models-list"] {
  display: flex;
  flex-direction: column;
}

[data-slot="models-table"] {
  overflow-x: auto;
}

[data-slot="models-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="model-name"] {
      color: var(--color-text);
      font-family: var(--font-mono);
      font-weight: 500;

      div {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      [data-slot="model-multiplier"] {
        font-size: 11px;
        padding: 1px 6px;
        border: 1px solid var(--color-border-muted);
        border-radius: 6px;
        color: var(--color-text-muted);
      }
    }

    &[data-slot="training-data"] {
      text-align: center;
      color: var(--color-text);
    }

    &[data-slot="model-toggle"] {
      text-align: left;
      font-family: var(--font-sans);
    }

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

      /* Hidden checkbox input */
      input {
        opacity: 0;
        width: 0;
        height: 0;
      }

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

        /* Toggle handle (slider) */
        &::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;
        }
      }

      /* Checked state - track */
      input:checked + span {
        background-color: #21ad0e;
        border-color: #148605;

        /* Checked state - handle */
        &::before {
          transform: translateX(1rem) translateY(-50%);
        }
      }

      /* Hover states */
      &: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);
      }

      /* Disabled state */
      &:has(input:disabled) {
        cursor: not-allowed;
      }

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

      input:disabled:checked + span {
        opacity: 0.5;
      }

      input:disabled ~ span:hover {
        box-shadow: none;
      }
    }
  }

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

    &[data-disabled="true"] {
      td[data-slot="model-name"] {
        color: var(--color-text-muted);
      }
    }
  }
}

@media (max-width: 40rem) {
  [data-slot="models-table-element"] {
    th,
    td {
      padding: var(--space-2) var(--space-3);
      font-size: var(--font-size-xs);
    }

    th {
      &:nth-child(2)

      /* Training Data */ {
        display: none;
      }
    }

    td {
      &:nth-child(2)

      /* Training Data */ {
        display: none;
      }
    }
  }
}
._root_qwdjk_1 {
  [data-slot="providers-table"] {
    overflow-x: auto;
  }

  [data-slot="providers-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;

      &:nth-child(1) {
        width: 180px;
      }

      &:nth-child(3) {
        width: 200px;
      }
    }

    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="provider-name"] {
        color: var(--color-text);
        font-family: var(--font-mono);
        font-weight: 500;
      }

      &[data-slot="provider-key"] {
        text-align: left;
        color: var(--color-text-secondary);

        [data-slot="edit-form"] {
          display: flex;
          flex-direction: column;
          gap: var(--space-3);
          max-width: 100%;

          [data-slot="input-wrapper"] {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
            max-width: 100%;

            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);
              font-family: var(--font-mono);
              width: 100%;
              box-sizing: border-box;

              &: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="provider-action"] {
        text-align: left;
        font-family: var(--font-sans);
        white-space: nowrap;

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

          [data-slot="delete-form"] {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
          }

          &:hover [data-slot="delete-form"] {
            opacity: 1;
            pointer-events: auto;
          }
        }

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

    tbody tr {
      &:hover {
        [data-slot="provider-action"] [data-slot="delete-form"] {
          opacity: 1;
          pointer-events: auto;
        }
      }

      &: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);
      }
    }
  }
}