@layer components {
  .transfer-card {
    max-width: 28rem;
    padding: var(--space-lg);
    background: var(--neutral-50);
    border: 1px solid var(--neutral-200);
    border-radius: 12px;
  }

  .transfer-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
  }

  .transfer-card__header .svg-icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--neutral-500);
  }

  .transfer-card__title {
    font-weight: 600;
    font-size: 0.95rem;
  }

  .transfer-card__url {
    margin-bottom: var(--space-md);
  }

  .transfer-card__input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--neutral-200);
    border-radius: 8px;
    background: var(--white);
    font-size: 0.85rem;
    color: var(--neutral-600);
    cursor: text;
  }

  .transfer-card__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
  }

  .transfer-card__qr {
    justify-content: center;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
  }

  .transfer-card__qr:not([hidden]) {
    display: flex;
  }

  .transfer-card__qr svg {
    width: 12rem;
    height: 12rem;
  }

  .transfer-card__note {
    font-size: 0.8rem;
    color: var(--neutral-400);
    text-align: center;
    margin: 0;
  }
}