@layer components {
  .settings {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-lg) 0;
  }

  /* Navigation */
  .settings__nav {
    margin-bottom: var(--space-lg);
  }

  .settings__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--space-md);
  }

  .settings__nav-item {
    margin: 0;
    padding: 0;
  }

  .settings__nav-link {
    display: block;
    padding-bottom: var(--space-xs);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
  }

  .settings__nav-link:hover {
    color: var(--color-primary-dark);
  }

  .settings__nav-link--active {
    color: var(--color-text);
    border-bottom-color: var(--color-primary);
  }

  .settings__header {
    margin-bottom: var(--space-xl);
  }

  .settings > turbo-frame {
    display: block;
  }

  .settings__title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-xs) 0;
  }

  .settings__subtitle {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin: 0;
  }

  .settings__section {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
  }

  .settings__section--danger {
    border-color: oklch(80% 0.12 25);
  }

  .settings__section-header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
  }

  .settings__section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-xs) 0;
  }

  .settings__section-description {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
  }

  .settings__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .settings__actions {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
  }

  .settings__status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    margin-bottom: var(--space-md);
  }

  .settings__status--success {
    color: var(--color-success);
  }

  .settings__warning-text {
    font-size: 0.875rem;
    color: var(--color-warning);
    margin: var(--space-sm) 0;
  }

  /* Connected Account Row - shadcn-inspired card style */
  .connected-account {
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
  }

  .connected-account__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }

  .connected-account__info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
  }

  .connected-account__icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
  }

  .connected-account__details {
    min-width: 0;
  }

  .connected-account__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
  }

  .connected-account__name {
    font-weight: 500;
    color: var(--color-text);
  }

  .connected-account__description {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.4;
  }

  .connected-account__action {
    flex-shrink: 0;
  }

  /* Toggle Switch */
  .toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }

  .toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .toggle__track {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    background: var(--color-border);
    border-radius: var(--radius-full);
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  .toggle__thumb {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background: white;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .toggle__input:checked + .toggle__track {
    background: var(--color-primary);
  }

  .toggle__input:checked + .toggle__track .toggle__thumb {
    transform: translateX(1.25rem);
  }

  .toggle__input:focus-visible + .toggle__track {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .toggle__input:disabled + .toggle__track {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .toggle--disabled {
    cursor: not-allowed;
  }

  .connected-account__notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    font-size: 0.8125rem;
    color: var(--color-warning);
    line-height: 1.4;
  }

  .connected-account__notice .icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
  }

  @media (max-width: 640px) {
    .connected-account__row {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-md);
    }

    .connected-account__action {
      width: 100%;
    }

    .connected-account__action .btn {
      width: 100%;
    }
  }

  .settings__danger-zone {
    background: oklch(97% 0.02 25);
    border: 1px solid oklch(85% 0.1 25);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
  }

  .settings__warning {
    font-size: 0.875rem;
    color: oklch(45% 0.15 25);
    margin: 0 0 var(--space-md) 0;
    line-height: 1.6;
  }

  .deletion-consequences {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0;
  }

  .deletion-consequences li {
    position: relative;
    padding-left: var(--space-md);
    margin-bottom: var(--space-xs);
    font-size: 0.875rem;
    color: var(--color-text-muted);
  }

  .deletion-consequences li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-error);
  }

  .deletion-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    justify-content: center;
  }

  .auth-card .alert {
    margin-bottom: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
  }

  .auth-card .alert p {
    margin: 0;
  }

  .auth-card .text-muted {
    font-size: 0.875rem;
    margin: var(--space-sm) 0;
  }

  /* Plan Card */
  .plan-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .plan-card__tier {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .plan-card__tier-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
  }

  .plan-card__badge {
    font-size: 0.75rem;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-weight: 500;
  }

  .plan-card__badge--warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
  }

  .plan-card__badge--success {
    background: var(--color-success-light);
    color: var(--color-success);
  }

  .plan-card__cancel-notice {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
  }

  .plan-card__description {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-sm) 0;
  }

  /* Billing Info */
  .billing-info__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .billing-info__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-muted);
  }

  .billing-info__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .billing-info__label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
  }

  .billing-info__value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
  }

  .billing-info__empty {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-style: italic;
  }

  /* Billing Info Skeleton */
  .billing-info--skeleton .billing-info__skeleton-label,
  .billing-info--skeleton .billing-info__skeleton-value {
    background: linear-gradient(
      90deg,
      var(--color-border-muted) 25%,
      var(--color-bg-elevated) 50%,
      var(--color-border-muted) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
  }

  .billing-info--skeleton .billing-info__skeleton-label {
    width: 120px;
    height: 1rem;
  }

  .billing-info--skeleton .billing-info__skeleton-value {
    width: 80px;
    height: 1rem;
  }

  @keyframes skeleton-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  /* Subscription Actions */
  .subscription-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .subscription-actions__primary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .subscription-actions__danger {
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
  }
}