.register-modal {
  --background: #f8fafc;
  text-align: center;
  
  .modal-header {
    margin-bottom: 2rem;
    padding: 0 1rem;
    
    .header-icon {
      font-size: 2.5rem;
      color: var(--ion-color-primary);
      margin-bottom: 0.5rem;
    }
    
    .modal-title {
      font-size: 1.5rem;
      font-weight: 600;
      color: #2d3748;
      margin: 0.5rem 0 0;
    }
    
    .modal-subtitle {
      font-size: 0.9rem;
      color: #64748b;
      margin: 0.25rem 0 0;
    }
  }
  
  .register-form {
    max-width: 400px;
    margin: 0 auto;
    
    .form-item {
      --background: transparent;
      --padding-start: 0;
      --inner-padding-end: 0;
      margin-bottom: 1.5rem;
      
      .input-label {
        font-size: 0.9rem;
        font-weight: 500;
        color: #475569;
        margin-bottom: 0.5rem;
      }
      
      .custom-input {
        --background: white;
        --padding-start: 1rem;
        --padding-end: 1rem;
        --padding-top: 0.75rem;
        --padding-bottom: 0.75rem;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
        
        &:focus-within {
          border-color: var(--ion-color-primary);
          box-shadow: 0 0 0 3px rgba(58, 95, 229, 0.1);
        }
      }
    }
  }
  
  .form-actions {
    margin-top: 2rem;
    
    .register-btn {
      --box-shadow: none;
      height: 48px;
      font-weight: 500;
      margin-bottom: 1rem;
      transition: transform 0.2s ease;
      
      &:active {
        transform: scale(0.98);
      }
    }
    
    .cancel-btn {
      --background-hover: rgba(0, 0, 0, 0.04);
      height: 44px;
      font-size: 0.9rem;
    }
  }
}